/* ============================================================
   VOID HERO TITLE — EXACT COPY of the title lab's Design 23
   (Cinzel · EHT M87). These rules are lifted VERBATIM from
   lab.css, in the same source order, so the cascade resolves
   identically to title-23.html. Do not edit — to change the
   title, pick a different lab design and re-copy its rules.
   The markup mirrors title-23.html exactly:
     <h1 class="ttl ttl--ele ttl--e-cinzel play">
       <span>V</span><span class="bh"></span><span>I</span><span>D</span>
     </h1>
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&display=swap');

:root{
  --bg:#050505; --ink:#ededeb; --ink-dim:#8a8580;
  --gold:#d6b269; --gold-soft:#b08a3a; --yellow:#ecc94a; --line:rgba(214,178,105,0.22);
  --display:-apple-system,"SF Pro Display","Inter Display","Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
}

/* ---- base title ---- */
.ttl{
  position:relative;z-index:2;margin:0;
  font-family:var(--display);font-weight:200;
  font-size:clamp(64px,15vw,220px);line-height:0.95;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--gold);
  text-shadow:0 0 26px rgba(0,0,0,0.7),0 0 70px rgba(0,0,0,0.5);
  white-space:nowrap;user-select:none;
}

/* ---- base black hole "O" (overridden in part by Cinzel below) ---- */
.ttl .bh{
  position:relative;display:inline-block;
  width:0.96em;height:0.96em;margin:0 0.06em;
  border-radius:50%;background:#000;
  box-shadow:
    0 0 0 1.4px rgba(255,238,180,0.9),
    0 0 14px rgba(255,206,128,0.55),
    0 0 32px rgba(255,170,90,0.4),
    0 0 62px rgba(255,140,60,0.22);
}
/* Edge-on accretion disk — a thin tilted glowing band crossing the BH,
   passing in front (z-index 2) so it slices through the sphere. */
.ttl .bh::before{
  content:"";position:absolute;
  left:-45%;right:-45%;top:50%;
  height:0.085em;margin-top:-0.043em;
  background:linear-gradient(90deg,
    transparent 0%, rgba(255,180,80,0) 9%,
    rgba(255,222,150,0.75) 26%,
    #fff6df 48%, #ffd9a8 50%, #ffb04a 52%,
    rgba(255,222,150,0.75) 74%,
    rgba(255,180,80,0) 91%, transparent 100%);
  transform:rotate(-9deg);
  filter:blur(0.6px);
  box-shadow:0 0 14px rgba(255,200,120,0.55),0 0 28px rgba(255,160,80,0.32);
  z-index:2;
}
/* Lensed back of the disk arcing over the top of the BH (gravitational
   lensing bends the far side of the disk above the event horizon). */
.ttl .bh::after{
  content:"";position:absolute;inset:-9%;
  border-radius:50%;
  background:conic-gradient(from 270deg,
    transparent 0deg, rgba(255,222,150,0) 42deg,
    rgba(255,222,150,0.65) 70deg,
    #fff6df 90deg, rgba(255,222,150,0.65) 110deg,
    rgba(255,222,150,0) 138deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 50%, #000 53%, #000 60%, transparent 63%);
          mask:radial-gradient(circle, transparent 50%, #000 53%, #000 60%, transparent 63%);
  filter:blur(0.6px);
  transform:rotate(-9deg);
  z-index:1;
}
@keyframes bh-pulse{
  0%,100%{box-shadow:0 0 0 1.4px rgba(255,238,180,0.9),0 0 14px rgba(255,206,128,0.55),0 0 32px rgba(255,170,90,0.4),0 0 62px rgba(255,140,60,0.22);}
  50%   {box-shadow:0 0 0 1.6px rgba(255,250,210,1.0),0 0 22px rgba(255,210,140,0.70),0 0 48px rgba(255,180,100,0.5),0 0 84px rgba(255,150,70,0.28);}
}

/* ---- tune-in (blink) entry, used by .ttl--ele ---- */
@keyframes static-in{
  0%{opacity:0;filter:blur(11px) contrast(3);transform:scale(1.04);}
  18%{opacity:0.55;}24%{opacity:0.08;}34%{opacity:0.75;filter:blur(5px) contrast(2);}
  44%{opacity:0.2;}60%{opacity:0.92;filter:blur(2px);}70%{opacity:0.45;}
  100%{opacity:1;filter:blur(0) contrast(1);transform:scale(1);}
}

/* ---- elegant face + Cinzel (Design 23) ---- */
.ttl--ele{
  display:inline-flex;align-items:center;gap:0.08em;
  opacity:0;color:var(--yellow);font-weight:300;
  letter-spacing:0.14em;font-size:clamp(46px,9.5vw,150px);
  text-shadow:0 0 26px rgba(0,0,0,0.7),0 0 60px rgba(0,0,0,0.5);
}
.ttl--ele.play{animation:static-in 1.5s both;}
.ttl--e-cinzel{font-family:'Cinzel',Georgia,serif;font-weight:400;letter-spacing:0.12em;}

/* ---- 23 · Cinzel — EHT M87 ------------------------------------
   The 2019 Event Horizon Telescope image. No accretion disk, just
   a thick asymmetric red-orange photon ring (brighter at one side),
   slow rotation of the bright arc around the event horizon. */
.ttl--e-cinzel .bh{
  background:
    radial-gradient(circle, #000 51%, rgba(255,90,30,0.7) 54%, rgba(255,140,60,0.32) 60%, transparent 64%);
  box-shadow:
    0 0 22px rgba(255,120,50,0.4),
    0 0 50px rgba(255,90,30,0.22);
}
.ttl--e-cinzel .bh::before{
  inset:-10%; border-radius:50%;
  background:conic-gradient(from 90deg,
    rgba(255,160,70,0.35) 0deg, rgba(255,200,100,0.85) 60deg,
    #ffd28c 110deg, rgba(255,200,100,0.85) 160deg,
    rgba(255,160,70,0.35) 220deg, rgba(255,120,50,0.12) 290deg,
    rgba(255,160,70,0.35) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 51%, #000 54%, #000 60%, transparent 63%);
          mask:radial-gradient(circle, transparent 51%, #000 54%, #000 60%, transparent 63%);
  filter:blur(0.5px);
  z-index:1;
}
.ttl.play.ttl--e-cinzel .bh::before{animation:bh23-rot 16s linear infinite;}
@keyframes bh23-rot{to{transform:rotate(360deg);}}