/* ==========================================================================
   Cinematic layer - home page only (body.home-cinematic)
   Loaded after style.css. Adds the cinematic intro, camera-scroll reveals,
   depth/parallax, hotspots and cursor. Does not restyle other pages.
   ========================================================================== */

body.home-cinematic{
  --cine-deep:#003146;
  --cine-mid:#004C6C;
  --cine-cyan:#00B6C9;
  --cine-cyan-soft:rgba(0,182,201,.25);
  --cine-panel:rgba(0,49,70,.45);
  --cine-ease:cubic-bezier(.22,.61,.36,1);
}

/* Keep the page from jumping while the intro is locked */
html.intro-locked,
body.home-cinematic.intro-locked{
  overflow:hidden;
  height:100%;
}

/* --------------------------------------------------------------------------
   1. CINEMATIC INTRO
   -------------------------------------------------------------------------- */
.cinematic-intro{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  min-height:540px;
  background:#01131c;
  z-index:5;
}

.cinematic-intro.is-hidden{display:none !important;}

.cinematic-intro-sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  min-height:540px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

/* --- media ---------------------------------------------------------------- */
.hero-cinematic-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%, #04283a 0%, #01131c 62%, #000a10 100%);
}

.hero-cinematic-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;              /* preserves the native aspect ratio, never stretches */
  object-position:center center;
  transform:translateZ(0);
  will-change:transform,filter;
  filter:brightness(.5) saturate(.72) contrast(1.04);
  backface-visibility:hidden;
}

/* On portrait screens letterbox instead of hard-cropping the frame */
@media (max-aspect-ratio: 4/5){
  .hero-cinematic-media video{object-fit:contain;}
}

/* Poster wash taken from the save-the-date artwork */
.hero-cinematic-wash{
  position:absolute;
  inset:-6%;
  background-image:url(../video/overlay.png);
  background-size:cover;
  background-position:center;
  mix-blend-mode:soft-light;
  opacity:.62;
  pointer-events:none;
  will-change:transform,opacity;
}

.hero-cinematic-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,10,16,.72) 0%, rgba(0,20,30,.28) 34%, rgba(0,26,38,.46) 68%, rgba(0,8,14,.92) 100%),
    radial-gradient(80% 60% at 50% 55%, rgba(0,182,201,.16), transparent 70%);
}

.hero-cinematic-scan{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background-image:repeating-linear-gradient(180deg, rgba(0,182,201,.16) 0 1px, transparent 1px 4px);
  mix-blend-mode:screen;
}

.cinematic-intro-vignette{
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%, transparent 46%, rgba(0,6,12,.86) 100%);
  will-change:transform,opacity;
}

/* --- copy / lockup -------------------------------------------------------- */
.cinematic-intro-copy{
  position:relative;
  z-index:3;
  width:min(1180px, 92vw);
  text-align:center;
  padding:0 8px;
  will-change:transform,opacity,filter;
}

.cinematic-save-date{
  will-change:transform,opacity,filter;
}

.cinematic-save-date-title{
  font-family:"Oswald", sans-serif;
  font-weight:600;
  letter-spacing:.34em;
  text-indent:.34em;
  font-size:clamp(15px, 2.4vw, 30px);
  color:#5fe6ff;
  text-shadow:0 0 22px rgba(0,182,201,.55);
  margin:0;
}

.cinematic-save-date-venue{
  margin-top:10px;
  font-family:"Oswald", sans-serif;
  font-weight:400;
  letter-spacing:.12em;
  font-size:clamp(12px, 1.35vw, 17px);
  color:rgba(234,240,255,.86);
}

.cinematic-save-date-venue span{color:#5fe6ff;}

.cinematic-intro-board{
  margin-top:clamp(26px, 5vh, 60px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 3.2vw, 46px);
  flex-wrap:wrap;
  will-change:transform,opacity,filter;
}

.cinematic-intro-logo{
  display:block;
  width:auto;
  height:clamp(78px, 12.5vw, 168px);
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.55));
}

.cinematic-intro-rule{
  width:1px;
  align-self:stretch;
  min-height:clamp(78px, 12.5vw, 168px);
  background:linear-gradient(180deg, transparent, rgba(0,182,201,.75), transparent);
}

.cinematic-intro-date{
  text-align:left;
  font-family:"Oswald", sans-serif;
  line-height:.94;
  color:#eaf0ff;
}

.cinematic-intro-date-days{
  font-size:clamp(40px, 7vw, 92px);
  font-weight:600;
  color:#5fe6ff;
  text-shadow:0 0 30px rgba(0,182,201,.45);
}

.cinematic-intro-date-month{
  font-size:clamp(22px, 3.6vw, 48px);
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-top:6px;
}

.cinematic-intro-date-year{
  font-size:clamp(28px, 4.6vw, 62px);
  font-weight:600;
  letter-spacing:.04em;
  color:#7ef2d8;
}

@media (max-width: 575.98px){
  .cinematic-intro-rule{display:none;}
  .cinematic-intro-date{text-align:center;}
  .cinematic-intro-board{gap:18px;}
}

/* --- scroll indicator ----------------------------------------------------- */
.hero-explore{
  position:absolute;
  left:50%;
  bottom:clamp(20px, 4.5vh, 46px);
  transform:translateX(-50%);
  z-index:4;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;
  font-family:"Oswald", sans-serif;
  font-size:11px;
  letter-spacing:.28em;
  text-indent:.28em;
  text-transform:uppercase;
  color:rgba(234,240,255,.82);
  background:rgba(0,49,70,.35);
  border:1px solid rgba(0,182,201,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:color .35s var(--cine-ease), border-color .35s var(--cine-ease), background-color .35s var(--cine-ease);
}

.hero-explore:hover,
.hero-explore:focus-visible{
  color:#fff;
  border-color:rgba(0,182,201,.55);
  background:rgba(0,76,108,.42);
}

.hero-explore-line{
  position:relative;
  display:block;
  width:1px;
  height:34px;
  background:linear-gradient(180deg, rgba(0,182,201,.05), rgba(0,182,201,.75));
  overflow:hidden;
}

.hero-explore-line::after{
  content:"";
  position:absolute;
  left:-1px;
  top:-40%;
  width:3px;
  height:40%;
  background:linear-gradient(180deg, transparent, #7ef2ff);
  filter:blur(1px);
  animation:cineExploreTravel 2.4s var(--cine-ease) infinite;
}

@keyframes cineExploreTravel{
  0%{transform:translateY(0); opacity:0;}
  18%{opacity:1;}
  100%{transform:translateY(340%); opacity:0;}
}

/* --------------------------------------------------------------------------
   2. NAVIGATION - cinematic glass
   -------------------------------------------------------------------------- */
body.home-cinematic.cinematic-js .nav-glass{
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:background-color .45s var(--cine-ease), border-color .45s var(--cine-ease),
             box-shadow .45s var(--cine-ease), opacity .5s var(--cine-ease),
             transform .5s var(--cine-ease), visibility .5s;
}

body.home-cinematic.cinematic-entered .nav-glass{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

body.home-cinematic .nav-glass{
  background:linear-gradient(180deg, rgba(0,20,30,.30), rgba(0,12,20,.10));
  border-bottom:1px solid rgba(0,182,201,.15);
}

body.home-cinematic .nav-glass.is-scrolled{
  background:rgba(0,18,28,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,182,201,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.45);
}

/* subtle cyan indicator for the active in-page section link */
body.home-cinematic .navbar .nav-link{
  position:relative;
}

body.home-cinematic .navbar .nav-link::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:2px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--cine-cyan), transparent);
  transform:scaleX(0);
  transform-origin:50% 50%;
  opacity:0;
  transition:transform .45s var(--cine-ease), opacity .45s var(--cine-ease);
}

body.home-cinematic .navbar .nav-link.is-current::after,
body.home-cinematic .navbar .nav-link:hover::after{
  transform:scaleX(1);
  opacity:1;
}

/* --------------------------------------------------------------------------
   3. AMBIENT NETWORK FIELD (continuity between sections)
   -------------------------------------------------------------------------- */
.cinematic-network{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s var(--cine-ease);
}

.cinematic-network.is-visible{opacity:.55;}

.cinematic-network canvas{
  display:block;
  width:100%;
  height:100%;
}

body.home-cinematic main.main-content{
  position:relative;
  z-index:1;
}

/* --------------------------------------------------------------------------
   4. SCROLL REVEALS (camera move)
   -------------------------------------------------------------------------- */
body.home-cinematic.cinematic-js [data-cine-reveal]{
  opacity:0;
  transform:translate3d(0, 42px, 0);
  will-change:transform,opacity;
}

body.home-cinematic.cinematic-js [data-cine-reveal="fade"]{transform:none;}
body.home-cinematic.cinematic-js [data-cine-reveal="left"]{transform:translate3d(-38px,0,0);}
body.home-cinematic.cinematic-js [data-cine-reveal="right"]{transform:translate3d(38px,0,0);}
body.home-cinematic.cinematic-js [data-cine-reveal="depth"]{transform:translate3d(0,54px,0) scale(.965);}

body.home-cinematic.cinematic-js [data-cine-reveal].is-inview{
  opacity:1;
  transform:none;
  transition:opacity .9s var(--cine-ease), transform 1.05s var(--cine-ease);
}

/* --------------------------------------------------------------------------
   5. PANELS / CARDS - micro-interaction
   -------------------------------------------------------------------------- */
/* NOTE: #program / "Why This Congress Matters" (incl. .agenda-day) is
   deliberately excluded here — that section keeps its original design. */
body.home-cinematic .about-panel,
body.home-cinematic .chair-panel,
body.home-cinematic .chair-card{
  transition:transform .55s var(--cine-ease), border-color .55s var(--cine-ease),
             box-shadow .55s var(--cine-ease), background-color .55s var(--cine-ease);
}

body.home-cinematic .chair-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,182,201,.35);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,182,201,.10);
}

body.home-cinematic .glass-card{
  transition:transform .5s var(--cine-ease), box-shadow .5s var(--cine-ease), border-color .5s var(--cine-ease);
}

body.home-cinematic .glass-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,182,201,.3);
  box-shadow:0 18px 46px rgba(0,0,0,.45);
}

body.home-cinematic .btn-neon,
body.home-cinematic .btn-outline-glow,
body.home-cinematic .btn-register{
  transition:transform .4s var(--cine-ease), box-shadow .4s var(--cine-ease),
             background-color .4s var(--cine-ease), border-color .4s var(--cine-ease), color .4s var(--cine-ease);
}

body.home-cinematic .btn-neon:hover,
body.home-cinematic .btn-outline-glow:hover,
body.home-cinematic .btn-register:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,182,201,.28), 0 0 0 1px rgba(0,182,201,.25);
}

/* --------------------------------------------------------------------------
   6. STICKY CAMERA SCENE ("What to Expect")
   -------------------------------------------------------------------------- */
.cine-scene{
  position:relative;
  margin-top:56px;
  min-height:260vh;               /* scroll distance the camera travels */
}

.cine-scene-sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.cine-scene-inner{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px, 4vw, 64px);
  align-items:center;
}

.cine-scene-atmos{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 55% at 68% 46%, rgba(0,182,201,.18), transparent 70%),
    radial-gradient(50% 50% at 22% 70%, rgba(0,76,108,.35), transparent 72%);
  opacity:.9;
  will-change:transform,opacity;
}

.cine-scene-kicker{
  font-family:"Oswald", sans-serif;
  letter-spacing:.28em;
  text-indent:.28em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--cine-cyan);
  margin-bottom:14px;
}

.cine-scene-title{
  font-family:"Oswald", sans-serif;
  font-size:clamp(26px, 3.4vw, 46px);
  margin:0 0 10px;
  color:#eaf0ff;
}

.cine-scene-lead{
  color:rgba(234,240,255,.7);
  max-width:46ch;
  margin-bottom:22px;
}

.cine-steps{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cine-step{
  position:relative;
  padding:16px 20px 16px 22px;
  border-radius:14px;
  background:var(--cine-panel);
  border:1px solid rgba(0,182,201,.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:.34;
  filter:blur(1px);
  transform:translate3d(0,10px,0) scale(.985);
  transition:opacity .7s var(--cine-ease), transform .7s var(--cine-ease),
             filter .7s var(--cine-ease), border-color .7s var(--cine-ease),
             background-color .7s var(--cine-ease), box-shadow .7s var(--cine-ease);
  will-change:transform,opacity;
}

.cine-step::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--cine-cyan), transparent);
  opacity:0;
  transition:opacity .7s var(--cine-ease);
}

.cine-step.is-active{
  opacity:1;
  filter:none;
  transform:none;
  border-color:rgba(0,182,201,.34);
  background:rgba(0,60,86,.55);
  box-shadow:0 20px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(0,182,201,.08);
}

.cine-step.is-active::before{opacity:1;}

.cine-step-index{
  font-family:"Oswald", sans-serif;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--cine-cyan);
}

.cine-step-title{
  font-family:"Oswald", sans-serif;
  font-size:clamp(16px, 1.5vw, 21px);
  margin:4px 0 4px;
  color:#eaf0ff;
}

.cine-step-copy{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:rgba(234,240,255,.72);
}

/* --- the stage ------------------------------------------------------------ */
.cine-stage{
  position:relative;
  aspect-ratio:1/1;
  width:100%;
  max-width:620px;
  margin-inline:auto;
  will-change:transform;
}

.cine-stage-core{
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:
    radial-gradient(60% 60% at 38% 34%, rgba(0,182,201,.30), transparent 62%),
    radial-gradient(90% 90% at 60% 66%, rgba(0,76,108,.55), rgba(0,49,70,.15) 70%, transparent 78%);
  box-shadow:inset 0 0 80px rgba(0,182,201,.18);
}

.cine-stage-ring{
  position:absolute;
  inset:6%;
  border-radius:50%;
  border:1px solid rgba(0,182,201,.18);
}

.cine-stage-ring.r2{inset:18%; border-color:rgba(0,182,201,.12);}
.cine-stage-ring.r3{inset:30%; border-color:rgba(0,182,201,.22);}

.cine-stage-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

.cine-net-line{
  fill:none;
  stroke:rgba(0,182,201,.28);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity .9s var(--cine-ease);
}

.cine-scene.is-live .cine-net-line{opacity:1;}

.cine-net-pulse{
  fill:none;
  stroke:#7ef2ff;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-dasharray:6 94;          /* paths declare pathLength="100" */
  filter:drop-shadow(0 0 6px rgba(0,182,201,.75));
  opacity:0;
}

.cine-scene.is-live .cine-net-pulse{
  opacity:.9;
  animation:cineNetTravel 5.6s linear infinite;
}

.cine-scene.is-live .cine-net-pulse.p2{animation-delay:1.4s;}
.cine-scene.is-live .cine-net-pulse.p3{animation-delay:2.8s;}
.cine-scene.is-live .cine-net-pulse.p4{animation-delay:4.2s;}

@keyframes cineNetTravel{
  from{stroke-dashoffset:100;}
  to{stroke-dashoffset:0;}
}

/* --------------------------------------------------------------------------
   7. HOTSPOTS
   -------------------------------------------------------------------------- */
.cine-hotspot{
  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  transform:translate(-50%,-50%);
  width:22px;
  height:22px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  z-index:4;
}

.cine-hotspot-dot{
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:#7ef2ff;
  box-shadow:0 0 12px rgba(0,182,201,.9);
  transition:transform .45s var(--cine-ease), background-color .45s var(--cine-ease);
}

.cine-hotspot-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(0,182,201,.6);
  opacity:.85;
  animation:cineHotspotPulse 3.2s var(--cine-ease) infinite;
}

@keyframes cineHotspotPulse{
  0%{transform:scale(.6); opacity:.85;}
  70%{transform:scale(1.7); opacity:0;}
  100%{transform:scale(1.7); opacity:0;}
}

.cine-hotspot-label{
  position:absolute;
  left:50%;
  bottom:calc(100% + 14px);
  transform:translate(-50%, 8px);
  width:max-content;
  max-width:220px;
  padding:9px 13px;
  border-radius:10px;
  background:rgba(0,49,70,.82);
  border:1px solid rgba(0,182,201,.28);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-family:"Oswald", sans-serif;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#eaf0ff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s var(--cine-ease), transform .4s var(--cine-ease), visibility .4s;
  text-align:center;
}

.cine-hotspot-label::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:1px;
  height:12px;
  background:linear-gradient(180deg, rgba(0,182,201,.75), transparent);
}

.cine-hotspot:hover .cine-hotspot-label,
.cine-hotspot:focus-visible .cine-hotspot-label,
.cine-hotspot.is-open .cine-hotspot-label{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}

.cine-hotspot:hover .cine-hotspot-dot,
.cine-hotspot.is-open .cine-hotspot-dot{transform:scale(1.25);}

.cine-hotspot.is-linked .cine-hotspot-dot{
  background:#ffffff;
  box-shadow:0 0 18px rgba(0,182,201,1);
}

/* --------------------------------------------------------------------------
   8. FINAL CTA
   -------------------------------------------------------------------------- */
.cine-join{
  position:relative;
  overflow:hidden;
  padding:clamp(80px, 12vh, 140px) 0;
  background:linear-gradient(180deg, rgba(0,49,70,0) 0%, rgba(0,49,70,.55) 26%, rgba(0,76,108,.62) 62%, rgba(0,26,40,.9) 100%);
}

.cine-join-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:min(1100px, 130vw);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.75);
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,182,201,.24), transparent 68%);
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}

.cine-join-net{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.55;
}

.cine-join-net line{
  stroke:rgba(0,182,201,.35);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100;           /* lines declare pathLength="100" */
  stroke-dashoffset:100;
}

.cine-join.is-live .cine-join-net line{
  transition:stroke-dashoffset 1.8s var(--cine-ease);
  stroke-dashoffset:0;
}

.cine-join-inner{
  position:relative;
  z-index:2;
  text-align:center;
}

.cine-join-kicker{
  font-family:"Oswald", sans-serif;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--cine-cyan);
}

.cine-join-title{
  font-family:"Oswald", sans-serif;
  font-size:clamp(32px, 6vw, 76px);
  line-height:1.02;
  margin:14px 0 16px;
  color:#fff;
  text-shadow:0 0 44px rgba(0,182,201,.28);
}

.cine-join-lead{
  color:rgba(234,240,255,.74);
  max-width:62ch;
  margin:0 auto 30px;
}

.cine-join-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.cine-join-actions .btn-neon{
  box-shadow:0 0 0 1px rgba(0,182,201,.25), 0 18px 44px rgba(0,182,201,.18);
}

/* --------------------------------------------------------------------------
   9. CUSTOM CURSOR (fine pointers only)
   -------------------------------------------------------------------------- */
.cine-cursor{
  position:fixed;
  top:0;
  left:0;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:rgba(0,182,201,.9);
  box-shadow:0 0 14px rgba(0,182,201,.65);
  pointer-events:none;
  z-index:99999;
  opacity:0;
  transform:translate3d(-100px,-100px,0);
  transition:opacity .3s var(--cine-ease), width .3s var(--cine-ease), height .3s var(--cine-ease),
             margin .3s var(--cine-ease), background-color .3s var(--cine-ease), border-color .3s var(--cine-ease);
  will-change:transform;
}

.cine-cursor.is-active{opacity:1;}

.cine-cursor.is-hover{
  width:34px;
  height:34px;
  margin:-17px 0 0 -17px;
  background:rgba(0,182,201,.12);
  border:1px solid rgba(0,182,201,.7);
}

@media (hover: none), (pointer: coarse){
  .cine-cursor{display:none !important;}
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px){
  .cine-scene-inner{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
  }
  .cine-scene-sticky{
    height:auto;
    min-height:0;
    position:relative;
    padding:8px 0 0;
  }
  .cine-scene{margin-top:34px; min-height:0;}
  .cine-stage{max-width:420px;}
  .cine-step{
    opacity:1;
    filter:none;
    transform:none;
  }
  .cine-hotspot-label{font-size:11px; max-width:170px;}
}

@media (max-width: 767.98px){
  .cine-stage{max-width:320px;}
  .cinematic-intro-logo{height:clamp(62px, 20vw, 110px);}
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body.home-cinematic *,
  body.home-cinematic *::before,
  body.home-cinematic *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.15s !important;
  }
  body.home-cinematic.cinematic-js [data-cine-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
  .cine-scene{min-height:0;}
  .cine-scene-sticky{position:relative; height:auto; min-height:0;}
  .cine-step{opacity:1; filter:none; transform:none;}
  .cinematic-intro-sticky{position:relative;}
  .cine-cursor{display:none !important;}
  .cinematic-network{display:none;}
}