/* Spark the Game · V2 layer. Sits on top of site.css: same tokens, richer motion. */

:root{ --gold-glow:rgba(255,204,96,.55); --ease-out:cubic-bezier(.16,1,.3,1); }
body.v2.is-loading{ overflow:hidden; }

/* ---------------- page-wide gold dust + scroll spark ---------------- */
.dust{ position:fixed; inset:0; width:100%; height:100%; z-index:45; pointer-events:none; }
.progress-spark{ position:fixed; left:0; top:0; z-index:120; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,transparent,var(--gold) 40%,var(--jing)); pointer-events:none; }
.progress-spark i{ position:absolute; right:-6px; top:-5px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle,#fff,#ffd870 45%,transparent 72%); box-shadow:0 0 18px 6px var(--gold-glow); }

/* ---------------- reveals: rise out of ink ---------------- */
.js .rv{ opacity:0; transform:translateY(34px) scale(.985); filter:blur(7px); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); transition-delay:var(--d,0ms); }
.js .rv.in{ opacity:1; transform:none; filter:none; }
.w-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.w-mask > span{ display:inline-block; will-change:transform; }

/* ---------------- hero ---------------- */
.hero-glow{ position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:0; transition:opacity .8s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(255,208,110,.5), rgba(255,208,110,.14) 45%, transparent 70%); mix-blend-mode:multiply; }
.hero:hover .hero-glow{ opacity:1; }
.title{ position:relative; width:fit-content; margin-inline:auto; }
.title-shine{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask:url("/s/img/spark-title.webp") center/contain no-repeat; mask:url("/s/img/spark-title.webp") center/contain no-repeat;
  background:linear-gradient(105deg, transparent 38%, rgba(255,243,200,.95) 50%, transparent 62%) 140% 0/260% 100% no-repeat;
  animation:shine 7s var(--ease) 2.8s infinite;
}
@keyframes shine{ 0%{ background-position:140% 0; } 38%,100%{ background-position:-60% 0; } }
.hero-art, .mist-layer{ will-change:transform; }
.hero-sub{ background:linear-gradient(90deg,var(--jing),#c8452f,var(--gold-deep),var(--jing)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:flow 12s linear infinite; }
@keyframes flow{ to{ background-position:300% 0; } }

/* ---------------- ignite: the pinned video scene ---------------- */
.ignite{ position:relative; background:var(--paper); }
.ig-stage{ position:relative; height:100vh; height:100svh; overflow:hidden; isolation:isolate; }
.ig-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% 62%; z-index:-2; -webkit-mask:linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); mask:linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); }
.ig-veil{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(247,239,223,.5), rgba(247,239,223,0) 22%); }
.ig-copy{ position:absolute; inset:calc(var(--top-h) + 3vh) 0 auto 0; padding-inline:var(--gut); text-align:center; }
.ig-a, .ig-b{ position:absolute; left:0; right:0; top:0; margin-inline:auto; max-width:1100px; }
.ig-a .everything-title{ display:block; }
.ig-b{ max-width:960px; }
.ig-b .banner-orn{ width:min(180px,44%); margin:0 auto 6px; }
.ig-b .banner-h{ font-size:clamp(1.6rem,3.7vw,3rem); }
.ig-b .banner-p{ max-width:34em; margin:14px auto 0; font:italic 600 clamp(1.05rem,1.9vw,1.4rem)/1.35 var(--f-display); color:var(--jing); }
.ig-words .w{ display:inline-block; opacity:.16; transition:opacity .5s; }
.ig-words .w.on{ opacity:1; }
.ig-hint{ position:absolute; left:50%; bottom:3.2vh; translate:-50% 0; width:24px; height:40px; border:1.5px solid var(--gold); border-radius:14px; opacity:.8; }
.ig-hint i{ position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--jing); animation:hint 1.8s var(--ease) infinite; }
@keyframes hint{ 0%{ transform:translateY(0); opacity:1; } 80%,100%{ transform:translateY(14px); opacity:0; } }

/* ---------------- ribbon divider ---------------- */
.ribbon{ position:relative; height:clamp(170px,24vw,340px); overflow:hidden; margin-block:clamp(-40px,-3vw,-10px);
  -webkit-mask:linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent); mask:linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent); }
.rb-track{ position:absolute; inset:0; width:130%; left:-15%; will-change:transform; }

/* ---------------- tables & posters: tilt + glare ---------------- */
.table .sign, .poster img, .inspo .book img{ will-change:transform; transform-style:preserve-3d; }
.tiltwrap{ position:relative; perspective:900px; }
.glare{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .4s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%), rgba(255,244,205,.55), transparent 60%); mix-blend-mode:soft-light; }
.tiltwrap:hover .glare{ opacity:1; }

/* ---------------- the evening: pinned journey, page mood follows the round ---------------- */
.rounds.is-pinned{ position:relative; height:100vh; height:100svh; margin-top:clamp(40px,6vw,90px); overflow:hidden; isolation:isolate; }
.rounds.is-pinned .round{ position:absolute; inset:0; padding:calc(var(--top-h) + 10px) 0 74px; display:grid; align-items:center; opacity:0; visibility:hidden; }
.rounds.is-pinned .round:first-child{ opacity:1; visibility:visible; }
.rounds.is-pinned .round.alt .r-inner{ grid-template-columns:minmax(0,620px) minmax(0,320px); }
.rounds.is-pinned .r-panel{ max-width:620px; }
.rounds.is-pinned .r-inner{ width:100%; grid-template-columns:minmax(0,320px) minmax(0,620px); justify-content:center; align-items:center; gap:clamp(28px,5vw,80px); }
.rounds.is-pinned .r-card{ width:min(24vw,300px); }
.rounds.is-pinned .r-medal{ width:min(24vw,300px); }
.rounds.is-pinned .rv{ opacity:1; transform:none; filter:none; transition:none; }
.rounds.is-pinned .r-panel{ max-height:calc(100svh - var(--top-h) - 110px); overflow:hidden; padding-block:clamp(22px,3vh,40px); }
.rounds.is-pinned .r-q{ margin-top:clamp(12px,2vh,24px); padding-top:clamp(12px,2vh,22px); }
.rounds.is-pinned .r-desc{ margin-top:clamp(8px,1.4vh,16px); font-size:clamp(.95rem,1.05vw + .35rem,1.1rem); line-height:1.5; }
.rounds.is-pinned .r-title{ font-size:clamp(2rem,4.2vh + 1rem,3.6rem); }
.rounds.is-pinned .r-art img{ top:0; height:100%; }
.rounds.is-pinned .r-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(247,239,223,.55), rgba(247,239,223,0) 22%, rgba(247,239,223,0) 70%, rgba(247,239,223,.6)); }
.rail{ position:absolute; left:50%; bottom:22px; translate:-50% 0; z-index:5; display:flex; align-items:center; gap:0; width:min(620px,86vw); }
.rail-line{ position:absolute; left:14px; right:14px; top:50%; height:1.5px; background:rgba(176,138,62,.35); transform:translateY(-50%); }
.rail-fill{ position:absolute; left:14px; top:50%; height:1.5px; width:calc(100% - 28px); background:linear-gradient(90deg,var(--gold),var(--jing)); transform-origin:0 50%; transform:translateY(-50%) scaleX(0); }
.rail-dot{ position:relative; flex:1; display:flex; justify-content:center; }
.rail-dot:first-of-type{ justify-content:flex-start; } .rail-dot:last-of-type{ justify-content:flex-end; }
.rail-dot b{ position:relative; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--paper-3); border:1px solid var(--gold); font:700 .78rem/1 var(--f-sc); color:var(--gold-deep); transition:background .4s, color .4s, transform .4s var(--ease); }
.rail-dot span{ position:absolute; bottom:36px; font:600 .66rem/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); opacity:0; transition:opacity .4s; white-space:nowrap; }
.rail-dot.on b{ background:var(--ink); color:var(--gold-hi); transform:scale(1.18); box-shadow:0 0 0 4px rgba(255,204,96,.3); }
.rail-dot.on span{ opacity:1; }
.rail-spark{ position:absolute; left:14px; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:radial-gradient(circle,#fff,#ffd870 45%,transparent 72%); box-shadow:0 0 16px 5px var(--gold-glow); }
.mood{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0; background:var(--mood-bg, transparent); transition:background 1s; }

/* ---------------- Before you come: the bento ---------------- */
.v2-practical{ isolation:isolate; overflow:hidden; padding-block:clamp(90px,13vw,190px); }
.pr-art{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.pr-art img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; opacity:.55; }
.pr-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, var(--paper) 0, rgba(247,239,223,.35) 16%, rgba(247,239,223,.5) 82%, var(--paper) 100%); }
.pr-head{ max-width:none; margin-bottom:clamp(30px,4vw,56px); }
.pr-title{ font:900 clamp(3rem,9vw,8rem)/.95 var(--f-display); letter-spacing:-.02em; padding-bottom:.08em; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pr-title{ background-image:url("/s/img/title-fill.webp"); background-size:130% auto; background-position:20% 50%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(255,250,240,.9)) drop-shadow(0 18px 26px rgba(80,45,10,.18)); animation:drift 42s ease-in-out infinite alternate; }
}
.bento{ display:grid; gap:clamp(12px,1.6vw,22px); grid-template-columns:repeat(6,minmax(0,1fr)); }
.tile{ position:relative; isolation:isolate; overflow:hidden; border-radius:22px; padding:clamp(22px,2.6vw,40px);
  background:linear-gradient(160deg,rgba(255,253,248,.88),rgba(247,239,223,.72)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(176,138,62,.42); box-shadow:0 34px 60px -40px rgba(60,35,5,.5), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out); min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; }
.tile::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s; background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%), rgba(255,210,112,.42), transparent 62%); }
.tile::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), var(--gold-hi), rgba(201,162,75,0) 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tile:hover{ transform:translateY(-6px); box-shadow:0 44px 70px -38px rgba(60,35,5,.55), inset 0 1px 0 rgba(255,255,255,.8); }
.tile:hover::before, .tile:hover::after{ opacity:1; }
.t-label{ position:absolute; left:clamp(22px,2.6vw,40px); top:clamp(22px,2.6vw,40px); display:flex; align-items:center; gap:12px; font:600 .82rem/1.1 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.t-text{ position:relative; margin-top:clamp(56px,7vw,92px); color:var(--ink-soft); font-size:clamp(1rem,1.05vw + .4rem,1.12rem); line-height:1.55; text-wrap:pretty; }
.t-text b{ display:block; margin-bottom:.35em; font:800 clamp(1.55rem,2.5vw,2.45rem)/1.08 var(--f-display); letter-spacing:-.012em; color:var(--jing-deep); text-wrap:balance; }
.t-when{ grid-column:span 4; grid-row:span 2; }
.t-when .t-text b{ font-size:clamp(2.3rem,5.6vw,5rem); line-height:.98; }
.t-when .t-text{ max-width:30em; font-size:clamp(1.05rem,1.2vw + .4rem,1.28rem); }
.t-where, .t-cost{ grid-column:span 2; }
.t-group, .t-lang, .t-age{ grid-column:span 2; }
.t-cant{ grid-column:span 6; background:linear-gradient(160deg,rgba(255,250,243,.94),rgba(250,240,224,.8)); border-color:var(--gold); }
.t-cant .t-text{ max-width:46em; }
.t-cant .t-text b{ color:var(--jing); }
.t-age .t-text b{ font-size:clamp(2.2rem,4vw,3.4rem); }

/* ---------------- register: video behind the card, spark on submit ---------------- */
.reg-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, var(--paper) 0, rgba(247,239,223,.12) 14%, rgba(247,239,223,.12) 86%, var(--paper) 100%); }
.reg-video{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s; }
.reg-video.on{ opacity:1; }
.reg-card{ position:relative; }
.reg-card::before{ content:""; position:absolute; z-index:-1; inset:-2px; border-radius:inherit; background:conic-gradient(from var(--ang,0deg), transparent 0 70%, rgba(255,204,96,.9) 85%, transparent 100%); filter:blur(14px); opacity:.55; animation:ang 9s linear infinite; }
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes ang{ to{ --ang:360deg; } }
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 36%, rgba(255,240,190,.55) 50%, transparent 64%) -140% 0/220% 100% no-repeat; transition:background-position .9s var(--ease-out); pointer-events:none; }
.btn:hover::after{ background-position:140% 0; }

/* ---------------- footer: the living taiji ---------------- */
.f-taiji{ width:min(54vw,210px); aspect-ratio:1; margin:0 auto 14px; border-radius:50%; overflow:hidden; border:1px solid var(--gold); box-shadow:0 0 0 6px rgba(247,239,223,.7), 0 0 0 7px var(--gold-line), 0 0 60px rgba(255,190,80,.35); background:var(--paper-2); }
.f-taiji video{ width:100%; height:100%; object-fit:cover; transform:scale(1.3); }

/* ---------------- phones ---------------- */
@media (max-width:899px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .t-when{ grid-column:span 2; grid-row:auto; }
  .t-where, .t-cost, .t-group, .t-lang, .t-age{ grid-column:span 1; }
  .t-cant{ grid-column:span 2; }
}
@media (max-width:599px){
  .bento{ grid-template-columns:1fr; }
  .t-when, .t-where, .t-cost, .t-group, .t-lang, .t-age, .t-cant{ grid-column:span 1; }
  .tile{ min-height:0; }
  .t-text{ margin-top:64px; }
  .ig-b .banner-h{ font-size:1.5rem; }
  .ig-copy{ inset:calc(var(--top-h) + 1vh) 0 auto 0; }
}
@media (hover:none){ .tile:hover{ transform:none; } .hero-glow{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .intro, .spark-tx, .dust, .progress-spark, .rail, .ig-hint, .hero-taiji{ display:none !important; }
  .js .rv{ opacity:1; transform:none; filter:none; transition:none; }
  .title-shine{ animation:none; } .reg-card::before, .hero-sub{ animation:none; }
  body.v2.is-loading{ overflow:auto; }
}

/* hero copy waits behind the curtain */
body.is-loading .hero .rv{ opacity:0 !important; transform:translateY(34px) !important; filter:blur(7px) !important; transition:none !important; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
html{ scroll-behavior:auto; }

/* reduced motion: the pinned scene becomes a plain banner, nothing moves */
.reduce-motion .ignite{ height:auto; }
.reduce-motion .ig-stage{ height:auto; min-height:80vh; padding:calc(var(--top-h) + 40px) 0 80px; }
.reduce-motion .ig-copy{ position:relative; inset:auto; }
.reduce-motion .ig-a, .reduce-motion .ig-b{ position:relative; margin-bottom:36px; }
.reduce-motion .ig-words .w{ opacity:1; }
.reduce-motion .ig-hint{ display:none; }

/* ---------------- marquee ---------------- */
.marquee{ position:relative; overflow:hidden; padding-block:clamp(26px,4.4vw,64px); border-block:1px solid var(--gold-line); background:linear-gradient(90deg, rgba(158,27,42,.05), rgba(20,107,120,.06), rgba(90,58,138,.06)); }
.mq-track{ display:flex; width:max-content; white-space:nowrap; will-change:transform; font:900 clamp(2.6rem,8vw,7rem)/1.05 var(--f-display); letter-spacing:-.01em; color:transparent; -webkit-text-stroke:1.3px var(--gold); }
.mq-set{ display:inline-flex; align-items:center; }
.mq-set .dia{ width:clamp(10px,1.4vw,18px); height:clamp(10px,1.4vw,18px); margin-inline:clamp(22px,3.4vw,52px); flex:none; background:var(--jing); }
html[lang="en"] .mq-set [data-l="ru"], html[lang="ru"] .mq-set [data-l="en"]{ display:none !important; }

/* =================== round 2 (Regis feedback 26.10) =================== */
/* intro: a real video, not drawn code */
.intro{ position:fixed; inset:0; z-index:1000; background:var(--paper) var(--grain); }
.intro[hidden]{ display:none; }
.intro video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.intro-skip{ position:absolute; right:22px; bottom:22px; z-index:2; cursor:pointer; border:1px solid var(--gold); background:rgba(252,247,238,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--gold-deep); border-radius:999px; padding:9px 18px; font:600 .76rem/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase; }
/* hero -> ignite: the spark video takes over the screen for a moment */
.spark-tx{ position:fixed; inset:0; z-index:44; pointer-events:none; opacity:0; background:var(--paper); }
.spark-tx video{ width:100%; height:100%; object-fit:cover; }
/* the living taiji sits in the hero */
.hero-taiji{ position:absolute; z-index:3; left:50%; bottom:clamp(20px,4.5vh,48px); translate:-50% 0; width:clamp(92px,15vh,148px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:1px solid var(--gold); background:var(--paper-2);
  box-shadow:0 0 0 6px rgba(247,239,223,.72), 0 0 0 7px var(--gold-line), 0 0 60px rgba(255,190,80,.42); transition:transform .6s var(--ease-out), box-shadow .6s; }
.hero-taiji:hover{ transform:scale(1.06); box-shadow:0 0 0 6px rgba(247,239,223,.72), 0 0 0 7px var(--gold), 0 0 80px rgba(255,190,80,.7); }
.hero-taiji video{ width:100%; height:100%; object-fit:cover; transform:scale(1.3); }
/* the headline of the ignite scene, bigger */
.ig-a{ max-width:1380px; }
.ig-a .everything-title{ font-size:clamp(2.1rem,4.8vw,4.6rem); }
.ig-a .everything-sub{ font-size:clamp(1.5rem,3.2vw,3.1rem); margin-top:.15em; }
/* welcome: the four refusals cross themselves out, then the answer arrives */
.nots-list li{ position:relative; width:fit-content; }
.v2 .nots li span::after{ display:none; }
.xs{ position:absolute; left:-4%; top:-4%; width:108%; height:108%; overflow:visible; pointer-events:none; }
.xs path{ fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; }
.xs .s1{ stroke:var(--jing); stroke-width:2.6; } .xs .s2{ stroke:var(--gold-deep); stroke-width:2.1; }
.nots .is{ width:fit-content; background:linear-gradient(100deg,var(--jing-deep),#c8452f 38%,var(--gold-deep) 68%,var(--jing)); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:flow 9s linear infinite; padding-bottom:.08em; }
/* the book: a quiet note in the corner of its field */
.inspo-inner{ position:relative; }
.inspo-note{ position:absolute; top:0; right:var(--gut); max-width:15em; text-align:right; font:italic 600 clamp(1rem,1.5vw,1.25rem)/1.35 var(--f-display); color:var(--jing); }
@media (max-width:899px){ .inspo-note{ position:static; grid-column:1 / -1; text-align:left; max-width:none; margin-bottom:6px; } }
/* medal: living taiji inside the gold rings */
.medal-disc{ position:absolute; inset:14.3%; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px #C9A24B; }
.medal-disc video{ width:100%; height:100%; object-fit:cover; transform:scale(1.32); }
.w-between .r-card{ width:min(50vw,236px); }
.w-finale .r-medal{ width:min(50vw,250px); }
.rounds.is-pinned .w-between .r-card{ width:min(17vw,236px); }
.rounds.is-pinned .w-finale .r-medal{ width:min(17vw,250px); }
/* the wave-meets-silk divider */
.ribbon{ height:clamp(230px,31vw,450px); margin-block:clamp(-30px,-2vw,-10px); }
.rb-track video{ width:100%; height:100%; object-fit:cover; object-position:50% 52%; mix-blend-mode:multiply; }
/* the three treasures: elegant framed cards */
.treasures{ gap:clamp(10px,1.4vw,18px); }
.tr{ position:relative; isolation:isolate; overflow:hidden; border-radius:16px; padding:clamp(20px,2.2vw,28px) 10px clamp(16px,1.8vw,22px); gap:6px;
  background:linear-gradient(180deg,rgba(255,252,246,.95),rgba(247,239,223,.9)); border:1px solid var(--gold); box-shadow:0 26px 44px -30px rgba(60,35,5,.55), inset 0 1px 0 #fff; transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.tr::before{ content:""; position:absolute; inset:5px; border:1px solid var(--gold-line); border-radius:11px; pointer-events:none; }
.tr::after{ content:""; position:absolute; z-index:-1; inset:0; opacity:.2; background:var(--tbg) center/cover; mix-blend-mode:multiply; }
.tr-jing{ --tbg:url("/s/img/bg-explore-m.webp"); } .tr-chi{ --tbg:url("/s/img/bg-play-m.webp"); } .tr-shen{ --tbg:url("/s/img/bg-discover-m.webp"); }
.tr .han{ display:grid; place-items:center; width:clamp(50px,5vw,64px); aspect-ratio:1; border-radius:50%; border:1px solid var(--tc); background:rgba(255,252,246,.85); box-shadow:0 0 0 4px rgba(255,252,246,.55); font-size:clamp(1.5rem,2.6vw,2rem); line-height:1; margin-bottom:6px; }
.tr:hover{ transform:translateY(-6px); box-shadow:0 34px 50px -30px rgba(60,35,5,.6), inset 0 1px 0 #fff; }
/* who it is for / what you get: a spark walks down each list */
.dlist{ position:relative; }
.fit-line{ position:absolute; left:7px; top:1.5em; bottom:1.5em; width:1.5px; background:rgba(176,138,62,.28); }
.fit-line i{ position:absolute; inset:0; background:linear-gradient(var(--gold),var(--jing)); transform-origin:top; transform:scaleY(0); }
.fit-spark{ position:absolute; left:7.75px; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:radial-gradient(circle,#fff,#ffd870 45%,transparent 72%); box-shadow:0 0 16px 5px var(--gold-glow); }
.dlist.fit-live li{ opacity:.38; transition:opacity .6s, color .6s; }
.dlist.fit-live li.lit{ opacity:1; }
.dlist.fit-live li.lit::before{ background:var(--jing); border-color:var(--jing); box-shadow:0 0 0 4px rgba(158,27,42,.14), 0 0 14px rgba(255,200,90,.75); }
/* Before you come: small painted icons */
.tile{ min-height:176px; }
.t-icowrap{ position:absolute; right:clamp(14px,2vw,28px); top:clamp(12px,1.8vw,22px); width:clamp(58px,6vw,86px); aspect-ratio:1; display:block; }
.t-when .t-icowrap{ width:clamp(80px,8.4vw,120px); }
.t-ico{ display:block; width:100%; height:100%; object-fit:contain; transition:transform .8s var(--ease-out); }
.tile:hover .t-ico{ transform:rotate(-6deg) scale(1.08); }
.t-seal{ position:absolute; inset:0; display:grid; place-items:center; font:800 clamp(.95rem,1.4vw,1.3rem)/1 var(--f-display); color:#FFF1CE; text-shadow:0 1px 2px rgba(60,10,10,.55); }
.t-label{ gap:0; }
.t-seal{ padding-bottom:30%; }
.inspo-note{ white-space:nowrap; max-width:none; } @media (max-width:899px){ .inspo-note{ white-space:normal; } }