/* VinoMyth landing — Premium Dark Fantasy × Winemaking × RPG */
:root{
  --emerald:#102820;
  --wine:#451B2B;
  --gold:#C9A66B;
  --oak:#211913;
  --parch:#E8D8B4;
  --gold-hi:#F0D49A;
  --ink:#140e0a;
  --line:rgba(201,166,107,.28);
  --line-strong:rgba(201,166,107,.55);
  --f-display:'Forum','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-body:'Alegreya Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nav-h:62px;
  --gut:clamp(18px,5vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --vine-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -10 120 68'%3E%3Cpath d='M0 24C20 4 40 4 60 24S100 44 120 24' fill='none' stroke='%23C9A66B' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M30 9C25-2 38-5 40 1 38 8 33 11 30 9Z' fill='%23C9A66B'/%3E%3Cpath d='M90 39C85 50 98 53 100 47 98 40 93 37 90 39Z' fill='%23C9A66B'/%3E%3Ccircle cx='60' cy='24' r='3' fill='%23F0D49A'/%3E%3C/svg%3E");
  --vine-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 0 68 120'%3E%3Cpath d='M24 0C4 20 4 40 24 60S44 100 24 120' fill='none' stroke='%23C9A66B' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M9 30C-2 25-5 38 1 40 8 38 11 33 9 30Z' fill='%23C9A66B'/%3E%3Cpath d='M39 90C50 85 53 98 47 100 40 98 37 93 39 90Z' fill='%23C9A66B'/%3E%3Ccircle cx='24' cy='60' r='3' fill='%23F0D49A'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
body{
  background:var(--oak);
  color:var(--parch);
  font-family:var(--f-body);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:200;border-radius:6px}
.skip:focus{left:8px}

.wrap{width:min(1200px,100% - 2*var(--gut));margin-inline:auto}
.wrap-narrow{width:min(820px,100% - 2*var(--gut))}
.sec{padding:clamp(72px,11vw,140px) 0;position:relative;overflow-x:clip}

/* ---------- typography ---------- */
.kicker{font-family:var(--f-serif);font-style:italic;font-weight:600;font-size:clamp(1rem,2.4vw,1.2rem);letter-spacing:.08em;color:var(--gold);text-transform:lowercase}
.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,6.2vw,3.6rem);line-height:1.12;color:var(--parch);text-wrap:balance;margin-top:.3em}
.h2-xl{font-size:clamp(2.1rem,7vw,4.4rem)}
.sec-head{text-align:center;margin-bottom:clamp(36px,6vw,72px)}
.sec-sub{max-width:640px;margin:18px auto 0;color:rgba(232,216,180,.78);font-size:1rem}
.orn{height:18px;width:min(260px,60%);margin:18px auto 0;position:relative;opacity:.9}
.orn::before{content:"";position:absolute;inset:8px 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.orn::after{content:"";position:absolute;left:50%;top:3px;width:11px;height:11px;margin-left:-5.5px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 0 4px var(--oak),0 0 14px rgba(240,212,154,.55)}
.fine{font-size:.9rem;color:rgba(232,216,180,.66);text-align:center;max-width:640px;margin:24px auto 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font-family:var(--f-body);font-weight:700;font-size:1rem;letter-spacing:.03em;text-decoration:none;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s;white-space:nowrap}
.btn-sm{min-height:44px;padding:0 20px;font-size:.95rem}
.btn-lg{min-height:56px;padding:0 34px;font-size:1.08rem}
.btn-gold{color:#2a1a08;background:linear-gradient(180deg,#F4DDA6 0%,#C9A66B 48%,#A8844A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(90,58,16,.35),0 0 0 1px rgba(60,36,8,.7),0 10px 30px rgba(201,166,107,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(90,58,16,.35),0 0 0 1px rgba(60,36,8,.7),0 14px 40px rgba(240,212,154,.45)}
.btn-ghost{color:var(--parch);background:rgba(16,40,32,.45);border:1px solid var(--line-strong);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(69,27,43,.55);border-color:var(--gold-hi);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;transition:background .4s,box-shadow .4s,backdrop-filter .4s}
.nav.is-solid,.nav.is-open{background:rgba(24,17,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-in{height:100%;width:min(1240px,100% - 2*var(--gut));margin-inline:auto;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-size:1.25rem;letter-spacing:.14em;color:var(--gold-hi);margin-right:auto}
.brand img{border-radius:8px}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav-links a:not(.btn){text-decoration:none;font-size:.95rem;letter-spacing:.04em;color:rgba(232,216,180,.88);position:relative;padding:6px 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
.lang{min-width:44px;min-height:44px;font-size:.8rem;letter-spacing:.1em;border:1px solid var(--line);border-radius:999px;color:var(--gold)}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--gold-hi);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.nav.is-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  .burger{display:block}
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 24px;background:rgba(24,17,12,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .35s var(--ease),opacity .3s,visibility .3s}
  .nav.is-open .nav-links{transform:none;opacity:1;visibility:visible}
  .nav-links a:not(.btn){padding:15px 4px;font-size:1.1rem;border-bottom:1px solid rgba(201,166,107,.14)}
  .nav-links a:not(.btn)::after{display:none}
  .nav-cta{margin-top:16px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:calc(var(--nav-h) + 28px) var(--gut) 90px;isolation:isolate}
.hero-scene{position:absolute;inset:0;z-index:-1;background:var(--oak)}
.hero-l,.hero-r{position:absolute;top:0;bottom:0;width:60%}
.hero-l{left:0;clip-path:polygon(0 0,95% 0,71.7% 100%,0 100%)}
.hero-r{right:0;clip-path:polygon(28.3% 0,100% 0,100% 100%,5% 100%)}
.hero-l img,.hero-r img{width:100%;height:100%;object-fit:cover}
.hero-l img{object-position:50% 12%;transform:scale(1.04);animation:heroDrift 24s ease-in-out infinite alternate}
.hero-r img{object-position:50% 40%;transform:scale(1.04);animation:heroDrift 28s ease-in-out infinite alternate-reverse}
@keyframes heroDrift{from{transform:scale(1.04) translate3d(-1%,0,0)}to{transform:scale(1.1) translate3d(1%,-1%,0)}}
.hero-seam{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(240,212,154,.9))}
.seam-m{display:none}
.hero-vignette{position:absolute;inset:0;background:
  radial-gradient(ellipse 52% 46% at 50% 50%,rgba(20,14,10,.78),rgba(20,14,10,.35) 60%,transparent 100%),
  linear-gradient(180deg,rgba(20,14,10,.6) 0%,transparent 22%,transparent 62%,var(--oak) 100%)}
.hero-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-embers i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 8px 2px rgba(240,212,154,.8);opacity:0;animation:ember linear infinite}
@keyframes ember{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.9}100%{transform:translate3d(var(--dx,20px),-92vh,0);opacity:0}}

.hero-content{text-align:center;max-width:860px;display:flex;flex-direction:column;align-items:center;gap:0}
.eyebrow{font-family:var(--f-serif);font-style:italic;font-weight:600;letter-spacing:.14em;font-size:clamp(.95rem,2.6vw,1.15rem);color:var(--gold-hi);text-shadow:0 2px 12px #000}
.wordmark{font-family:var(--f-display);font-weight:400;line-height:1;margin:.12em 0 .1em;font-size:clamp(2.7rem,14.5vw,9.2rem);letter-spacing:.06em;background:linear-gradient(180deg,#FFF1CC 0%,#F0D49A 34%,#C9A66B 62%,#8F6B31 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(40,22,6,.7)) drop-shadow(0 0 26px rgba(201,166,107,.35));padding-left:.06em}
.slogan{display:flex;flex-direction:column;gap:2px;font-family:var(--f-display);font-size:clamp(1.15rem,4.6vw,2.1rem);line-height:1.25;color:var(--parch);text-shadow:0 2px 16px #000,0 0 3px #000;margin-top:.4em}
.slogan span{display:block}
.slogan span:nth-child(2){color:var(--gold-hi)}
.hero-sub{margin-top:1.1em;max-width:620px;font-size:clamp(1rem,2.6vw,1.2rem);color:rgba(240,228,198,.94);text-shadow:0 2px 12px #000,0 0 3px rgba(0,0,0,.8)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.hero-note{margin-top:20px;display:inline-flex;align-items:center;gap:10px;font-size:.92rem;letter-spacing:.06em;color:var(--gold);text-shadow:0 2px 10px #000}
.dot{width:8px;height:8px;border-radius:50%;background:#7be0a0;box-shadow:0 0 10px #7be0a0}
.scroll-cue{position:absolute;bottom:22px;left:50%;width:28px;height:46px;margin-left:-14px;border:1.5px solid var(--line-strong);border-radius:16px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold-hi);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}80%{transform:translateY(16px);opacity:0}100%{opacity:0}}

@media (max-width:760px){
  .hero{align-items:end;padding-bottom:78px}
  .hero-l,.hero-r{left:0;right:0;width:100%}
  .hero-l{top:0;bottom:auto;height:58%;clip-path:polygon(0 0,100% 0,100% 75.9%,0 96.5%)}
  .hero-r{top:auto;bottom:0;height:58%;clip-path:polygon(0 24.1%,100% 3.4%,100% 100%,0 100%)}
  .hero-l img{object-position:50% 20%}
  .hero-r img{object-position:50% 38%}
  .seam-d{display:none}.seam-m{display:block}
  .hero-vignette{background:radial-gradient(ellipse 90% 62% at 50% 64%,rgba(20,14,10,.8),rgba(20,14,10,.3) 70%,transparent 100%),linear-gradient(180deg,rgba(20,14,10,.62) 0%,transparent 24%,transparent 70%,var(--oak) 100%)}
  .cta-row{flex-direction:column;width:100%;max-width:340px}
  .cta-row .btn{width:100%}
  .hero-content{padding-top:8vh}
}

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

/* ---------- world ---------- */
.world{background:radial-gradient(ellipse 70% 38% at 50% 0%,rgba(16,40,32,.7),transparent 70%),var(--oak)}
.world-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.world-card{position:relative;aspect-ratio:3/4.1;border-radius:18px;overflow:hidden;border:1px solid var(--line);isolation:isolate;perspective:900px;transform-style:preserve-3d;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.world-card::after{content:"";position:absolute;inset:8px;border:1px solid rgba(201,166,107,.35);border-radius:12px;pointer-events:none;z-index:4}
.wc-bg{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;transition:transform 1.2s var(--ease);transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-14px),0) scale(1.06)}
.world-card:hover .wc-bg{transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-14px),0) scale(1.12)}
.wc-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,14,10,.1) 25%,rgba(20,14,10,.72) 62%,rgba(20,14,10,.96) 100%)}
.wc-pop{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 14px 24px rgba(0,0,0,.65));transition:transform .6s var(--ease);transform:translate3d(calc(var(--mx,0)*18px),calc(var(--my,0)*18px),0)}
.wc-bg-villa{object-position:30% 14%}
.wc-pop-winery{width:54%;right:2%;top:10%}
.wc-pop-cellar{width:50%;right:6%;top:14%}
.world-card:hover .wc-pop{transform:translate3d(calc(var(--mx,0)*18px),calc(var(--my,0)*18px - 8px),0) scale(1.05)}
.wc-body{position:absolute;inset:auto 0 0 0;z-index:3;padding:clamp(22px,2.4vw,34px)}
.wc-num{position:absolute;right:26px;bottom:20px;font-family:var(--f-display);font-size:4.4rem;line-height:1;color:rgba(201,166,107,.14)}
.wc-tag{font-family:var(--f-serif);font-style:italic;font-weight:600;color:var(--gold);letter-spacing:.1em;font-size:1.02rem}
.wc-body h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.45rem,2.2vw,1.9rem);line-height:1.15;margin:.2em 0 .5em;color:var(--parch)}
.wc-body p:last-child{font-size:.98rem;color:rgba(232,216,180,.86)}
@media (max-width:900px){
  .world-grid{grid-template-columns:1fr}
  .world-card{aspect-ratio:4/4.3;max-width:560px;width:100%;margin-inline:auto}
}

/* ---------- path ---------- */
.path{background:linear-gradient(180deg,var(--oak),var(--emerald) 18%,var(--emerald) 82%,var(--oak));overflow:hidden}
.path::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 30%,rgba(201,166,107,.08),transparent 40%),radial-gradient(circle at 88% 70%,rgba(69,27,43,.5),transparent 45%);pointer-events:none}
.path-stage{position:relative;height:clamp(200px,34vw,400px);border-radius:18px;overflow:hidden;border:1px solid var(--line);margin-bottom:clamp(40px,6vw,64px);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.ps-layer{position:absolute;inset:0;background-size:cover;background-position:50% 24%;opacity:0;transition:opacity 1s var(--ease)}
.ps-layer.on{opacity:1}
.ps-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(16,40,32,.7));box-shadow:inset 0 0 0 8px rgba(16,40,32,.5)}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.6vw,24px)}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:calc(clamp(70px,8vw,92px)/2 - 20px);height:40px;background:var(--vine-h) repeat-x center/auto 40px;opacity:.9;filter:drop-shadow(0 0 6px rgba(201,166,107,.4))}
.step{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.step-scene{display:none}
.step-node{position:relative;width:clamp(70px,8vw,92px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2e4a3d,#0e211a 70%);border:2px solid var(--gold);box-shadow:0 0 0 5px var(--emerald),0 0 0 6px var(--line-strong),0 12px 24px rgba(0,0,0,.55);display:grid;place-items:center;transition:transform .45s var(--ease),box-shadow .45s}
.step-node img{width:68%;height:68%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.step-node:hover{transform:translateY(-4px)}
.step.is-active .step-node{transform:scale(1.12);border-color:var(--gold-hi);box-shadow:0 0 0 5px var(--emerald),0 0 0 6px var(--gold-hi),0 0 34px rgba(240,212,154,.6),0 12px 24px rgba(0,0,0,.55)}
.step-txt{opacity:.62;transition:opacity .4s}
.step.is-active .step-txt{opacity:1}
.step-n{font-family:var(--f-display);color:var(--gold);font-size:.95rem;letter-spacing:.2em}
.step h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.2;margin:.15em 0 .4em;color:var(--parch)}
.step p{font-size:.93rem;color:rgba(232,216,180,.75)}

@media (max-width:860px){
  .path-stage{display:none}
  .steps{grid-template-columns:1fr;gap:34px;padding-left:0}
  .steps::before{left:calc(clamp(70px,22vw,84px)/2 - 20px);right:auto;top:30px;bottom:30px;width:40px;height:auto;background:var(--vine-v) repeat-y center/40px auto}
  .step{display:grid;grid-template-columns:clamp(70px,22vw,84px) 1fr;grid-template-areas:"node txt" "node scene";text-align:left;column-gap:18px;row-gap:12px;align-items:start}
  .step-node{grid-area:node;width:clamp(70px,22vw,84px)}
  .step-txt{grid-area:txt;opacity:1}
  .step.is-active .step-node{transform:none}
  .step-scene{display:block;grid-area:scene;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line);background:center/cover no-repeat;box-shadow:0 14px 30px rgba(0,0,0,.4)}
}

/* ---------- rarity ---------- */
.rarity{background:radial-gradient(ellipse 70% 40% at 50% 100%,rgba(69,27,43,.6),transparent 70%),var(--oak)}
.r-common{--c:#a08c76}.r-uncommon{--c:#6fcf4f}.r-rare{--c:#4fa8ff}.r-epic{--c:#b06bff}.r-legendary{--c:#f2b83a}.r-mythic{--c:#ee4258}
.rar-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.rar-stage{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;margin-inline:auto;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,#140e0a) 0%,#140e0a 68%);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 70%,#000),0 0 0 8px #140e0a,0 0 0 9px color-mix(in srgb,var(--c) 45%,#000),0 0 80px color-mix(in srgb,var(--c) 55%,transparent);
  transition:box-shadow .8s,background .8s}
.rar-glow{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--c) 40%,transparent),transparent 40%,color-mix(in srgb,var(--c) 30%,transparent),transparent 80%);animation:spin 14s linear infinite;filter:blur(14px);opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}
.rar-frame{position:relative;width:78%;height:78%;display:grid;place-items:center}
.rar-barrel{position:absolute;width:62%;left:6%;top:18%;filter:drop-shadow(0 18px 26px rgba(0,0,0,.7));transition:opacity .4s,transform .6s var(--ease)}
.rar-item{position:absolute;width:46%;right:2%;bottom:8%;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--c) 75%,transparent)) drop-shadow(0 12px 16px rgba(0,0,0,.6));animation:floaty 4.5s ease-in-out infinite;transition:opacity .4s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.rar-stage.swap .rar-barrel,.rar-stage.swap .rar-item{opacity:0;transform:scale(.94)}
.rar-name{position:absolute;bottom:6%;left:0;right:0;text-align:center;font-family:var(--f-display);font-size:clamp(1.3rem,3.4vw,1.9rem);color:var(--c);text-shadow:0 0 18px color-mix(in srgb,var(--c) 60%,transparent);letter-spacing:.08em}
.rar-name small{display:block;font-family:var(--f-body);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,216,180,.7);text-shadow:none}
.rar-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rar-chip{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 8px;min-height:68px;text-align:left;border-radius:14px;border:1px solid rgba(201,166,107,.22);background:rgba(16,40,32,.35);transition:all .35s var(--ease)}
.rar-chip img{width:52px;height:52px;object-fit:contain;flex:none}
.rar-chip b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.08rem;color:var(--c)}
.rar-chip i{font-style:normal;font-size:.8rem;color:rgba(232,216,180,.7);letter-spacing:.06em}
.rar-chip:hover{transform:translateY(-2px);border-color:var(--c)}
.rar-chip.is-on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,#1a120d);box-shadow:0 0 24px color-mix(in srgb,var(--c) 35%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent)}
.rar-note{margin-top:20px;font-size:.92rem;color:rgba(232,216,180,.7)}

.coll{margin-top:clamp(56px,8vw,100px)}
.coll-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.coll-tabs button{min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--line);font-family:var(--f-display);letter-spacing:.06em;color:rgba(232,216,180,.8);transition:all .3s}
.coll-tabs button.is-on{background:linear-gradient(180deg,#F0D49A,#C9A66B);color:#2a1a08;border-color:transparent;box-shadow:0 8px 24px rgba(201,166,107,.28)}
.coll-grid{display:none;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,20px)}
.coll-grid.is-on{display:grid;animation:fadeUp .6s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tile{position:relative;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c,#C9A66B) 18%,#1c140f),#120c08 78%);border:1px solid color-mix(in srgb,var(--c,#C9A66B) 45%,#000);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.tile::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--c,#C9A66B) 30%,transparent);border-radius:9px;pointer-events:none}
.tile:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(0,0,0,.5),0 0 28px color-mix(in srgb,var(--c,#C9A66B) 40%,transparent)}
.tile img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6));transition:transform .5s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.tile-photo img{width:100%;height:100%;object-fit:cover;filter:none}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;text-align:center;font-size:.88rem;letter-spacing:.05em;background:linear-gradient(transparent,rgba(12,8,5,.9));color:var(--c,var(--parch))}
@media (max-width:900px){
  .rar-grid{grid-template-columns:1fr}
  .rar-stage{max-width:440px}
}
@media (max-width:640px){
  .rar-list{grid-template-columns:1fr 1fr;gap:8px}
  .rar-chip{padding:8px 8px 8px 4px;gap:6px}
  .rar-chip img{width:42px;height:42px}
  .rar-chip b{font-size:.98rem}
  .coll-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- heroes ---------- */
.heroes{position:relative;overflow:hidden;padding:clamp(80px,11vw,150px) 0 clamp(70px,9vw,120px);isolation:isolate}
.heroes-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(1.1)}
.heroes-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--oak) 0%,rgba(33,25,19,.55) 18%,rgba(20,14,10,.55) 60%,var(--oak) 100%),radial-gradient(ellipse 60% 70% at 50% 55%,transparent,rgba(20,14,10,.55))}
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:clamp(8px,2vw,24px);max-width:1000px;margin:0 auto}
.duel figure{position:relative;text-align:center}
.duel img{width:100%;max-width:440px;margin-inline:auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(201,166,107,.18));transition:transform .8s var(--ease)}
.duel-hero img{transform:translateX(0)}
.duel figure:hover img{transform:translateY(-8px) scale(1.03)}
.duel figcaption{margin-top:6px;display:flex;flex-direction:column}
.duel figcaption b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,3vw,1.9rem);color:var(--gold-hi)}
.duel figcaption span{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,216,180,.7)}
.duel-vs{align-self:center;justify-self:center;font-family:var(--f-display);font-size:clamp(1.4rem,3.6vw,2.4rem);color:var(--wine);position:relative}
.duel-vs span{display:grid;place-items:center;width:clamp(52px,8vw,84px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#6b2a40,var(--wine));color:var(--gold-hi);border:2px solid var(--gold);box-shadow:0 0 30px rgba(201,166,107,.35),inset 0 0 14px rgba(0,0,0,.5)}
.mobs{display:flex;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;gap:clamp(6px,1.4vw,18px);margin:clamp(26px,4vw,48px) auto 0;max-width:900px}
.mobs li{width:clamp(72px,12vw,116px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(69,27,43,.75),rgba(16,40,32,.85));border:1px solid var(--line-strong);display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.5);transition:transform .4s var(--ease),border-color .4s}
.mobs li:hover,.mobs li.is-on{transform:translateY(-6px);border-color:var(--gold-hi)}
.mobs li.is-on{box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 26px rgba(240,212,154,.45)}
.mobs button{all:unset;cursor:pointer;display:grid;place-items:center;width:100%;height:100%;border-radius:50%}
.mobs button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-4px}
.duel-boss img{transition:opacity .35s var(--ease),transform .5s var(--ease)}
.duel-boss.foe-out img{opacity:0;transform:translateX(40px) scale(.94)}
.duel-boss.foe-in img{animation:foeIn .6s var(--ease) both}
.duel-hero.lunge img{animation:lunge .7s var(--ease)}
.duel-boss figcaption{transition:opacity .3s}
.duel-boss.foe-out figcaption{opacity:0}
@keyframes foeIn{from{opacity:0;transform:translateX(-40px) scale(.94)}to{opacity:1;transform:none}}
@keyframes lunge{40%{transform:translateX(26px) scale(1.03)}}
.mobs img{width:88%;height:88%;object-fit:contain}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.6vw,22px);margin-top:clamp(40px,6vw,76px)}
.pillars li{text-align:center;padding:22px 12px 20px;border-radius:16px;background:linear-gradient(180deg,rgba(33,25,19,.78),rgba(20,14,10,.9));border:1px solid var(--line);backdrop-filter:blur(4px);transition:transform .4s var(--ease),border-color .4s}
.pillars li:hover{transform:translateY(-6px);border-color:var(--gold)}
.pillars img{width:64px;height:64px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.pillars h3{font-family:var(--f-display);font-weight:400;font-size:1.2rem;color:var(--gold-hi);margin-bottom:6px}
.pillars p{font-size:.92rem;color:rgba(232,216,180,.8);line-height:1.45}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}.pillars li:last-child{grid-column:1/-1}}
@media (max-width:560px){
  .duel{grid-template-columns:1fr 1fr}
  .duel-vs{grid-column:1/-1;grid-row:2;margin:6px 0 0}
  .mobs{max-width:calc(3*clamp(72px,12vw,116px) + 3*clamp(6px,1.4vw,18px))}
  .duel figure:nth-of-type(1){grid-column:1}.duel figure:nth-of-type(2){grid-column:2}
}

/* ---------- modes ---------- */
.modes{background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(16,40,32,.55),transparent 75%),var(--oak)}
.modes-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,36px)}
.mode{position:relative;padding:clamp(28px,4vw,52px);border-radius:22px;overflow:hidden;border:1px solid var(--line-strong);display:flex;flex-direction:column;justify-content:flex-start}
.mode::after{content:"";position:absolute;inset:8px;border:1px solid rgba(201,166,107,.25);border-radius:15px;pointer-events:none}
.mode-quick{background:radial-gradient(circle at 80% 15%,rgba(240,212,154,.2),transparent 45%),linear-gradient(160deg,#17382d,#0c1d17)}
.mode-deep{background:radial-gradient(circle at 80% 15%,rgba(240,212,154,.14),transparent 45%),linear-gradient(160deg,#5a2438,#2a0f1a)}
.mode-art{display:flex;gap:14px;margin-bottom:clamp(22px,3vw,34px)}
.mode-art img{width:clamp(78px,11vw,120px);aspect-ratio:1;object-fit:contain;border-radius:18px;filter:drop-shadow(0 12px 16px rgba(0,0,0,.55));transition:transform .5s var(--ease)}
.mode-art img:first-child{transform:rotate(-5deg)}
.mode-art img:last-child{transform:rotate(4deg) translateY(10px)}
.mode:hover .mode-art img{transform:translateY(-6px) rotate(0)}
.mode h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--gold-hi);margin:.1em 0 .4em}
.mode p:last-child{max-width:440px;color:rgba(240,228,198,.9)}
@media (max-width:760px){.modes-grid{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gallery{background:linear-gradient(180deg,var(--oak),#17100c 50%,var(--oak))}
.car-wrap{position:relative;width:min(1400px,100%);margin-inline:auto}
.car{display:flex;gap:clamp(16px,2.4vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(var(--gut),calc(50% - 600px)) 36px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car::-webkit-scrollbar{display:none}
.phone{flex:none;width:min(260px,68vw);scroll-snap-align:center;text-align:center}
.phone-screen{position:relative;aspect-ratio:9/16.5;border-radius:36px;overflow:hidden;background:#0c0806;border:8px solid #2a2018;box-shadow:0 0 0 1px var(--line-strong),0 30px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05);transition:transform .5s var(--ease)}
.phone:hover .phone-screen{transform:translateY(-8px) rotate(-1deg)}
.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,9,6,.55),rgba(14,9,6,.1) 30%,rgba(14,9,6,.85));pointer-events:none}
.ph-dark::after{background:linear-gradient(180deg,rgba(14,9,6,.7),rgba(14,9,6,.55),rgba(14,9,6,.9))}
.phone-screen > *:not(.ph-bg){position:relative;z-index:2}
.badge-concept{position:absolute !important;top:12px;right:12px;padding:3px 10px;border-radius:999px;background:rgba(20,14,10,.8);border:1px solid var(--gold);color:var(--gold-hi);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;z-index:5 !important}
.ph-bar{margin:34px 14px 0;padding:8px 12px;border-radius:10px;background:rgba(20,14,10,.72);border:1px solid var(--line);font-family:var(--f-display);font-size:.98rem;color:var(--gold-hi);text-align:left}
.ph-row{display:flex;gap:8px;margin:14px;justify-content:center}
.ph-row img{width:30%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line-strong)}
.ph-card{width:78%;margin:6px auto 0;border-radius:14px;border:1px solid var(--line-strong)}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.ph-grid img{width:100%;aspect-ratio:1;object-fit:contain;background:rgba(20,14,10,.55);border:1px solid var(--line);border-radius:12px;padding:6px}
.ph-grid-3{grid-template-columns:1fr}
.ph-grid-3 img{aspect-ratio:2/1;object-fit:contain}
.ph-grid-gear{grid-template-columns:1fr 1fr}
.phone figcaption{margin-top:16px;font-family:var(--f-display);font-size:1.05rem;color:var(--parch)}
.car-btn{position:absolute;top:44%;z-index:5;width:48px;height:48px;border-radius:50%;background:rgba(20,14,10,.85);border:1px solid var(--line-strong);color:var(--gold-hi);font-size:1.8rem;line-height:1;display:grid;place-items:center;transition:all .3s}
.car-btn:hover{background:var(--gold);color:#2a1a08}
.car-prev{left:max(8px,calc(50% - 690px))}.car-next{right:max(8px,calc(50% - 690px))}
@media (max-width:700px){.car-btn{display:none}}

/* ---------- final ---------- */
.final{position:relative;min-height:min(86vh,760px);display:grid;place-items:center;text-align:center;padding:100px var(--gut);overflow:hidden;isolation:isolate}
.final-scene{position:absolute;inset:0;z-index:-1}
.final-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-l{-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 62%);mask-image:linear-gradient(90deg,#000 20%,transparent 62%);object-position:50% 38%;z-index:1}
.fs-r{object-position:50% 55%}
.fs-shade{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 60% 55% at 50% 52%,rgba(20,14,10,.66),rgba(20,14,10,.2) 70%),linear-gradient(180deg,var(--oak) 0%,transparent 22%,transparent 78%,var(--oak) 100%)}
.final-in{max-width:820px;display:flex;flex-direction:column;align-items:center;gap:30px}
.final .h2{text-shadow:0 4px 24px #000;color:var(--gold-hi)}
.final .fine{margin:0;color:rgba(240,228,198,.8);text-shadow:0 2px 10px #000}
@media (max-width:700px){
  .fs-l{-webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 60%);mask-image:linear-gradient(180deg,#000 25%,transparent 60%)}
}

/* ---------- faq ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq details{border:1px solid var(--line);border-radius:14px;background:rgba(16,40,32,.3);transition:border-color .3s,background .3s}
.faq details[open]{border-color:var(--line-strong);background:rgba(69,27,43,.28)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 22px;font-family:var(--f-display);font-size:clamp(1.1rem,2.6vw,1.35rem);color:var(--parch)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-family:var(--f-body);font-size:1.3rem;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 22px;color:rgba(232,216,180,.88);max-width:62ch}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:#120c08;padding:36px 0 calc(36px + env(safe-area-inset-bottom))}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-brand{font-family:var(--f-display);letter-spacing:.1em;color:var(--gold)}
.foot-links{display:flex;gap:6px 26px;flex-wrap:wrap}
.foot-links a{font-size:.92rem;color:rgba(232,216,180,.75);text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.foot-links a:hover{color:var(--gold-hi);text-decoration:underline}

/* ---------- legal pages ---------- */
.legal{max-width:720px;margin:0 auto;padding:calc(var(--nav-h) + 60px) var(--gut) 80px}
.legal h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,6vw,3rem);color:var(--gold-hi);margin-bottom:20px}
.legal p{margin-bottom:16px;color:rgba(232,216,180,.88)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .hero-embers{display:none}
  .hero-l img,.hero-r img{transform:none}
}