/* keyframes */
@keyframes drift{to{transform:translate(-33.33%,-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scan{0%{top:0;opacity:0}5%,95%{opacity:1}100%{top:100%;opacity:0}}
@keyframes stretch{0%,100%{width:15px}50%{width:45px}}
@keyframes glow{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes tearPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes glitchA{0%,92%,100%{opacity:0;transform:none}93%{opacity:.8;transform:translate(-4px,1px)}95%{opacity:.6;transform:translate(3px,-2px)}97%{opacity:0}}
@keyframes glitchB{0%,92%,100%{opacity:0;transform:none}94%{opacity:.7;transform:translate(4px,-1px)}96%{opacity:.5;transform:translate(-3px,2px)}98%{opacity:0}}

/* responsive: stack panels on small screens */
@media (max-width:820px){
  .canvas-container{height:auto;max-height:none;min-height:0;grid-template-columns:1fr;grid-template-rows:auto 560px auto;width:94vw}
  .left{padding:28px 24px;background:linear-gradient(180deg,rgba(6,5,11,.95),rgba(60,12,90,.35))}
  .center{order:2}.right{order:3;flex-direction:row;padding:14px 20px;gap:12px}
  .vwrap{flex-direction:row}.v{writing-mode:horizontal-tb}.v-jp{font-size:1.2rem;letter-spacing:6px}.micro{display:none}
  .title{font-size:5.6rem}
  .quote{top:30px;left:36px;font-size:.66rem;letter-spacing:1.4px;width:calc(100% - 56px)}
  .q-spacer{height:62px}
  .quote small{font-size:.6rem}
  .left-foot{gap:8px}
  .meta{font-size:.6rem;letter-spacing:.6px}
  .pill{font-size:.6rem;letter-spacing:.6px}
  .facts{grid-template-columns:1fr}
  .hero{padding:24px 0 60px}
}
@media (prefers-reduced-motion:reduce){
  .bg-text,.title::before,.title::after,.diamond,.cue i{animation:none!important}
  html{scroll-behavior:auto}
  .logline .w{color:#fff}.logline .w.hl{color:#ffd84a}.fact,.rv{opacity:1;transform:none}
}

/* ---- each lore tab / magic card gets its own accent (no more all-teal) ---- */
.tn-tab[data-i="0"]{--tc:#ffb020}
.tn-tab[data-i="1"]{--tc:#5aa9ff}
.tn-tab[data-i="2"]{--tc:#c084fc}
.tn-tab[data-i="3"]{--tc:#f472b6}
.tn-tab[data-i="4"]{--tc:#4ade80}
.tn-tab[data-i="5"]{--tc:#ff6b4a}
.tn-tab[data-i="6"]{--tc:#a3e635}
.dc-card[data-i="0"]{--lac:#ff6b6b}
.dc-card[data-i="1"]{--lac:#ff9f43}
.dc-card[data-i="2"]{--lac:#facc15}
.dc-card[data-i="3"]{--lac:#4ade80}
.dc-card[data-i="4"]{--lac:#5aa9ff}
.dc-card[data-i="5"]{--lac:#818cf8}
.dc-card[data-i="6"]{--lac:#c084fc}
.dc-card[data-i="7"]{--lac:#f472b6}
.tn-tab .tn-ic{color:var(--tc)}
.tn-tab[aria-current="true"]{border-color:var(--tc)}
.tn-tab[aria-current="true"] .tn-ic,.tn-tab[aria-current="true"] .tn-tn{color:var(--tc)}
.lorepc,.dcarSec,.lorepc .cast-tag,.dcarSec .cast-tag{transition:color .4s}

/* ---- lore tab strip now slides sideways with the scroll ---- */
.tn-tabbar{overflow:hidden !important;padding-top:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.tn-tab,.tn-ghost .tn-tab-g{flex:0 0 clamp(120px,17vw,190px);transform:translateX(var(--tx,0px));transition:border-color .3s,background .3s,color .3s,box-shadow .3s}
.tn-tab[aria-current="true"]{transform:translateX(var(--tx,0px)) translateY(-5px)}
.tn-tab .tn-lb{font-size:.58rem}

/* ---- location boxes: glow fills the inside while hovered (no mouse-follow) ---- */
.wp-mark .gl,.wp-card .gl{padding:0;-webkit-mask-image:none;mask-image:none}
.wp-mark .gl::before,.wp-card .gl::before{top:0;left:0;translate:none;width:100%;height:100%;
  background:radial-gradient(120% 120% at 50% 50%,color-mix(in srgb,var(--wac) 34%,transparent),transparent 75%);
  box-shadow:inset 0 0 38px color-mix(in srgb,var(--wac) 55%,transparent)}
.wp-mark:hover .gl::before,.wp-card:hover .gl::before{opacity:1}

/* ---- red on Lance's page, blending into yellow through the supporting cast, yellow for the rest of the site ---- */
#yellowwash{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(60vw 50vh at 18% 8%,rgba(255,206,60,.30),transparent 70%),radial-gradient(60vw 55vh at 92% 92%,rgba(214,150,10,.40),transparent 70%),linear-gradient(180deg,#2a2006,#1d1604 60%,#261c05)}
.world-bg{background:transparent}
.world-outro{background:#0b0716}
.world-vig{background:radial-gradient(120% 90% at 50% 100%,rgba(4,9,26,.85),transparent 55%),linear-gradient(180deg,rgba(4,9,26,.45),transparent 30%,transparent 65%,rgba(4,9,26,.75))}

/* ---- World = blue, Additional Lore = original purple, Paths = dark orange ---- */
.zw{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0}
#bluewash{background:radial-gradient(60vw 50vh at 20% 10%,rgba(47,107,255,.30),transparent 70%),radial-gradient(60vw 55vh at 90% 90%,rgba(20,60,190,.38),transparent 70%),linear-gradient(180deg,#06102a,#040a1c 60%,#071230)}
#purplewash{background:radial-gradient(60vw 50vh at 20% 10%,rgba(155,92,255,.24),transparent 70%),radial-gradient(60vw 55vh at 90% 90%,rgba(90,30,160,.34),transparent 70%),linear-gradient(180deg,#0f0820,#06050b 60%,#120a26)}
#orangewash{background:radial-gradient(60vw 50vh at 20% 10%,rgba(230,110,20,.22),transparent 70%),radial-gradient(60vw 55vh at 90% 90%,rgba(150,55,5,.34),transparent 70%),linear-gradient(180deg,#170a02,#0e0601 60%,#1a0b02)}