.site-sections { z-index: 1; }
.site-sections.is-scrubbing { scroll-snap-type: none; }
.film-stage { position: fixed; z-index: 0; inset: 0; pointer-events: none; background: #0a080f; --film-shade: .12; }
.film-stage__poster, .film-stage__poster img, .film-stage__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.film-stage__video { opacity: 0; }
.film-stage.is-ready .film-stage__video { opacity: 1; }
.film-stage__shade { position: absolute; inset: 0; background: linear-gradient(180deg, #06070e5c, transparent 45%, #06070e55); }
.film-stage__shade::after { content: ''; position: absolute; inset: 0; background: #05060c; opacity: var(--film-shade); will-change: opacity; }
.intro__identity, .social-menu__content { will-change: transform, opacity; }
.intro, .social-menu { background: transparent; color: #fff; --intro-progress: 0; --menu-progress: 0; }
.intro__identity { position: absolute; inset: 0; opacity: max(0, calc(1 - var(--intro-progress) * 2.8)); transform: translateY(calc(var(--intro-progress) * -15dvh)); pointer-events: none; }
.intro .hero__signature { width: min(56vw, 72dvh, 720px); top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 12px #0006); }
.intro__explore { display: flex; gap: 12px; align-items: center; justify-content: center; width: auto; height: 46px; padding: 10px 20px; border-radius: 12px; }
.intro__explore span { display: inline; font-size: 14px; font-weight: 400; }
.intro > .motion-toggle, .social-menu > .motion-toggle { position: fixed; top: max(24px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); bottom: auto; background: #1118274d; }
.intro:not(.is-current) > .motion-toggle, .social-menu:not(.is-current) > .motion-toggle { visibility: hidden; }
.social-menu__content { width: min(1080px, 86vw); height: 100%; margin: auto; padding: max(38px, 5dvh) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 4dvh, 42px); font-family: 'Manrope', sans-serif; opacity: var(--menu-progress); transform: translateY(calc((1 - var(--menu-progress)) * 55px)); }
.social-menu__heading { text-align: center; }
.social-menu__heading p { font-size: 10px; font-weight: 600; letter-spacing: .22em; margin: 0 0 13px; color: #fff9; }
.social-menu__heading h2 { font-size: clamp(34px, 4vw, 58px); font-weight: 500; letter-spacing: -.055em; margin: 0 0 12px; outline: none; }
.social-menu__heading > span { font-size: 13px; color: #fffc; }
.glass-socials { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: min(100%, 880px); }
.glass-social { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 165px; border: 1px solid #ffffff55; border-radius: 15px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #ffffff24, #ffffff0a); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 #ffffff26, 0 10px 24px #0000001a; font-size: 14px; font-weight: 500; transition: background .25s, translate .25s; }
.glass-social svg { width: 56px; height: 56px; }
.glass-social:last-child svg path { stroke: #292833; }
.glass-social:hover { background: #ffffff29; translate: 0 -4px; }
.intro-links { width: min(100%, 880px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.intro-links :is(button, a) { text-decoration: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid #ffffff3d; border-radius: 9px; background: #10131a52; color: #fff; font: 500 12px 'Manrope', sans-serif; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: pointer; }
.intro-links :is(button, a):hover { background: #ffffff1f; }
.intro-links :is(button, a) span { font-size: 19px; font-weight: 400; }
.social-menu__continue { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 7px 10px; background: none; border: 0; color: #fffc; font: 400 12px 'Manrope', sans-serif; cursor: pointer; }
.social-menu__continue span { font-size: 22px; animation: explore-arrow 2s ease-in-out infinite; }
.social-menu a:focus-visible, .social-menu button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.motion-paused .intro *, .intro:not(.is-current) *, .motion-paused .social-menu *, .social-menu:not(.is-current) * { animation-play-state: paused; }
body[data-active-section="0"] .section-nav span, body[data-active-section="1"] .section-nav span { background: #fff; }
@media (max-width: 1000px) and (orientation: portrait) {
  .intro .hero__signature { width: min(84vw, 52dvh, 430px); }
  .social-menu__content { width: 100%; padding: max(25px, env(safe-area-inset-top)) 30px max(25px, env(safe-area-inset-bottom)); gap: 27px; }
  .social-menu__heading h2 { font-size: 34px; }
  .glass-socials { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .glass-social { grid-column: span 2; min-height: 115px; border-radius: 12px; gap: 13px; font-size: 12px; }
  .glass-social:nth-child(4) { grid-column: 2 / 4; }
  .glass-social:nth-child(5) { grid-column: 4 / 6; }
  .glass-social svg { width: 40px; height: 40px; }
  .intro-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .intro-links :is(button, a) { text-decoration: none; min-height: 46px; padding: 10px 13px; font-size: 11px; }
  .intro > .motion-toggle, .social-menu > .motion-toggle { top: max(14px, env(safe-area-inset-top)); right: 14px; }
}
@media (max-width: 1000px) and (orientation: portrait) and (max-height: 700px) {
  .social-menu__content { gap: 17px; padding: 20px 27px; }
  .social-menu__heading p { font-size: 9px; margin-bottom: 8px; }
  .social-menu__heading h2 { font-size: 29px; margin-bottom: 8px; }
  .social-menu__heading > span { font-size: 11px; }
  .glass-social { min-height: 94px; gap: 10px; font-size: 11px; }
  .glass-social svg { width: 36px; height: 36px; }
  .social-menu__continue { font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .intro .hero__signature { width: 62dvh; }
  .social-menu__content { padding: 18px 0; gap: 14px; }
  .social-menu__heading p { display: none; }
  .social-menu__heading h2 { font-size: 28px; margin-bottom: 6px; }
  .social-menu__heading > span { font-size: 10px; }
  .glass-socials { width: min(100%, 650px); gap: 12px; }
  .glass-social { min-height: 100px; gap: 12px; font-size: 11px; }
  .glass-social svg { width: 36px; height: 36px; }
  .intro-links { width: min(100%, 650px); }
  .intro-links :is(button, a) { text-decoration: none; min-height: 44px; padding: 8px 11px; font-size: 10px; }
  .social-menu__continue { min-height: 34px; font-size: 10px; padding: 3px; }
}
