/* ==========================================================================
   MA (間) — Zen Ink-Wash entry portal
   Sumi-e on washi. Immense negative space. The type is a whisper; the ink
   is the voice. Everything here is quiet by design.
   ========================================================================== */

:root{
  /* washi paper — warm, fibrous off-white */
  --washi:      #f1ebdd;
  --washi-deep: #e8e0cd;   /* soft shadow of the paper */
  /* sumi ink — warm charcoal, never pure black */
  --sumi:       #211d18;
  --sumi-soft:  #453e33;   /* readable secondary */
  --sumi-faint: #8c8371;   /* whisper labels */
  /* shu — the vermilion of a carved seal, used once */
  --shu:        #b5432b;
  --shu-ink:    #faf5ea;

  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Songti SC", "Noto Serif JP",
           "Sorts Mill Goutte", Georgia, "Times New Roman", serif;
  --sans:  "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;

  --breath: 8.5s;   /* one slow inhale/exhale of the enso */
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  min-height:100dvh;
  background:
    radial-gradient(120% 90% at 50% 42%, var(--washi) 55%, var(--washi-deep) 100%);
  color:var(--sumi);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  position:relative;
}

/* faint fibrous grain, painted as a repeating whisper — pure CSS, no assets */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,   rgba(33,29,24,.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(33,29,24,.010) 0 1px, transparent 1px 4px);
  mix-blend-mode:multiply;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sumi); color:var(--washi);
  padding:.6rem 1rem; border-radius:2px; text-decoration:none;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.06em;
}
.skip:focus{ left:1rem; top:1rem; }

/* -------- the enso canvas: full-bleed, centered, behind the words -------- */
.ink{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%;
  transform-origin:50% 46%;
  will-change:transform, opacity;
  pointer-events:none;
}
/* the breath — a very slow scale + luminance sway, handled by CSS so the
   canvas is drawn only once. Paused for reduced motion. */
body.settled .ink{ animation:breathe var(--breath) ease-in-out infinite; }
@keyframes breathe{
  0%,100%{ transform:scale(1);      opacity:.94; }
  50%    { transform:scale(1.017);  opacity:1;    }
}

/* -------- brand mark -------- */
.mark{
  position:fixed; z-index:3; top:clamp(1.4rem,4vh,2.6rem); left:clamp(1.4rem,4vw,3rem);
  display:flex; align-items:baseline; gap:.7rem;
}
.mark-glyph{ font-size:1.5rem; color:var(--sumi); line-height:1; }
.mark-name{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.62em; padding-left:.2em; color:var(--sumi-soft);
}

/* -------- the stage: one column, centered in immense space -------- */
.stage{
  position:relative; z-index:2;
  min-height:100dvh;
  display:grid; place-items:center;
  padding:8vh clamp(1.5rem,6vw,4rem);
}
.center{
  position:relative;
  text-align:center;
  max-width:34rem;
  display:flex; flex-direction:column; align-items:center;
}
/* legibility scrim: a soft breath of washi behind the words so the headline and
   subhead never lose contrast where they cross the ink of the enso stroke */
.center::before{
  content:"";
  position:absolute; z-index:-1;
  left:50%; top:42%; transform:translate(-50%,-50%);
  width:min(34rem,92vw); height:160%;
  background:radial-gradient(60% 50% at 50% 42%,
    var(--washi) 0%, rgba(241,235,221,.95) 48%, rgba(241,235,221,0) 84%);
  pointer-events:none;
}

.say{
  margin:0;
  font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3rem);
  letter-spacing:.12em;
  line-height:1.25;
  color:var(--sumi);
  /* the words sit inside the enso's opening */
}
.sub{
  margin:1.5rem 0 0;
  max-width:20rem;
  font-size:clamp(.86rem,1.7vw,1rem);
  line-height:1.85;
  letter-spacing:.02em;
  color:var(--sumi-soft);
}

/* -------- the gate: a single hairline, no box -------- */
.gate-form{
  margin-top:clamp(3rem,9vh,5.5rem);
  width:min(24rem,80vw);
  display:flex; flex-direction:column; align-items:center;
}
.field-label{
  font-family:var(--sans);
  font-size:.66rem; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--sumi-faint);
  padding-left:.42em;
}
.field{
  margin-top:1.1rem;
  width:100%;
  display:flex; align-items:center; gap:1rem;
  border-bottom:1px solid rgba(33,29,24,.28);
  transition:border-color .5s ease;
}
.field:focus-within{ border-color:var(--sumi); }

.field-input{
  flex:1 1 auto; min-width:0;
  background:transparent; border:0; outline:0;
  padding:.55rem .2rem .7rem;
  font-family:var(--serif);
  font-size:1.12rem; letter-spacing:.34em; color:var(--sumi);
  caret-color:var(--shu);
}
.field-input::placeholder{ color:var(--sumi-faint); }

/* the seal — a carved vermilion stamp; the only saturated mark on the page */
.seal{
  flex:0 0 auto;
  width:2.6rem; height:2.6rem;
  display:grid; place-items:center;
  background:var(--shu);
  color:var(--shu-ink);
  border:0; border-radius:3px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(33,29,24,.12);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s ease, opacity .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.seal-glyph{ font-family:var(--serif); font-size:1.15rem; line-height:1; transform:translateY(.02em); }
.seal:hover{ background:#a53a24; transform:translateY(-1px); }
.seal:active{ transform:translateY(0) scale(.97); }
.seal:disabled{ opacity:.34; cursor:default; transform:none; }

/* verdicts — quiet, appear below the line */
.verdict{
  min-height:1.2em;
  margin:1.5rem 0 0;
  font-family:var(--sans);
  font-size:.78rem; letter-spacing:.08em;
  color:var(--sumi-soft);
  opacity:0; transition:opacity .5s ease;
}
.verdict:not(:empty){ opacity:1; }
.verdict.is-deny{ color:var(--shu); }

/* denied — a short, soft tremor, like a brush lifting */
body.denied .gate-form{ animation:tremor .5s ease; }
@keyframes tremor{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  40%{ transform:translateX(4px); }
  60%{ transform:translateX(-3px); }
  80%{ transform:translateX(2px); }
}

/* -------- footer whisper -------- */
.foot{
  position:fixed; z-index:3; bottom:clamp(1.3rem,4vh,2.4rem); left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--sumi-faint);
}
.foot > span:first-child{ font-family:var(--serif); letter-spacing:0; font-size:.9rem; }
.foot-line{ width:min(9rem,20vw); height:1px; background:rgba(33,29,24,.22); }

/* -------- focus visibility (keyboard) -------- */
:focus-visible{ outline:2px solid var(--sumi); outline-offset:4px; border-radius:2px; }
.seal:focus-visible{ outline-offset:3px; }
.field-input:focus-visible{ outline:none; }  /* the underline is its focus cue */

/* ==========================================================================
   GESTURE-TECH SHOWCASE — eight quiet demonstrations, each a distinct web
   technology rendered in sumi ink. Ambient, behind the words, never blocking
   the gate. Fades in on gesture, settles back to the enso.
   ========================================================================== */
.fx{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0; transition:opacity .7s ease;
  will-change:opacity;
}
.fx.on{ opacity:1; }
.fx-svg{ display:block; }

/* the gesture caption — a whisper naming what just fired */
.fxlabel{
  position:fixed; z-index:4;
  top:clamp(4.8rem,13vh,7.4rem); left:0; right:0;
  margin:0; padding:0 1rem; text-align:center;
  font-family:var(--sans);
  font-size:.62rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--sumi-soft);
  opacity:0; transition:opacity .5s ease;
  pointer-events:none;
}
.fxlabel.on{ opacity:1; }

/* CSS mask radial reveal (click-hold): an ink wash uncovers the mark through
   an animated radial-gradient mask */
.reveal{
  position:fixed; inset:0; z-index:20;
  display:grid; place-items:center;
  pointer-events:none; opacity:0;
}
.reveal-in{
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  color:var(--sumi);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 40%, transparent 62%);
          mask-image:radial-gradient(circle at 50% 50%, #000 40%, transparent 62%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:0% 0%;       mask-size:0% 0%;
}
.reveal.on{ opacity:1; }
.reveal.on .reveal-in{ animation:unmask 2.6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes unmask{
  0%  { -webkit-mask-size:0% 0%;     mask-size:0% 0%;     opacity:1; }
  62% { -webkit-mask-size:300% 300%; mask-size:300% 300%; opacity:1; }
  100%{ -webkit-mask-size:340% 340%; mask-size:340% 340%; opacity:0; }
}
.reveal-glyph{ font-family:var(--serif); font-size:clamp(4rem,20vw,9rem); line-height:1; }
.reveal-cap{
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.4em; text-transform:uppercase; color:var(--sumi-soft);
}

/* -------- the crossing: ink blooms across the washi, then we step through -- */
.wash{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  background:radial-gradient(closest-side at 50% 46%, var(--sumi) 0%, rgba(33,29,24,.9) 60%, rgba(33,29,24,0) 100%);
  opacity:0; transform:scale(.18); transform-origin:50% 46%;
}
body.crossing .wash{
  animation:bloom 1.5s cubic-bezier(.5,.0,.2,1) forwards;
}
body.crossing .center,
body.crossing .mark,
body.crossing .foot{ transition:opacity .6s ease; opacity:0; }
body.crossing .ink{ transition:opacity 1s ease, transform 1.4s ease; opacity:0; transform:scale(1.09); }
@keyframes bloom{
  0%  { opacity:0;   transform:scale(.18); }
  35% { opacity:.4;  }
  100%{ opacity:1;   transform:scale(2.4); }
}

/* -------- reduced motion: everything comes to rest -------- */
@media (prefers-reduced-motion: reduce){
  body.settled .ink{ animation:none; }
  body.denied .gate-form{ animation:none; }
  body.crossing .wash{ animation:none; opacity:1; transform:scale(2.4); transition:opacity .3s ease; }
  .seal{ transition:none; }
  /* the showcase renders a single still frame instead of looping motion */
  .reveal.on .reveal-in{ animation:none; -webkit-mask-size:340% 340%; mask-size:340% 340%; }
  .fx{ transition:opacity .3s ease; }
}

/* -------- narrow screens -------- */
@media (max-width:480px){
  .mark-name{ letter-spacing:.4em; }
  .say{ letter-spacing:.08em; }
  .foot-line{ width:5rem; }
}

/* exit veil: the LAST painted frame before leaving must match the app's dark canvas (#0b0d12) so the
   browser never shows a bright frame between documents — photosensitivity mandate, applies to every exit */
.exit-veil{ position:fixed; inset:0; z-index:2147483000; background:#0b0d12; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.exit-veil.is-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .exit-veil{ transition:none; } }