:root{
  --story-reveal:0;
  --cloud-overlay-offset:20svh;
  --cloud-overlay-z:30;
}

.cloud-gear-story{
  --cloud-progress:0;
  --scene-bright:0;
  --story-reveal-local:0;
  position:relative;
  z-index:var(--cloud-overlay-z);
  height:38svh;
  margin-top:calc(-1 * min(var(--cloud-overlay-offset), 8svh));
  background:transparent;
  overflow:visible;
  isolation:isolate;
}
.cloud-gear-story-secondary{
  height:44svh;
  margin-top:-4svh;
  z-index:calc(var(--cloud-overlay-z) - 1);
}

.cloud-gear-sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100%;
  overflow:visible;
  background:transparent;
  isolation:isolate;
}
.cloud-gear-backplate{
  position:absolute;
  inset:0;
  z-index:0;
  background:transparent;
}
.cloud-gear-sticky::before,
.cloud-gear-sticky::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:3;
  border-radius:50%;
  filter:blur(22px);
  opacity:calc(.6 + var(--scene-bright) * .18);
  animation:cloudDrift 18s ease-in-out infinite alternate;
}
.cloud-gear-sticky::before{
  left:-8%;
  bottom:2%;
  width:34vw;
  height:12vw;
  min-width:360px;
  min-height:150px;
  background:radial-gradient(circle at 45% 50%, rgba(255,255,255,.94) 0%, rgba(251,252,255,.78) 34%, rgba(237,242,250,.14) 54%, rgba(255,255,255,0) 76%);
}
.cloud-gear-sticky::after{
  right:-4%;
  top:8%;
  width:20vw;
  height:9vw;
  min-width:220px;
  min-height:110px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.82) 0%, rgba(248,250,254,.46) 42%, rgba(255,255,255,0) 74%);
  animation-duration:24s;
}
.cloud-gear-story-secondary .cloud-gear-sticky::before{
  left:-4%;
  bottom:16%;
  width:34vw;
  height:14vw;
  min-width:280px;
  min-height:120px;
}
.cloud-gear-story-secondary .cloud-gear-sticky::after{
  right:-6%;
  top:20%;
  width:22vw;
  height:10vw;
  min-width:180px;
  min-height:86px;
}

.cloud-gear-sun{
  position:absolute;
  z-index:1;
  right:-8vw;
  top:-6vh;
  width:min(38vw,560px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.78) 0 8%, rgba(255,231,188,.22) 24%, rgba(255,214,162,.08) 42%, transparent 72%);
  filter:blur(20px);
  mix-blend-mode:screen;
  pointer-events:none;
}
.cloud-gear-story-secondary .cloud-gear-sun{
  left:-7vw;
  right:auto;
  top:12vh;
  width:min(28vw,360px);
  opacity:.65;
}

.cloud-gear-depth{
  position:absolute;
  z-index:3;
  left:-10%; right:-10%; bottom:-10%;
  height:28%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.44) 28%, rgba(255,255,255,0) 68%);
  filter:blur(34px);
  opacity:.8;
  transform:translate3d(0,calc(var(--cloud-progress)*1vh),0) scale(1.1);
  pointer-events:none;
}
.cloud-gear-depth.depth-b{
  z-index:5;
  left:-14%; right:-14%; bottom:-20%;
  height:34%;
  background:radial-gradient(circle at 50% 34%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.56) 32%, rgba(255,255,255,0) 72%);
  filter:blur(52px);
  opacity:calc(.4 + var(--scene-bright) * .28);
  transform:translate3d(0,calc(var(--cloud-progress)*1.3vh),0) scale(1.13);
}
.cloud-gear-story-secondary .cloud-gear-depth{
  bottom:-4%;
  height:26%;
}
.cloud-gear-story-secondary .cloud-gear-depth.depth-b{
  bottom:-9%;
  height:30%;
}

.cloud-gear-transition{
  position:absolute;
  pointer-events:none;
  opacity:0;
}
.cloud-gear-transition-a{
  z-index:6;
  left:-10%; right:-10%; bottom:-10%; height:56%;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.54) 48%, rgba(255,255,255,.92) 100%);
  opacity:calc(var(--scene-bright) * .82);
}
.cloud-gear-transition-b{
  z-index:7;
  inset:0;
  background:radial-gradient(circle at 50% 90%, rgba(255,255,255,.8), rgba(255,255,255,0) 34%);
  filter:blur(38px);
  opacity:calc(var(--scene-bright) * .34);
}
.cloud-gear-grade{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:none;
}
.cloud-gear-grain{
  position:absolute;
  inset:-80%;
  z-index:8;
  pointer-events:none;
  opacity:.018;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation:cloudGrain .9s steps(2) infinite;
}
#cloudGearCanvas,
#cloudGearCanvasSecondary{
  opacity:calc(1 - var(--story-reveal-local) * .22);
  transform:translate3d(0, calc(var(--story-reveal-local) * -3svh), 0);
  will-change:transform, opacity;
  position:absolute;
  inset:0;
  z-index:2 !important;
  width:100%;
  height:100%;
  display:block;
  touch-action:pan-y;
  margin-top:0 !important;
  background:transparent !important;
}

.visual-stories{
  position:relative;
  z-index:20;
  margin-top:-8svh;
  padding:0 0 118px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.82) 14%, #fff 28%, #fff 100%);
}
.visual-stories::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-2svh;
  height:4svh;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 56%, rgba(255,255,255,1) 100%);
  opacity:calc(.3 + var(--story-reveal) * .7);
}
.visual-stories .wrap{
  position:relative;
  z-index:2;
  transform:translateY(calc(12svh - var(--story-reveal) * 12svh));
  opacity:calc(.56 + var(--story-reveal) * .44);
  will-change:transform, opacity;
}
.visual-stories .story-stack{ gap:24px; }

@keyframes cloudGrain{
  0%{transform:translate3d(-2%,1%,0)}
  25%{transform:translate3d(1%,-2%,0)}
  50%{transform:translate3d(3%,2%,0)}
  75%{transform:translate3d(-1%,3%,0)}
  100%{transform:translate3d(-2%,1%,0)}
}
@keyframes cloudDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(1.2%, -1.6%, 0) scale(1.03)}
  100%{transform:translate3d(-1.2%, 1.1%, 0) scale(.985)}
}

@media (max-width: 900px){
  :root{ --cloud-overlay-offset: 6svh; }
  .cloud-gear-story{height:26svh}
  .cloud-gear-story-secondary{height:34svh;margin-top:-2svh}
  .visual-stories{margin-top:-3svh;padding-top:2px}
}
@media(prefers-reduced-motion:reduce){
  .cloud-gear-story,
  .cloud-gear-story-secondary{height:auto;margin-top:0}
  .cloud-gear-sticky{position:relative;height:72svh}
  .cloud-gear-grain{animation:none}
  .visual-stories{margin-top:0;padding-top:24px}
  .visual-stories .wrap{transform:none;opacity:1}
}


/* compact dual-canvas sizing */
#cloudGearStory > .cloud-gear-sticky{height:32svh; min-height:280px; max-height:350px;}
#cloudGearStorySecondary > .cloud-gear-sticky{height:40svh; min-height:300px;}
#cloudGearStory .cloud-gear-sun, #cloudGearStory .cloud-gear-depth, #cloudGearStory .cloud-gear-depth.depth-b{opacity:.22;}
#cloudGearStory .cloud-gear-transition-a, #cloudGearStory .cloud-gear-transition-b{opacity:0!important;}
@media (max-width: 900px){
  #cloudGearStory > .cloud-gear-sticky{height:24svh; min-height:200px; max-height:260px;}
  #cloudGearStorySecondary > .cloud-gear-sticky{height:28svh; min-height:220px;}
}


/* V9.6 hero overscan + click-through */
#cloudGearCanvas{
  top:-30% !important;
  bottom:auto !important;
  height:160% !important;
  pointer-events:none !important;
}
#cloudGearCanvasSecondary{
  pointer-events:none !important;
}
#cloudGearStory,
#cloudGearStory > .cloud-gear-sticky{
  overflow:visible !important;
}