/* Phase 3.6: percentage translations retain visible motion on narrow screens.
   Independent periods and phase offsets avoid synchronized breathing. */
.motion-capable .motion-haze { animation: visible-haze 16.8s cubic-bezier(.42,0,.31,1) -6.2s infinite; }
.motion-capable .motion-rays { animation: visible-rays 13.6s cubic-bezier(.45,.05,.28,1) -4.8s infinite; transform-origin: 12% 8%; }
.motion-capable .motion-dust-far,
.motion-capable .motion-dust-mid,
.motion-capable .motion-dust-near { animation: dust-luminance 8.9s ease-in-out -2.7s infinite alternate; }
.motion-capable .motion-bokeh-far,
.motion-capable .motion-bokeh-mid,
.motion-capable .motion-bokeh-near { animation: bokeh-luminance 11.7s ease-in-out -4.1s infinite alternate; }
.motion-capable .leaf-primary--top { animation: visible-leaf-top 11.7s cubic-bezier(.4,0,.2,1) -4.4s infinite; }
.motion-capable .leaf-primary--bottom { animation: visible-leaf-bottom 13.2s cubic-bezier(.4,0,.2,1) -7.1s infinite; }
.motion-capable .leaf-secondary--bottom { animation: visible-leaf-bottom-detail 8.6s cubic-bezier(.4,0,.2,1) -2.7s infinite; }
@keyframes visible-haze {
  0% { transform: translate3d(-1.1%, -.7%, 0) scale(1.055); opacity: .7; }
  38% { transform: translate3d(.25%, .15%, 0) scale(1.06); opacity: .94; }
  67% { transform: translate3d(1.05%, .65%, 0) scale(1.055); opacity: .82; }
  100% { transform: translate3d(-1.1%, -.7%, 0) scale(1.055); opacity: .7; }
}
@keyframes visible-rays {
  0% { transform: translate3d(-.7%, -.2%, 0) rotate(-.8deg) scale(1.065); opacity: .56; }
  31% { transform: translate3d(.15%, .1%, 0) rotate(.2deg) scale(1.07); opacity: .92; }
  58% { transform: translate3d(.75%, .25%, 0) rotate(.85deg) scale(1.065); opacity: .72; }
  79% { transform: translate3d(.25%, .05%, 0) rotate(.25deg) scale(1.07); opacity: 1; }
  100% { transform: translate3d(-.7%, -.2%, 0) rotate(-.8deg) scale(1.065); opacity: .56; }
}
@keyframes dust-luminance {
  from { transform: translate3d(0, 0, 0); opacity: .76; }
  to { transform: translate3d(0, 0, 0); opacity: .93; }
}
@keyframes bokeh-luminance {
  from { transform: translate3d(0, 0, 0); opacity: .72; }
  to { transform: translate3d(0, 0, 0); opacity: .9; }
}
@keyframes visible-leaf-top {
  0% { transform: translate3d(-.65%, -.25%, 0) rotate(-3deg); }
  23% { transform: translate3d(-.15%, .05%, 0) rotate(-.7deg); }
  49% { transform: translate3d(.75%, .38%, 0) rotate(3.4deg); }
  68% { transform: translate3d(.48%, .22%, 0) rotate(2.1deg); }
  100% { transform: translate3d(-.65%, -.25%, 0) rotate(-3deg); }
}
@keyframes visible-leaf-bottom {
  0% { transform: translate3d(-.7%, -.3%, 0) rotate(-3.1deg); }
  34% { transform: translate3d(.58%, .32%, 0) rotate(2.8deg); }
  56% { transform: translate3d(.72%, .4%, 0) rotate(3.5deg); }
  73% { transform: translate3d(.18%, .05%, 0) rotate(.5deg); }
  100% { transform: translate3d(-.7%, -.3%, 0) rotate(-3.1deg); }
}
@keyframes visible-leaf-bottom-detail {
  0%, 100% { transform: translate3d(-.22%, -.12%, 0) rotate(-.65deg); }
  42% { transform: translate3d(.28%, .16%, 0) rotate(.78deg); }
  70% { transform: translate3d(.08%, .04%, 0) rotate(.18deg); }
}

.natural-dust {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

html:not(.motion-capable) .natural-dust { display: none; }

.hero__brand {
  position: absolute;
  z-index: 1;
  top: max(20px, env(safe-area-inset-top));
  right: clamp(16px, 3.2vw, 52px);
  width: clamp(118px, 18vw, 238px);
  aspect-ratio: 1;
  opacity: .3;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(.18px) saturate(.92) drop-shadow(0 0 20px rgb(229 178 93 / .24));
  -webkit-mask-image: radial-gradient(circle, #000 54%, rgb(0 0 0 / .82) 70%, transparent 93%);
  mask-image: radial-gradient(circle, #000 54%, rgb(0 0 0 / .82) 70%, transparent 93%);
}

.hero__brand picture,
.hero__brand img {
  display: block;
  width: 100%;
  height: 100%;
}

.motion-capable .hero__brand {
  animation: brand-presence 17.4s cubic-bezier(.4,0,.2,1) -6.8s infinite;
}

@keyframes brand-presence {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.985); opacity: .25; }
  38% { transform: translate3d(-2px, 2px, 0) scale(1.01); opacity: .36; }
  72% { transform: translate3d(1px, 1px, 0) scale(1); opacity: .3; }
}

.hero__content {
  z-index: 2;
  justify-items: center;
  text-align: center;
}

@media (max-width: 600px) {
  .hero__brand {
    top: max(18px, env(safe-area-inset-top));
    right: 16px;
    width: clamp(112px, 34vw, 148px);
    opacity: .28;
  }

  .hero__content {
    align-content: center;
    padding-top: 31svh;
    padding-bottom: max(42px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) .hero__brand { animation: none !important; }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero__exact-lockup {
  display: grid;
  justify-items: center;
  width: min(88vw, 872px);
  direction: ltr;
}

.hero__exact-wordmark {
  position: relative;
  width: 100%;
}

.hero__exact-wordmark > picture:first-child img {
  filter: brightness(1.04) drop-shadow(0 -2px 3px rgb(255 233 181 / .7)) drop-shadow(0 5px 12px rgb(0 0 0 / .5));
}

.hero__exact-wordmark picture,
.hero__exact-wordmark img,
.hero__exact-tagline,
.hero__exact-tagline img,
.hero__exact-menu,
.hero__exact-menu img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__exact-tagline {
  width: min(66%, 429px);
  margin-top: clamp(18px, 2.8vw, 30px);
  opacity: .92;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / .72));
}

.hero__exact-menu {
  width: min(38%, 293px);
  margin-top: clamp(24px, 4.2vw, 44px);
  filter: drop-shadow(0 4px 13px rgb(0 0 0 / .66));
}

.motion-capable .hero__exact-wordmark > picture:first-child img {
  animation: wordmark-light 13.8s ease-in-out -5.1s infinite;
}

@keyframes wordmark-light {
  0%, 100% { filter: brightness(1.02) drop-shadow(0 -2px 3px rgb(255 233 181 / .52)) drop-shadow(0 5px 12px rgb(0 0 0 / .5)); }
  42% { filter: brightness(1.12) drop-shadow(0 -4px 6px rgb(255 239 199 / .86)) drop-shadow(0 5px 12px rgb(0 0 0 / .5)); }
  71% { filter: brightness(1.06) drop-shadow(0 -3px 4px rgb(255 222 153 / .68)) drop-shadow(0 5px 12px rgb(0 0 0 / .5)); }
}

@media (max-width: 600px) {
  .hero__exact-lockup { width: min(88vw, 390px); }
  .hero__exact-tagline { width: 76%; margin-top: 18px; }
  .hero__exact-menu { width: 43%; margin-top: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) .hero__exact-wordmark > picture:first-child img { animation: none !important; }
}
/* Existing !important pause,
neutral and reduced-motion rules stay authoritative. */

/* Viewport hero: cinematic layers stay visible and moving on every width.
   The measured metrics/ticker bar stays inside the first screen,
under the stage. */
html,
body {
  background: var(--shadow);
}

.hero {
  --hero-ticker-height: 110px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  padding: 0;
  overflow: clip;
  background: var(--shadow);
}

.hero__visual,
.hero__brand {
  display: block;
}

.hero__visual {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  overflow: clip;
}

.hero__stage {
  top: 50%;
  left: 50%;
  width: max(100%, calc((100svh - var(--hero-ticker-height)) * 941 / 1672));
  max-height: none;
  transform: translate3d(-50%, -50%, 0);
}

.hero__content {
  position: absolute;
  inset: 0 0 var(--hero-ticker-height) 0;
  z-index: 2;
  align-content: center;
  justify-items: center;
  width: min(calc(100% - 32px), 920px);
  min-height: 0;
  margin-inline: auto;
  padding-block: max(36px, env(safe-area-inset-top)) 24px;
}

.hero__exact-lockup {
  width: min(88vw, 760px);
}

.hero > .ticker-viewport {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  background: rgb(22 13 8 / .9);
}

@media (max-width: 699px) {
  .hero { --hero-ticker-height: 98px; }
}

@media (max-height: 680px) {
  .hero { --hero-ticker-height: 84px; }
}

@media (max-width: 767px) {
  .hero__content {
    width: min(calc(100% - 24px), 430px);
    padding-top: clamp(96px, 22svh, 200px);
    padding-bottom: 16px;
  }

  .hero__exact-lockup {
    width: min(88vw, 390px);
  }

  .hero__brand {
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: clamp(94px, 30vw, 132px);
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .hero__brand {
    top: max(10px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: clamp(68px, 15svh, 92px);
  }

  .hero__content {
    padding-top: 12svh;
    padding-bottom: 8px;
  }

  .hero__exact-lockup { width: min(72vw, 520px); }
  .hero__exact-tagline { margin-top: 8px; }
  .hero__exact-menu { margin-top: 10px; }
}

@media (min-width: 768px) {
  .hero__content {
    width: min(calc(100% - 64px), 920px);
    padding: 48px 0 24px;
  }

  .hero__exact-lockup {
    width: min(72vw, 760px);
  }
}

/* Tablet and desktop: no mobile artwork, canvas or logo participates in layout. */
@media (min-width: 768px) {
  .hero {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .hero__visual,
  .hero__brand {
    display: none;
  }

  .hero__content {
    position: relative;
    inset: auto;
    grid-row: 1;
    min-height: 0;
  }

  .hero > .ticker-viewport {
    grid-row: 2;
  }
}