.cinematic-scroll{
  position:relative;
  height:480vh;
  min-height:3360px;
  background:#a9d4fb;
}
.cinematic-stage{
  position:sticky;
  top:0;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,#78baf0 0%,#9fd0f6 48%,#e9f6ff 100%);
}
.cinematic-video{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}
.cinematic-scroll.is-media-unavailable .cinematic-stage { background:url('./assets/backgrounds/background image.webp') center / cover no-repeat; }
.cinematic-scroll.is-media-unavailable .cinematic-video { display:none; }
.cinematic-orbit{
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  will-change:opacity,transform;
}
.cinematic-orbit use{fill:none;vector-effect:non-scaling-stroke}
.orbit-base{display:none}
.orbit-base-back{opacity:.22;stroke-dasharray:50 50;stroke-dashoffset:0;filter:blur(1.5px)}
.orbit-base-front{opacity:.62;stroke-dasharray:50 50;stroke-dashoffset:-50;filter:drop-shadow(0 0 5px rgba(255,255,255,.72))}
.orbit-active{
  stroke:url('#cinematic-orbit-light');
  stroke-width:1.8;
  stroke-opacity:.42;
  stroke-linecap:round;
  stroke-dasharray:100 100;
  stroke-dashoffset:100;
  filter:url('#cinematic-orbit-glow');
}
.orbit-comet{display:none}
.orbit-meteor{opacity:0;pointer-events:none}
.orbit-meteor use{fill:none;stroke:#fff;stroke-linecap:butt;vector-effect:non-scaling-stroke}
.orbit-meteor-halo{stroke-width:12;stroke-opacity:.16;stroke-dasharray:10 90;filter:blur(6px)}
.orbit-meteor-tail{stroke-width:5;stroke-opacity:.34;stroke-dasharray:8 92;filter:blur(2.4px)}
.orbit-meteor-core{stroke-width:1.8;stroke-opacity:.88;stroke-dasharray:5.4 94.6;filter:blur(.45px)}
.cinematic-bubbles{position:absolute;z-index:4;inset:0;pointer-events:none;will-change:opacity,transform}
.cinematic-bubbles .orbit-bubble{pointer-events:auto;opacity:0;filter:none;will-change:transform,opacity}
.cinematic-categories{
  position:absolute;
  z-index:5;
  inset:0;
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}
.cinematic-categories .showcase-control{display:none}
.cinematic-categories .category-showcase{height:100%;min-height:620px;background:none}
.cinematic-categories .showcase-window{top:36%;bottom:8%}
.cinematic-categories .showcase-card{will-change:transform,opacity}
.cinematic-loading{position:absolute;z-index:8;left:50%;top:50%;display:grid;justify-items:center;gap:9px;transform:translate(-50%,-50%);color:#174b9f;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:opacity .3s ease}
.cinematic-loading span{width:34px;height:34px;border:2px solid rgba(33,78,217,.2);border-top-color:#fff;border-radius:50%;animation:cinematic-spin .8s linear infinite}
.cinematic-loading.is-ready{opacity:0;pointer-events:none}
@keyframes cinematic-spin{to{transform:rotate(1turn)}}
.cinematic-scroll-cue{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:3.2%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.2em;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.3);
  will-change:opacity,transform;
}
body[data-page="home"]>.site-header,body[data-page="home"] #app>.site-header{position:fixed;will-change:transform,opacity}
body[data-page="home"] .floating-tools{z-index:30}

@media(min-width:701px){.cinematic-categories .showcase-next{right:clamp(110px,9vw,175px)}}

@media(max-width:1050px){
  .cinematic-scroll{height:450vh;min-height:3060px}
  .cinematic-stage{min-height:560px}
  .cinematic-categories .category-showcase{min-height:560px}
}
@media(max-width:700px){
  .cinematic-scroll{height:420vh;min-height:2730px}
  .cinematic-stage{height:100svh;min-height:540px}
  .cinematic-video{object-position:center center}
  .cinematic-orbit{inset:12% -18% 7%;width:136%;height:81%;transform:translateX(-13.2%)}
  .cinematic-bubbles .orbit-bubble{width:clamp(68px,20vw,88px)}
  .cinematic-categories .category-showcase{min-height:540px;height:100%}
  .cinematic-scroll-cue{bottom:2%;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .cinematic-scroll{height:100vh;min-height:620px}
  .cinematic-loading span{animation:none}
  .cinematic-categories .showcase-card>img{transition:none}
}