/* Native scroll behavior and compositor-friendly hero refinements. */
:root {
  --program-header-height: 104px;
}
html {
  scroll-padding-top: calc(
    var(--program-header-height) + 18px + env(safe-area-inset-top, 0px)
  );
}
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  isolation: isolate;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: calc(-1 * env(safe-area-inset-top, 0px)) calc((100% - 100vw) / 2) -1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#fffafb 70%, #fffafbf5);
  box-shadow:
    0 1px 0 #f1dce833,
    0 8px 20px -18px #97557540;
}
.site-header nav {
  /* The original pill is almost opaque: a tinted surface preserves its glass
     appearance without blurring moving petals and cards behind it each frame. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(135deg, #ffffffed, #fff5faeb);
}
.hero .floating-views {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(125deg, #fffdfdf5, #fff4faf2);
}
.hero .deck-card {
  /* Rasterize the soft shadow once with each rounded card instead of running
     an alpha drop-shadow filter across all five rotating image layers. */
  filter: none;
  border-radius: 22px;
  box-shadow: 0 22px 24px #9d3d742b;
  transition-property: transform, opacity;
  will-change: auto;
}
.hero.scene-active .deck-card[data-position="0"],
.hero.scene-active .deck-card[data-position="1"],
.hero.scene-active .deck-card[data-position="2"] {
  will-change: transform, opacity;
}
.hero-copy {
  animation-name: hero-enter-composite;
}
.hero.scene-active .sakura-object {
  will-change: transform;
}
.start-section .section-heading {
  top: calc(
    var(--program-header-height) + 24px + env(safe-area-inset-top, 0px)
  );
}
@keyframes hero-enter-composite {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* A short native pin: the 720px grid row gives the approximately 560–600px
   artwork just 120–160px of travel. No wheel handlers or extra scroll scenes. */
@media (min-width: 901px) and (min-height: 800px) {
  .hero {
    grid-template-rows: minmax(720px, auto);
    align-items: start;
  }
  .hero-showcase {
    position: sticky;
    align-self: start;
    top: calc(
      var(--program-header-height) + 16px + env(safe-area-inset-top, 0px)
    );
  }
  .scene-motion-static .hero-showcase {
    position: relative;
    top: auto;
  }
}
@media (max-width: 700px) {
  :root {
    --program-header-height: 88px;
  }
  .format-tabs {
    top: calc(
      var(--program-header-height) + 8px + env(safe-area-inset-top, 0px)
    );
  }
  .hero .deck-card {
    border-radius: 17px;
  }
}
.motion-paused .hero .deck-card,
.scene-motion-static .hero .deck-card,
.scene-motion-static .hero .sakura-object {
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-showcase {
    position: relative;
    top: auto;
  }
  .hero .deck-card {
    will-change: auto;
  }
}