/* ───────── Divya Creation ───────── */
:root{
  --pink:#e0267f; --pink-d:#9b2457; --gold:#d8b062; --teal:#2fa3b8;
  --f-display:'Italiana','Cormorant Garamond',serif;
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-sans:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1240px;
}
/* night = default */
:root{color-scheme:dark;
  --bg:#150d0a; --bg2:#1d120d; --card:#241610; --ink:#f3ebe0; --muted:#b8a899;
  --line:rgba(243,235,224,.14); --accent:#e8b4c8; --gold-i:#e2bd72; --shadow:0 30px 60px -20px rgba(0,0,0,.7);
  --grain:.05;
}
html[data-mode="day"]{color-scheme:light;
  --bg:#ebe6df; --bg2:#e2dbd1; --card:#f5f1ec; --ink:#33241b; --muted:#6b5d52;
  --line:rgba(51,36,27,.16); --accent:#9b2457; --gold-i:#9c7424; --shadow:0 30px 60px -28px rgba(70,40,20,.45);
  --grain:.08;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--f-sans);overflow-x:hidden;transition:background .9s var(--ease),color .9s var(--ease)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:var(--grain);
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");mix-blend-mode:overlay}
img{display:block;max-width:100%}
a{color:inherit}
b{font-weight:500}
.skip{position:fixed;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;z-index:200}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
section{position:relative}

/* type */
.h2{font:400 clamp(2.1rem,5vw,4.2rem)/1.04 var(--f-display);text-transform:uppercase;letter-spacing:.015em}
.h2 em,.display em{line-height:.8;font:italic 500 1.05em/.8 var(--f-serif);text-transform:none;color:var(--accent);letter-spacing:0}
.eyebrow{font:500 .74rem/1 var(--f-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-i);display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.lede2{max-width:56ch;color:var(--muted);font-size:1.08rem;margin-top:20px}
.big{font:400 clamp(1.25rem,2.1vw,1.7rem)/1.45 var(--f-serif)}
.mini{font-size:.85rem;color:var(--muted);letter-spacing:.04em}
p+p{margin-top:1em}
.sec-head{margin-bottom:clamp(30px,5vw,56px)}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* buttons */
.btn{display:inline-flex;text-align:center;align-items:center;gap:10px;padding:15px 28px;border-radius:99px;background:var(--pink);color:#fff;text-decoration:none;font:500 .92rem var(--f-sans);letter-spacing:.06em;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s,background .3s;box-shadow:0 12px 30px -12px rgba(224,38,127,.7)}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 36px -12px rgba(224,38,127,.8)}
.btn-sm{padding:10px 18px;font-size:.8rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--line);box-shadow:none}
.btn[aria-pressed="false"]{opacity:.6}

/* progress + cursor */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--gold));box-shadow:0 0 12px var(--gold)}
.flame-cursor{position:fixed;left:0;top:0;width:34px;height:52px;pointer-events:none;z-index:110;transform:translate(-100px,-100px);opacity:0;transition:opacity .4s;mix-blend-mode:screen;filter:drop-shadow(0 0 12px #ff9a3c)}
.flame-cursor svg{width:100%;height:100%;animation:flick .18s infinite alternate}
.flame-cursor.on{opacity:1}
html[data-mode="day"] .flame-cursor{display:none}
@keyframes flick{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.93,1.07) rotate(3deg)}}
@media (hover:none),(pointer:coarse){.flame-cursor{display:none}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(14px + env(safe-area-inset-top,0px)) clamp(16px,3vw,40px) 14px;transition:background .5s,backdrop-filter .5s,padding .4s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);opacity:0;transition:opacity .5s}
.nav.stuck::before{opacity:1}
.nav.stuck{padding-block:calc(9px + env(safe-area-inset-top,0px)) 9px}
.brand{white-space:nowrap;display:flex;align-items:center;gap:12px;text-decoration:none;font:400 1.25rem var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.brand em{font:italic 500 1.2rem var(--f-serif);text-transform:none;color:var(--accent)}
.brand-bf{width:38px;height:32px}
.links{display:flex;gap:clamp(12px,1.8vw,28px)}
.links a{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;position:relative;padding:6px 0;opacity:.85}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.links a:hover::after,.links a.on::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:12px}
.theme{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.theme svg{width:20px;height:20px;fill:currentColor}
html:not([data-mode="day"]) .theme .sun,html[data-mode="day"] .theme .moon{display:none}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .35s}
.burger i:first-child{top:16px}.burger i:last-child{top:23px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:1180px){
  .burger{display:block}
  .nav-actions .btn{display:none}
  .brand{font-size:1.02rem;gap:9px}.brand em{font-size:1.05rem}.brand-bf{width:32px;height:28px}
  .links{position:fixed;inset:0;height:100dvh;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:26px;transform:translateY(-100%);transition:transform .6s var(--ease);z-index:-1}
  .links a{font:400 2rem var(--f-display);letter-spacing:.1em}
  .links.open{transform:none}
  .links{visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}.links.open{visibility:visible;transition:transform .6s var(--ease)}
}

/* ───────── HERO ───────── */
.hero{--mx:50%;--my:42%;--r:300px;position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 100%,#2b160d 0%,#150d0a 62%)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(110% 85% at 50% 25%,#faf6f0,#e9e1d6);opacity:0;transition:opacity 1.6s var(--ease)}
.hero.lit::before{opacity:1}
.embers{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.collage{position:absolute;inset:0;z-index:1;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.78) 38%,transparent 100%),linear-gradient(rgba(0,0,0,.09),rgba(0,0,0,.09));
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.78) 38%,transparent 100%),linear-gradient(rgba(0,0,0,.09),rgba(0,0,0,.09))}
.cl{position:absolute;object-fit:cover;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.5);will-change:transform;transform:translate3d(calc(var(--px,0)*var(--k,1)*1px),calc(var(--py,0)*var(--k,1)*1px),0) rotate(var(--rot,0deg))}
.cl.a{left:3%;top:12%;width:19vw;aspect-ratio:1.1;--rot:-5deg;--k:-14}
.cl.b{left:21%;top:58%;width:16vw;aspect-ratio:1.5;--rot:3deg;--k:20}
.cl.c{left:36%;top:4%;width:13vw;aspect-ratio:.78;--rot:2deg;--k:-26}
.cl.d{right:24%;top:10%;width:16vw;aspect-ratio:1;--rot:-4deg;--k:16;border-radius:50%}
.cl.e{right:3%;top:8%;width:15vw;aspect-ratio:.9;--rot:5deg;--k:-20}
.cl.f{right:6%;top:46%;width:17vw;aspect-ratio:1;--rot:-3deg;--k:24;border-radius:50%}
.cl.g{left:3%;top:50%;width:16vw;aspect-ratio:1;--rot:6deg;--k:-18}
.cl.h{right:26%;top:60%;width:13vw;aspect-ratio:.9;--rot:-6deg;--k:30}
.cl.i{left:40%;top:70%;width:16vw;aspect-ratio:1.1;--rot:4deg;--k:-12;border-radius:50%}
.cl.j{left:19%;top:3%;width:12vw;aspect-ratio:1;--rot:7deg;--k:22;border-radius:50%}
.cl.k{right:15%;top:74%;width:12vw;aspect-ratio:1;--rot:-8deg;--k:-16}
.cl.l{left:2%;top:78%;width:15vw;aspect-ratio:1.2;--rot:3deg;--k:14}
.glow{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--r)*1.15) at var(--mx) var(--my),rgba(255,176,84,.30),rgba(255,120,40,.10) 45%,transparent 70%)}
.veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(90% 80% at 50% 45%,transparent 30%,rgba(10,5,3,.55)),linear-gradient(180deg,rgba(21,13,10,.25),transparent 25%,transparent 70%,var(--bg));transition:background 1.6s}
.hero-inner{position:relative;z-index:5;text-align:center;padding:clamp(100px,16vh,150px) 20px 100px;max-width:980px;color:#f3ebe0;transition:color 1.2s}
.hero-bf{width:clamp(70px,9vw,104px);height:clamp(60px,8vw,88px);margin:0 auto 24px;filter:drop-shadow(0 0 22px rgba(224,38,127,.55));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.hero .eyebrow{justify-content:center;color:#e2bd72}
.hero .eyebrow::before{display:none}
.display{font:400 clamp(2.9rem,10.4vw,9rem)/.94 var(--f-display);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 4px 40px rgba(0,0,0,.45)}
.display .ln{display:block}
.display em{color:#ff8fc0;font-size:1.02em}
.display .ch{display:inline-block;opacity:0;transform:translateY(.4em) rotate(4deg)}
html.ready .display .ch{animation:chIn 1.1s var(--ease) forwards;animation-delay:calc(var(--i)*38ms + .2s)}
.display .sp{display:inline-block;width:.28em}
@keyframes chIn{to{opacity:1;transform:none}}
.lede{max-width:46ch;margin:28px auto 34px;font:400 clamp(1.1rem,1.8vw,1.35rem)/1.5 var(--f-serif);font-style:italic;color:#e8dccb;opacity:0}
html.ready .lede{animation:fade 1.2s 1.1s forwards}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;opacity:0}
html.ready .hero-cta{animation:fade 1.2s 1.4s forwards}
@keyframes fade{to{opacity:1}}
.hero .btn-ghost{color:#f3ebe0;border-color:rgba(243,235,224,.3)}
.btn-flame{background:linear-gradient(135deg,#ff7a2f,#e0267f);box-shadow:0 0 0 0 rgba(255,140,60,.6),0 14px 34px -10px rgba(255,100,40,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 18px rgba(255,140,60,0),0 14px 34px -10px rgba(255,100,40,.7)}100%{box-shadow:0 0 0 0 rgba(255,140,60,0)}}
.wick{width:10px;height:18px;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:linear-gradient(#fff6c8,#ffb347);box-shadow:0 0 12px #ffb347;animation:flick .2s infinite alternate}
.hint{margin-top:34px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:#b8a899;opacity:0;display:inline-flex;align-items:center;gap:10px}
.hint .dot{width:7px;height:7px;border-radius:50%;background:#ffb347;box-shadow:0 0 10px #ffb347;animation:flick .5s infinite alternate}
html.ready .hint{animation:fade 1.2s 1.9s forwards}
.scroll-cue{position:absolute;bottom:26px;left:50%;width:26px;height:44px;border:1px solid rgba(243,235,224,.4);border-radius:20px;z-index:6;transform:translateX(-50%)}
.scroll-cue i{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:3px;background:#f3ebe0;animation:cue 1.8s infinite}
@keyframes cue{60%{transform:translateY(16px);opacity:0}}
/* lit state */
.hero.lit .veil{background:radial-gradient(60% 46% at 50% 46%,rgba(246,241,234,.86),rgba(246,241,234,.5) 70%,transparent),linear-gradient(180deg,rgba(235,230,223,.35),transparent 30%,transparent 70%,var(--bg))}
.hero.lit .cl{box-shadow:0 18px 40px -12px rgba(70,40,20,.45)}
.hero.lit .hero-inner{color:#33241b}
.hero.lit .display{text-shadow:none}
.hero.lit .display em{color:#9b2457}
.hero.lit .lede{color:#4a392d}
.hero.lit .eyebrow{color:#8a6414}
.hero.lit .hint{color:#6b5d52}
.hero.lit .btn-ghost{color:#33241b;border-color:rgba(51,36,27,.3)}
.hero.lit .scroll-cue{border-color:rgba(51,36,27,.4)}.hero.lit .scroll-cue i{background:#33241b}
.hero.lit .glow{opacity:0;transition:opacity 1s}
.hero.lit .embers{opacity:.4}
.hero.lit .wick{animation:flick .2s infinite alternate}
@media (max-width:760px){.cl{opacity:.9}.cl.a{width:34vw}.cl.d,.cl.f{width:28vw}.cl.b,.cl.e,.cl.h,.cl.k{width:26vw}.cl.c,.cl.g,.cl.i,.cl.j,.cl.l{width:24vw}}

/* ───────── MARQUEE ───────── */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;background:var(--bg2)}
.mq{display:flex;gap:clamp(20px,3vw,44px);width:max-content;animation:mq 38s linear infinite;font:400 clamp(1.6rem,3.4vw,2.6rem) var(--f-display);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.mq b{color:var(--pink);font-size:.7em;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}

/* ───────── STORY ───────── */
.story{padding:clamp(70px,11vw,150px) 0}
.story-grid{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(30px,6vw,90px);align-items:center}
.founder{position:relative;max-width:440px;margin-inline:auto}
.arch{border-radius:999px 999px 24px 24px;overflow:hidden;aspect-ratio:3/4.1;box-shadow:var(--shadow);border:1px solid var(--line)}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.founder:hover .arch img{transform:scale(1)}
.orbit{position:absolute;width:150px;right:-50px;bottom:60px;animation:spin 24s linear infinite;color:var(--gold-i)}
.orbit text{font:500 11.4px var(--f-sans);letter-spacing:.17em;text-transform:uppercase;fill:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}
.founder figcaption{margin-top:18px;font:400 1.5rem var(--f-display);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.founder figcaption span{display:block;font:400 .75rem var(--f-sans);letter-spacing:.3em;color:var(--muted)}
.story-copy .h2{margin-bottom:26px}
.story-copy p{color:var(--muted)}
.story-copy p.big{color:var(--ink);margin-bottom:18px}
.story-copy p b{color:var(--ink)}
.stats{list-style:none;display:flex;gap:clamp(18px,4vw,50px);margin-top:36px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap}
.stats b{display:block;font:400 clamp(2.4rem,5vw,3.6rem)/1 var(--f-display);color:var(--accent)}
.stats span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.orbit{right:0;width:112px}}

/* ───────── GUIDE ───────── */
.guide{padding:clamp(60px,9vw,120px) 0;background:var(--bg2);border-block:1px solid var(--line);overflow:hidden}
.guide-head{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-bottom:clamp(36px,5vw,64px)}
.mandala-sm{width:clamp(90px,14vw,170px);flex:none;color:var(--gold-i);animation:spin 60s linear infinite}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px)}
.vm article{padding-top:22px;border-top:1px solid var(--line)}
.vm h3{font:400 1.8rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:14px}
.vm h3 i{width:22px;height:22px;border-radius:50%;background:var(--pink);box-shadow:0 0 18px var(--pink)}
.vm p{font:italic 400 clamp(1.15rem,1.7vw,1.4rem)/1.55 var(--f-serif);color:var(--muted)}
.values{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(44px,6vw,80px);border-top:1px solid var(--line)}
.values li{padding:28px 26px 30px 0;border-bottom:1px solid var(--line);position:relative;transition:background .5s}
.values li:not(:nth-child(3n)){border-right:1px solid var(--line);padding-right:26px}
.values li:not(:nth-child(3n+1)){padding-left:26px}
.values li::before{content:"";position:absolute;inset:0;background:radial-gradient(200px 160px at var(--x,50%) var(--y,0%),color-mix(in srgb,var(--gold) 22%,transparent),transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.values li:hover::before{opacity:1}
.values span{font:400 .9rem var(--f-display);color:var(--gold-i);letter-spacing:.2em}
.values h4{font:400 1.45rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.05em;margin:8px 0 8px}
.values p{color:var(--muted);font-size:.96rem;margin:0}
@media (max-width:860px){.vm{grid-template-columns:1fr}.values{grid-template-columns:1fr 1fr}.values li{border-right:0!important;padding:24px 0!important}}
@media (max-width:520px){.values{grid-template-columns:1fr}}

/* ───────── ATLAS ───────── */
.atlas-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;background:var(--bg)}
.atlas-top{display:flex;justify-content:space-between;align-items:center;padding:86px clamp(24px,6vw,100px) 0}
.atlas-top .eyebrow{margin:0}
.atlas-count{font:400 1.1rem var(--f-display);letter-spacing:.15em}
.atlas-count b{font-size:2rem;color:var(--accent);font-weight:400}
.atlas-count span{color:var(--muted)}
.atlas-track{display:flex;flex:1;min-height:0;will-change:transform}
.panel{flex:0 0 100vw;display:grid;grid-template-columns:minmax(300px,.78fr) 1.22fr;gap:clamp(24px,4vw,70px);align-items:center;padding:0 clamp(24px,6vw,100px);position:relative}
.panel::before{content:"";position:absolute;right:0;top:50%;width:70vh;height:70vh;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,var(--tint),transparent 68%);opacity:.18;pointer-events:none}
html[data-mode="day"] .panel::before{opacity:.5}
.p-copy{position:relative}
.p-copy .num{font:italic 400 clamp(4rem,9vw,7.5rem)/1 var(--f-serif);color:transparent;-webkit-text-stroke:1px var(--gold-i);display:block;margin-bottom:-.15em;opacity:.7}
.p-copy .h2{margin-bottom:20px;font-size:clamp(2.4rem,4.6vw,4rem)}
.p-copy p{color:var(--muted);max-width:44ch}
.p-copy p b{color:var(--ink)}
.p-copy blockquote{margin-top:20px;font:italic 400 1.3rem/1.45 var(--f-serif);color:var(--accent);border-left:2px solid var(--gold);padding-left:18px;max-width:34ch}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.tags i{font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:7px 14px;border-radius:99px;color:var(--ink)}
.p-art{position:relative;height:min(64svh,600px);width:100%}
.p-art img{position:absolute;object-fit:cover;box-shadow:var(--shadow);transition:transform .8s var(--ease)}
.p-art img:hover{transform:scale(1.04) rotate(0)!important;z-index:9}
.shape-arch{border-radius:999px 999px 16px 16px}
.shape-circle{border-radius:50%;border:5px solid color-mix(in srgb,var(--ink) 92%,transparent)}
.shape-polaroid{background:#fbf8f3;padding:9px 9px 36px;border-radius:2px}
.shape-frame{border:9px solid #fbf8f3;outline:1px solid var(--gold);outline-offset:-1px;border-radius:2px;background:#fbf8f3}
.shape-wide{border-radius:16px}
.art-candles .a1{left:0;top:10%;width:34%;aspect-ratio:3/4.2}
.art-candles .a2{left:35%;top:0;width:29%;aspect-ratio:1}
.art-candles .a3{left:63%;top:16%;width:34%;aspect-ratio:3/4;transform:rotate(4deg)}
.art-candles .a4{left:31%;top:46%;width:33%;aspect-ratio:1;transform:rotate(-5deg)}
.art-festive .a1{left:0;top:6%;width:36%;aspect-ratio:3/4.1}
.art-festive .a2{left:37%;top:0;width:27%;aspect-ratio:1}
.art-festive .a3{left:62%;top:8%;width:36%;aspect-ratio:1.05;transform:rotate(4deg)}
.art-festive .a4{left:36%;top:44%;width:42%;aspect-ratio:1.6;transform:rotate(-3deg)}
.art-cast .a1{left:2%;top:0;width:44%;aspect-ratio:2.2/1;transform:rotate(-2deg)}
.art-cast .a2{left:50%;top:6%;width:38%;aspect-ratio:3/4;transform:rotate(3deg)}
.art-cast .a3{left:12%;top:36%;width:36%;aspect-ratio:.9;transform:rotate(-3deg)}
.gleam{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,225,150,.35) 50%,transparent 60%);background-size:250% 100%;animation:gleam 4.5s infinite;mix-blend-mode:soft-light}
@keyframes gleam{from{background-position:150% 0}to{background-position:-50% 0}}
.art-tex .a1{left:30%;top:0;width:25%;aspect-ratio:.76;transform:rotate(2deg)}
.art-tex .a2{left:0;top:22%;width:32%;aspect-ratio:1;transform:rotate(-3deg)}
.art-tex .a3{left:66%;top:6%;width:30%;aspect-ratio:.8;transform:rotate(3deg)}
.art-tex .a4{left:40%;top:36%;width:30%;aspect-ratio:.8;transform:rotate(-2deg)}
.art-lippan .mandala-lg{position:absolute;right:0;top:-2%;width:min(60vh,520px);color:var(--pink);opacity:.5;cursor:grab;touch-action:pan-y}
.art-lippan .a1{left:0;bottom:0;width:80%;aspect-ratio:2.1/1;box-shadow:var(--shadow)}
.art-gift .a1{left:0;top:4%;width:31%;aspect-ratio:.8}
.art-gift .a2{left:34%;top:0;width:30%;aspect-ratio:.82}
.art-gift .a3{left:60%;top:20%;width:38%;aspect-ratio:.8}
.atlas-bar{height:2px;background:var(--line);margin:0 clamp(24px,6vw,100px) 30px;position:relative}
.atlas-bar i{position:absolute;left:0;top:-1px;height:4px;width:0;background:linear-gradient(90deg,var(--pink),var(--gold));border-radius:4px}
@media (max-width:980px){
  .atlas{height:auto!important}.atlas-pin{position:static;height:auto;overflow:visible}
  .atlas-top{padding-top:60px}.atlas-count,.atlas-bar{display:none}
  .atlas-track{flex-direction:column;transform:none!important}
  .panel{flex:none;grid-template-columns:1fr;padding-block:56px;border-top:1px solid var(--line)}
  .p-art{height:auto;aspect-ratio:1.05/1;max-width:560px}
  .art-lippan{aspect-ratio:1.3/1}.p-art img{box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
}

/* ───────── RESIN ───────── */
.resin{padding:clamp(70px,10vw,140px) 0;background:var(--bg2);border-top:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);background:transparent;color:var(--ink);font:500 .78rem var(--f-sans);letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;border-radius:99px;cursor:pointer;transition:all .35s var(--ease)}
.chip:hover{border-color:var(--gold)}
.chip[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cat-note{margin:22px 0 30px;max-width:68ch;color:var(--muted);font:italic 400 1.2rem/1.5 var(--f-serif);min-height:3.2em}
.masonry{column-count:4;column-gap:14px}
@media (max-width:1100px){.masonry{column-count:3}}@media (max-width:720px){.masonry{column-count:2;column-gap:10px}}
.m-item{break-inside:avoid;margin-bottom:14px;position:relative;border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--card);animation:pop .7s var(--ease) both;animation-delay:calc(var(--i)*35ms);border:0;padding:0;display:block;width:100%}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.96)}}
.m-item img{width:100%;height:auto;transition:transform 1s var(--ease)}
.m-item:hover img{transform:scale(1.07)}
.m-item span{position:absolute;inset:auto 0 0 0;padding:34px 14px 12px;font:400 1.05rem var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(10,5,3,.75));transform:translateY(100%);transition:transform .5s var(--ease);text-align:left}
.m-item:hover span,.m-item:focus-visible span{transform:none}

/* ───────── PLAY ───────── */
.play{padding:clamp(70px,10vw,140px) 0;overflow:hidden}
.play-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,6vw,90px);align-items:center}
.play-copy .h2{margin-bottom:22px}.play-copy p{color:var(--muted);max-width:46ch}
.swatches{display:flex;gap:14px;margin:30px 0 22px;flex-wrap:wrap}
.sw{width:64px;height:64px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;position:relative;box-shadow:inset 0 0 0 3px var(--bg),0 8px 18px -8px rgba(0,0,0,.6);transition:transform .35s var(--ease)}
.sw:hover{transform:scale(1.1) rotate(8deg)}
.sw[aria-checked="true"]{border-color:var(--gold)}
.sw small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.play-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px}
.coaster{position:relative;width:min(100%,560px);margin-inline:auto;aspect-ratio:1;border-radius:56% 44% 52% 48%/47% 55% 45% 53%;overflow:hidden;box-shadow:0 0 0 5px var(--bg),0 0 0 8px var(--gold),0 0 0 11px var(--bg),var(--shadow);animation:morph 14s ease-in-out infinite;background:#f1ece4}
@keyframes morph{50%{border-radius:46% 54% 44% 56%/56% 44% 56% 44%}}
.coaster::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.38),transparent 34%,transparent 66%,rgba(255,255,255,.14))}
.coaster canvas{width:100%;height:100%;cursor:crosshair;touch-action:none;display:block}
.coaster-hint{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);padding:8px 16px;border-radius:99px;background:rgba(20,10,5,.55);color:#fff;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;transition:opacity .5s;backdrop-filter:blur(6px)}
.coaster-hint.gone{opacity:0}
@media (max-width:900px){.play-grid{grid-template-columns:1fr}.swatches{margin-bottom:34px}}

/* ───────── MOSAIC ───────── */
.mosaic{padding:clamp(70px,10vw,140px) 0;background:var(--bg2);border-block:1px solid var(--line)}
.mosaic-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.mosaic-stage{max-width:620px;width:100%;margin-inline:auto;border-radius:20px;padding:14px;background:#d9d1c4;box-shadow:var(--shadow)}
.mosaic-stage canvas{width:100%;height:auto;display:block;border-radius:8px;cursor:none;touch-action:pan-y}
.mosaic-copy .h2{margin-bottom:22px}.mosaic-copy p{color:var(--muted)}
.mosaic-copy p b,.mosaic-copy p i{color:var(--ink)}
.pick{display:flex;gap:12px;margin:26px 0 22px}
.pick button{width:70px;height:70px;border-radius:50%;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;opacity:.7;transition:all .35s var(--ease);background:none}
.pick button img{width:100%;height:100%;object-fit:cover}
.pick button[aria-pressed="true"]{border-color:var(--gold);opacity:1;transform:scale(1.08)}
@media (max-width:900px){.mosaic-grid{grid-template-columns:1fr}}

/* ───────── STUDIO ───────── */
.studio{padding:clamp(70px,10vw,140px) 0}
.studio-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(26px,5vw,70px);align-items:start}
.preview{border-radius:24px;padding:clamp(20px,4vw,54px);position:sticky;top:90px;background:
  radial-gradient(120% 100% at 30% 0,#6a5848,#2d2119 70%);box-shadow:var(--shadow);overflow:hidden}
.preview::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 46px)}
.preview svg{width:100%;height:auto;display:block;position:relative;filter:drop-shadow(0 28px 22px rgba(0,0,0,.55))}
.controls{display:grid;gap:20px}
.controls label,.controls legend{font:500 .72rem var(--f-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:block}
.controls label small{text-transform:none;letter-spacing:0;font-size:.8rem;opacity:.8}
.controls input[type=text],.controls input:not([type]),.controls input[maxlength],.enquiry input,.enquiry select,.enquiry textarea{width:100%;margin-top:8px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:400 1rem var(--f-sans);letter-spacing:0;text-transform:none;transition:border-color .3s,box-shadow .3s}
.controls input:focus,.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 25%,transparent)}
fieldset{border:0}
.opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.opt{padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font:400 .9rem var(--f-sans);display:inline-flex;align-items:center;gap:8px;transition:all .3s var(--ease)}
.opt i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.check{display:flex!important;align-items:center;gap:10px;letter-spacing:.08em!important;text-transform:none!important;font-size:.9rem!important;color:var(--ink)!important}
.check input{width:18px;height:18px;accent-color:var(--pink);margin:0!important}
@media (max-width:900px){.studio-grid{grid-template-columns:1fr}.preview{position:relative;top:0}}

/* ───────── WORKSHOPS ───────── */
.workshops{padding:clamp(70px,10vw,140px) 0;background:var(--bg2);border-block:1px solid var(--line)}
.workshops .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.ws-photos{position:relative;aspect-ratio:1/1.05}
.ws-photos figure{position:absolute;width:52%;aspect-ratio:1;filter:drop-shadow(0 18px 22px rgba(0,0,0,.4));transition:transform .8s var(--ease)}
.ws-photos figure:nth-child(1){left:0;top:0}
.ws-photos figure.big{width:62%;right:0;top:20%;z-index:2}
.ws-photos figure:nth-child(3){left:6%;bottom:0;width:48%}
.ws-photos figure:hover{transform:scale(1.05) rotate(-2deg);z-index:5}
.shape-scallop img{width:100%;height:100%;object-fit:cover;-webkit-clip-path:url(#scallop);clip-path:url(#scallop)}
.ws-copy .h2{margin-bottom:6px}
.topics{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 22px}
.topics span{padding:10px 18px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.topics span:nth-child(2n){background:var(--pink);color:#fff}.topics span:nth-child(3n){background:transparent;color:var(--ink);border:1px solid var(--ink)}
.ws-for{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-bottom:30px;color:var(--muted)}
.ws-for li::before{content:"✦ ";color:var(--gold-i);font-size:.7em}
@media (max-width:900px){.workshops .wrap{grid-template-columns:1fr}.ws-photos{max-width:520px;margin-inline:auto;width:100%}}

/* ───────── PARTNER ───────── */
.partner{padding:clamp(70px,10vw,140px) 0}
.ptabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px}
.ptab{background:none;border:0;color:var(--muted);font:400 clamp(1.3rem,2.4vw,1.9rem) var(--f-display);text-transform:uppercase;letter-spacing:.08em;padding:6px 18px 6px 0;cursor:pointer;transition:color .3s}
.ptab[aria-selected="true"]{color:var(--ink)}
.ptab[aria-selected="true"]::after{content:" ●";color:var(--pink);font-size:.5em;vertical-align:middle}
.ppanel{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;min-height:170px;align-content:flex-start}
.ppanel .prods{width:100%;color:var(--muted);margin-bottom:6px}
.ppanel .prods b{color:var(--gold-i);letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;margin-right:8px}
.pill{border:1px solid var(--line);border-radius:18px;padding:14px 20px;background:var(--card);animation:pop .6s var(--ease) both;animation-delay:calc(var(--i)*60ms);max-width:340px}
.pill b{display:block;font-weight:500}.pill span{font-size:.88rem;color:var(--muted)}
.circle{margin-top:clamp(50px,8vw,100px);text-align:center}
.circle .eyebrow{justify-content:center}.circle .eyebrow::before{display:none}
.circle-sub{color:var(--muted);margin:-8px 0 22px;font:italic 1.15rem var(--f-serif)}
.circle ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.circle li{padding:10px 20px;border:1px solid var(--line);border-radius:99px;font-size:.92rem;transition:all .35s var(--ease)}
.circle li:hover{background:var(--ink);color:var(--bg);transform:translateY(-3px)}

/* ───────── CONTACT ───────── */
.contact{padding:clamp(70px,10vw,140px) 0;background:radial-gradient(90% 80% at 15% 20%,color-mix(in srgb,var(--pink) 16%,var(--bg2)),var(--bg2));border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
.contact-bf{width:90px;height:76px;margin-bottom:24px;filter:drop-shadow(0 0 20px rgba(224,38,127,.5));animation:float 6s ease-in-out infinite}
.contact .big{margin:24px 0;color:var(--muted);font-style:italic}
.reach{list-style:none;display:grid;gap:14px;margin-top:28px}
.reach li,.reach a{display:flex;align-items:center;gap:14px;text-decoration:none;font:italic 400 clamp(1.2rem,2vw,1.55rem) var(--f-serif)}
.reach a:hover{color:var(--accent)}
.ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 .9rem var(--f-sans);color:#fff;font-style:normal;flex:none}
.ic.wa{background:#25d366}.ic.ig{background:linear-gradient(45deg,#f9a03c,#e0267f,#6a4fd8)}.ic.fb{background:#1877f2}.ic.gm{background:#ea4335}
.enquiry{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:clamp(22px,4vw,42px);display:grid;gap:16px;box-shadow:var(--shadow)}
.enquiry h3{font:400 1.8rem var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.enquiry label{font:500 .72rem var(--f-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.enquiry textarea{resize:vertical}.enquiry .btn{justify-content:center}
.fine{font-size:.8rem;color:var(--muted);text-align:center;margin:0!important}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

.foot{padding:40px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.foot .wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.foot-brand svg{width:46px;height:40px}.foot-brand b{display:block;font:400 1.2rem var(--f-display);text-transform:uppercase;letter-spacing:.08em}.foot-brand span{font-size:.8rem;color:var(--muted)}
.totop{text-decoration:none;letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(10,6,4,.94);display:flex;align-items:center;justify-content:center;padding:30px;backdrop-filter:blur(8px)}
.lb[hidden]{display:none}
.lb figure{max-width:min(92vw,1000px);text-align:center}
.lb img{max-height:80vh;margin:auto;border-radius:10px;box-shadow:0 30px 80px #000;animation:pop .5s var(--ease)}
.lb figcaption{margin-top:16px;color:#e8dccb;font:400 1.3rem var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.lb button{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;transition:background .3s}
.lb button:hover{background:var(--pink)}
.lb-x{top:20px;right:20px}.lb-p{left:20px;top:50%}.lb-n{right:20px;top:50%}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}.display .ch,.lede,.hero-cta,.hint{opacity:1}.loader{display:none}
}

/* lit-state button: stays a flame, never says "blow out" */
.btn-flame[aria-pressed="true"]{animation:none;background:linear-gradient(135deg,#f6c45a,#ff8f3c);color:#3b1d08;box-shadow:0 0 34px rgba(255,170,70,.6),0 14px 34px -10px rgba(255,120,40,.6)}

/* ───────── REELS ───────── */
.reels{padding:clamp(70px,10vw,140px) 0;overflow:hidden}
.reels-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(30px,5vw,56px)}
.reels-head .lede2 b{color:var(--ink)}
.reels-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ig-dot{width:16px;height:16px;border-radius:5px;background:radial-gradient(circle at 30% 110%,#fdd835,#f5602e 40%,#d6249f 65%,#5b51d8);position:relative;box-shadow:inset 0 0 0 2px #fff}
.ig-dot::after{content:"";position:absolute;inset:3px;border:2px solid #fff;border-radius:50%}
.rail-btns{display:flex;gap:8px}
.rail-btns button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;transition:all .3s var(--ease)}
.rail-btns button:hover{background:var(--ink);color:var(--bg)}
.film{position:relative;padding:34px 0;background:#0e0806;border-block:1px solid #2a1810}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(255,235,205,.16) 12px 30px,transparent 30px 42px);-webkit-mask:linear-gradient(#000,#000);pointer-events:none}
.film::before{top:10px}.film::after{bottom:10px}
.reel-rail{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:28px max(calc(50vw - 150px),20px);scrollbar-width:none;perspective:1400px;cursor:grab;outline-offset:-4px}
.reel-rail::-webkit-scrollbar{display:none}
.reel-rail.drag{cursor:grabbing;scroll-snap-type:none}
.reel{flex:0 0 clamp(210px,24vw,300px);aspect-ratio:9/16;scroll-snap-align:center;position:relative;border-radius:26px;overflow:hidden;text-decoration:none;color:#fff;background:#241610;border:1px solid rgba(255,235,205,.16);transform:rotateY(var(--ry,0deg)) scale(var(--sc,1));opacity:var(--op,1);transition:box-shadow .5s;box-shadow:0 30px 60px -24px #000;user-select:none;-webkit-user-drag:none}
.reel img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform 1.2s var(--ease)}
.reel:hover img,.reel:focus-visible img{transform:scale(1.07)}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(14,8,6,.88));pointer-events:none}
.reel .tag{position:absolute;left:14px;top:14px;z-index:2;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;padding:6px 11px;border-radius:99px;background:rgba(14,8,6,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,235,205,.25)}
.reel .pbtn{position:absolute;left:50%;top:44%;z-index:2;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.55);transition:transform .4s var(--ease),background .4s}
.reel .pbtn::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,190,110,.7);animation:ring 2.4s infinite}
@keyframes ring{from{transform:scale(.85);opacity:1}to{transform:scale(1.5);opacity:0}}
.reel .pbtn i{border:solid transparent;border-width:9px 0 9px 15px;border-left-color:#fff;margin-left:4px}
.reel:hover .pbtn{transform:scale(1.12);background:var(--pink)}
.reel .cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
.reel .cap b{display:block;font:400 1.15rem/1.15 var(--f-display);letter-spacing:.05em;text-transform:uppercase}
.reel .cap span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#ffcf8a}
.reel-note{margin-top:20px;font-size:.84rem;color:var(--muted)}
.nav .links{gap:clamp(10px,1.5vw,26px)}
@media (min-width:1181px) and (max-width:1320px){.links a{letter-spacing:.14em;font-size:.72rem}}

[hidden]{display:none!important}
.nav .btn{white-space:nowrap}

/* ───────── REEL THEATER ───────── */
.theater{position:fixed;inset:0;z-index:310;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(70% 70% at 50% 45%,rgba(60,28,12,.92),rgba(8,4,2,.97));backdrop-filter:blur(10px);animation:thIn .5s var(--ease)}
@keyframes thIn{from{opacity:0}}
.th-stage{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.th-phone{position:relative;width:min(92vw,380px);height:min(76vh,680px);border-radius:34px;padding:10px;background:#16100c;border:1px solid rgba(255,235,205,.22);box-shadow:0 0 0 6px rgba(255,235,205,.05),0 0 90px rgba(255,150,60,.28),0 40px 80px rgba(0,0,0,.7);overflow:hidden;animation:phoneIn .7s var(--ease)}
@keyframes phoneIn{from{transform:translateY(40px) scale(.94);opacity:0}}
.th-phone iframe{position:relative;z-index:2;width:100%;height:100%;border:0;border-radius:26px;background:#fff}
.th-loading{position:absolute;inset:10px;z-index:1;border-radius:26px;display:grid;place-content:center;justify-items:center;gap:14px;color:#e8dccb;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.th-loading i{width:16px;height:30px;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:linear-gradient(#fff6c8,#ffb347);box-shadow:0 0 28px 6px rgba(255,170,70,.7);animation:flick .2s infinite alternate}
.th-cap{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;color:#e8dccb;text-align:center}
.th-cap b{font:400 1.15rem var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.th-cap a,.th-fail{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#ffcf8a}
.th-fail{margin:0;text-align:center}
.theater button{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;transition:background .3s}
.theater button:hover{background:var(--pink)}
.th-x{top:max(18px,env(safe-area-inset-top,0px));right:18px}.th-p{left:18px;top:50%}.th-n{right:18px;top:50%}
@media (max-width:560px){.theater{padding-top:calc(64px + env(safe-area-inset-top,0px))}.th-phone{height:min(68vh,640px)}.th-p,.th-n{top:auto;bottom:18px;width:44px;height:44px}.th-p{left:calc(50% - 56px)}.th-n{right:calc(50% - 56px)}.th-cap{margin-bottom:56px}}

/* generated posters for reels without a cover image */
.reel.noimg{background:radial-gradient(120% 80% at 50% 0%,var(--g1),transparent 60%),radial-gradient(100% 70% at 50% 110%,var(--g2),transparent 65%),#1a0f0a}
.reel.v0{--g1:#7a2a52;--g2:#c2653a}.reel.v1{--g1:#1f5f7a;--g2:#8a5a2b}.reel.v2{--g1:#6b3b1d;--g2:#b8337a}.reel.v3{--g1:#2c6b57;--g2:#a8823a}
.reel .poster{position:absolute;left:50%;margin-left:-26%;top:11%;width:52%;height:auto;aspect-ratio:240/210;opacity:.9;filter:drop-shadow(0 0 26px rgba(255,160,90,.45));animation:float 6s ease-in-out infinite;pointer-events:none}

/* ───────── FLYING-BUTTERFLY LOADER ───────── */
.loader{position:fixed;inset:0;z-index:500;display:grid;place-content:center;justify-items:center;gap:16px;background:radial-gradient(80% 70% at 50% 42%,#2e180e,#150d0a 72%);color:#f3ebe0;transition:opacity 1.3s var(--ease) .4s,visibility 0s 1.8s}
.loader.out{opacity:0;visibility:hidden;pointer-events:none}
.ld-stage{position:relative;width:min(78vw,380px);height:min(36vh,250px)}
.ld-stage.go{animation:takeoff 1.7s cubic-bezier(.45,0,.75,.5) forwards}
@keyframes takeoff{to{transform:translate(34vw,-64vh) scale(2.6) rotate(16deg);opacity:0}}
.fly{position:absolute;left:50%;top:50%;width:140px;height:122px;margin:-61px 0 0 -70px;animation:drift 10s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(224,38,127,.6))}
@keyframes drift{0%{transform:translate(-110px,34px) rotate(-14deg)}20%{transform:translate(-34px,-34px) rotate(8deg)}40%{transform:translate(64px,8px) rotate(15deg)}60%{transform:translate(112px,-38px) rotate(-6deg)}80%{transform:translate(18px,38px) rotate(-13deg)}100%{transform:translate(-110px,34px) rotate(-14deg)}}
.bf{width:100%;height:100%;overflow:visible;animation:bob 1.3s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-5px)}}
.bf .wl,.bf .wr{transform-origin:120px 106px;animation:flap .6s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.16)}}
.trail i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#ffcf8a;box-shadow:0 0 12px 2px #ffb347;opacity:calc(.9 - var(--k)*.11);scale:calc(1 - var(--k)*.1);animation:drift 10s ease-in-out infinite;animation-delay:calc(var(--k)*.26s - 10s)}
.ld-t{font:400 clamp(1.3rem,4vw,1.9rem) var(--f-display);letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.ld-t em{font:italic 500 1.05em var(--f-serif);text-transform:none;color:#ff8fc0;letter-spacing:0}
.ld-bar{width:min(60vw,240px);height:2px;background:rgba(243,235,224,.16);border-radius:2px;overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e0267f,#e2bd72);box-shadow:0 0 12px #e2bd72;transition:width .3s}
.ld-s{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:#b8a899;margin:0}
/* small butterfly in the reel player */
.th-loading .bf{width:74px;height:65px;filter:drop-shadow(0 0 16px rgba(224,38,127,.6))}

.foot .credit{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:.8rem;letter-spacing:.04em}
.foot .credit a{text-decoration:none;color:var(--muted);transition:color .3s}
.foot .credit a b{font-weight:500;color:var(--ink);border-bottom:1px solid var(--gold)}
.foot .credit a:hover,.foot .credit a:hover b{color:var(--accent)}