/* Optional polish layer: geometry and primary content remain in styles.css. */
@property --rangoon-button-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.brand-mark {
  isolation: isolate;
  transform-origin: 50% 54%;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}

.brand-mark img {
  position: relative;
  z-index: 1;
}

.brand-mark::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -55% -28%;
  background: linear-gradient(112deg, transparent 39%, #fff8d2b8 49%, #ffffff26 55%, transparent 66%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-62%) rotate(8deg);
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  filter: drop-shadow(0 5px 9px #d7722628) drop-shadow(0 0 12px #f5b86c32);
  transform: perspective(260px) translateY(-1px) rotateY(-9deg) rotateZ(-2deg);
}

.brand:hover .brand-mark::after,
.brand:focus-visible .brand-mark::after {
  animation: rangoon-mark-sheen .78s var(--ease) both;
}

.mega-menu {
  isolation: isolate;
  overflow: hidden;
  background-color: var(--paper);
  background-image: url('/assets/paper-grain.svg'), linear-gradient(130deg, #faf8fcf5, #ebe8f2bd);
  background-size: 480px, auto;
}

.mega-menu::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse at 84% 8%, #f2d7ad42, transparent 30%), radial-gradient(ellipse at 16% 100%, #bbb5d93a, transparent 34%);
  pointer-events: none;
}

.mega-menu > * { position: relative; z-index: 1; }

.mega-links > a {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(120deg, #ffffff55, #e9e5f033);
  background-size: auto;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

.mega-links > a::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  background: linear-gradient(120deg, #fffaf1c2, #e4deee99);
  pointer-events: none;
  transition: opacity .25s var(--ease);
}

.mega-links > a > * { position: relative; z-index: 1; }

.mega-links > a:hover,
.mega-links > a:focus-visible {
  background-color: #f3f0f8;
  box-shadow: 0 8px 20px #58527516, 0 0 0 1px #d0c7e066;
  transform: translateY(-1px);
}

.mega-links > a:hover::before,
.mega-links > a:focus-visible::before {
  opacity: 1;
}

.mega-links > a:hover .nav-icon,
.mega-links > a:focus-visible .nav-icon {
  filter: drop-shadow(0 3px 5px #c4662638);
  transform: translateY(-1px) rotate(-4deg);
}

.nav-icon {
  transition: filter .25s var(--ease), transform .25s var(--ease);
}

.mega-feature {
  isolation: isolate;
  position: relative;
  background-color: #f3eada;
  background-image: url('/assets/paper-grain.svg'), linear-gradient(145deg, #f7eddd, #e2dced);
  background-size: 420px, auto;
  box-shadow: inset 0 1px 0 #ffffffa8, 0 10px 24px #7c704613;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.mega-feature::before,
.mega-feature::after {
  content: '';
  position: absolute;
  z-index: 0;
  border: 1px solid #9289be55;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
}

.mega-feature::before {
  width: 210px;
  height: 135px;
  right: -72px;
  bottom: -35px;
  animation: rangoon-mega-orbit 24s linear infinite;
}

.mega-feature::after {
  width: 145px;
  height: 230px;
  right: 25px;
  top: -105px;
  border-color: #c98a5850;
  animation: rangoon-mega-orbit 31s linear infinite reverse;
}

.mega-feature > * {
  position: relative;
  z-index: 1;
}

.mega-feature:hover,
.mega-feature:focus-visible {
  border-color: #d4c1a1;
  box-shadow: inset 0 1px 0 #ffffffc7, 0 15px 29px #80774a24, 0 0 0 1px #f9e7c96e;
  transform: translateY(-1px);
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The masked ring leaves the button center transparent, so it never covers its label. */
.button::after {
  --rangoon-button-angle: 0deg;
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  opacity: 0;
  background: conic-gradient(from var(--rangoon-button-angle), transparent 0deg, transparent 66deg, #fff8d5cc 88deg, #f1b26f 105deg, transparent 128deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity .22s var(--ease);
}

.button:hover::after,
.button:focus-visible::after {
  opacity: .9;
}

.button:hover::after,
.button:focus-visible::after { animation: rangoon-button-border 3.8s linear infinite; }

@keyframes rangoon-mark-sheen {
  0% { opacity: 0; transform: translateX(-62%) rotate(8deg); }
  18% { opacity: .8; }
  100% { opacity: 0; transform: translateX(62%) rotate(8deg); }
}

@keyframes rangoon-mega-orbit {
  to { transform: rotate(360deg); }
}

@keyframes rangoon-button-border {
  to { --rangoon-button-angle: 360deg; }
}

/* Browsers without registered-property animation still show a static highlight ring. */

@media (prefers-reduced-motion: reduce) {
  .brand-mark,
  .mega-links > a,
  .mega-links > a::before,
  .nav-icon,
  .mega-feature,
  .button::after {
    animation: none !important;
    transition: none !important;
  }
  .brand:hover .brand-mark,
  .brand:focus-visible .brand-mark,
  .mega-links > a:hover,
  .mega-links > a:focus-visible,
  .mega-feature:hover,
  .mega-feature:focus-visible { transform: none; }
  .mega-feature::before,
  .mega-feature::after { animation: none !important; }
}

html[data-motion='paused'] .brand-mark,
html[data-motion='paused'] .brand-mark::after,
html[data-motion='paused'] .mega-links > a,
html[data-motion='paused'] .mega-links > a::before,
html[data-motion='paused'] .nav-icon,
html[data-motion='paused'] .mega-feature,
html[data-motion='paused'] .mega-feature::before,
html[data-motion='paused'] .mega-feature::after,
html[data-motion='paused'] .button::after,
.motion-suspended .brand-mark,
.motion-suspended .brand-mark::after,
.motion-suspended .mega-feature::before,
.motion-suspended .mega-feature::after,
.motion-suspended .button::after {
  animation-play-state: paused !important;
}

html[data-motion='paused'] .brand-mark,
html[data-motion='paused'] .mega-links > a,
html[data-motion='paused'] .mega-links > a::before,
html[data-motion='paused'] .nav-icon,
html[data-motion='paused'] .mega-feature,
html[data-motion='paused'] .button::after {
  transition: none !important;
}

.mega-menu,.mega-feature,.mega-links>a{background-blend-mode:soft-light,normal}
html[data-motion=paused] .brand:hover .brand-mark,html[data-motion=paused] .brand:focus-visible .brand-mark,html[data-motion=paused] .mega-links>a:hover,html[data-motion=paused] .mega-feature:hover{transform:none}