/* ==========================================================================
   SRIPHALA STUDIOS — visual system, pass 02
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:    #10100f;
  --bone:   #e6e0d5;
  --ash:    #858078;
  --accent: #a34f3c;
  --amber:  rgba(196,162,84,0.05);
  --line:   rgba(230,224,213,0.10);
  --line-strong: rgba(230,224,213,0.20);

  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --t-micro: 10.5px;
  --t-body:  16px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--ink); }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.5;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none), (pointer:coarse){ body{ cursor:auto; } }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; background:none; border:none; color:inherit; cursor:none; }
@media (hover:none), (pointer:coarse){ button{ cursor:auto; } }

::selection{ background:var(--accent); color:var(--bone); }
a:focus-visible, button:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }
.mono{ font-family:var(--mono); letter-spacing:0.02em; }
.micro{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:0.05em; color:var(--ash); }

/* grain — photographic, larger scale, soft-light blend */
.grain{
  position:fixed; inset:-10%; z-index:9990;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain-drift 16s steps(8) infinite;
}
@keyframes grain-drift{ 0%{ transform:translate(0,0); } 100%{ transform:translate(-1.2%,-1.2%); } }
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

/* cursor — a dot that becomes a word over meaningful elements */
.cursor-dot{
  position:fixed; top:0; left:0; z-index:9999;
  width:5px; height:5px; border-radius:50%;
  background:var(--bone);
  transform:translate(-50%,-50%);
  pointer-events:none;
  mix-blend-mode:difference;
  transition:opacity .2s ease;
}
.cursor-dot.hidden{ opacity:0; }
.cursor-label{
  position:fixed; top:0; left:0; z-index:9999;
  transform:translate(-50%,-50%);
  pointer-events:none;
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em;
  color:var(--bone);
  mix-blend-mode:difference;
  opacity:0;
  transition:opacity .2s ease;
  white-space:nowrap;
}
.cursor-label.on{ opacity:1; }
@media (hover:none), (pointer:coarse){ .cursor-dot, .cursor-label{ display:none; } }

/* navigation — markings on a frame, not a menu bar */
.frame-nav{ position:fixed; inset:0; z-index:80; pointer-events:none; }
.frame-nav .corner{ position:absolute; pointer-events:auto; }
.nav-tl{ top:26px; left:26px; }
.nav-tr{ top:26px; right:26px; text-align:right; }
.nav-bl{ bottom:26px; left:26px; }
.nav-br{ bottom:26px; right:26px; text-align:right; }

.nav-mark{ font-family:var(--mono); font-size:12px; color:var(--bone); display:inline-flex; align-items:center; }
.nav-mark .reveal{ max-width:0; overflow:hidden; opacity:0; transition:max-width .5s ease, opacity .4s ease; white-space:nowrap; }
.nav-mark:hover .reveal{ max-width:200px; opacity:1; margin-left:8px; }

.nav-page{ font-family:var(--mono); font-size:11px; color:var(--ash); }

.nav-index{ font-family:var(--mono); font-size:11px; color:var(--ash); transition:color .25s ease; }
.nav-index:hover{ color:var(--bone); }

.nav-plus{ position:relative; }
.nav-plus button{ font-family:var(--mono); font-size:14px; color:var(--ash); transition:color .25s ease; }
.nav-plus button:hover, .nav-plus button[aria-expanded="true"]{ color:var(--bone); }
.nav-plus .menu{
  position:absolute; bottom:26px; right:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.nav-plus .menu.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav-plus .menu a{ font-family:var(--mono); font-size:11px; color:var(--ash); letter-spacing:0.06em; transition:color .25s ease; }
.nav-plus .menu a:hover{ color:var(--accent); }

@media (max-width:640px){ .nav-tl, .nav-tr, .nav-bl, .nav-br{ position:fixed; } }

/* sound toggle — text, not an icon */
.sound-toggle{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:90;
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--ash);
  transition:color .3s ease;
}
.sound-toggle:hover{ color:var(--bone); }
.sound-toggle[aria-pressed="true"]{ color:var(--accent); }

.black-frame{ height:34vh; display:flex; align-items:center; justify-content:center; background:var(--ink); }

/* developing image — black to texture to sharp */
.develop{
  position:relative; overflow:hidden;
  background:linear-gradient(200deg,#1a1815,#0b0a09 70%);
  filter:blur(9px) contrast(0.74) grayscale(0.5) brightness(0.82);
  opacity:0.4;
  transition:filter 3.4s cubic-bezier(.19,.63,.08,1), opacity 3.4s ease, transform 3.4s cubic-bezier(.19,.63,.08,1);
  transform:scale(1.012);
}
.develop.in{ filter:blur(0) contrast(1) grayscale(0) brightness(1); opacity:1; transform:scale(1); }
@media (prefers-reduced-motion: reduce){ .develop{ filter:none; opacity:1; transform:none; transition:none; } }

.delayed{ opacity:0; transition:opacity 1.6s linear; }
.delayed.in{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .delayed{ opacity:1; transition:none; } }

.monumental{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(46px, 9vw, 108px);
  line-height:0.86;
  writing-mode:vertical-rl;
  letter-spacing:0.01em;
  animation:drift 28s ease-in-out infinite;
}
@keyframes drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@media (max-width:640px){
  .monumental{ font-size:clamp(38px,15vw,64px); }
}
@media (prefers-reduced-motion: reduce){ .monumental{ animation:none; } }

.placeholder-note{ font-family:var(--mono); font-size:10px; color:var(--accent); opacity:0.8; letter-spacing:0.04em; }

@media (max-width:640px){
  .hero-row{ flex-direction:column; align-items:flex-start; gap:28px !important; }
}

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