/* ═══════════════════════════════════════════════════════════════════════
   forge.css — Davinci-ProUser · THE FORGE SKIN
   A manga/anime design layer for the Resolve API laboratory.

   Principles (2026-08-12):
   · The page is a manga spread. Panels have ink borders and cut corners;
     the gutters between them ARE the layout — no timid centred column.
   · Content claims the glass: ~94vw, capped only for ultrawide sanity.
     The outer edge carries vertical kanji rails, so nothing is dead space.
   · Screentone, speed lines, and ghosted SFX kanji do the atmospheric work
     that drop-shadows used to fake.
   · Palette stays the house steel: deep violet/navy, magenta, gold.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* steel */
  --bg:#0a0716;
  --bg-2:#100b24;
  --panel:#160f33;
  --panel-2:#1d1443;
  --void:#050310;
  --paper:#f4efff;         /* inverted manga panels */
  --line:rgba(239,234,255,.13);
  --line-hot:rgba(124,92,255,.55);

  /* blood */
  --violet:#7c5cff;
  --magenta:#ff2f8e;
  --gold:#ffc94a;
  --green:#3ddc97;
  --amber:#f5a851;
  --red:#ff5c7a;
  --blue:#57b3ff;

  /* ink */
  --ink:#efeaff;
  --dim:#a79dd0;
  --faint:#655b90;

  /* geometry — the anti-safety-margin */
  --pad:clamp(16px,3vw,60px);
  --rail:clamp(0px,2.4vw,46px);
  --maxw:2400px;
  --cut:20px;              /* panel corner slice */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── textures ───────────────────────────────────────────────────────── */

/* screentone — the halftone dot field of a printed page */
.tone{position:relative}
.tone::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(239,234,255,.10) .8px,transparent 1.1px);
  background-size:5px 5px;
  opacity:.5;
  mask-image:linear-gradient(160deg,#000 0%,transparent 62%);
  -webkit-mask-image:linear-gradient(160deg,#000 0%,transparent 62%);
}
.tone>*{position:relative;z-index:1}

/* speed lines — the radial burst behind a moment of impact */
.burst{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 72% 22%,
    transparent 0deg 1.1deg, rgba(124,92,255,.085) 1.1deg 1.9deg);
  mask-image:radial-gradient(ellipse 78% 60% at 72% 22%,transparent 22%,#000 78%);
  -webkit-mask-image:radial-gradient(ellipse 78% 60% at 72% 22%,transparent 22%,#000 78%);
}

/* ghosted onomatopoeia / kanji behind a section */
.sfx{
  position:absolute;pointer-events:none;user-select:none;z-index:0;
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:900;line-height:.8;letter-spacing:-.04em;
  font-size:clamp(7rem,19vw,20rem);
  color:transparent;
  -webkit-text-stroke:2px rgba(124,92,255,.18);
  opacity:.55;
}
.sfx.fill{-webkit-text-stroke:0;color:rgba(124,92,255,.055)}
.sfx.right{right:calc(var(--pad) * -.2);top:-4vh;writing-mode:vertical-rl}
.sfx.left{left:calc(var(--pad) * -.2);top:0;writing-mode:vertical-rl}

/* ── the kanji rails — the outer edge, put to work ──────────────────── */
.rail{
  position:fixed;top:0;bottom:0;width:var(--rail);z-index:3;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:11px;letter-spacing:.42em;font-weight:500;
  color:var(--faint);
  border-inline:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(124,92,255,.05),transparent);
}
.rail.l{left:0}
.rail.r{right:0;color:var(--faint)}
.rail em{font-style:normal;color:var(--magenta);opacity:.8}
@media(max-width:1180px){.rail{display:none}:root{--rail:0px}}

/* ── the spread — content claims the glass ──────────────────────────── */
.spread{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding-inline:calc(var(--pad) + var(--rail));
}

/* ── panel primitive — ink border, sliced corner ────────────────────── */
.pnl{
  position:relative;background:var(--panel);
  border:1.5px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  padding:26px 28px;
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s;
  overflow:hidden;
}
.pnl:hover{border-color:var(--line-hot);transform:translateY(-3px)}
/* the slash — a speed-line sweep on hover */
.pnl::after{
  content:"";position:absolute;inset:-40% -10%;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,47,142,.16) 48%,rgba(255,201,74,.14) 51%,transparent 57%);
  transform:translateX(-115%);opacity:0;transition:transform .75s var(--ease),opacity .2s;
}
.pnl:hover::after{transform:translateX(115%);opacity:1}
.pnl>*{position:relative;z-index:1}

/* inverted panel — a printed manga page dropped into the dark */
.pnl.invert{
  background:var(--paper);color:var(--void);
  border-color:var(--paper);
  background-image:radial-gradient(circle,rgba(10,7,22,.13) .9px,transparent 1.2px);
  background-size:5px 5px;
}
.pnl.invert .k{color:#6b3fd6}
.pnl.invert b,.pnl.invert strong{color:var(--void)}
.pnl.invert p{color:#3a3160}

/* ── type ───────────────────────────────────────────────────────────── */
.impact{
  font-family:Anton,"Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.94;
}
.impact .hot{
  background:linear-gradient(96deg,var(--violet) 4%,var(--magenta) 52%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* the poster shadow — hard-offset ink, no blur, like a title card */
.impact.stamp{color:var(--ink);text-shadow:5px 5px 0 rgba(255,47,142,.55),10px 10px 0 rgba(124,92,255,.28)}
.brush{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
.brush.hot{
  background:linear-gradient(96deg,var(--magenta),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.k{ /* kicker */
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}
.k .jp{color:var(--magenta);letter-spacing:.2em;margin-right:.7em}

/* ── chips / marks ──────────────────────────────────────────────────── */
.mark-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);padding:5px 12px;
  clip-path:polygon(0 0,100% 0,100% 100%,7px 100%,0 calc(100% - 7px));
}
.mark-chip.g{color:var(--green);border-color:rgba(61,220,151,.45);background:rgba(61,220,151,.07)}
.mark-chip.a{color:var(--amber);border-color:rgba(245,168,81,.45);background:rgba(245,168,81,.07)}
.mark-chip.r{color:var(--red);border-color:rgba(255,92,122,.45);background:rgba(255,92,122,.07)}
.mark-chip.b{color:var(--blue);border-color:rgba(87,179,255,.45);background:rgba(87,179,255,.07)}
.mark-chip.v{color:var(--violet);border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.07)}

/* ── buttons — hard-edged, no soft pills ────────────────────────────── */
.b{
  display:inline-block;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;padding:14px 30px;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:all .25s var(--ease);
}
.b-hot{background:linear-gradient(96deg,var(--violet),var(--magenta));color:#fff}
.b-hot:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(255,201,74,.5)}
.b-ghost{border-color:var(--line);color:var(--dim);background:transparent}
.b-ghost:hover{border-color:var(--violet);color:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(124,92,255,.3)}

/* ── reveal ─────────────────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
  .pnl::after{display:none}
  .burst{opacity:.28}
}