/* ============================================================================
   04 — CREASE  ·  Saito Ihara  ·  Folded paper architecture
   White paper, sumi ink, sharp shadows. Fraunces + Inter + JetBrains Mono.
   ========================================================================== */

:root {
  --paper:        #f4ede0;
  --paper-deep:   #ede4d2;
  --paper-shadow: #d8ccb4;
  --ink:          #1a1612;
  --ink-mute:     #6b5d48;
  --ink-soft:     #a89c8a;
  --hair:         rgba(26, 22, 18, 0.10);
  --hair-strong:  rgba(26, 22, 18, 0.22);
  --rust:         #8a4a28;
  --rust-soft:    rgba(138, 74, 40, 0.5);
  --display:      'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --body:         'Inter', system-ui, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, monospace;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100svh; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; height: 100svh; }

/* ============================================================================
   WEBGL CANVAS + STATIC OVERLAYS
   ========================================================================== */
#fxCanvas {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}

.paper-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(216, 204, 180, 0.45) 100%),
    linear-gradient(180deg, rgba(244, 237, 224, 0) 0%, rgba(216, 204, 180, 0.20) 100%);
  mix-blend-mode: multiply;
}

.paper-grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================================
   HUD CHROME — corner brackets + rule lines + cypher
   ========================================================================== */
.hud-corners { position: fixed; inset: 22px; z-index: 4; pointer-events: none; }
.bracket {
  position: absolute; width: 18px; height: 18px;
  border-color: var(--hair-strong);
}
.bracket--tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.bracket--tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.bracket--bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.bracket--br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }

.rule {
  position: fixed; left: 70px; right: 70px; z-index: 4;
  display: flex; align-items: center; gap: 16px;
  font: 10px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); pointer-events: none;
}
.rule--top { top: 36px; }
.rule--bottom { bottom: 36px; }
.rule__line { flex: 1; height: 1px; background: var(--hair); }
.rule__left, .rule__right { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rule__left .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rust);
  animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.cypher-rail {
  position: fixed; bottom: 60px; left: 0; right: 0; z-index: 4;
  pointer-events: none; overflow: hidden; height: 14px;
  opacity: 0.18;
}
.cypher-rail__row {
  display: inline-flex; white-space: nowrap;
  font: 10px/1 var(--mono); letter-spacing: 0.20em; color: var(--ink);
  animation: cypherSlide 80s linear infinite;
}
@keyframes cypherSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================================
   FIXED CHROME (brand, sound, indicator, scroll cue)
   ========================================================================== */
.brand-fixed {
  position: fixed; top: 60px; left: 70px; z-index: 50;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 4px 0; pointer-events: auto;
}
.brand-fixed__mark { width: 22px; height: 22px; flex-shrink: 0; }
.brand-fixed__name { font: 500 13px/1 var(--display); letter-spacing: 0.18em; color: var(--ink); }
.brand-fixed__sub { font: 300 10px/1 var(--mono); letter-spacing: 0.22em; color: var(--ink-mute); }

.sound-toggle {
  position: fixed; top: 60px; right: 70px; z-index: 50;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(244, 237, 224, 0.4); border: 1px solid var(--hair-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 400 10px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); cursor: pointer; transition: all 240ms ease;
  border-radius: 0;
}
.sound-toggle:hover { background: rgba(244, 237, 224, 0.7); border-color: var(--rust); color: var(--rust); }
.sound-toggle__bars { width: 38px; height: 9px; opacity: 0.4; transition: opacity 240ms ease; }
.sound-toggle.is-on .sound-toggle__bars { opacity: 1; animation: barsLive 1.4s ease-in-out infinite alternate; }
@keyframes barsLive { from { opacity: 0.5; } to { opacity: 1; } }

.scene-indicator {
  position: fixed; bottom: 60px; left: 70px; z-index: 50;
  display: inline-flex; align-items: center; gap: 14px;
  font: 400 10px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); pointer-events: none;
}
.scene-indicator__num { font: 500 14px/1 var(--display); color: var(--ink); }
.scene-indicator__label { color: var(--ink); }
.scene-indicator__bar { display: inline-block; width: 90px; height: 1px; background: var(--hair-strong); position: relative; overflow: hidden; }
.scene-indicator__fill { position: absolute; inset: 0; width: 12.5%; background: var(--rust); transition: width 600ms cubic-bezier(.22,.61,.36,1); }

.scroll-cue {
  position: fixed; bottom: 60px; right: 70px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 10px/1 var(--mono); letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--ink-mute); pointer-events: none;
  transition: opacity 600ms ease;
}
.scroll-cue.is-hidden { opacity: 0; }
.scroll-cue .arrow { animation: cueBob 2s ease-in-out infinite; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(4px); opacity: 1; } }

/* ============================================================================
   DECK — scrollable scene container
   ========================================================================== */
.deck {
  position: relative; z-index: 5;
  height: 100svh;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.deck::-webkit-scrollbar { display: none; }

.scene {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex; align-items: center;
  padding: clamp(120px, 14vh, 160px) clamp(70px, 7vw, 140px);
}

.scene__inner { width: 100%; max-width: 1280px; margin: 0 auto; }
.scene__inner--center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.scene__inner--split {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.3fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.scene__inner--split.scene__inner--reverse > .work__meta { order: 2; }
.scene__inner--split.scene__inner--reverse > .work__viewport { order: 1; }

@media (max-width: 880px) {
  .scene { padding: clamp(96px, 12vh, 140px) clamp(28px, 5vw, 60px); }
  .scene__inner--split { grid-template-columns: 1fr; gap: 40px; }
  .scene__inner--split.scene__inner--reverse > .work__meta { order: 0; }
  .scene__inner--split.scene__inner--reverse > .work__viewport { order: 0; }
  .rule { left: 28px; right: 28px; }
  .brand-fixed, .scene-indicator { left: 28px; }
  .sound-toggle, .scroll-cue { right: 28px; }
}

/* ============================================================================
   TYPOGRAPHY — Fraunces display, italic accent, Inter body
   ========================================================================== */
.scene__label {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(20px, 3vh, 36px);
}
.scene__label .ord { color: var(--rust); margin-right: 14px; }

.display {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(46px, 7.5vw, 124px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: clamp(20px, 3vh, 36px);
}
.display em {
  font-style: italic; font-weight: 300; color: var(--rust);
  font-feature-settings: 'liga' 1, 'kern' 1;
}
.display--hero { max-width: 16ch; margin: 0 auto; }
.display--quiet { font-size: clamp(38px, 5.5vw, 88px); }

.lede {
  font: 300 clamp(15px, 1.4vw, 19px)/1.55 var(--body);
  color: var(--ink-mute);
  max-width: 52ch;
  letter-spacing: -0.005em;
  margin-top: clamp(8px, 1.6vh, 18px);
}
.scene__inner--center .lede { margin-left: auto; margin-right: auto; }

.hero-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(20px, 3vh, 36px); }
.meta-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--hair-strong);
  font: 400 10px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute);
}
.meta-chip i { width: 4px; height: 4px; background: var(--rust); display: inline-block; }

/* ============================================================================
   WORK SCENES — meta column + viewport
   ========================================================================== */
.work__meta { display: flex; flex-direction: column; }
.work__year {
  font: 400 11px/1 var(--mono); letter-spacing: 0.28em;
  color: var(--rust); margin-bottom: 16px;
}
.work__type {
  font: 400 13px/1.4 var(--mono); letter-spacing: 0.05em;
  color: var(--ink-mute); margin: 4px 0 24px;
}
.work__body {
  font: 300 clamp(14px, 1.1vw, 17px)/1.65 var(--body);
  color: var(--ink); max-width: 44ch; margin-bottom: 28px;
}
.work__creds { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.work__creds li {
  font: 400 11px/1.4 var(--mono); letter-spacing: 0.10em;
  color: var(--ink-mute); padding-left: 14px; position: relative;
}
.work__creds li::before {
  content: '⎯'; position: absolute; left: 0; color: var(--rust); opacity: 0.7;
}

.work__viewport {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%; max-width: 540px; margin: 0 auto;
  /* the WebGL is fixed behind; this slot is just for caption + layout reservation */
}
.viewport__caption {
  position: absolute; bottom: -28px; right: 0;
  font: 400 10.5px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
}
.viewport__caption em { font-family: var(--display); font-style: italic; color: var(--rust); text-transform: none; letter-spacing: 0; }

/* ============================================================================
   ABOUT SCENE
   ========================================================================== */
.about-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 6vh, 64px);
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 28px; } }
.about-para {
  font: 300 clamp(14px, 1.05vw, 16px)/1.7 var(--body);
  color: var(--ink); padding-top: 18px;
  border-top: 1px solid var(--hair-strong);
}

.about-meta {
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--hair-strong);
  display: flex; flex-direction: column; gap: 6px;
}
.meta-line { font: 400 11px/1.4 var(--mono); letter-spacing: 0.18em; color: var(--ink-mute); }

/* ============================================================================
   CONTACT SCENE
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: clamp(40px, 6vh, 64px); width: 100%; max-width: 1080px;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px;
  background: rgba(244, 237, 224, 0.4);
  border: 1px solid var(--hair-strong);
  text-decoration: none; text-align: left;
  transition: all 280ms cubic-bezier(.22,.61,.36,1);
}
.contact-card:hover { background: rgba(244, 237, 224, 0.85); border-color: var(--rust); transform: translateY(-2px); }
.contact-card__label { font: 400 10px/1 var(--mono); letter-spacing: 0.30em; text-transform: uppercase; color: var(--rust); }
.contact-card__value { font: 300 17px/1.35 var(--display); color: var(--ink); }
.contact-card__hint { font: 300 12px/1.35 var(--body); color: var(--ink-mute); margin-top: 4px; font-style: italic; }

.footer {
  margin-top: clamp(56px, 8vh, 96px);
  padding-top: 28px; border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 6px; text-align: center; align-items: center;
}
.footer__line { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.22em; color: var(--ink-mute); }

/* ============================================================================
   LETTER REVEAL (word-aware split)
   ========================================================================== */
.splitw { display: inline-block; white-space: nowrap; }
.splitch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em);
  filter: blur(8px);
  transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1), filter 0.7s ease;
}
.splitch.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================================
   GATE — entry door
   ========================================================================== */
.gate {
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 900ms;
}
.gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__bg {
  position: absolute; inset: 0; opacity: 0.30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
}
.gate__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 56px 48px;
  max-width: 520px;
}
.gate__loading { font: 400 10.5px/1 var(--mono); letter-spacing: 0.30em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; gap: 4px; }
.gate__loading .dots { display: inline-flex; gap: 3px; align-items: flex-end; }
.gate__loading .dots i { width: 3px; height: 3px; background: var(--ink-mute); border-radius: 50%; animation: gateDot 1.2s ease-in-out infinite; }
.gate__loading .dots i:nth-child(2) { animation-delay: 0.18s; }
.gate__loading .dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes gateDot { 0%, 100% { opacity: 0.2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.gate__mark { width: 80px; height: 80px; margin: 24px 0 16px; }
.gate__title {
  font: 400 36px/1 var(--display);
  letter-spacing: 0.20em; color: var(--ink);
  margin: 6px 0;
}
.gate__sub { font: 300 13px/1.4 var(--body); color: var(--ink-mute); font-style: italic; text-align: center; }

.gate__btns { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.gate__btn {
  min-height: 48px; min-width: 180px;
  padding: 0 28px;
  background: transparent; border: 1px solid var(--hair-strong);
  font: 400 11px/1 var(--mono); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink); cursor: pointer; touch-action: manipulation;
  transition: all 240ms cubic-bezier(.22,.61,.36,1);
}
.gate__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gate__btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gate__btn--primary:hover { background: var(--rust); border-color: var(--rust); }

.gate__small { font: 300 11px/1.4 var(--body); color: var(--ink-soft); margin-top: 18px; font-style: italic; }

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .splitch, [data-reveal] { opacity: 1; transform: none; filter: none; }
}