/* Short transform/opacity animations, with native navigation fallbacks. */
@view-transition { navigation: none; }
/* A short entrance works without cross-document View Transition support. */
main { animation: content-in .48s cubic-bezier(.2,.7,.3,1) both; }
@keyframes content-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
::view-transition-old(root) { animation: page-out .16s ease both; }
::view-transition-new(root) { animation: page-in .24s ease both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes brand-in { from { opacity: 0; transform: translateY(-16px) rotate(-5deg) scale(.94); } to { opacity: 1; transform: none; } }
.brand-intro .header .brand { display: inline-block; animation: brand-in .7s cubic-bezier(.2,.7,.3,1) both; }
.brand-slogan { letter-spacing: -.035em; }
.visit-band .brand-slogan { font-size: clamp(3.8rem,7vw,7rem); line-height: .96; }
.hero-top .edition { font-style: italic; }
.button .arrow,.nav-cta .arrow,.text-link .arrow { transition: transform .2s ease; }
.hero-copy>* { animation: hero-copy-in .64s cubic-bezier(.2,.75,.25,1) both; }
.hero-copy>h1 { animation-delay:.06s; }
.hero-copy>p { animation-delay:.13s; }
.hero-copy>.hero-bottom { animation-delay:.2s; }
@keyframes hero-copy-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.scroll-reveal.ready { transition-timing-function:cubic-bezier(.2,.75,.25,1); }
.principles .scroll-reveal.ready:nth-child(2),.cards .scroll-reveal.ready:nth-child(2) { transition-delay:.07s; }
.principles .scroll-reveal.ready:nth-child(3),.cards .scroll-reveal.ready:nth-child(3) { transition-delay:.14s; }
@media(hover:hover) and (pointer:fine) {
  .button:hover .arrow,.nav-cta:hover .arrow,.text-link:hover .arrow { transform: translate(2px,-2px); }
}
html[data-theme=dark] .hero h1 span { text-shadow: 0 0 14px #36f65a70,0 0 38px #36f65a35; }
html[data-theme=dark] .button.orange { box-shadow: 0 0 22px #36f65a50; }
html[data-theme=dark] .brand span { text-shadow:0 0 14px #36f65a90; }
.ticker { position: relative; }
.motion-pause { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: var(--fg); color: var(--bg); border: 1px solid currentColor; border-radius: 30px; padding: 8px 12px; font-size: .75rem; }
.motion-pause[hidden] { display: none; }
.ticker-track,.placeholder-card { animation-play-state: paused; }
.pointer-accent { pointer-events: none; position: fixed; left: 0; top: 0; width: 38px; height: 38px; margin: -19px; border: 2px solid var(--accent-text); background:#24ed4715; border-radius: 50%; opacity: 0; z-index: 50; transition: opacity .15s; }
.pointer-accent.active { opacity: .8; }
.placeholder-card { animation-duration:4.5s; }
@keyframes float { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(-3deg) translateY(-18px); } }
/* Browser-driven parallax only when supported. No JS scroll rendering. */
@supports (animation-timeline: view()) {
  @media(hover:hover) and (prefers-reduced-motion:no-preference) {
    html:not(.economical-motion):not(.motion-paused) .hero .visual-sticker {
      animation: sticker-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes sticker-drift { from { transform: translateY(0) rotate(12deg); } to { transform: translateY(28px) rotate(17deg); } }
@media(max-width:700px) {
  .hero h1 span { display:block; margin-left:0; }
  .placeholder-card { animation:mobile-float 5s ease-in-out infinite; animation-play-state:paused; }
}
@keyframes mobile-float { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(-5deg) translateY(-9px); } }
@media(hover:none),(pointer:coarse) { .pointer-accent { display:none; } }
.economical-motion .placeholder-card,.economical-motion .ticker-track,.motion-paused .placeholder-card,.motion-paused .ticker-track { animation-play-state:paused!important; }
.motion-paused .pointer-accent { opacity:0; }
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  ::view-transition-old(root),::view-transition-new(root) { animation:none!important; }
  .pointer-accent { display:none; }
  .hero-copy>* { animation:none; }
}