/* ===================== HERO ===================== */
.hero{ position:relative; overflow:hidden; padding-top:clamp(40px,6vw,72px); }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.hero__glow.a{ width:520px; height:520px; background:radial-gradient(circle, rgba(124,63,196,.28), transparent 70%); top:-120px; right:-80px; }
.hero__glow.b{ width:440px; height:440px; background:radial-gradient(circle, rgba(31,169,155,.22), transparent 70%); bottom:-140px; left:-100px; }
.hero__glow.c{ width:380px; height:380px; background:radial-gradient(circle, rgba(124,63,196,.16), transparent 70%); top:30%; left:42%; opacity:0; }

/* --- Aurora: glows slowly drift + breathe --- */
.hero__bg--aurora .hero__glow.c{ opacity:.5; }
.hero__bg--aurora .hero__glow.a{ animation:aurA 19s var(--ease) infinite; }
.hero__bg--aurora .hero__glow.b{ animation:aurB 23s var(--ease) infinite; }
.hero__bg--aurora .hero__glow.c{ animation:aurC 17s var(--ease) infinite; }
@keyframes aurA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-60px,40px) scale(1.18); } }
@keyframes aurB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(50px,-30px) scale(1.22); } }
@keyframes aurC{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.4; } 50%{ transform:translate(-40px,-30px) scale(1.3); opacity:.62; } }

/* --- Reactive themed icon field --- */
.hero__icons{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hi{ position:absolute; transform:translate(-50%,-50%) scale(calc(1 + var(--n,0)*0.45));
  color:var(--faint); opacity:calc(0.22 + var(--n,0)*0.78);
  transition:transform .22s var(--ease-out), opacity .25s var(--ease), color .25s var(--ease); will-change:transform; }
.hi svg{ display:block; }
.hi--p{ color:color-mix(in srgb, var(--faint), var(--purple) calc(var(--n,0)*100%)); }
.hi--t{ color:color-mix(in srgb, var(--faint), var(--teal) calc(var(--n,0)*100%)); }
@media (max-width:920px){ .hi{ opacity:calc(0.16 + var(--n,0)*0.6); } .hi:nth-child(odd){ display:none; } }

/* --- Drifting film frames --- */
.hero__frames{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hframe{ position:absolute; border-radius:7px; opacity:.55;
  background:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(124,63,196,.14) 7px 13px) left/9px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(124,63,196,.14) 7px 13px) right/9px 100% no-repeat,
    rgba(124,63,196,.045);
  border:1px solid rgba(124,63,196,.12); will-change:transform; }
.hframe--1{ width:128px; height:96px; top:12%; left:5%;  transform:rotate(-8deg); animation:fdrift 17s ease-in-out infinite; }
.hframe--2{ width:96px;  height:72px; top:60%; left:11%; transform:rotate(6deg);  animation:fdrift 21s ease-in-out infinite 1.5s; }
.hframe--3{ width:150px; height:112px;top:6%;  left:70%; transform:rotate(7deg);  animation:fdrift 19s ease-in-out infinite .6s; border-color:rgba(31,169,155,.14); background:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(31,169,155,.14) 7px 13px) left/9px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(31,169,155,.14) 7px 13px) right/9px 100% no-repeat,
    rgba(31,169,155,.04); }
.hframe--4{ width:84px;  height:64px; top:80%; left:60%; transform:rotate(-5deg); animation:fdrift 23s ease-in-out infinite 2s; }
.hframe--5{ width:110px; height:84px; top:42%; left:88%; transform:rotate(-9deg); animation:fdrift 18s ease-in-out infinite .9s; }
.hframe--6{ width:72px;  height:56px; top:30%; left:32%; transform:rotate(10deg); animation:fdrift 20s ease-in-out infinite 1.2s; }
@keyframes fdrift{ 0%,100%{ translate:0 0; } 33%{ translate:18px -26px; } 66%{ translate:-14px 14px; } }
@media (max-width:920px){ .hframe--4, .hframe--6{ display:none; } }

/* --- Film grain (all backdrops) --- */
.hero__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion:reduce){ .hero__glow, .hframe{ animation:none !important; } }

.hero__in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center;
  padding-block:clamp(36px,5vw,72px) clamp(56px,7vw,96px); }
@media (max-width:920px){ .hero__in{ grid-template-columns:1fr; gap:36px; } }

.hero__title{ font-size:clamp(40px,6vw,76px); line-height:1.0; margin:0; letter-spacing:-.03em; }
.hero__title .em{ color:var(--purple); position:relative; white-space:nowrap; }
.hero__title .em svg{ position:absolute; left:0; bottom:-.12em; width:100%; height:.32em; color:var(--teal); overflow:visible; }
.hero__title .em path{ stroke:currentColor; stroke-width:5; fill:none; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; pathLength:1; animation:draw 1s .5s var(--ease-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.hero__sub{ font-size:clamp(17px,1.7vw,20px); color:var(--ink-soft); margin-top:22px; max-width:46ch; line-height:1.55; }
.hero__cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

/* stage shared */
.hero__stage{ position:relative; aspect-ratio:1/1; width:100%; max-width:520px; margin-inline:auto; }

/* --- Concept A: live polaroid cluster (parallax to cursor) --- */
.cstack{ position:absolute; inset:0; perspective:1200px; }
.cstack__card{ position:absolute; width:46%; transition:transform .5s var(--ease-out), box-shadow .4s; transform-style:preserve-3d; }
.cstack__card:nth-child(1){ top:4%; left:8%; --rot:-9deg; z-index:3; }
.cstack__card:nth-child(2){ top:0%; right:6%; --rot:7deg; z-index:4; width:50%; }
.cstack__card:nth-child(3){ bottom:6%; left:4%; --rot:5deg; z-index:5; width:44%; }
.cstack__card:nth-child(4){ bottom:2%; right:10%; --rot:-6deg; z-index:2; width:42%; }
.cstack__card .sp-polaroid{ transform:rotate(var(--rot)); transition:transform .4s var(--ease-out); }
.cstack__card:hover{ z-index:9 !important; }
.cstack__card:hover .sp-polaroid{ transform:rotate(0deg) scale(1.06); box-shadow:var(--sh-4); }
.cstack__flash{ position:absolute; inset:0; background:radial-gradient(circle at 60% 40%, rgba(124,63,196,.1), transparent 60%); border-radius:50%; }

/* --- Concept B: shutter booth --- */
.booth{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.booth__screen{ position:relative; width:84%; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-4); background:#000; border:6px solid #fff; }
.booth__screen img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity .5s; }
.booth__screen img.is-on{ opacity:1; }
.booth__flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:5; }
.booth__flash.fire{ animation:flashfire .55s ease-out; }
@keyframes flashfire{ 0%{ opacity:0;} 8%{ opacity:.95;} 100%{ opacity:0;} }
.booth__count{ position:absolute; inset:0; z-index:6; display:grid; place-items:center; font-family:var(--font-head); font-size:120px; font-weight:700; color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.5); pointer-events:none; }
.booth__hint{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:6; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.35); padding:5px 12px; border-radius:var(--r-pill); backdrop-filter:blur(6px); }
.booth__btn{ margin-top:20px; width:74px; height:74px; border-radius:50%; border:5px solid #fff; background:var(--purple); box-shadow:var(--sh-accent); display:grid; place-items:center; transition:transform .2s var(--ease-out); position:relative; z-index:7; }
.booth__btn:hover{ transform:scale(1.07); } .booth__btn:active{ transform:scale(.94); }
.booth__btn span{ width:54px; height:54px; border-radius:50%; background:#fff; display:block; }
.booth__strip{ position:absolute; right:-6px; bottom:60px; display:flex; flex-direction:column; gap:5px; background:#fff; padding:6px; border-radius:6px; box-shadow:var(--sh-3); transform:rotate(5deg); z-index:8; }
.booth__strip .sl{ width:54px; height:42px; border-radius:2px; background:var(--surface-3); overflow:hidden; transform:scale(0); transition:transform .4s var(--ease-out); }
.booth__strip .sl.show{ transform:scale(1); }
.booth__strip .sl img{ width:100%; height:100%; object-fit:cover; }

/* --- Concept C: drag props --- */
.props{ position:absolute; inset:0; }
.props__photo{ position:absolute; inset:7% 7% 7% 7%; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-4); border:6px solid #fff; }
.props__photo img{ width:100%; height:100%; object-fit:cover; }
.props__tray{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); display:flex; gap:10px; background:var(--surface); padding:10px 14px; border-radius:var(--r); box-shadow:var(--sh-3); z-index:20; }
.props__tray .pr{ width:46px; height:46px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; font-size:24px; cursor:grab; transition:transform .2s var(--ease-out); user-select:none; }
.props__tray .pr:hover{ transform:translateY(-4px) scale(1.1); background:var(--purple-50); }
.props__drop{ position:absolute; font-size:46px; cursor:grab; user-select:none; z-index:30; filter:drop-shadow(0 6px 12px rgba(0,0,0,.25)); touch-action:none; }
.props__hint{ position:absolute; top:11%; left:50%; transform:translateX(-50%); z-index:25; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.32); padding:5px 12px; border-radius:var(--r-pill); backdrop-filter:blur(6px); pointer-events:none; }

/* floating tiny tag on stage */
.hero__tag{ position:absolute; z-index:10; background:var(--surface); border-radius:var(--r); padding:8px 13px; box-shadow:var(--sh-3); font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px; border:1px solid var(--line-soft); }
.hero__tag svg{ color:var(--purple); font-size:16px; }
.hero__tag.t1{ top:2%; left:-4%; animation:float1 5s ease-in-out infinite; }
.hero__tag.t2{ bottom:14%; right:-6%; animation:float2 6s ease-in-out infinite; }
.hero__tag.t3{ bottom:-3%; left:6%; animation:float1 7s ease-in-out infinite 1s; }
.hero__tag.t3 svg{ color:var(--teal); }
.hero__tag .tl{ color:var(--teal); }
@keyframes float1{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes float2{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(10px);} }
@media (max-width:920px){ .hero__tag.t1{ left:2%; } .hero__tag.t2{ right:2%; } .hero__tag.t3{ left:2%; } }