/* ============ 02 GENRE / THEMES / AUDIENCE ============ */
section.deep{position:relative;padding:0 7vw 20vh;max-width:1200px;margin:0 auto}
.deep .eyebrow{margin-top:14vh}
.deep .eyebrow:first-child{margin-top:0}
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),border-color .3s,background .3s}
.rv.in{opacity:1;transform:none}

/* ============ 02 GENRE / THEMES / AUDIENCE — scroll-driven cube ============ */
.deep3d{position:relative;--acc:var(--ac);--dfont:'Bebas Neue','Noto Sans JP',Impact,sans-serif;--dmono:'DM Mono','IBM Plex Mono',ui-monospace,monospace}
.deep3d .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;font-family:var(--dmono)}
.deep3d .halo{position:absolute;inset:0;background:radial-gradient(46vmin 46vmin at 50% 50%,rgba(155,92,255,.32),transparent 70%),radial-gradient(30vmin 30vmin at 62% 56%,rgba(62,224,197,.16),transparent 70%)}
.deep3d .scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1100px;pointer-events:none}
.deep3d .cube{--s:min(66vw,66vh,540px);width:var(--s);height:var(--s);position:relative;transform-style:preserve-3d;transform:rotateX(90deg) rotateY(0deg);will-change:transform}
.deep3d .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;border:1px solid rgba(155,92,255,.45);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 40px),linear-gradient(150deg,#1a0c33,#08050f 70%)}
.deep3d .face svg{position:absolute;inset:0;width:100%;height:100%}
.deep3d .face .k{font:900 320px 'Noto Sans JP',sans-serif;fill:rgba(255,255,255,.055)}
.deep3d .face .fl{position:absolute;top:14px;left:16px;font:400 .62rem var(--dmono);letter-spacing:.3em;color:rgba(255,255,255,.35)}
.deep3d .face[data-face=front]{transform:translateZ(calc(var(--s)/2))}
.deep3d .face[data-face=back]{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.deep3d .face[data-face=right]{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.deep3d .face[data-face=left]{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.deep3d .face[data-face=top]{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.deep3d .face[data-face=bottom]{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.deep3d .spin{transform-origin:200px 200px;animation:dspin 40s linear infinite}
@keyframes dspin{to{transform:rotate(360deg)}}

.deep3d .dhud{position:absolute;top:28px;right:32px;z-index:10;text-align:right;font-size:.65rem;letter-spacing:.15em;color:var(--mute);text-transform:uppercase}
.deep3d .pbar{width:7.5rem;height:1px;background:var(--mute);margin:.5rem 0 0 auto;position:relative;overflow:hidden}
.deep3d .pfill{position:absolute;inset:0 auto 0 0;width:0;background:var(--acc)}
.deep3d .scn{font-size:.6rem;color:var(--acc);margin-top:.4rem}
.deep3d .dstrip{position:absolute;left:34px;top:50%;translate:-50% -50%;z-index:10;display:flex;flex-direction:column;gap:.75rem}
.deep3d .ddot{position:relative;display:block;width:.25rem;height:.25rem;border-radius:50%;background:var(--mute);transition:background .3s,scale .3s}
.deep3d .ddot::before{content:'';position:absolute;inset:-.4rem}
.deep3d .ddot.active{background:var(--acc);scale:1.8}
.deep3d .dcap{position:absolute;bottom:28px;left:50%;translate:-50% 0;z-index:10;text-align:center;pointer-events:none;user-select:none}
.deep3d #dcapn{font-size:.58rem;letter-spacing:.28em;color:var(--acc);margin-bottom:.15rem}
.deep3d #dcapname{font-family:var(--dfont);font-size:clamp(1.8rem,5vw,3.5rem);letter-spacing:.08em;color:var(--mute);opacity:.5;line-height:1;white-space:nowrap}

.deep3d .dcards{position:absolute;inset:0;z-index:5;pointer-events:none}
.deep3d .dcard{position:absolute;top:50%;translate:0 -50%;max-width:26rem;padding:2.25rem 2rem;background:rgba(10,7,20,.72);
  -webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);border-left:1px solid color-mix(in srgb,var(--acc) 28%,transparent);pointer-events:none;visibility:hidden}
.deep3d .dcard.long{max-width:34rem}
.deep3d .dcard.long h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.deep3d .dcard.l{left:clamp(24px,7vw,110px)}
.deep3d .dcard.r{right:clamp(24px,7vw,110px);border-left:0;border-right:1px solid color-mix(in srgb,var(--acc) 28%,transparent);text-align:right}
.deep3d .dcard.on{pointer-events:auto;visibility:visible}
.deep3d .dcard>*{opacity:0;translate:0 .7rem;transition:opacity .5s ease,translate .5s ease}
.deep3d .dcard.on>*{opacity:1;translate:0 0}
.deep3d .dcard.on .h-line{transition-delay:.05s}.deep3d .dcard.on .tag{transition-delay:.1s}.deep3d .dcard.on h2{transition-delay:.18s}.deep3d .dcard.on .body-text{transition-delay:.3s}.deep3d .dcard.on .cta-row{transition-delay:.4s}
.deep3d .h-line{width:3.125rem;height:1px;background:var(--acc);margin-bottom:1.2rem}
.deep3d .dcard.r .h-line{margin-left:auto}
.deep3d .tag{font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--acc);margin-bottom:1.1rem}
.deep3d h2{font-family:var(--dfont);font-weight:400;letter-spacing:.03em;line-height:.95;font-size:clamp(2.4rem,5.2vw,4.4rem);color:var(--ink)}
.deep3d h2 .sep{display:block;font-size:.8em;color:var(--acc);margin:.02em 0;line-height:.55;font-weight:900}
.deep3d h2 .li{display:block;font-size:.5em;line-height:1.05;margin-bottom:.32em;letter-spacing:.05em}
.deep3d h2 .li i{font-style:normal;font-family:var(--dmono);font-size:.34em;letter-spacing:.2em;color:var(--acc);margin-right:.8em;vertical-align:.5em}
.deep3d .dcard.r h2 .li i{margin:0 0 0 .8em;order:2}
.deep3d .body-text{font-size:.78rem;line-height:1.8;color:rgba(244,241,255,.6);margin-top:1.25rem}
.deep3d .cta-row{display:flex;align-items:center;gap:.75rem;margin-top:1.75rem}
.deep3d .dcard.r .cta-row{justify-content:flex-end}
.deep3d .cta,.deep3d .cta-back{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.25rem;font:400 .62rem var(--dmono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.deep3d .cta{border:1px solid var(--acc);color:var(--acc)}
.deep3d .cta:hover{background:var(--acc);color:#06050b}
.deep3d .cta-back{border:1px solid rgba(139,134,168,.45);color:var(--mute)}
.deep3d .cta-back:hover{border-color:var(--mute);color:var(--ink);background:rgba(139,134,168,.12)}
.deep3d .cta svg,.deep3d .cta-back svg{width:.6875rem;height:.6875rem}
@media (max-width:900px){
  .deep3d .cube{--s:min(76vw,42vh,420px)}
  .deep3d .scene{align-items:flex-start;padding-top:11vh}
  .deep3d .dstrip{display:none}
  .deep3d .dhud{top:14px;right:16px}
  .deep3d .dcap{bottom:10px}
  .deep3d .dcard,.deep3d .dcard.l,.deep3d .dcard.r{left:14px;right:14px;top:auto;bottom:52px;translate:0 0;max-width:none;padding:1.4rem 1.2rem}
  .deep3d h2{font-size:clamp(2rem,9vw,3rem)}
  .deep3d .cta-row{margin-top:1.1rem}
}
@media (prefers-reduced-motion:reduce){.deep3d .spin{animation:none}}

/* --- face animations --- */
.deep3d .face .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.deep3d .lflash{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(70% 70% at 60% 30%,rgba(214,190,255,.85),rgba(155,92,255,.3) 55%,transparent 80%);animation:lflash 7s infinite}
@keyframes lflash{0%,90%,100%{opacity:0}91%{opacity:.75}92.5%{opacity:.12}94%{opacity:.6}97%{opacity:0}}
.deep3d .rift{animation:riftpulse 3.2s ease-in-out infinite}
@keyframes riftpulse{0%,100%{opacity:.75}50%{opacity:1}}
.deep3d .cl{animation:cdrift var(--d,60s) linear infinite;animation-delay:var(--o,0s)}
@keyframes cdrift{from{transform:translateX(-190px)}to{transform:translateX(430px)}}
.deep3d .steps rect{transform-box:fill-box;transform-origin:bottom;animation:grow 5s ease-in-out infinite}
.deep3d .steps .b2{animation-delay:.25s}.deep3d .steps .b3{animation-delay:.5s}.deep3d .steps .b4{animation-delay:.75s}
@keyframes grow{0%{transform:scaleY(.08)}30%,80%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
.deep3d .arrow{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 5s ease-in-out infinite}
@keyframes draw{0%,15%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
/* --- themes card: one big list --- */
.deep3d .dcard.tcard{max-width:37rem;background:rgba(10,7,20,.84)}
.deep3d .dcard.tcard h2{font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.04;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.deep3d .dcard.tcard h2 .li{font-size:1em;margin-bottom:.36em;letter-spacing:.04em}
.deep3d .dcard.tcard h2 .li i{font-size:.32em;vertical-align:.7em}
.deep3d .dcard.long h2{font-size:clamp(2rem,3.9vw,3.2rem)}

/* --- tone face --- */
.deep3d .face[data-face=bottom]{border-color:rgba(255,45,85,.5);background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 40px),linear-gradient(160deg,#2a0812,#070308 70%)}
.deep3d .face .kr{fill:rgba(255,45,85,.09)}
.deep3d .rglow{animation:rbreath 4.5s ease-in-out infinite}
@keyframes rbreath{0%,100%{opacity:.55}50%{opacity:1}}
.deep3d .sl path{stroke-dasharray:1;stroke-dashoffset:1;animation:slash 6s ease-in infinite}
.deep3d .sl.s2 path{animation-delay:.22s}.deep3d .sl.s3 path{animation-delay:.44s}
@keyframes slash{0%{stroke-dashoffset:1;opacity:1}9%{stroke-dashoffset:0;opacity:1}62%{stroke-dashoffset:0;opacity:.9}86%,100%{stroke-dashoffset:0;opacity:0}}
.deep3d .dr{opacity:0;animation:drip 6s ease-in infinite}
.deep3d .dr.d2{animation-delay:.22s}.deep3d .dr.d3{animation-delay:.44s}
@keyframes drip{0%,14%{opacity:0;transform:translateY(0)}20%{opacity:1;transform:translateY(0)}78%{opacity:.9;transform:translateY(64px)}92%,100%{opacity:0;transform:translateY(80px)}}
.deep3d .dcard.tone .tag{color:#ff5d7d}.deep3d .dcard.tone .h-line{background:#ff2d55}
.deep3d .dcard.tone{border-right-color:rgba(255,45,85,.45)}
.deep3d .dcard.tone .cta{border-color:#ff5d7d;color:#ff5d7d}.deep3d .dcard.tone .cta:hover{background:#ff5d7d;color:#06050b}
@media (prefers-reduced-motion:reduce){.deep3d .rglow,.deep3d .dr{animation:none}.deep3d .sl path{animation:none;stroke-dashoffset:0}}

/* ---- the page drifts from purple to red as the tone darkens ---- */
#redwash{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:calc(var(--sh)*.96);
  background:radial-gradient(60vw 50vh at 18% 8%,rgba(255,45,85,.28),transparent 70%),radial-gradient(60vw 55vh at 92% 92%,rgba(150,12,34,.42),transparent 70%),linear-gradient(180deg,#160509,#0b0307 60%,#12050a)}
.deep3d .halo::after{content:'';position:absolute;inset:0;background:radial-gradient(46vmin 46vmin at 50% 50%,rgba(255,45,85,.34),transparent 70%),radial-gradient(30vmin 30vmin at 62% 56%,rgba(255,120,60,.14),transparent 70%);opacity:var(--sh)}
.deep3d .dcard.tone{max-width:36rem}
.deep3d .dcard.tone h2{font-size:clamp(2rem,3.7vw,3.1rem);line-height:1}