/* Immersive scenes, with all navigation directly over the cover. */
.hero-gallery{--cover-height:clamp(359px,calc((100svh - 83px)/2),500px);position:relative;isolation:isolate;background:#0b0617}
.hero-track{position:relative;display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hero-track::-webkit-scrollbar{display:none}
.hero-track{cursor:grab}.hero-track a,.hero-track button{cursor:pointer}
.hero-track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.hero-track:focus-visible{outline:2px solid #d4ff38;outline-offset:-3px}
.hero-panel{flex:0 0 100%;width:100%;min-width:0;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;min-height:var(--cover-height);--depth-pan:0px;--depth-x:0px;--depth-y:0px;--depth-rx:0deg;--depth-ry:0deg;--copy-x:0px;--copy-y:0px}
.hero-gallery.is-hinting .hero-panel{will-change:transform}
.hero-panel.hero{border-bottom:0}
.hero-panel.hero .hero-inner{min-height:var(--cover-height);padding:30px clamp(72px,7.8vw,150px) 66px;display:flex;align-items:center}
.hero-panel.hero .hero-copy{max-width:620px;width:52%}
.hero-panel.hero .eyebrow{font-size:.875rem;margin-bottom:12px;line-height:1.4}
.hero-panel.hero h1{font-size:clamp(2.3rem,3.7vw,3.5rem);line-height:1.02;margin-bottom:14px}
.hero-panel.hero h1 br,.hero-panel.hero .hero-description br{display:none}
.hero-panel.hero h1 em{font-size:1em;line-height:1.08}
.hero-panel.hero .hero-description{font-size:1rem;line-height:1.45;max-width:410px}
.hero-panel.hero .hero-actions{margin-top:16px;max-width:none;flex-wrap:nowrap}
.hero-panel.hero .hero-actions .button{min-width:0;min-height:48px;padding:12px 18px;font-size:.875rem}
.hero-panel.hero .hero-footnote,.hero-panel.hero .hero-bottom{display:none}
.hero-panel.hero .hero-visual{top:0;right:1%;width:54%;height:94%;max-height:480px}
.hero-panel.hero .burst{width:86px;height:86px;top:14px;right:12%}
.hero-panel.hero .handmade-label{font-size:.75rem;padding:8px 14px;bottom:15px}
.promo-slide{display:flex;--promo-accent:#ff8ddd;background:#10051e;isolation:isolate}
.promo-violet{--promo-accent:#d8b6ff}.promo-lime{--promo-accent:#d4ff38}.promo-cyan{--promo-accent:#8df7ff}.promo-candy{--promo-accent:#ff9bdf}.promo-sunset{--promo-accent:#caff79}
.promo-scene,.promo-shade{position:absolute;inset:0;pointer-events:none}
.promo-scene{z-index:-2;overflow:hidden;background:#10051e;transform:perspective(1100px) translate3d(calc(var(--depth-pan) + var(--depth-x)),var(--depth-y),0) rotateX(var(--depth-rx)) rotateY(var(--depth-ry)) scale(1.055);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.promo-scene img{display:block;width:74%;margin-left:auto;height:100%;max-width:none;object-fit:cover;object-position:60% 38%;mask-image:linear-gradient(90deg,transparent,#000 18%);user-select:none;transform:scale(1.025);transition:transform 9s ease-out}
.hero-panel.is-current .promo-scene img{transform:scale(1)}
.promo-shade{z-index:-1;background:linear-gradient(90deg,#0a0319e6 0%,#0a0319b8 25%,#0a031943 49%,transparent 73%),linear-gradient(0deg,#0903139e,transparent 28%)}
.promo-inner{position:relative;z-index:1;width:100%;max-width:1680px;margin:auto;min-height:var(--cover-height);padding:30px clamp(72px,7.8vw,150px) 66px;display:flex;align-items:center}
.promo-copy{width:100%;max-width:610px;text-shadow:0 2px 24px #08011580}
.promo-copy,.hero-panel.hero .hero-copy{transform:translate3d(calc(var(--copy-x) - var(--depth-pan) * .18),var(--copy-y),0);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.hero-panel.hero .hero-visual{transform:perspective(1100px) translate3d(calc(var(--depth-pan) + var(--depth-x)),var(--depth-y),0) rotateX(var(--depth-rx)) rotateY(var(--depth-ry));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.promo-slide:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 78% 16%,color-mix(in srgb,var(--promo-accent) 14%,transparent),transparent 57%),linear-gradient(180deg,#04010c15,transparent 30%,#04010c20);box-shadow:inset 0 18px 38px -25px #02000799,inset 0 -18px 34px -25px #020007aa}
.promo-copy h2,.hero-panel.hero h1{filter:drop-shadow(0 4px 5px #0702105c)}
.hero-track.is-dragging .promo-scene,.hero-track.is-dragging .promo-copy,.hero-track.is-dragging .hero-visual,.hero-track.is-dragging .hero-copy{transition:none}
.promo-kicker{font-size:.875rem;line-height:1.4;letter-spacing:.08em;font-weight:750;color:var(--promo-accent);margin:0 0 12px}
.promo-copy h2{font-size:clamp(2rem,3.2vw,3.1rem);line-height:1.04;letter-spacing:-.035em;font-weight:900;color:#fff;text-wrap:balance}
.promo-copy h2 em{font-style:normal;color:var(--promo-accent);font-weight:900;text-shadow:0 0 36px color-mix(in srgb,var(--promo-accent) 24%,transparent)}
.promo-description{margin:12px 0 16px;max-width:430px;font-size:1rem;line-height:1.45;color:#f0e6fa;text-wrap:pretty}
.promo-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 22px;border:0;border-radius:10px;background:var(--promo-accent);color:#190824;font-size:1rem;font-weight:750;text-shadow:none;box-shadow:0 6px 32px #04010855;transition:transform .2s,box-shadow .2s}
.promo-action:hover{transform:translateY(-2px);box-shadow:0 7px 40px color-mix(in srgb,var(--promo-accent) 30%,transparent)}
.promo-action:focus-visible,.hero-nav:focus-visible,.hero-autoplay:focus-visible{outline:3px solid #fff;outline-offset:5px}
.scene-charms .promo-scene img{object-position:72% center}
.scene-cross-quadfish .promo-scene img{object-position:70% center}
.hero-overlay-controls{position:absolute;inset:0;z-index:6;pointer-events:none}
.hero-nav{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:48px;height:64px;border:0;border-radius:50%;background:#10051c66;box-shadow:0 8px 24px #03000b38,inset 0 1px 0 #ffffff24;backdrop-filter:blur(7px);color:#fff;pointer-events:auto;transition:background .2s,color .2s}
.hero-nav svg{width:28px;height:28px;filter:drop-shadow(0 1px 4px #000)}
.hero-prev{left:clamp(8px,1.3vw,26px)}.hero-next{right:clamp(8px,1.3vw,26px)}
.hero-nav:hover{background:#10051ca6;color:#d4ff38}
.hero-status{position:absolute;bottom:17px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:14px;min-height:44px;pointer-events:auto}
.hero-counter{color:#fff;font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.08em;white-space:nowrap;text-shadow:0 1px 9px #000}
.hero-counter span{margin:0 8px;color:#c5acd9}
.hero-autoplay{display:grid;place-items:center;width:44px;height:44px;color:#e8d6f3;background:#10051c66;backdrop-filter:blur(7px);border:0;border-radius:50%;font-size:13px}
.hero-autoplay:hover,.hero-autoplay[aria-pressed=true]{color:#d4ff38;background:#10051c99}
.hero-panel:not(.is-current) .hero-art,.hero-panel:not(.is-current) .orbit{animation-play-state:paused}
@media(min-width:701px) and (max-width:1000px){.promo-inner,.hero-panel.hero .hero-inner{padding-inline:64px}.promo-copy{max-width:480px}.promo-copy h2{font-size:2.5rem}.promo-description{max-width:350px}.promo-shade{background:linear-gradient(90deg,#0b041ae6,#0b041aaf 30%,#0b041a26 85%),linear-gradient(0deg,#0903139e,transparent 30%)}.promo-scene img{object-position:63% center}.hero-panel.hero .hero-copy{width:58%;max-width:490px}}
@media(min-width:701px) and (max-width:1000px) and (orientation:portrait){
 .hero-gallery{--cover-height:min(700px,calc(var(--hero-viewport-height,100svh) - var(--hero-header-height,83px)))}
 .promo-inner{padding:200px 48px 80px;align-items:flex-end;margin:0}
 .promo-copy{max-width:610px}.promo-description{max-width:420px}
 .promo-scene img{width:100%;mask-image:none;object-position:72% 27%;transform:none!important}
 .scene-night-weaving .promo-scene img,.scene-friendship-workshop .promo-scene img{object-position:center top}
 .promo-shade{background:linear-gradient(0deg,#090313fc 0%,#090313e8 20%,#09031391 42%,#09031308 74%,transparent 100%)}
 .hero-nav{width:48px;height:56px;top:36%}.hero-prev{left:12px}.hero-next{right:12px}
}
@media(max-width:700px) and (orientation:portrait){
 .nav-wrap{height:64px;padding-inline:18px}.nav-cta{display:none}.menu-toggle{margin-left:auto;min-width:44px;min-height:44px;justify-content:center;align-items:center}
 .brand .brand-logo{width:180px}
 .hero-gallery{--cover-height:min(600px,calc(var(--hero-viewport-height,100svh) - var(--hero-header-height,65px)))}
 .promo-inner{padding:clamp(150px,26svh,210px) 22px calc(76px + env(safe-area-inset-bottom));align-items:flex-end;position:relative;z-index:1;margin:0;max-width:none}
 .promo-copy{max-width:520px}
 .promo-kicker{font-size:.875rem;letter-spacing:.045em;line-height:1.4;margin-bottom:10px;max-width:350px}
 .promo-copy h2{font-size:clamp(1.8rem,8.7vw,3rem);line-height:1.06;letter-spacing:-.035em}
 .promo-description{font-size:1rem;line-height:1.4;max-width:350px;margin:12px 0 16px}
 .promo-action{min-height:48px;padding:12px 18px;font-size:1rem;max-width:100%;text-align:center}
 .promo-scene img{width:100%;mask-image:none;object-position:72% 27%;transform:none!important}
 .promo-shade{background:linear-gradient(0deg,#090313fc 0%,#090313ed 23%,#09031394 45%,#0903130d 72%,transparent 100%)}
 .scene-night-weaving .promo-scene img,.scene-friendship-workshop .promo-scene img{object-position:center top}
 .scene-charms .promo-scene img{object-position:76% 12%}
 .scene-cross-quadfish .promo-scene img{object-position:76% 15%}
 .hero-nav{top:30%;width:44px;height:52px;background:#10051c80}
 .hero-prev{left:6px}.hero-next{right:6px}.hero-status{bottom:max(12px,env(safe-area-inset-bottom));gap:10px}
 .hero-panel.hero .hero-inner{display:flex;align-items:flex-end;padding:clamp(150px,26svh,210px) 22px calc(76px + env(safe-area-inset-bottom))}
 .hero-panel.hero .hero-inner:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,#0b0617 0%,#0b0617e8 26%,#0b061799 42%,transparent 68%)}
 .hero-panel.hero .hero-copy{max-width:none;width:100%}
 .hero-panel.hero .eyebrow{display:none}
 .hero-panel.hero h1{font-size:clamp(2rem,8.9vw,3.2rem);line-height:1.03;margin-bottom:12px}
 .hero-panel.hero h1 em{font-size:1em;line-height:1.1}
 .hero-panel.hero .hero-description{font-size:1rem;line-height:1.4;max-width:350px}
 .hero-panel.hero .hero-actions{margin-top:16px;max-width:none;flex-wrap:nowrap;gap:8px}
 .hero-panel.hero .hero-actions .button{min-width:0;width:auto;min-height:48px;flex:1;padding:11px 9px;font-size:.875rem;gap:6px}
 .hero-panel.hero .hero-visual{position:absolute;top:-10px;right:-5%;height:60%;aspect-ratio:auto;width:110%;margin:0}
 .hero-panel.hero .hero-bottom{display:none}
 .hero-panel.hero .burst{width:80px;height:80px;right:35px;top:22px}
 .hero-panel.hero .handmade-label{display:none}
}
@media(max-width:380px) and (orientation:portrait){.promo-inner,.hero-panel.hero .hero-inner{padding-inline:18px}.promo-kicker{letter-spacing:.025em}.promo-description{max-width:320px}}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){.promo-kicker,.hero-panel.hero .eyebrow{display:none}}
@media(max-width:1000px) and (max-height:560px) and (orientation:landscape){
 .nav-wrap{height:56px}.nav-cta{display:none}
 .hero-gallery{--cover-height:calc(var(--hero-viewport-height,100svh) - var(--hero-header-height,57px))}
 .promo-inner{padding:28px 72px 72px}.promo-copy{max-width:55%}.promo-copy h2{font-size:clamp(1.8rem,4vw,2.5rem)}
 .promo-kicker,.promo-description,.hero-panel.hero .eyebrow,.hero-panel.hero .hero-description{display:none}
 .promo-action{min-height:44px;margin-top:16px;padding:10px 16px;font-size:1rem}
 .hero-panel.hero .hero-inner{min-height:var(--cover-height);padding:24px 72px 72px}.hero-panel.hero .hero-copy{width:55%;max-width:55%}
 .hero-panel.hero h1{font-size:2.3rem;margin-bottom:14px}
 .hero-panel.hero .hero-actions{margin-top:0;max-width:none;flex-wrap:nowrap}.hero-panel.hero .hero-actions .button{min-width:0;font-size:.875rem;padding:10px 12px;min-height:44px}
 .hero-panel.hero .hero-visual{top:0;right:-6%;height:95%;width:60%}.hero-panel.hero .handmade-label{display:none}.hero-panel.hero .burst{width:80px;height:80px;top:8px;right:30px}
 .hero-nav{top:50%;width:48px;height:48px}.hero-prev{left:10px}.hero-next{right:10px}.hero-status{bottom:12px}
}
@media(prefers-reduced-motion:reduce){.promo-scene,.promo-scene img,.promo-copy,.hero-panel.hero .hero-copy,.hero-panel.hero .hero-visual,.promo-action,.hero-nav,.hero-autoplay{transition:none;transform:none}.hero-track{scroll-behavior:auto}}