/* ===== stage & scenes ===== */
#smooth{position:relative}
.scene{position:relative;width:100%;height:100vh;overflow:hidden}
/* one pinned canvas; product scenes stack and cross-fade */
.stage{position:relative;height:100vh;overflow:hidden}
.stage .scene{position:absolute;inset:0;height:100%}
#hero{z-index:1}
#honeydew{z-index:2}
#taro-ice{z-index:3}
#perfume-lemon{z-index:4}
.stage .product{opacity:0}

/* ===== HERO — fly through the mist ===== */
.hero{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#141821,var(--canvas))}
.hero__fog{position:absolute;inset:-20%;pointer-events:none;will-change:transform,opacity}
.hero__fog--far{background:radial-gradient(38% 34% at 50% 52%,color-mix(in srgb,var(--honeydew) 26%,transparent),transparent 70%);
  filter:blur(30px);opacity:.9}
.hero__fog--near{background:radial-gradient(46% 40% at 46% 48%,rgba(255,255,255,.10),transparent 66%),
  radial-gradient(30% 26% at 62% 60%,color-mix(in srgb,var(--honeydew) 20%,transparent),transparent 70%);
  filter:blur(46px)}
.hero__content{position:relative;z-index:2;text-align:center;padding:0 1rem}
.hero__mark{font-size:clamp(3rem,13.5vw,18rem);line-height:.92}
.hero__mark .cjk{display:inline-block}
.hero__sub{color:var(--muted);margin-top:1.1rem;font-size:clamp(1rem,2.2vw,1.5rem)}
.hero__cue{position:absolute;left:50%;bottom:clamp(2rem,5vh,4rem);transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--muted);
  font-family:var(--font-display);letter-spacing:.28em;text-transform:uppercase;font-size:.7rem}
.hero__cue i{width:1px;height:2.4rem;background:linear-gradient(var(--honeydew),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ===== PRODUCT SCENES ===== */
.product[data-accent="honeydew"]{--c:var(--honeydew)}
.product[data-accent="taro"]{--c:var(--taro)}
.product[data-accent="lemon"]{--c:var(--lemon)}

.product{display:flex;align-items:center}
.product__media{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform;background:#05060a}
/* a blurred, dimmed copy of the poster fills the letterbox/pillarbox bars so the
   edges read as soft mist instead of a hard black panel (esp. the squarish lemon) */
.product__media::before{content:'';position:absolute;inset:0;z-index:0;
  background:var(--fill) center/cover no-repeat;
  filter:blur(38px) brightness(.5) saturate(1.15);transform:scale(1.22)}
.product[data-accent="honeydew"] .product__media{--fill:url(../assets/poster/honeydew.jpg?v=8)}
.product[data-accent="taro"] .product__media{--fill:url(../assets/poster/taro-ice.jpg?v=8)}
.product[data-accent="lemon"] .product__media{--fill:url(../assets/poster/perfume-lemon.jpg?v=8)}
/* Perfume Lemon is near-square (1228x1080), so it pillarboxes hard in a wide viewport.
   Its right side is a product box on black, so the blurred-poster fill rendered as a
   dark, textured slab with a hard seam — the "right half is cropped / black" the user saw.
   Override it with the flat mist-dark canvas (same tone as the box's own background and the
   copy scrim) so the contained video melts into the dark instead of hitting a visible edge. */
.product[data-accent="lemon"] .product__media::before{
  background:radial-gradient(78% 76% at 50% 50%,#0b0d12,#05060a 72%);
  filter:none;transform:none}
/* contain: never crop into / zoom the product; the blurred fill covers the bars */
.product__media video{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center center;display:block}
/* legibility scrim on the copy side + garble scrim at the base */
.product__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,#05060a 13%,color-mix(in srgb,#05060a 85%,transparent) 28%,color-mix(in srgb,#05060a 32%,transparent) 42%,transparent 55%)}
.product[data-side="left"] .product__scrim{background:
  linear-gradient(to right,rgba(5,6,10,.92),color-mix(in srgb,#05060a 55%,transparent) 34%,transparent 62%),
  linear-gradient(to top,#05060a 13%,color-mix(in srgb,#05060a 85%,transparent) 28%,color-mix(in srgb,#05060a 32%,transparent) 42%,transparent 55%)}
.product[data-side="right"] .product__scrim{background:
  linear-gradient(to left,rgba(5,6,10,.92),color-mix(in srgb,#05060a 55%,transparent) 34%,transparent 62%),
  linear-gradient(to top,#05060a 13%,color-mix(in srgb,#05060a 85%,transparent) 28%,color-mix(in srgb,#05060a 32%,transparent) 42%,transparent 55%)}

/* mist transition overlay (driven by JS) */
.product__fog{position:absolute;inset:-10%;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--c) 55%,#0b0d12),#05060a 78%);
  filter:blur(8px);will-change:opacity,transform}

/* copy */
.product__copy{position:relative;z-index:3;width:min(46rem,50%)}
.product[data-side="left"] .product__copy{margin-right:auto;padding-left:clamp(1.5rem,6vw,7rem);text-align:left}
.product[data-side="right"] .product__copy{margin-left:auto;padding-right:clamp(1.5rem,6vw,7rem);text-align:right}
.product__no{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3.5rem);
  color:var(--c);opacity:.5;line-height:1;margin-bottom:.6rem}
.product__eyebrow{color:var(--c);font-family:var(--font-display);letter-spacing:.3em;
  text-transform:uppercase;font-size:.78rem;margin-bottom:1rem}
.product__title{font-family:var(--font-display);font-weight:700;line-height:.9;
  font-size:clamp(2.6rem,7.5vw,9rem);letter-spacing:-.01em}
.product__title span{display:block;overflow:hidden}
.product__tag{color:var(--c);margin-top:1rem;font-size:clamp(1.1rem,2vw,1.6rem)}
.product__desc{color:#cfd2d8;margin-top:1.3rem;max-width:42ch;line-height:1.7;font-size:clamp(.98rem,1.1vw,1.15rem)}
.product[data-side="right"] .product__desc{margin-left:auto}
.product__spec{margin-top:1.6rem;color:var(--text);opacity:.7;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase}

/* ===== PROGRESS RAIL ===== */
.progress-rail{position:fixed;right:clamp(1rem,3vw,2.4rem);top:50%;transform:translateY(-50%);
  z-index:30;display:flex;flex-direction:column;gap:.9rem}
.progress-rail button{width:.7rem;height:.7rem;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:#ffffff33;transition:background .3s,transform .3s}
.progress-rail button:hover{background:#ffffff66}
.progress-rail button.active{background:var(--accent);transform:scale(1.55);
  box-shadow:0 0 0 .28rem color-mix(in srgb,var(--accent) 22%,transparent)}

/* ===== OUTRO ===== */
.outro{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#15171c,var(--canvas))}
.outro__mist{position:absolute;inset:-15%;pointer-events:none;
  background:radial-gradient(45% 40% at 50% 55%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);filter:blur(30px)}
.outro__inner{position:relative;z-index:1;text-align:center;padding:2rem}
.outro__eyebrow{font-family:var(--font-display);color:var(--accent);letter-spacing:.3em;
  text-transform:uppercase;font-size:.85rem;margin-bottom:1.25rem}
.outro__inner h2{font-family:var(--font-display);font-size:clamp(2.2rem,7vw,6rem);line-height:1;margin-bottom:2.5rem}

/* ===== fallback: mobile / reduced-motion — no pin, stacked, videos autoplay ===== */
.no-cinematic .stage{height:auto;overflow:visible}
.no-cinematic .stage .scene{position:relative;opacity:1!important;z-index:auto}
.no-cinematic .scene{height:auto;min-height:100vh}
.no-cinematic .product{flex-direction:column;justify-content:center;gap:1.5rem;padding:14vh clamp(1.25rem,6vw,3rem)}
.no-cinematic .product__media{position:relative;height:auto;aspect-ratio:16/10;border-radius:1rem;overflow:hidden}
.no-cinematic .product__media video{object-fit:cover}
.no-cinematic .product__copy{width:100%!important;margin:0!important;padding:0!important;text-align:left!important}
.no-cinematic .product[data-side="right"] .product__copy{text-align:left!important}
.no-cinematic .product[data-side="right"] .product__desc{margin-left:0!important}
.no-cinematic .product__scrim{background:linear-gradient(to top,#05060a 8%,color-mix(in srgb,#05060a 70%,transparent) 22%,transparent 45%)!important}
.no-cinematic .product__fog{display:none}
.no-cinematic .hero{height:100vh}
@media (max-width:860px){.progress-rail{display:none}}
@media (prefers-reduced-motion:reduce){.hero__cue i{animation:none}}