/* COREVERSE HERO V13
   Living character rig, landmark-matched Hero and a long pearl-cloud cover into New Drop.
   Only the hero is styled here; the navbar and every later section remain untouched. */

/* The studio font faces (Core Northwood / Strange / Longa / Ekkamai New) are declared once in style.css. */

.hero.hero-v6{
  --hero-p:0;
  --scene1-opacity:1;
  --scene1-scale:1;
  --scene1-x:0vw;
  --scene1-y:0vh;
  --scene1-rotate:0deg;
  --scene1-blur:0px;
  --scene1-brightness:1;
  --scene2-opacity:0;
  --scene2-scale:3.2;
  --scene2-x:.13vw;
  --scene2-y:1.85vh;
  --scene2-rotate:0deg;
  --scene2-blur:22px;
  --scene2-brightness:1.08;
  --scene2-exit-y:0vh;
  --scene2-exit-scale:1;
  --transition-blur:0px;
  --transition-wash:0;
  --transition-shift:-34%;
  --transition-shift-reverse:34%;
  --hands-opacity:0;
  --hands-scale:.975;
  --hand-detail-opacity:0;
  --bottle-opacity:0;
  --brand-opacity:0;
  --brand-exit-y:0vh;
  --brand-exit-scale:1;
  --logo-cut:50%;
  --logo-blur:10px;
  --stroke-scale:0;
  --tagline-opacity:0;
  --tagline-y:18px;
  --sheen-x:-28%;
  --chapter1-opacity:1;
  --chapter2-opacity:0;
  --scroll-cue-opacity:1;
  --interface-opacity:1;
  --cloud-opacity:0;
  --cloud-back-y:62vh;
  --cloud-middle-y:76vh;
  --cloud-front-y:96vh;
  --cloud-back-scale:.86;
  --cloud-middle-scale:.92;
  --cloud-front-scale:1;
  --cloud-fog-opacity:0;
  --cloud-sigil-y:68vh;
  --cloud-sigil-opacity:0;
  --cloud-sigil-scale:1;
  --cloud-back-x:-4vw;
  --cloud-front-x:5vw;
  --pointer-far-x:0px;--pointer-far-y:0px;
  --pointer-mid-x:0px;--pointer-mid-y:0px;
  --pointer-near-x:0px;--pointer-near-y:0px;
  --pointer-hands-x:0px;--pointer-hands-y:0px;
  --pointer-logo-x:0px;--pointer-logo-y:0px;--pointer-logo-rotate:0deg;
  --pointer-bottle-x:0px;--pointer-bottle-y:0px;
  --m-scene1-scale:1;
  --m-scene1-x:0vw;
  --m-scene1-y:0svh;
  --m-scene2-scale:2.28;
  --m-scene2-x:0vw;
  --m-scene2-y:-2.7svh;
  --m-scene2-exit-y:0svh;
  --m-scene2-exit-scale:1;
  --m-exit-fog:0;
  --m-exit-fog-y:18svh;
  --m-exit-fog-scale:.96;
  position:relative;
  display:block;
  height:920vh;
  height:920svh;
  min-height:0;
  padding:0;
  overflow:clip;
  isolation:isolate;
  background:#eee9e5;
}

.hero-v6__sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(circle at 50% 47%,rgba(255,255,255,.94),rgba(247,241,237,.82) 35%,rgba(214,207,204,.36) 80%),#eee9e5;
}

.hero-v6__sticky::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:multiply;
  background-image:repeating-linear-gradient(0deg,rgba(42,38,38,.045) 0 1px,transparent 1px 4px);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}

.hero-v6__scene,.hero-v6__rig,.hero-v6__character,.hero-v6__layer,.hero-v6__layer img,.hero-v6__bottles,.hero-v6__bottles img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hero-v6__mobile{display:none}

.hero-v6__scene{pointer-events:none;will-change:opacity,filter;backface-visibility:hidden;contain:paint}
.hero-v6__scene--one{z-index:1;opacity:var(--scene1-opacity);filter:blur(var(--scene1-blur)) brightness(var(--scene1-brightness))}
.hero-v6__scene--two{
  z-index:3;
  opacity:var(--scene2-opacity);
  filter:blur(var(--scene2-blur)) brightness(var(--scene2-brightness));
  background:#f3ece8;
}

.hero-v6__rig{
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  width:100vw;
  height:100vh;
  height:100svh;
  overflow:visible;
  will-change:transform;
  backface-visibility:hidden;
}
.hero-v6__rig--scene-one{
  transform-origin:45.49% 46.85%;
  transform:translate3d(calc(-50% + var(--scene1-x)),calc(-50% + var(--scene1-y)),0) rotate(var(--scene1-rotate)) scale(var(--scene1-scale));
}
.hero-v6__rig--scene-two{
  transform-origin:49.87% 48.15%;
  transform:translate3d(calc(-50% + var(--scene2-x)),calc(-50% + var(--scene2-y) + var(--scene2-exit-y)),0) rotate(var(--scene2-rotate)) scale(var(--scene2-scale)) scale(var(--scene2-exit-scale));
}

@media (min-width:901px){
  .hero-v6__rig{width:max(100vw,177.7778vh);height:max(56.25vw,100vh);height:max(56.25vw,100svh)}
}

.hero-v6__layer{will-change:transform,opacity}
.hero-v6__character{will-change:transform,translate,rotate;transform-origin:45.5% 46.9%}
.hero-v6__layer img,.hero-v6__bottles img{object-fit:cover;user-select:none;-webkit-user-drag:none}
.hero-v6__layer[data-rig="far"]{transform:translate3d(var(--pointer-far-x),var(--pointer-far-y),0)}
.hero-v6__layer[data-rig="mid"]{transform:translate3d(var(--pointer-mid-x),var(--pointer-mid-y),0)}
.hero-v6__character[data-rig="hands"]{transform:translate3d(var(--pointer-hands-x),var(--pointer-hands-y),0)}
.hero-v6__layer[data-rig="near"]{transform:translate3d(var(--pointer-near-x),var(--pointer-near-y),0)}
.hero-v6__layer[data-rig="hands"]{transform:translate3d(var(--pointer-hands-x),var(--pointer-hands-y),0)}

/* Scene 1: no body-part rig — each figure only ever moves as one whole element, gently. */
.hero-v6__layer--scene1-bg{z-index:0;filter:saturate(.76) contrast(.96) brightness(1.035)}
.hero-v6__layer--scene1-bg img{animation:coreWallDrift 15s ease-in-out infinite alternate}
.hero-v6__character--left{z-index:2;animation:sceneOneSeatedGroup 9.4s cubic-bezier(.45,0,.55,1) infinite alternate}
.hero-v6__character--right{z-index:6;animation:sceneOneFloatingGroup 8.2s cubic-bezier(.45,0,.55,1) -.8s infinite alternate}
.hero-v6__layer--left-woman{z-index:2;filter:saturate(.78) contrast(.98) drop-shadow(0 24px 28px rgba(41,35,34,.08))}
.hero-v6__layer--right-woman{z-index:6;filter:saturate(.72) brightness(1.015) drop-shadow(0 22px 30px rgba(70,58,54,.07))}
.hero-v6__layer--scene1-ornaments{z-index:10;opacity:.7;mix-blend-mode:multiply}
.hero-v6__layer--scene1-ornaments img{animation:coreOrnamentDrift 11.5s ease-in-out infinite alternate}

@keyframes coreWallDrift{0%{transform:scale(1.018) translate3d(-16px,10px,0)}45%{transform:scale(1.034) translate3d(9px,-13px,0)}100%{transform:scale(1.025) translate3d(20px,12px,0)}}
@keyframes sceneOneSeatedGroup{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes sceneOneFloatingGroup{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes criticalHandsDrift{0%,100%{transform:none}32%{transform:translate3d(-13px,10px,0) rotate(-.13deg)}68%{transform:translate3d(15px,-14px,0) rotate(.16deg)}}
@keyframes coreOrnamentDrift{0%{transform:translate3d(-25px,14px,0) rotate(-.3deg)}46%{transform:translate3d(9px,-20px,0) rotate(.16deg)}100%{transform:translate3d(29px,-16px,0) rotate(.34deg)}}

/* Full-frame pearlescent blur dissolve: no portal shape or circular wipe. */
.hero-v6__portal{
  position:absolute;
  z-index:8;
  inset:0;
  width:100%;
  height:100%;
  opacity:var(--transition-wash);
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(112deg,rgba(255,255,255,.05),rgba(232,229,234,.28) 42%,rgba(255,255,255,.38) 52%,rgba(210,212,220,.14) 68%,rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(var(--transition-blur)) saturate(.86);
  backdrop-filter:blur(var(--transition-blur)) saturate(.86);
  will-change:opacity,backdrop-filter;
}
.hero-v6__portal::before,.hero-v6__portal::after{
  content:"";
  position:absolute;
  top:-15%;
  bottom:-15%;
  width:42%;
  opacity:.62;
  pointer-events:none;
  filter:blur(32px);
  will-change:transform;
}
.hero-v6__portal::before{
  left:22%;
  transform:translate3d(var(--transition-shift),0,0) skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
}
.hero-v6__portal::after{
  right:18%;
  transform:translate3d(var(--transition-shift-reverse),0,0) skewX(11deg);
  background:linear-gradient(90deg,transparent,rgba(192,195,205,.3),rgba(255,255,255,.7),transparent);
}
.hero-v6__portal-glow,.hero-v6__portal-ring,.hero-v6__portal i{display:none}

/* Scene 2: explicit semantic stacking while retaining the supplied 1-11 file order. */
.hero-v6__layer--scene2-2{z-index:0}
.hero-v6__layer--scene2-1{z-index:1}
.hero-v6__layer--scene2-3{z-index:2}
.hero-v6__layer--scene2-4{z-index:3}
.hero-v6__layer--scene2-5{z-index:4}
.hero-v6__layer--scene2-6{z-index:5}
.hero-v6__layer--scene2-8{z-index:7}
.hero-v6__layer--scene2-9{z-index:8;opacity:var(--hands-opacity)}
.hero-v6__layer--scene2-11{z-index:10;opacity:var(--hand-detail-opacity)}
.hero-v6__layer--scene2-9,.hero-v6__layer--scene2-11{transform:translate3d(var(--pointer-hands-x),var(--pointer-hands-y),0) scale(var(--hands-scale))}

.hero-v6__layer--scene2-2 img{animation:sceneTwoBackground 16s ease-in-out infinite alternate}
.hero-v6__layer--scene2-1 img{animation:sceneTwoTexture 13s ease-in-out infinite alternate}
.hero-v6__layer--scene2-3 img{animation:sceneTwoBird 8.5s cubic-bezier(.45,0,.55,1) infinite alternate}
.hero-v6__layer--scene2-4 img{animation:sceneTwoFlowerLeft 10s ease-in-out infinite alternate}
.hero-v6__layer--scene2-5 img{animation:sceneTwoFlowerRight 11.5s ease-in-out infinite alternate}
.hero-v6__layer--scene2-6 img,.hero-v6__layer--scene2-8 img{animation:sceneTwoOrnamentOne 9.2s ease-in-out infinite alternate}
.hero-v6[data-phase="reveal"] .hero-v6__layer--scene2-9 img,
.hero-v6[data-phase="reveal"] .hero-v6__layer--scene2-11 img,
.hero-v6[data-phase="hold"] .hero-v6__layer--scene2-9 img,
.hero-v6[data-phase="hold"] .hero-v6__layer--scene2-11 img,
.hero-v6[data-phase="exit"] .hero-v6__layer--scene2-9 img,
.hero-v6[data-phase="exit"] .hero-v6__layer--scene2-11 img{animation:criticalHandsDrift 8.8s cubic-bezier(.45,0,.55,1) infinite}
.hero-v6__layer--scene2-11 img{clip-path:inset(0 46% 0 0)}

@keyframes sceneTwoBackground{0%{transform:scale(1.02) translate3d(-15px,9px,0)}50%{transform:scale(1.04) translate3d(12px,-15px,0)}100%{transform:scale(1.028) translate3d(23px,10px,0)}}
@keyframes sceneTwoTexture{0%{transform:translate3d(-24px,13px,0) rotate(-.24deg)}50%{transform:translate3d(6px,-20px,0) rotate(.12deg)}100%{transform:translate3d(27px,-16px,0) rotate(.3deg)}}
@keyframes sceneTwoBird{0%{transform:translate3d(-27px,20px,0) rotate(-.68deg)}52%{transform:translate3d(8px,-25px,0) rotate(.22deg)}100%{transform:translate3d(32px,-28px,0) rotate(.76deg)}}
@keyframes sceneTwoFlowerLeft{0%{transform:translate3d(-23px,16px,0) rotate(-.66deg)}48%{transform:translate3d(8px,-21px,0) rotate(.2deg)}100%{transform:translate3d(29px,-22px,0) rotate(.82deg)}}
@keyframes sceneTwoFlowerRight{0%{transform:translate3d(25px,-16px,0) rotate(.62deg)}52%{transform:translate3d(-7px,23px,0) rotate(-.2deg)}100%{transform:translate3d(-27px,22px,0) rotate(-.78deg)}}
@keyframes sceneTwoOrnamentOne{0%{transform:translate3d(19px,-25px,0) rotate(.5deg)}50%{transform:translate3d(-8px,10px,0) rotate(-.12deg)}100%{transform:translate3d(-25px,29px,0) rotate(-.66deg)}}
@keyframes sceneTwoOrnamentTwo{0%{transform:translate3d(-21px,26px,0) rotate(-.5deg)}50%{transform:translate3d(9px,-10px,0) rotate(.14deg)}100%{transform:translate3d(26px,-29px,0) rotate(.68deg)}}

/* The supplied bottle group stays deliberately composed while gently orbiting as one unit. */
.hero-v6__bottles{z-index:6;opacity:var(--bottle-opacity);transform:translate3d(var(--pointer-bottle-x),var(--pointer-bottle-y),0);will-change:opacity,transform}
.hero-v6__bottles img{filter:drop-shadow(0 15px 18px rgba(56,54,60,.1));animation:sceneTwoBottles 8.4s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes sceneTwoBottles{0%{transform:translate3d(-25px,19px,0) rotate(-.58deg)}48%{transform:translate3d(7px,-22px,0) rotate(.14deg)}100%{transform:translate3d(29px,-25px,0) rotate(.72deg)}}

/* Logo reveal: metallic strokes form at center; the mark never bounces. */
.hero-v6__brand{position:absolute;inset:0;z-index:9;opacity:var(--brand-opacity);transform:translate3d(var(--pointer-logo-x),calc(var(--pointer-logo-y) + var(--brand-exit-y)),0) rotate(var(--pointer-logo-rotate)) scale(var(--brand-exit-scale));will-change:opacity,transform}
.hero-v6__logo-reveal{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 var(--logo-cut) 0 var(--logo-cut));filter:blur(var(--logo-blur));will-change:clip-path,filter;animation:sceneTwoLogo 8.8s ease-in-out infinite alternate}
.hero-v6__logo-reveal>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(.58) drop-shadow(0 18px 22px rgba(52,53,59,.12));user-select:none;-webkit-user-drag:none}
.hero-v6__logo-sheen{position:absolute;inset:0;pointer-events:none;opacity:.7;background:linear-gradient(103deg,transparent 39%,rgba(255,255,255,.95) 49%,rgba(176,182,195,.48) 52%,transparent 62%);transform:translate3d(var(--sheen-x),0,0);-webkit-mask:url("../assets/hero-v6/scene2-10.webp") center/cover no-repeat;mask:url("../assets/hero-v6/scene2-10.webp") center/cover no-repeat}
@keyframes sceneTwoLogo{0%{translate:-18px 16px;rotate:-.24deg}48%{translate:7px -19px;rotate:.1deg}100%{translate:22px -22px;rotate:.29deg}}
.hero-v6__metal-stroke{position:absolute;left:50%;width:min(62vw,980px);height:1px;transform-origin:center;transform:translateX(-50%) scaleX(var(--stroke-scale));background:linear-gradient(90deg,transparent,#777b84 16%,#fff 48%,#8d919a 78%,transparent);box-shadow:0 0 9px rgba(255,255,255,.9)}
.hero-v6__metal-stroke::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff}
.hero-v6__metal-stroke--top{top:35%;rotate:-2deg}
.hero-v6__metal-stroke--bottom{top:68%;rotate:2deg}
.hero-v6__tagline{position:absolute;z-index:3;left:50%;top:74%;display:grid;gap:8px;width:min(88vw,720px);text-align:center;color:#313136;opacity:var(--tagline-opacity);transform:translate3d(-50%,var(--tagline-y),0);text-shadow:0 1px 0 rgba(255,255,255,.8)}
.hero-v6__tagline b{font:500 clamp(13px,1.35vw,20px)/1.2 "Core Longa",var(--font-display);letter-spacing:.27em}
.hero-v6__tagline span{font:500 9px/1 var(--font-display);letter-spacing:.48em}

.hero-v6__chapter{position:absolute;z-index:20;margin:0;font:500 8px/1 var(--font-display);letter-spacing:.25em;text-transform:uppercase;color:rgba(41,40,44,.67)}
.hero-v6__chapter span{display:inline-grid;place-items:center;width:29px;height:29px;margin-right:9px;border:1px solid rgba(56,55,61,.22);border-radius:50%;font:500 9px var(--font-mono)}
.hero-v6__chapter--one{left:clamp(24px,4vw,68px);top:clamp(104px,14vh,150px);opacity:var(--chapter1-opacity)}
.hero-v6__chapter--two{right:clamp(24px,4vw,68px);top:clamp(104px,14vh,150px);opacity:var(--chapter2-opacity)}

/* Long pearl-cloud handoff: scroll controls depth while the wisps keep breathing on their own. */
.hero-v6__clouds{position:absolute;inset:0;z-index:18;overflow:hidden;pointer-events:none;opacity:var(--cloud-opacity);will-change:opacity}
.hero-v6__clouds::before{content:"";position:absolute;z-index:0;inset:-8%;opacity:var(--cloud-fog-opacity);background:radial-gradient(circle at 50% 82%,#fff 0 18%,rgba(250,250,251,.98) 42%,rgba(245,245,247,.96) 72%,#f5f5f7 100%);filter:blur(18px);will-change:opacity}
.hero-v6__clouds::after{content:"";position:absolute;z-index:6;inset:-8% 0 -18%;opacity:var(--cloud-fog-opacity);background:linear-gradient(to bottom,rgba(255,255,255,.9) 0,rgba(252,252,253,.96) 28%,rgba(248,248,250,.99) 61%,#f5f5f7 88%,#f5f5f7 100%);filter:blur(10px);will-change:opacity}
.hero-v6__cloud{position:absolute;left:-12%;width:124%;border-radius:50%;transform-origin:50% 80%;will-change:transform}
.hero-v6__cloud--back{z-index:1;bottom:22%;height:46%;transform:translate3d(var(--cloud-back-x),var(--cloud-back-y),0) scale(var(--cloud-back-scale));filter:blur(28px);opacity:.78;background:radial-gradient(ellipse at 5% 78%,rgba(239,238,242,.94) 0 13%,transparent 32%),radial-gradient(ellipse at 22% 55%,rgba(253,252,253,.98) 0 16%,transparent 36%),radial-gradient(ellipse at 43% 72%,rgba(235,234,239,.9) 0 15%,transparent 35%),radial-gradient(ellipse at 64% 50%,#fff 0 18%,transparent 39%),radial-gradient(ellipse at 84% 70%,rgba(237,236,240,.92) 0 16%,transparent 36%),radial-gradient(ellipse at 101% 55%,rgba(253,252,253,.98) 0 17%,transparent 38%)}
.hero-v6__cloud--middle{z-index:3;bottom:4%;height:53%;transform:translate3d(0,var(--cloud-middle-y),0) scale(var(--cloud-middle-scale));transform-origin:50% 82%;filter:blur(20px);opacity:.94;background:radial-gradient(ellipse at 0 70%,#fff 0 17%,transparent 35%),radial-gradient(ellipse at 17% 50%,rgba(246,245,248,.98) 0 19%,transparent 39%),radial-gradient(ellipse at 36% 76%,#fff 0 18%,transparent 38%),radial-gradient(ellipse at 56% 48%,rgba(243,242,246,.98) 0 20%,transparent 42%),radial-gradient(ellipse at 77% 72%,#fff 0 19%,transparent 40%),radial-gradient(ellipse at 98% 48%,rgba(246,245,248,.98) 0 20%,transparent 42%)}
.hero-v6__cloud--front{z-index:4;bottom:-16%;height:62%;transform:translate3d(var(--cloud-front-x),var(--cloud-front-y),0) scale(var(--cloud-front-scale));transform-origin:50% 86%;filter:blur(14px);background:radial-gradient(ellipse at 4% 44%,#fff 0 22%,transparent 43%),radial-gradient(ellipse at 25% 66%,rgba(242,241,244,.98) 0 24%,transparent 45%),radial-gradient(ellipse at 50% 38%,#fff 0 23%,transparent 44%),radial-gradient(ellipse at 74% 64%,rgba(239,238,242,.98) 0 25%,transparent 46%),radial-gradient(ellipse at 98% 38%,#fff 0 23%,transparent 44%)}
.hero-v6__cloud-wisp{position:absolute;z-index:2;width:76%;height:58%;bottom:-8%;will-change:transform}
.hero-v6__cloud-wisp::before{content:"";position:absolute;inset:-14%;border-radius:50%;filter:blur(24px);will-change:transform}
.hero-v6__cloud-wisp--left{left:-28%;transform:translate3d(0,var(--cloud-middle-y),0) scale(var(--cloud-back-scale))}
.hero-v6__cloud-wisp--left::before{background:radial-gradient(ellipse at 38% 52%,rgba(255,255,255,.98) 0 27%,rgba(239,239,243,.92) 43%,transparent 69%);animation:cloudWispLeft 8.2s cubic-bezier(.45,0,.55,1) infinite alternate}
.hero-v6__cloud-wisp--right{right:-30%;transform:translate3d(0,var(--cloud-front-y),0) scale(var(--cloud-middle-scale))}
.hero-v6__cloud-wisp--right::before{background:radial-gradient(ellipse at 58% 48%,#fff 0 29%,rgba(241,241,245,.94) 45%,transparent 70%);animation:cloudWispRight 7.1s cubic-bezier(.45,0,.55,1) -.7s infinite alternate}
@keyframes cloudWispLeft{0%{transform:translate3d(-3vw,1.5vh,0) rotate(-1.2deg) scale(.96)}100%{transform:translate3d(5vw,-2.2vh,0) rotate(1.5deg) scale(1.08)}}
@keyframes cloudWispRight{0%{transform:translate3d(4vw,2vh,0) rotate(1.4deg) scale(.95)}100%{transform:translate3d(-5vw,-2.8vh,0) rotate(-1.7deg) scale(1.09)}}
.hero-v6__cloud-sigil{position:absolute;z-index:2;inset:0;opacity:var(--cloud-sigil-opacity);transform:translate3d(0,var(--cloud-sigil-y),0) scale(var(--cloud-sigil-scale));transform-origin:50% 72%;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.12);will-change:opacity,transform}
.hero-v6__cloud-sigil img{width:100%;height:100%;object-fit:cover;opacity:.28;user-select:none;-webkit-user-drag:none}
.hero-v6__cloud-sigil::before,.hero-v6__cloud-sigil::after{content:"";position:absolute;left:50%;top:53%;width:min(64vw,980px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(91,94,104,.22) 22%,rgba(255,255,255,.86) 50%,rgba(91,94,104,.22) 78%,transparent);box-shadow:0 0 14px rgba(255,255,255,.72)}
.hero-v6__cloud-sigil::after{top:61%;width:min(42vw,680px)}

/* The New Drop cloud lip now lives with the letter transition (css/letter.css). */

.hero-v6__interface{position:absolute;inset:0;z-index:25;pointer-events:none;opacity:var(--interface-opacity);color:rgba(45,44,49,.62)}
.hero-v6__coordinate{position:absolute;right:clamp(22px,3vw,52px);top:50%;writing-mode:vertical-rl;font:500 7px/1 var(--font-mono);letter-spacing:.3em}
.hero-v6__scroll-cue{position:absolute;left:clamp(24px,4vw,68px);bottom:46px;display:flex;align-items:center;gap:14px;opacity:var(--scroll-cue-opacity);font:500 8px var(--font-display);letter-spacing:.28em;text-transform:uppercase}
.hero-v6__scroll-cue i{position:relative;display:block;width:110px;height:1px;background:rgba(52,52,58,.18)}
.hero-v6__scroll-cue b{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:#45464c;animation:coreScrollDot 2.8s cubic-bezier(.22,.8,.24,1) infinite}
@keyframes coreScrollDot{0%{left:0;opacity:0}15%,80%{opacity:1}100%{left:105px;opacity:0}}
.hero-v6__progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(50,50,56,.08)}
.hero-v6__progress i{display:block;width:100%;height:100%;transform:scaleX(var(--hero-p));transform-origin:left;background:linear-gradient(90deg,#6f7078,#fff 52%,#555861)}

@media (max-width:900px){
  .hero.hero-v6{height:840vh;height:840svh}
  .hero-v6__rig{width:135vw;height:75.9375vw}
  .hero-v6__portal{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-v6__chapter{top:104px}
  .hero-v6__chapter--two{right:20px}
  .hero-v6__tagline{top:72%;gap:6px}
  .hero-v6__tagline b{font-size:12px;letter-spacing:.2em}
  .hero-v6__coordinate{display:none}
  .hero-v6__metal-stroke{width:74vw}
}

@media (max-width:700px){
  .hero.hero-v6{height:820vh;height:820svh}
  .hero-v6__sticky{background:#eee8e5}

  /* The supplied mobile artwork has its own 9:16 art direction. The desktop
     rigs stay mounted in the DOM but are not painted at this breakpoint. */
  .hero-v6__scene{display:none}
  .hero-v6__mobile{
    position:absolute;
    display:block;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
    background:#eee8e5;
  }
  .hero-mobile-scene,
  .hero-mobile-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .hero-mobile-scene{
    overflow:hidden;
    backface-visibility:hidden;
    will-change:transform,opacity,filter;
  }
  .hero-mobile-scene--one{
    z-index:1;
    opacity:var(--scene1-opacity);
    filter:blur(var(--scene1-blur)) brightness(var(--scene1-brightness));
    transform-origin:54% 52.7%;
    transform:translate3d(var(--m-scene1-x),var(--m-scene1-y),0) scale(var(--m-scene1-scale));
  }
  .hero-mobile-scene--two{
    z-index:2;
    opacity:var(--scene2-opacity);
    filter:blur(var(--scene2-blur)) brightness(var(--scene2-brightness));
    transform-origin:50% 52.7%;
    transform:translate3d(var(--m-scene2-x),calc(var(--m-scene2-y) + var(--m-scene2-exit-y)),0) scale(var(--m-scene2-scale)) scale(var(--m-scene2-exit-scale));
  }
  .hero-mobile-layer{
    object-fit:cover;
    user-select:none;
    -webkit-user-drag:none;
    will-change:transform,opacity;
  }

  .hero-mobile-layer--s1-bg{z-index:1;animation:mobileBackgroundBreath 12s ease-in-out infinite alternate}
  .hero-mobile-layer--s1-ornaments{z-index:2;animation:mobileOrnamentDrift 9.5s ease-in-out infinite alternate}
  .hero-mobile-layer--s1-lower{z-index:3;animation:mobileLowerFigure 7.8s cubic-bezier(.45,0,.55,1) infinite alternate}
  .hero-mobile-layer--s1-upper{z-index:4;animation:mobileUpperFigure 7.1s cubic-bezier(.45,0,.55,1) -.6s infinite alternate}

  .hero-mobile-layer--s2-7{z-index:1}
  .hero-mobile-layer--s2-8{z-index:2;animation:mobileBackgroundBreath 15s ease-in-out infinite alternate}
  .hero-mobile-layer--s2-9{z-index:3;animation:mobileOrnamentDrift 10s ease-in-out infinite alternate}
  .hero-mobile-layer--s2-10{z-index:4;animation:mobileFloatLeft 8.8s ease-in-out infinite alternate}
  .hero-mobile-layer--s2-11{z-index:5;animation:mobileFloatRight 9.7s ease-in-out infinite alternate}
  .hero-mobile-layer--s2-12{z-index:6;opacity:var(--bottle-opacity);animation:mobileBottleOrbit 8.4s ease-in-out infinite alternate}
  .hero-mobile-layer--s2-13{z-index:7;animation:mobileOrnamentDrift 12s ease-in-out -.7s infinite alternate}
  .hero-mobile-layer--paired-top,
  .hero-mobile-layer--paired-bottom{opacity:var(--hands-opacity)}
  .hero-mobile-layer--s2-14{z-index:8}
  .hero-mobile-layer--s2-16-1{z-index:9}
  .hero-mobile-layer--s2-16-5{
    z-index:10;
    opacity:var(--brand-opacity);
    clip-path:inset(0 var(--logo-cut) 0 var(--logo-cut));
    filter:blur(var(--logo-blur));
    animation:mobileLogoFloat 7.2s ease-in-out infinite alternate;
  }
  .hero-mobile-layer--s2-16-6{z-index:11}
  .hero-mobile-layer--s2-17{z-index:12}
  .hero-mobile-layer--paired-top{animation:mobilePairedTop 7.4s cubic-bezier(.45,0,.55,1) -.35s infinite alternate}
  .hero-mobile-layer--paired-bottom{animation:mobilePairedBottom 7.9s cubic-bezier(.45,0,.55,1) -.6s infinite alternate}
  .hero-mobile-layer--s2-19{z-index:13;opacity:var(--tagline-opacity)}
  .hero-mobile-layer--s2-20{z-index:14;animation:mobileFloatLeft 10.4s ease-in-out infinite alternate}
  .hero-mobile-layer--s2-21{z-index:15;animation:mobileFloatRight 11.2s ease-in-out infinite alternate}

  .hero-mobile__chapter{
    position:absolute;
    z-index:30;
    top:92px;
    left:18px;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    color:rgba(38,36,39,.72);
    font:600 6.5px/1.25 var(--font-display);
    letter-spacing:.19em;
    text-transform:uppercase;
  }
  .hero-mobile__chapter span{
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border:1px solid rgba(46,43,47,.26);
    border-radius:50%;
    font:600 7px/1 var(--font-mono);
  }
  .hero-mobile__chapter--two{
    left:auto;
    right:18px;
    opacity:var(--chapter2-opacity);
  }
  .hero-mobile-scene--one .hero-mobile__chapter{opacity:var(--chapter1-opacity)}

  .hero-mobile__exit-fog{
    position:absolute;
    z-index:40;
    inset:-12%;
    opacity:var(--m-exit-fog);
    background:
      radial-gradient(ellipse at 18% 76%,rgba(255,255,255,.98) 0 18%,transparent 42%),
      radial-gradient(ellipse at 72% 70%,#fff 0 24%,transparent 50%),
      linear-gradient(to bottom,transparent 18%,rgba(255,255,255,.86) 58%,#fff 92%);
    filter:blur(14px);
    will-change:opacity,transform;
    transform:translate3d(0,var(--m-exit-fog-y),0) scale(var(--m-exit-fog-scale));
  }
  .hero-v6__clouds{display:none}
  .hero-v6__portal{z-index:18}

  .hero-v6__scroll-cue{left:18px;bottom:28px;font-size:7px}.hero-v6__scroll-cue i{width:78px}
  @keyframes coreScrollDot{0%{left:0;opacity:0}15%,80%{opacity:1}100%{left:69px;opacity:0}}

  @keyframes mobileBackgroundBreath{
    0%{transform:scale(1.012) translate3d(-5px,6px,0)}
    100%{transform:scale(1.035) translate3d(7px,-9px,0)}
  }
  @keyframes mobileOrnamentDrift{
    0%{transform:translate3d(-11px,9px,0) rotate(-.32deg)}
    100%{transform:translate3d(13px,-13px,0) rotate(.38deg)}
  }
  @keyframes mobileLowerFigure{
    0%{transform:translate3d(-7px,10px,0) rotate(-.18deg)}
    100%{transform:translate3d(8px,-12px,0) rotate(.22deg)}
  }
  @keyframes mobileUpperFigure{
    0%{transform:translate3d(9px,-10px,0) rotate(.22deg)}
    100%{transform:translate3d(-9px,12px,0) rotate(-.24deg)}
  }
  @keyframes mobileFloatLeft{
    0%{transform:translate3d(-10px,9px,0) rotate(-.3deg)}
    100%{transform:translate3d(11px,-13px,0) rotate(.34deg)}
  }
  @keyframes mobileFloatRight{
    0%{transform:translate3d(11px,-9px,0) rotate(.29deg)}
    100%{transform:translate3d(-10px,13px,0) rotate(-.34deg)}
  }
  @keyframes mobileBottleOrbit{
    0%{transform:translate3d(-12px,8px,0) rotate(-.48deg)}
    50%{transform:translate3d(4px,-13px,0) rotate(.14deg)}
    100%{transform:translate3d(13px,7px,0) rotate(.5deg)}
  }
  @keyframes mobilePairedTop{
    0%{transform:translate3d(9px,-8px,0) rotate(.16deg)}
    100%{transform:translate3d(-10px,11px,0) rotate(-.2deg)}
  }
  @keyframes mobilePairedBottom{
    0%{transform:translate3d(-9px,9px,0) rotate(-.17deg)}
    100%{transform:translate3d(10px,-11px,0) rotate(.2deg)}
  }
  @keyframes mobileLogoFloat{
    0%{transform:translate3d(-9px,8px,0) rotate(-.14deg) scale(.975)}
    100%{transform:translate3d(10px,-11px,0) rotate(.16deg) scale(.975)}
  }
}

@media (prefers-reduced-motion:reduce){
  .hero.hero-v6{height:100vh;height:100svh}
  .hero-v6__character,.hero-v6__layer img,.hero-v6__bottles img,.hero-v6__logo-reveal,.hero-v6__cloud-wisp::before,.hero-v6__scroll-cue b,.hero-mobile-layer{animation:none!important}
  .hero-v6__scroll-cue{display:none}
}