*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --ease: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  body {
    background: #0a0a0a;
    color: #f0ede6;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
    height: 100vh;
  }


  /* ═══════════════════════════════════════════════════════════
     TRANSITION LAYERS
     Multiple panels create the multi-step wipe effect.
     They're positioned fixed, stacked by z-index, and
     animated in sequence via CSS animation-delay.
  ═══════════════════════════════════════════════════════════ */

  .transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
  }

  /* Each panel = one strip of the wipe */
  .t-panel {
    position: absolute;
    inset: 0;
    transform-origin: bottom center; /* wipe from bottom */
    transform: scaleY(0);
  }

  .t-panel-1 { background: #7c5cfc; }
  .t-panel-2 { background: #0a0a0a; }
  .t-panel-3 { background: #f0ede6; }

  /* ENTERING: panels sweep up (bottom → full height) */
  .transitioning-out .t-panel-1 {
    animation: wipe-in 0.5s var(--ease) forwards;
  }
  .transitioning-out .t-panel-2 {
    animation: wipe-in 0.5s var(--ease) 0.08s forwards;
  }
  .transitioning-out .t-panel-3 {
    animation: wipe-in 0.5s var(--ease) 0.15s forwards;
  }

  /* LEAVING: panels sweep further up (collapse from top) */
  .transitioning-in .t-panel-1 {
    transform: scaleY(1);
    transform-origin: top center;
    animation: wipe-out 0.5s var(--ease) 0.1s forwards;
  }
  .transitioning-in .t-panel-2 {
    transform: scaleY(1);
    transform-origin: top center;
    animation: wipe-out 0.5s var(--ease) 0.05s forwards;
  }
  .transitioning-in .t-panel-3 {
    transform: scaleY(1);
    transform-origin: top center;
    animation: wipe-out 0.5s var(--ease) 0s forwards;
  }

  @keyframes wipe-in {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }

  @keyframes wipe-out {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0); }
  }

  /* ── CIRCLE EXPAND VARIANT ── */
  /*
    Alternative transition: circle expands from click point.
    Used via JS by passing data-transition="circle" on links.
  */
  .t-circle {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    background: #7c5cfc;
    clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%));
    transition: clip-path 0.7s var(--ease);
  }

  .t-circle.expanding {
    clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%));
  }

  .t-circle.collapsing {
    clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%));
    transition: clip-path 0.6s var(--ease) 0.1s;
  }


  /* ═══════════════════════════════════════════════════════════
     PAGE SECTIONS (simulate multi-page routing)
  ═══════════════════════════════════════════════════════════ */

  .page {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 8vw;
    overflow: hidden;
  }

  .page.active {
    display: flex;
  }

  .page-1 { background: #0a0a0a; }
  .page-2 { background: #f5f2eb; color: #111; }
  .page-3 { background: #1a1a2e; }
  .page-4 { background: #0d1117; }

  h1 {
    font-size: clamp(3rem, 10vw, 9rem);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin-bottom: 2rem;
  }

  p.page-desc {
    font-size: 1rem;
    opacity: 0.5;
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 3rem;
  }

  /* ─── NAV ─── */
  nav {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    gap: 0.5rem;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1rem;
    border-radius: 50px;
  }

  nav a {
    color: #f0ede6;
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    transition: background 0.2s ease;
    cursor: pointer;
  }

  nav a:hover, nav a.active {
    background: rgba(240,237,230,0.15);
  }

  /* ─── CTA BUTTON ─── */
  .cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: 1px solid currentColor;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    background: none;
    color: inherit;
    font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .cta:hover {
    background: currentColor;
  }

  .cta:hover span { color: var(--bg); mix-blend-mode: difference; }

  .page-indicator {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    opacity: 0.3;
    z-index: 100;
  }

  /* ═══════════════════════════════════════════════════════════
     OKAMI GRAIN OVERLAY — persistent, outside swapped content
  ═══════════════════════════════════════════════════════════ */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 2000;
    mix-blend-mode: overlay;
  }

  /* ─── VIGNETTE (persistent layer) ─── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 1999;
  }

  /* ═══════════════════════════════════════════════════════════
     OKAMI DOT+RING CURSOR
  ═══════════════════════════════════════════════════════════ */
  html, body { cursor: none; }
  #cursor {
    position: fixed; width: 2px; height: 2px;
    background: #f0e8d8; border-radius: 50%;
    pointer-events: none; z-index: 3000;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 8px rgba(240,232,216,0.8);
  }
  #cursor::after {
    content: ''; position: absolute;
    width: 24px; height: 24px;
    border: 1px solid rgba(240,232,216,0.2);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    transition: width 0.3s, height 0.3s;
  }

  /* ═══════════════════════════════════════════════════════════
     OKAMI SEAL
  ═══════════════════════════════════════════════════════════ */
  #seal {
    position: fixed;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border: 2px solid rgba(192,57,43,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
    font-size: 1.1rem;
    color: rgba(192,57,43,0.7);
    pointer-events: none;
    z-index: 51;
    rotate: -5deg;
  }

  @keyframes seal-in {
    from { opacity:0; scale:2; rotate:20deg; }
    to   { opacity:1; scale:1; rotate:-5deg; }
  }

  /* ═══════════════════════════════════════════════════════════
     BOKEH CHROMATIC ABERRATION
  ═══════════════════════════════════════════════════════════ */
  .ca-blast {
    animation: ca-anim 0.4s ease-out forwards;
  }
  @keyframes ca-anim {
    0%   { filter: none; }
    20%  { filter: drop-shadow(6px 0 0 rgba(255,0,80,0.4)) drop-shadow(-6px 0 0 rgba(0,80,255,0.4)); }
    100% { filter: none; }
  }

  /* ═══════════════════════════════════════════════════════════
     INK-FLOW TRANSITION CANVAS
  ═══════════════════════════════════════════════════════════ */
  #ink-canvas {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  #ink-canvas.ink-active {
    opacity: 1;
  }
  #ink-canvas.ink-fading {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* ═══════════════════════════════════════════════════════════
     OKAMI HUD — bottom-left
  ═══════════════════════════════════════════════════════════ */
  #transition-hud {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 2500;
    pointer-events: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.45rem;
    letter-spacing: 0.2em;
    color: rgba(201,168,76,0.4);
    text-transform: uppercase;
    line-height: 2;
  }

  /* ─── OKAMI FADE-UP ─── */
  @keyframes fade-up {
    from { opacity:0; transform: translateY(12px); }
    to   { opacity:1; transform: none; }
  }