/* ============ 10 ADDITIONAL LORE — tab navigation, wide, with a tilted isometric duplicate ============ */
.lorepc{position:relative;transition:--lac .4s;--dfont:'Bebas Neue','Noto Sans JP',Impact,sans-serif;--dmono:'DM Mono','IBM Plex Mono',ui-monospace,monospace;--lac:#ffb020}
.lore-head{max-width:1180px;margin:0 auto;padding:6vh 6vw 3vh}
.lore-head .cast-tag{color:var(--lac)}
.lore-head .cast-tag::before{background:var(--lac)}
.lore-head h2{font:400 clamp(2.6rem,11.5vw,10.5rem)/.86 var(--dfont);letter-spacing:.02em;color:var(--ink)}
.lore-head h2 .out{color:transparent;-webkit-text-stroke:2px var(--lac)}

.lore-stage{position:relative;height:650vh}
.lore-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.tn-wrap{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:0 6vw}
.tn-tabbar{position:relative;display:flex;align-items:flex-end;gap:8px;background:none;border:0;padding:0 0 14px;overflow-x:auto;overflow-y:visible;scrollbar-width:none}
.tn-tabbar::-webkit-scrollbar{display:none}
.tn-ind{display:none}
.tn-tab{flex:1 0 auto;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.8rem .5rem .6rem;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.1);border-radius:10px;
  color:var(--mute);cursor:pointer;transform:translateY(var(--stag,0px));transition:transform .35s cubic-bezier(.34,1.3,.4,1),border-color .3s,background .3s,color .3s,box-shadow .3s}
.tn-tab .tn-ic{width:18px;height:18px;opacity:.7;transition:opacity .3s,transform .3s}
.tn-tab .tn-tn{font:400 .58rem var(--dmono);letter-spacing:.18em}
.tn-tab .tn-lb{font:400 .5rem var(--dmono);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mute) 80%,transparent);white-space:nowrap}
.tn-tab:hover{border-color:color-mix(in srgb,var(--lac) 40%,transparent);color:var(--ink)}
.tn-tab:hover .tn-ic{opacity:1}
.tn-tab[aria-current="true"]{color:var(--ink);border-color:var(--lac);background:color-mix(in srgb,var(--lac) 10%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lac) 45%,transparent),0 8px 22px color-mix(in srgb,var(--lac) 18%,transparent);
  transform:translateY(calc(var(--stag,0px) - 5px))}
.tn-tab[aria-current="true"] .tn-ic{opacity:1;color:var(--lac);transform:scale(1.1)}
.tn-tab[aria-current="true"] .tn-tn{color:var(--lac)}
.tn-panewrap{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(6,4,10,.5)}
.tn-glyph{position:absolute;right:0;top:0;width:44%;height:100%;pointer-events:none;z-index:2;opacity:.9}
@media (max-width:820px){.tn-glyph{width:60%;opacity:.6}}
.tn-track{display:flex;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.tn-pane{flex:0 0 100%;min-height:34vh;display:flex}
.tn-pane-in{position:relative;padding:clamp(1.6rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center;max-width:44rem}
.tn-kj{position:absolute;right:1.2rem;top:.6rem;font:900 5rem/1 'Noto Sans JP',sans-serif;color:rgba(255,255,255,.05);pointer-events:none;user-select:none}
.tn-num{font:400 .62rem var(--dmono);letter-spacing:.22em;color:var(--lac);margin-bottom:.6em}
.tn-pane-in h3{font:400 clamp(1.7rem,3.6vw,2.6rem)/1 var(--dfont);letter-spacing:.03em;color:var(--ink);margin-bottom:.7em}
.tn-pane-in p{font-size:clamp(.82rem,1.3vw,.98rem);line-height:1.75;color:#d3cee8;max-width:60ch}

/* the tilted duplicate: same tab-nav, isometric, sitting below, decorative and non-interactive */
.tn-ghost{margin-top:5vh;pointer-events:none;perspective:1200px}
.tn-ghost .tn-tabbar,.tn-ghost .tn-panewrap{transform:rotateX(48deg) rotateZ(0deg) scaleY(.82);transform-origin:50% 0;transform-style:preserve-3d}
.tn-ghost .tn-tabbar{opacity:.5;filter:blur(.5px)}
.tn-ghost .tn-panewrap{opacity:.36;filter:blur(1px);margin-top:-1px}
.tn-ghost .tn-tab-g{flex:1 0 auto;min-width:52px;padding:.85rem 0;border-right:1px solid rgba(255,255,255,.08)}
.tn-ghost .tn-pane-in p{-webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);mask-image:linear-gradient(to bottom,#000,transparent 85%)}


.lore-cue{position:absolute;left:50%;bottom:2.4vh;translate:-50% 0;z-index:5;color:var(--lac);text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;opacity:1;transition:opacity .4s}
.lore-cue.hide{opacity:0;pointer-events:none}
.lore-cue::before{content:'SCROLL';font:700 .58rem var(--dmono);letter-spacing:.3em;color:var(--mute)}
.lore-cue i{display:block;width:10px;height:10px;border-right:2px solid var(--lac);border-bottom:2px solid var(--lac);transform:rotate(45deg);animation:loreCue 1.6s ease-in-out infinite;box-shadow:2px 2px 8px color-mix(in srgb,var(--lac) 60%,transparent)}
@keyframes loreCue{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(4px,4px);opacity:1}}
@media (max-width:820px){
  .tn-wrap{padding:0 5vw}
  .tn-pane-in{padding:1.4rem 1.3rem}
  .tn-ghost{display:none}
}
@media (prefers-reduced-motion:reduce){.tn-track{transition:none}.tn-ind{transition:none}}