/* =========================================================
   Daniyaal Baquer: Portfolio
   Theme: sharp, Naruto-inspired. Ink black, bone paper,
   Naruto orange, seal red. Angled "kunai" corners, no rounding.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --ink: #0b0a09;
  --ink-2: #141210;
  --ink-3: #1c1916;
  --line: #2b2723;
  --paper: #ebe4d4;
  --paper-2: #ddd4bf;
  --paper-ink: #1a1714;
  --text: #efeae0;
  --text-2: #cfc8bb;
  --muted: #8f887c;
  --orange: #ff6a13;
  --seal: #c8102e;

  /* chakra natures */
  --wind: #7fd1b9;
  --fire: #ff6a13;
  --lightning: #ffd23f;
  --earth: #c19a66;
  --water: #4f8fd6;

  --font-display: "Anton", "Impact", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-brush: "Yuji Syuku", serif;
  --font-kanji: "Shippori Mincho", serif;

  --gutter: clamp(16px, 5vw, 72px);
  --nav-h: 72px;
  --cut: 14px; /* size of the angled corner cuts */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--orange); color: #000; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--orange); color: #000; padding: 10px 16px;
  font-family: var(--font-mono); font-size: 12px;
}
.skip-link:focus { top: 16px; }

/* Angled "kunai" corners instead of rounded ones */
.cut {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---------- Buttons & links ---------- */
.btn {
  --cut: 10px;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  padding: 13px 22px;
  background: var(--orange); color: #000;
  transition: background .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--text); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px #4a443d; }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--orange); color: var(--orange); }
.btn:disabled { opacity: .5; cursor: default; }

.text-link {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted);
  border-bottom: 1px solid #4a443d; padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.text-link:hover { color: var(--text); border-color: var(--text); }

/* =========================================================
   INTRO: Summoning Jutsu
   Real hand signs (Boar → Dog → Bird → Monkey → Ram), then
   口寄せの術 over an inked summoning circle. The circle flashes
   orange and an opening grows from its centre to reveal the site.
   ========================================================= */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.intro-bg { position: absolute; inset: 0; background: var(--ink); }

.intro-sign { position: relative; text-align: center; transition: opacity .15s; }
.intro-sign b { display: block; font-family: var(--font-kanji); font-weight: 800; font-size: clamp(120px, 22vw, 230px); line-height: 1; }
.intro-sign small { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .32em; color: var(--muted); }
.intro-sign.pop b { animation: sign-pop .2s ease-out; }
@keyframes sign-pop { from { transform: scale(1.18); opacity: .4; } to { transform: none; opacity: 1; } }

.intro-seals { position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%); display: flex; gap: 14px; transition: opacity .15s; }
.intro-seals i { width: 10px; height: 10px; border: 1.5px solid #4a443d; rotate: 45deg; transition: background .15s, border-color .15s; }
.intro-seals i.on { background: var(--orange); border-color: var(--orange); }

/* summoning circle, flattened like it's drawn on the floor */
.intro-formula { position: absolute; left: 50%; top: 50%; width: min(520px, 84vw); aspect-ratio: 1; transform: translate(-50%, -50%) scaleY(.36); opacity: 0; }
.intro-formula circle, .intro-formula line { fill: none; stroke: #2a2420; stroke-width: 2; }
.intro-formula .ink { stroke: var(--text); stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.intro-formula text { font-family: var(--font-kanji); font-weight: 800; font-size: 22px; fill: var(--text); opacity: 0; }

.intro-jutsu { position: absolute; text-align: center; opacity: 0; transform: scale(1.35); }
.intro-jutsu b { display: block; font-family: var(--font-brush); font-size: clamp(60px, 12vw, 140px); line-height: 1; letter-spacing: .06em; }
.intro-jutsu small { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .4em; color: var(--orange); }

/* casting: name slams in, circle is inked */
.intro.casting .intro-sign, .intro.casting .intro-seals { opacity: 0; }
.intro.casting .intro-jutsu { opacity: 1; transform: none; transition: opacity .12s, transform .3s cubic-bezier(.2,1.4,.4,1); }
.intro.casting .intro-formula { opacity: 1; transition: opacity .2s; }
.intro.casting .intro-formula .ink { stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.6,0,.2,1); }
.intro.casting .intro-formula text { opacity: .8; transition: opacity .3s .25s; }

/* release: circle flashes orange, everything clears as the opening grows */
.intro.release .intro-formula { opacity: 0; filter: drop-shadow(0 0 14px rgba(255,106,19,.8)); transition: opacity .5s .35s; }
.intro.release .intro-formula .ink { stroke: var(--orange); }
.intro.release .intro-formula text { fill: var(--orange); }
.intro.release .intro-jutsu { opacity: 0; transform: scale(.92); transition: opacity .35s .2s, transform .5s .2s; }
.intro.release .intro-jutsu small { color: var(--text); }
.intro-rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.intro-skip {
  position: absolute; right: 24px; bottom: 24px;
  border: 1px solid var(--line); color: var(--muted);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; padding: 8px 14px;
}
.intro.release .intro-skip { opacity: 0; }
.intro.gone { display: none; }

/* =========================================================
   SHURIKEN CURSOR (desktop only)
   ========================================================= */
.shuriken {
  position: fixed; top: 0; left: 0; z-index: 250;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  pointer-events: none; color: var(--orange);
  transition: width .2s, height .2s, margin .2s, opacity .2s;
  opacity: 0;
}
.shuriken svg { width: 100%; height: 100%; }
.shuriken.big { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
body.has-cursor .shuriken { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}
@media (hover: none), (pointer: coarse) { .shuriken { display: none; } }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  background: rgba(11, 10, 9, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.emblem { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.emblem svg { width: 30px; height: 30px; flex: none; transition: transform .5s var(--ease); }
.emblem:hover svg { transform: rotate(-20deg); }
.nav-links { display: flex; gap: 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; }
.nav-links a { color: var(--muted); transition: color .15s; position: relative; padding: 6px 0; }
.nav-links a span { color: var(--orange); margin-right: 6px; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--orange); }
.nav-right { display: flex; align-items: center; gap: 12px; }

.menu-btn { display: none; width: 44px; height: 44px; position: relative; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--text); transition: transform .25s var(--ease), top .25s var(--ease); }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  background: var(--ink); border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 24px;
}
.mobile-menu a {
  display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 30px; text-transform: uppercase; line-height: 1;
}
.mobile-menu a span { font-family: var(--font-mono); font-size: 12px; color: var(--orange); }
.mobile-menu a small { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 420px) {
  .emblem span { font-size: 17px; }
  .nav-right .btn { padding: 11px 14px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center;
  min-height: calc(100vh - var(--nav-h));
  padding: 72px var(--gutter) 88px;
}
.hero-kanji {
  position: absolute; left: 38%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-brush); font-size: clamp(320px, 50vw, 760px); line-height: 1;
  color: #16130f; user-select: none; pointer-events: none;
}
.hero-slash {
  position: absolute; left: -5%; right: -5%; top: 64%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange) 30%, var(--orange) 70%, transparent);
  transform: rotate(-8deg); opacity: .45; pointer-events: none;
}
.hero-copy { position: relative; }
.label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.label::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--orange); }
.hero h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(64px, 11vw, 168px); line-height: .86; letter-spacing: .005em;
  margin-top: 22px;
}
.hero h1 .dot { color: var(--orange); }
.pitch { margin-top: 28px; max-width: 48ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--text-2); }
.pitch strong { color: var(--text); font-weight: 600; }
.actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* Ninja registration card */
.reg {
  --cut: 22px;
  position: relative; justify-self: center; width: 100%; max-width: 480px;
  background: var(--paper); color: var(--paper-ink);
  padding: 26px 26px 22px;
  rotate: -2deg;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.reg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--paper-ink); padding-bottom: 10px; }
.reg-head b { font-family: var(--font-kanji); font-weight: 800; font-size: 22px; white-space: nowrap; }
.reg-head small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-align: right; }
.reg-body { display: grid; grid-template-columns: 112px 1fr; gap: 18px; margin-top: 16px; }
/* Personal crest in the card's photo slot */
.crest {
  aspect-ratio: 3 / 4; background: var(--paper-2); border: 1.5px solid var(--paper-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background-image: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(26,23,20,.06) 7px 8px);
}
.crest svg { width: 66%; }
.crest span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; color: #6d6558; }
.fields { display: grid; gap: 7px; align-content: start; }
.field { display: grid; grid-template-columns: 76px 1fr; gap: 8px; border-bottom: 1px dashed rgba(26,23,20,.35); padding-bottom: 5px; }
.field dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; color: #6d6558; padding-top: 3px; }
.field dd { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.reg-foot { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; }
.bars { display: flex; gap: 4px; flex: none; }
.bars i { width: 14px; height: 4px; background: var(--paper-ink); }
.bars i:nth-child(n+4) { background: rgba(26,23,20,.2); }

.hanko {
  position: absolute; right: -14px; bottom: 54px;
  width: 92px; height: 92px;
  border: 4px solid var(--seal); color: var(--seal);
  display: grid; place-items: center;
  font-family: var(--font-kanji); font-weight: 800; font-size: 36px; line-height: 1;
  writing-mode: vertical-rl; letter-spacing: .08em;
  mix-blend-mode: multiply;
  opacity: 0; transform: rotate(12deg) scale(2.2);
}
.hanko.stamped { animation: stamp .35s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes stamp { to { opacity: .9; transform: rotate(12deg) scale(1); } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 56px; }
  .reg { rotate: -1.5deg; }
}
@media (max-width: 480px) {
  .reg { padding: 20px 18px 18px; }
  .reg-head { flex-direction: column; gap: 2px; }
  .reg-head small { text-align: left; }
  .reg-body { grid-template-columns: 84px 1fr; gap: 14px; }
  .field { grid-template-columns: 1fr; gap: 0; }
  .hanko { width: 72px; height: 72px; font-size: 28px; right: -8px; bottom: 40px; }
}

/* ---------- Numbers strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 34px var(--gutter) 30px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1; }
.stat span { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
@media (max-width: 800px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 26px 20px; }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding: clamp(80px, 11vw, 130px) var(--gutter); border-bottom: 1px solid var(--line); }
.head { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: end; margin-bottom: clamp(40px, 5vw, 60px); }
.head-kanji { grid-row: span 2; font-family: var(--font-brush); font-size: clamp(72px, 9vw, 124px); line-height: .8; color: var(--orange); }
.head-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.head h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 6vw, 88px); line-height: .9; }
.head p { grid-column: 1 / -1; color: var(--muted); max-width: 60ch; margin-top: 14px; }
@media (min-width: 700px) { .head p { grid-column: 2; margin-top: 6px; } }

.meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); }

/* =========================================================
   01 PATH: SCROLL-DRIVEN SCROLL BOX
   Tall section + sticky stage. JS writes scroll progress into CSS
   variables (--untie, --lid-lift, --rise, --unroll ...) and every
   transform below is calculated from them.
   Images: AI-generated (ChatGPT), cropped + WebP'd with Python.
   ========================================================= */
.scene {
  --box-w: min(780px, 94vw);         /* lacquer box width */
  --sw: calc(var(--box-w) * .86);    /* scroll rod width */
  --mount-w: calc(var(--sw) * .84);  /* hanging paper width = paper width on the roll */
  --paper-h: min(66vh, 560px);
  position: relative; height: 400vh;
  border-bottom: 1px solid var(--line);
}
.scene-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 58%, rgba(255,170,90,.07), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #17120e 0%, var(--ink) 70%);
}
.scene-kanji {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-brush); font-size: min(76vh, 84vw); line-height: 1;
  color: #140f0c; user-select: none; pointer-events: none;
}
.scene-floor {
  position: absolute; left: 50%; top: calc(58vh + var(--box-w) * .11);
  width: calc(var(--box-w) * .9); height: 40px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.8), transparent 70%);
  opacity: calc(1 - var(--box-fade, 0));
}

/* Lacquer box: three stacked images sharing one frame */
.scene-box {
  position: absolute; left: 50%; top: 58vh; z-index: 3;
  width: var(--box-w); aspect-ratio: 1400 / 281;
  transform: translate(-50%, calc(-50% + var(--box-sink, 0) * 65vh));
  opacity: calc(1 - var(--box-fade, 0));
}
.scene-box img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
/* offsets measured from the gold trim lines so lid + base match the closed-box image */
.scene-box .box-base { z-index: 1; transform: translateY(10.7%); }
.scene-box .box-lid {
  z-index: 2; transform-origin: 15% 70%;
  transform:
    translateY(-8.5%)
    translate(calc(var(--lid-out, 0) * -30vw), calc(var(--lid-lift, 0) * -14vh + var(--lid-out, 0) * -40vh))
    rotate(calc(var(--lid-out, 0) * -24deg));
  opacity: calc(1 - var(--lid-fade, 0));
  filter: drop-shadow(0 calc(var(--lid-lift, 0) * 24px) 18px rgba(0,0,0,.6));
}
.scene-box .box-closed { z-index: 3; opacity: calc(1 - var(--untie, 0)); transform: translateY(calc(var(--untie, 0) * 1.5%)); }
.box-glint { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; opacity: calc(1 - var(--untie, 0)); }
.box-glint::after {
  content: ""; position: absolute; top: 20%; bottom: 20%; width: 18%;
  left: calc(var(--glint, 0) * 145% - 25%);
  background: linear-gradient(100deg, transparent, rgba(255,230,170,.18), transparent);
}

/* Rolled scroll: rises out of the box, then keeps travelling down as the bottom roller */
.scene-rolled {
  position: absolute; left: 50%; top: 58vh; z-index: 2; width: var(--sw);
  transform: translate(-50%, calc(-50% - var(--rise, 0) * (58vh - 11vh) + var(--unroll, 0) * var(--paper-h)));
  scale: 1 calc(1 - var(--unroll, 0) * .14);
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.6));
}
.scene-rolled img { width: 100%; }

/* Hanging scroll (behind the roll) */
.scene-hanging {
  position: absolute; left: 50%; z-index: 1; width: var(--sw);
  top: calc(11vh - var(--sw) * .1764 * .91); /* rod sits at 91% of the rod image's height */
  transform: translateX(-50%);
  opacity: var(--swap, 0);
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.55));
}
.scene-hanging .top-rod { width: 100%; position: relative; z-index: 2; }
.mount {
  position: relative; z-index: 1; width: var(--mount-w);
  margin-top: calc(var(--sw) * .1764 * -.1);
  height: calc(var(--unroll, 0) * var(--paper-h));
  overflow: hidden;
  background: url(../assets/scroll/brocade.webp) center / 220px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 12px 16px -8px rgba(0,0,0,.7);
}
.mount-inner { height: var(--paper-h); padding: 16px 18px 34px; display: flex; flex-direction: column; }
.ichimonji { height: 8px; flex: none; background: linear-gradient(90deg, #6f5420, #e8c878 30%, #b8913f 70%, #6f5420); }
.washi {
  flex: 1; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: clamp(12px, 2.4vw, 24px);
  padding: clamp(16px, 2.6vw, 28px);
  color: var(--paper-ink);
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 12%, transparent 88%, rgba(0,0,0,.12)),
    url(../assets/scroll/washi.webp) center / 420px;
  box-shadow: inset 0 0 30px rgba(80,60,30,.25);
}

/* Writing on the scroll */
.vert { writing-mode: vertical-rl; display: flex; gap: 8px; align-items: flex-start; }
.vert-big { font-family: var(--font-brush); font-size: clamp(56px, 10vh, 96px); line-height: 1; clip-path: inset(0 0 calc((1 - var(--ink, 0)) * 100%) 0); }
.vert-small { font-family: var(--font-kanji); font-weight: 800; font-size: clamp(13px, 2vh, 16px); letter-spacing: .3em; color: var(--seal); clip-path: inset(0 0 calc((1 - var(--ink2, 0)) * 100%) 0); }
.creed { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.creed-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: #6d6558; }
.creed h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 5.4vh, 50px); line-height: .9; margin-top: 8px; }
.creed ol { margin-top: clamp(10px, 2.2vh, 20px); display: grid; gap: clamp(8px, 1.6vh, 14px); }
.creed li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 12px)); }
.creed li span { font-family: var(--font-kanji); font-weight: 800; font-size: 20px; color: var(--seal); line-height: 1.1; }
.creed li b { display: block; font-weight: 600; font-size: clamp(14px, 2vh, 17px); line-height: 1.25; }
.creed li small { display: block; font-size: clamp(12px, 1.7vh, 14px); color: #4f483f; line-height: 1.4; margin-top: 2px; }
.signature { margin-top: clamp(10px, 2vh, 16px); font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: #6d6558; opacity: var(--o-sig, 0); }
.vow-seal {
  position: absolute; right: clamp(96px, 20%, 130px); bottom: clamp(12px, 2.4vw, 20px);
  width: 58px; height: 58px; border: 3px solid var(--seal); color: var(--seal);
  display: grid; place-items: center; writing-mode: vertical-rl;
  font-family: var(--font-kanji); font-weight: 800; font-size: 20px;
  mix-blend-mode: multiply; opacity: 0; transform: rotate(-8deg) scale(2);
}
.scene.sealed .vow-seal { animation: vowIn .35s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes vowIn { to { opacity: .88; transform: rotate(-8deg) scale(1); } }

.scene-hint {
  position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); z-index: 8;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--muted);
  opacity: calc(1 - var(--hint-fade, 0));
}
.scene-hint i { width: 1px; height: 40px; background: linear-gradient(var(--orange), transparent); transform-origin: top; animation: drip 1.6s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.scene-progress { position: absolute; right: 24px; top: 50%; z-index: 8; width: 2px; height: 160px; margin-top: -80px; background: #2b2723; }
.scene-progress i { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); background: var(--orange); }

@media (max-width: 700px) {
  .scene { --box-w: 96vw; --sw: 94vw; --mount-w: 84vw; --paper-h: min(70vh, 600px); }
  .washi { grid-template-columns: 1fr; padding: 14px; }
  .vert { display: none; }
  .vow-seal { top: 12px; right: 12px; bottom: auto; width: 44px; height: 44px; font-size: 16px; }
  .creed h2 { padding-right: 52px; }
  .creed li { grid-template-columns: 22px 1fr; }
  .scene-progress { display: none; }
}
/* Reduced motion: no pinning, just the finished, open scroll */
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene-stage { position: relative; height: auto; min-height: 100vh; padding: 60px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .scene-box, .scene-floor, .scene-hint, .scene-progress { display: none; }
  .scene-hanging { order: 1; position: relative; top: auto; left: auto; transform: none; opacity: 1; }
  .scene-rolled { order: 2; position: relative; top: auto; left: auto; transform: none; scale: none; margin-top: -3%; }
  .vow-seal { opacity: .88; transform: rotate(-8deg); }
  .mount { height: var(--paper-h); }
  .creed li, .signature { opacity: 1; transform: none; }
  .vert-big, .vert-small { clip-path: none; }
}

/* ---------- 01 Path (About) ---------- */
.about { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about-text p { color: var(--text-2); font-size: clamp(16px, 1.3vw, 18px); max-width: 62ch; }
.about-text p + p { margin-top: 18px; }
.about-text .about-lead { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--text); }
.about-text strong { color: var(--orange); font-weight: 600; }

.now { border-top: 2px solid var(--orange); background: var(--ink-2); padding: 24px 26px 8px; }
.now-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; }
.pulse { width: 8px; height: 8px; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.now ul { margin-top: 16px; }
.now li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); display: grid; grid-template-columns: 92px 1fr; gap: 12px; }
.now li span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--orange); padding-top: 3px; }

/* ---------- 02 Scrolls (Projects) ---------- */
.scroll-card {
  --cut: 26px;
  position: relative; margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr 1.1fr;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: background .25s;
}
.scroll-card:hover { background: #181512; }
.scroll-visual {
  position: relative; min-height: 320px; padding: 30px;
  display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px), #100e0c;
  border-right: 1px solid var(--line);
}
.scroll-body { position: relative; padding: clamp(26px, 3vw, 44px); }
.scroll-body .meta, .scroll-body h3 { padding-right: 96px; } /* keep clear of the rank seal */
.scroll-body h3, .mini-scroll h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .92; }
.scroll-body h3 { font-size: clamp(48px, 5vw, 76px); margin-top: 12px; }
.scroll-body > p:not(.meta), .mini-scroll > p:not(.meta) { margin-top: 18px; color: var(--text-2); max-width: 52ch; }
@media (max-width: 900px) {
  .scroll-card { grid-template-columns: 1fr; }
  .scroll-visual { border-right: none; border-bottom: 1px solid var(--line); min-height: 240px; }
  .scroll-body .meta, .scroll-body h3 { padding-right: 0; } /* seal sits above the card here */
}

.rank-seal {
  position: absolute; right: clamp(20px, 3vw, 40px); top: clamp(20px, 3vw, 36px);
  width: 76px; height: 76px; border: 3px solid var(--seal); color: var(--seal);
  display: grid; place-content: center; text-align: center;
  rotate: 8deg; transition: rotate .3s var(--ease), scale .3s var(--ease);
}
.scroll-card:hover .rank-seal, .mini-scroll:hover .rank-seal { rotate: 0deg; scale: 1.06; }
.rank-seal b { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: .9; }
.rank-seal small { font-family: var(--font-kanji); font-weight: 800; font-size: 13px; }
.rank-seal.small { width: 58px; height: 58px; }
.rank-seal.small b { font-size: 28px; }
@media (max-width: 900px) { .scroll-body .rank-seal { top: -38px; background: var(--ink-2); } }

.tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { --cut: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; padding: 6px 12px; background: var(--ink-3); color: #bdb5a7; }
.scroll-link { display: inline-flex; gap: 10px; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--orange); transition: color .15s; }
.scroll-link:hover { color: var(--text); }

/* EDITH diagram */
.diagram { width: 100%; max-width: 400px; }
.diagram text { font-family: "JetBrains Mono", monospace; font-size: 10.5px; fill: #d9d2c4; letter-spacing: .04em; }
.diagram .accent { fill: var(--orange); }
.diagram .sub { font-size: 7.5px; fill: var(--muted); letter-spacing: .1em; }
.diagram .node { fill: #16130f; stroke: #3a342d; }
.diagram .core { fill: rgba(255,106,19,.1); stroke: var(--orange); }
.diagram .wire { stroke: #5a5045; stroke-width: 1.2; fill: none; stroke-dasharray: 3 5; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }

/* Majlis view mock */
.views { width: 100%; max-width: 400px; background: #16130f; box-shadow: inset 0 0 0 1px #3a342d; }
.views-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #3a342d; }
.views-tabs span { flex: 1 1 auto; text-align: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; padding: 10px 6px; color: var(--muted); }
.views-tabs span.on { background: var(--orange); color: #000; }
.views-body { padding: 16px; display: grid; gap: 10px; }
.views .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.views .row i { height: 8px; background: #2c2721; }
.views .row b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-2); }
.views-foot { margin-top: 6px; padding-top: 12px; border-top: 1px dashed #3a342d; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--orange); }

/* EDITH: diagram + live terminal stacked in the visual panel */
.scroll-visual:has(.term) { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.term {
  --cut: 10px;
  width: 100%; max-width: 400px; align-self: center;
  background: #080706; box-shadow: inset 0 0 0 1px #3a342d;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
}
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #2b2723; }
.term-bar i { width: 7px; height: 7px; background: #3a342d; }
.term-bar i:first-child { background: var(--orange); }
.term-bar span { margin-left: 8px; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.term-body { padding: 12px 14px 14px; min-height: 124px; }
.term-body p { margin: 0 0 4px; white-space: pre-wrap; word-break: break-word; }
.t-sys { color: var(--muted); }
.t-you { color: var(--text); }
.t-edith { color: var(--orange); }
.term-caret { display: inline-block; width: 7px; height: 12px; margin-left: 2px; vertical-align: -1px; background: var(--orange); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.term-note { padding: 0 14px 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; color: #5a534a; }

/* Majlis: "next mission" card (in development) */
.next-mission {
  --cut: 20px;
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3vw, 38px);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.015) 14px 15px), var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  outline: 1px dashed #3a342d; outline-offset: -8px;
}
.next-seal {
  width: 74px; height: 74px; display: grid; place-items: center;
  border: 2px dashed var(--muted); color: var(--muted);
  font-family: var(--font-kanji); font-weight: 800; font-size: 17px; writing-mode: vertical-rl; letter-spacing: .1em;
  rotate: -6deg;
}
.next-main h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 48px); line-height: .92; margin-top: 8px; }
.next-main > p:not(.meta) { margin-top: 12px; color: var(--text-2); max-width: 62ch; }
.next-main .tags { margin-top: 18px; }
.progress-track { display: grid; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); }
.progress-track li { display: flex; align-items: center; gap: 10px; }
.progress-track span { width: 10px; height: 10px; border: 1.5px solid var(--muted); rotate: 45deg; }
.progress-track .step-done { color: var(--text-2); }
.progress-track .step-done span { background: var(--orange); border-color: var(--orange); }
.progress-track .step-current { color: var(--orange); }
.progress-track .step-current span { border-color: var(--orange); animation: pulse-diamond 1.6s ease-in-out infinite; }
@keyframes pulse-diamond { 50% { background: rgba(255,106,19,.35); } }
@media (max-width: 900px) {
  .next-mission { grid-template-columns: 1fr; }
  .next-seal { position: absolute; right: 22px; top: 22px; width: 58px; height: 58px; font-size: 14px; }
  .next-main .meta, .next-main h3 { padding-right: 70px; }
  .progress-track { grid-template-columns: repeat(3, auto); justify-content: start; gap: 22px; }
}

/* Music Taste Bullying visual */
.roast { text-align: center; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(38px, 4.4vw, 60px); line-height: .95; }
.roast span { color: #1ed760; }
.roast small { display: block; margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--muted); }

/* Smaller scrolls */
.scroll-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1200px) {
  .scroll-grid { grid-template-columns: 1fr 1fr; }
  .scroll-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* no orphan gap */
}
@media (max-width: 900px) { .scroll-grid { grid-template-columns: 1fr; } }
.mini-scroll {
  --cut: 20px;
  position: relative; padding: clamp(26px, 3vw, 38px); padding-top: 34px;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column; transition: background .25s;
}
.mini-scroll:hover { background: #181512; }
.mini-scroll .meta, .mini-scroll h3 { padding-right: 76px; }
.mini-scroll h3 { font-size: clamp(34px, 3.4vw, 48px); margin-top: 12px; }
.mini-scroll .tags { margin-top: auto; padding-top: 24px; }

/* ---------- 03 Record (Experience) ---------- */
.timeline { position: relative; border-left: 1px solid var(--line); margin-left: 6px; }
.entry { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 24px 40px; padding: 0 0 52px 36px; }
.entry:last-child { padding-bottom: 8px; }
.entry::before { /* kunai-shaped marker */
  content: ""; position: absolute; left: -7px; top: 4px; width: 13px; height: 13px;
  background: var(--ink); border: 2px solid var(--orange); transform: rotate(45deg);
}
.entry:first-child::before { background: var(--orange); }
.entry-when span { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--text); }
.entry-when em { display: block; margin-top: 4px; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.entry h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3vw, 42px); line-height: .95; }
.entry-org { margin-top: 6px; color: var(--orange); font-weight: 500; }
.entry-body ul { margin-top: 16px; display: grid; gap: 10px; max-width: 70ch; }
.entry-body li { position: relative; padding-left: 22px; color: var(--text-2); }
.entry-body li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--muted); }
@media (max-width: 800px) { .entry { grid-template-columns: 1fr; gap: 12px; padding-left: 26px; } }

.academy { margin-top: 64px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
@media (max-width: 900px) { .academy { grid-template-columns: 1fr; } }
.academy-main { --cut: 22px; background: var(--paper); color: var(--paper-ink); padding: clamp(24px, 3vw, 38px); }
.academy-main .meta { color: #6d6558; }
.academy-main h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 50px); line-height: .95; margin-top: 10px; }
.academy-deg { margin-top: 10px; font-weight: 600; }
.academy-spec { color: #6d6558; margin-top: 2px; }
.academy-course { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(26,23,20,.35); font-size: 14px; color: #4a443d; }
.honors { display: grid; gap: 12px; align-content: start; }
.honors li { --cut: 12px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 22px; border-left: 3px solid var(--seal); }
.honors b { display: block; font-weight: 600; }
.honors span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }

/* ---------- 04 Chakra (Skills) ---------- */
.natures { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
/* On smaller screens the primary nature (Wind) spans two cells so the grid has no gaps */
@media (max-width: 1100px) { .natures { grid-template-columns: repeat(3, 1fr); } .nature:first-child { grid-column: span 2; } }
@media (max-width: 680px) { .natures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .natures { grid-template-columns: 1fr; } .nature:first-child { grid-column: auto; } }
.nature {
  position: relative; overflow: hidden;
  padding: 28px 24px 30px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 -1px -1px 0; /* collapse double borders */
  background: var(--ink-2); transition: background .25s;
}
.nature::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--c); transform: scaleX(.18); transform-origin: left; transition: transform .35s cubic-bezier(.7,0,.2,1);
}
.nature:hover { background: var(--ink-3); }
.nature:hover::before { transform: scaleX(1); }
.nature-k { font-family: var(--font-kanji); font-weight: 800; font-size: 76px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c); transition: color .3s; }
.nature:hover .nature-k { color: var(--c); }
.nature-el { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--c); }
.nature h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1; margin-top: 6px; }
.nature ul { margin-top: 18px; display: grid; gap: 6px; }
.nature li { font-size: 14px; color: var(--text-2); display: flex; gap: 10px; }
.nature li::before { content: "—"; color: var(--muted); }

/* ---------- 05 Summon (Résumé + Contact) ---------- */
.resume { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .resume { grid-template-columns: 1fr; } }
.resume-copy h3, .contact-copy h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 4.4vw, 64px); line-height: .92; }
.resume-copy p, .contact-copy p { margin-top: 16px; color: var(--text-2); max-width: 44ch; }
.resume-status { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--orange) !important; min-height: 1.6em; }

/* The summoning scroll: rod | paper | rod. The paper's width animates open. */
.summon-scroll { position: relative; display: flex; align-items: stretch; height: 260px; max-width: 560px; width: 100%; }
.rod {
  flex: none; width: 26px; margin: -14px 0;
  background: linear-gradient(90deg, #2a1c12, #6b4a2d 45%, #3a2718);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  position: relative; z-index: 2;
}
.rod::before, .rod::after { content: ""; position: absolute; left: -4px; right: -4px; height: 12px; background: var(--seal); }
.rod::before { top: 0; } .rod::after { bottom: 0; }
.paper {
  position: relative; overflow: hidden;
  width: 12px; /* rolled up */
  background: var(--paper); color: var(--paper-ink);
  box-shadow: inset 0 0 30px rgba(0,0,0,.18);
  transition: width 1.1s cubic-bezier(.7,0,.2,1);
}
.summon-scroll.open .paper { width: calc(100% - 52px); }
.paper-inner { width: 508px; max-width: calc(100vw - 2 * var(--gutter) - 52px); height: 100%; padding: 28px 30px; position: relative; }
.paper-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--paper-ink); padding-bottom: 10px; }
.paper-head b { font-family: var(--font-kanji); font-weight: 800; font-size: 26px; }
.paper-head span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; }
.paper-lines { margin-top: 20px; display: grid; gap: 12px; }
.paper-lines i { display: block; height: 7px; width: 92%; background: rgba(26,23,20,.16); }
.paper-seal {
  position: absolute; right: 30px; bottom: 26px; width: 74px; height: 74px;
  border: 3px solid var(--seal); color: var(--seal);
  display: grid; place-items: center; writing-mode: vertical-rl;
  font-family: var(--font-kanji); font-weight: 800; font-size: 26px;
  opacity: 0; transform: rotate(-10deg) scale(2); mix-blend-mode: multiply;
}
.paper-seal.stamped { animation: stamp2 .35s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes stamp2 { to { opacity: .9; transform: rotate(-10deg) scale(1); } }
.wax-seal {
  position: absolute; left: 26px; top: 50%; z-index: 3;
  width: 52px; height: 52px; margin-top: -26px; margin-left: -26px;
  background: var(--seal); color: var(--paper);
  display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: var(--font-kanji); font-weight: 800; font-size: 20px;
  transition: transform .4s var(--ease), opacity .4s;
}
.summon-scroll.open .wax-seal { transform: scale(0) rotate(90deg); opacity: 0; }

.contact { margin-top: clamp(64px, 8vw, 100px); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.contact-copy h3 span { color: var(--orange); }
.contact-links { border-top: 2px solid var(--orange); }
.contact-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 18px 8px; border-bottom: 1px solid var(--line);
  transition: background .15s, padding .2s var(--ease);
}
.contact-row:hover { background: var(--ink-2); padding-left: 16px; }
.contact-k { font-family: var(--font-kanji); font-weight: 800; font-size: 30px; color: var(--orange); width: 40px; text-align: center; }
.contact-row b { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 26px; line-height: 1.05; }
.contact-row small { font-family: var(--font-mono); font-size: 12px; color: var(--muted); word-break: break-all; }
.contact-row .arrow { font-size: 20px; color: var(--muted); transition: color .15s, transform .2s var(--ease); }
.contact-row:hover .arrow { color: var(--orange); transform: translate(3px, -3px); }
.copy-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; border: 1px solid #4a443d; padding: 7px 12px; color: var(--text-2); transition: border-color .15s, color .15s; }
.copy-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- Footer ---------- */
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 32px var(--gutter) 40px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted);
}
.footer-hint { opacity: .5; transition: opacity .2s; }
.footer-hint:hover { opacity: 1; }

/* ---------- Toast (easter egg + copy feedback) ---------- */
.toast {
  --cut: 12px;
  position: fixed; left: 50%; bottom: 28px; z-index: 180;
  transform: translate(-50%, calc(100% + 60px));
  visibility: hidden;
  background: var(--orange); color: #000; padding: 14px 24px;
  font-family: var(--font-display); font-size: 22px; text-transform: uppercase; white-space: nowrap;
  transition: transform .35s var(--ease), visibility 0s .35s;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform .35s var(--ease); }

/* Rasengan: a spinning chakra sphere that flies across the screen */
.rasengan {
  position: fixed; z-index: 190; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 12%, #9fd8ff 22%, #3a8ee6 48%, rgba(58,142,230,.25) 64%, transparent 70%);
  box-shadow: 0 0 60px 20px rgba(80,160,255,.45);
  animation: rasengan-spin .25s linear infinite;
}
.rasengan::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.9) 10%, transparent 25%, rgba(255,255,255,.7) 45%, transparent 60%, rgba(255,255,255,.8) 80%, transparent);
}
@keyframes rasengan-spin { to { rotate: 360deg; } }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hanko, .paper-seal { opacity: .9; transform: rotate(12deg); }
}