/* ============================================================================
   the_world — THE ABANDONED CATHEDRAL
   ----------------------------------------------------------------------------
   You walked into a ruined church. Wet grey stone, moss, dust in a shaft of
   light. Hushed and holy. Type is carved into the wall (Cinzel) with whispered
   verse in the margins (EB Garamond italic). Muted, natural, reverent — the
   opposite of the cyber version.
   ========================================================================== */

:root {
  --stone-dark: #14171a;   /* wet shadow (matches 3D fog) */
  --stone:      #9aa39b;   /* lit grey-green stone */
  --moss:       #8f9e6b;   /* lichen */
  --parch:      #ded3bb;   /* aged parchment — primary text */
  --parch-dim:  rgba(222,211,187,0.45);
  --light:      #f0dca8;   /* the godray — warm accent */
  --rust:       #b06641;   /* rare oxidised accent */

  --display: 'Cinzel', 'Times New Roman', serif;
  --verse:   'EB Garamond', Georgia, serif;
  --pad: clamp(1.1rem, 3vw, 2.75rem);
}

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

html, body {
  width:100%; height:100dvh; overflow:hidden;
  /* explicit root bg = scene near-black; Safari 26 samples this to tint its
     Liquid Glass chrome (it ignores theme-color), so the bars blend instead of
     showing an opaque black band */
  background:#0a0c0a; color:var(--parch);
  font-family:var(--verse);
  -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none;
}
a, button { cursor: pointer; }
::selection { background:var(--moss); color:var(--stone-dark); }

/* ── CURSOR — a small warm light carried through the dark cathedral ─────────*/
@media (hover:hover) and (pointer:fine) {
  body, a, button { cursor: none; }
  .cursor { position:fixed; top:0; left:0; z-index:9998; pointer-events:none; will-change:transform; opacity:0; }
  .cursor-glow {
    position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
    background: radial-gradient(circle, rgba(245,225,170,0.42) 0%, rgba(232,200,120,0.16) 36%, rgba(232,200,120,0) 70%);
    transition: opacity .3s, width .3s cubic-bezier(0.16,1,0.3,1), height .3s cubic-bezier(0.16,1,0.3,1), margin .3s cubic-bezier(0.16,1,0.3,1);
  }
  .cursor-core {
    position:absolute; width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%;
    background:#fff3d6; box-shadow:0 0 6px 1px rgba(245,225,170,0.9);
  }
  body.cursor-hot .cursor-glow { width:104px; height:104px; margin:-52px 0 0 -52px; }
  body.cursor-hot .cursor-core { background:var(--moss); box-shadow:0 0 8px 2px rgba(143,158,107,0.9); }
}
@media (hover:none), (pointer:coarse) { .cursor { display:none; } }

/* isolated group: relic canvas + text stage, so .statement's mix-blend-mode
   blends against the relic (not transparent) */
/* full-screen layers fill the LARGE viewport (100lvh) so they render behind the
   iOS Safari bars/notch — edge-to-edge, no black bars */
.world { position:fixed; top:0; left:0; width:100vw; height:100lvh; z-index:0; isolation:isolate; }
.bg-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }

/* aged film grain only — no gradients, no scanlines */
.grain { position:fixed; top:0; left:0; width:100vw; height:100lvh; pointer-events:none; z-index:3; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── WORDMARK ──────────────────────────────────────────────────────────────*/
.mark { position:fixed; top:calc(var(--pad) + env(safe-area-inset-top)); left:calc(var(--pad) + env(safe-area-inset-left)); z-index:30; pointer-events:none; }
.mark-name { font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.3rem, 2.4vw, 2.1rem); letter-spacing:0.14em; color:var(--parch); }
.mark-name b { color:var(--light); font-weight:600; }
.mark-sub { font-family:var(--verse); font-style:italic; font-size:clamp(0.95rem,1.4vw,1.25rem);
  color:var(--moss); letter-spacing:0.04em; margin-top:0.25rem; }

/* ── INDEX ─────────────────────────────────────────────────────────────────*/
.index { position:fixed; bottom:calc(var(--pad) + env(safe-area-inset-bottom)); right:calc(var(--pad) + env(safe-area-inset-right)); z-index:30; display:flex; gap:1rem;
  font-family:var(--display); font-size:0.82rem; letter-spacing:0.3em; }
.index button { background:none; border:none; color:var(--parch-dim); font:inherit; letter-spacing:inherit; padding:2px; transition:color .3s; }
.index button[aria-current="true"] { color:var(--light); }
.index button:hover { color:var(--parch); }

/* ── DRAG CUE ──────────────────────────────────────────────────────────────*/
.cue { position:fixed; z-index:25; left:50%; bottom:calc(var(--pad) + 2.2rem + env(safe-area-inset-bottom)); transform:translateX(-50%);
  font-family:var(--verse); font-style:italic; font-size:clamp(0.85rem,1.3vw,1.1rem); letter-spacing:0.06em;
  color:var(--moss); transition:opacity 0.6s; }
.cue.gone { opacity:0; }

/* ── STAGE / KEYFRAMES ─────────────────────────────────────────────────────*/
.stage { position:fixed; left:0; top:0; width:100vw; height:100dvh; z-index:10; }
.kf { position:absolute; inset:0;
  padding:calc(clamp(4.5rem,10vh,7rem) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) calc(clamp(4.5rem,10vh,7rem) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
  display:grid; opacity:0; visibility:hidden; }
.kf.is-active { opacity:1; visibility:visible; }
.kf.is-active .interactive { pointer-events:auto; }

.reveal { overflow:hidden; display:block; }
.reveal-inner { display:block; will-change:transform; }

.tag { font-family:var(--display); font-size:clamp(0.62rem,0.85vw,0.78rem); letter-spacing:0.42em;
  text-transform:uppercase; color:var(--moss); margin-bottom:1.3rem; }

.statement { font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(2.1rem, 5.4vw, 5rem); line-height:1.04; letter-spacing:0.02em; color:var(--parch); }
.statement .hollow { font-family:var(--verse); font-style:italic; font-weight:500; text-transform:none;
  color:var(--light); letter-spacing:0; }
.statement .lit { color:var(--light); }

.verse { font-family:var(--verse); font-style:italic; font-size:clamp(1.05rem,1.7vw,1.5rem);
  line-height:1.5; color:var(--parch-dim); max-width:30ch; }

.note { font-family:var(--verse); font-size:clamp(0.85rem,1.1vw,1rem); letter-spacing:0.02em;
  color:var(--parch-dim); line-height:1.7; margin-top:1.2rem; max-width:34ch; }

/* ── LAYOUTS — intro centred (text both sides) · 02 angel left · 03 angel right */
#kf-0 { grid-template-rows: 1fr auto; justify-items:center; align-items:end; }
.intro-c { text-align:center; max-width:min(92vw, 40rem); align-self:end; }
.intro-c .tag { margin-left:auto; margin-right:auto; }
.intro-c .verse { margin:0.8rem auto 0; }

#kf-1 { grid-template-columns: 1fr 1.05fr; align-items:center; }
#kf-1 .block { grid-column:2; max-width:34rem; }

#kf-2 { grid-template-columns: 1.05fr 1fr; align-items:center; }
#kf-2 .block { grid-column:1; max-width:34rem; }

/* ── BUTTONS / REACTIVE TYPE (warmth, not glitch) ──────────────────────────*/
/* button = editorial chip */
.btn { display:inline-block; margin-top:1.6rem; font-family:var(--display); font-weight:600;
  font-size:clamp(0.95rem, 1.6vw, 1.25rem); letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none;
  color:var(--parch); background:rgba(8,11,8,0.55); border:1px solid var(--moss);
  padding:0.55em 1.15em; transition:color .3s, background .3s, border-color .3s; }
.btn:hover { color:var(--stone-dark); background:var(--moss); border-color:var(--moss); }

.reactive { transition:color .35s, text-shadow .35s; }
@media (hover:hover) {
  .reactive:hover { color:var(--light); text-shadow:0 0 22px rgba(240,220,168,0.5); }
}

/* readability: a soft dark halo that hugs the glyphs (not a box/gradient) so light
   text stays legible when it falls over the lit relic */
/* halo for the elements that stay plain (verse + wordmark + index) */
.verse, .mark-name, .mark-sub, .index button {
  text-shadow: 0 0 0.32em rgba(4,7,4,0.85), 0 0 0.9em rgba(4,7,4,0.6), 0 1px 2px rgba(0,0,0,0.7);
}
/* big headlines auto-contrast against the relic (difference now blends with the
   canvas thanks to the isolated .world group) */
.statement { mix-blend-mode: normal; }
/* intro headline sits over the centred relic where difference mushes — use a
   crisp dark outline that hugs the glyphs instead (no box), legible on anything */
/* intro headline: crisp type, no outline (it reads fine as-is) */
#kf-0 .statement { mix-blend-mode: normal; }
.intro-c { margin-bottom: clamp(1.5rem, 5vh, 3.5rem); }
/* editorial label bars on the small label-type text */
.tag  { display:inline-block; background:var(--moss); color:var(--stone-dark);
        padding:0.32em 0.72em; letter-spacing:0.32em; }
.note { display:inline-block; background:rgba(8,11,8,0.8); padding:0.4em 0.7em; }
.cue  { background:rgba(8,11,8,0.72); padding:0.34em 0.8em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}