/* =====================================================================
   CESAR LACERDA — background only
   A cinematic boot into a living WebGL background. Nothing else on stage.
   Dependency-free, file:// safe.
   Palette: strictly black & grey — near-black ground, greys, silver/white.
   ===================================================================== */

:root{
  --bg:#050505;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:var(--bg)}
body{
  background:var(--bg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── full-bleed canvases ───────────────────────────────────────────── */
#gl,#fx{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0;
}
#fx{ z-index:1; mix-blend-mode:screen; opacity:0; transition:opacity 1.4s ease; }
#fx.lit{ opacity:.9; }

/* ── stage: the words surfacing from the liquid ────────────────────── */
#stage{
  position:fixed; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:6vw; text-align:center; pointer-events:none;
}

/* Ipse Triumpho — SOLID BLACK letterforms that rise out of the liquid.
   They read as a dark silhouette against a brighter "wet pool" of liquid
   that parts to release them (the ::before glow bed). The black body stays
   black — only a thin wet meniscus rim + lower-edge depth touch the glyphs;
   a faint specular glint occasionally crosses them so they look wet. */
.phrase{
  position:relative; display:inline-block; margin:0;
  font-family:Georgia,"Times New Roman",Times,serif;
  font-weight:700; font-style:normal;
  font-size:clamp(44px,9vw,124px); line-height:1; letter-spacing:.01em;
  color:#000;                                   /* solid black */
  -webkit-text-stroke:.6px #040405;             /* a touch more mass so the black holds */
  text-shadow:
    0 -1px 1px rgba(208,208,216,.45),           /* thin wet meniscus on the top edge */
    0  2px 3px rgba(0,0,0,.9);                   /* depth below — the letter sits in the pool */
  opacity:0; transform:translateY(.5em) scaleY(1.06); filter:blur(15px);
  will-change:transform,opacity,filter;
}
/* the wet POOL the letters rise from — a soft, brighter bed of liquid behind
   the text so the solid-black glyphs always have something to read against. */
.phrase::before{
  content:""; position:absolute; left:50%; top:50%; z-index:-1;
  width:172%; height:240%; transform:translate(-50%,-50%);
  background:radial-gradient(58% 58% at 50% 50%,
    rgba(176,176,186,.26) 0%, rgba(140,140,150,.10) 46%, rgba(120,120,130,0) 72%);
  filter:blur(16px); pointer-events:none;
  opacity:0;
}
.phrase.in::before{ animation:pool 1.9s ease .25s forwards, poolbreathe 8s ease-in-out 2.4s infinite; }
@keyframes pool{ from{opacity:0; filter:blur(28px)} to{opacity:1; filter:blur(16px)} }
@keyframes poolbreathe{ 0%,100%{opacity:1} 50%{opacity:.78} }

/* surface: rise up, un-blur and settle. */
.phrase.in{ animation:surface 1.7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes surface{
  0%  { opacity:0; transform:translateY(.5em) scaleY(1.06); filter:blur(15px); }
  55% { opacity:1; }
  100%{ opacity:1; transform:none;                          filter:blur(0);    }
}

/* the wet specular glint — a duplicate of the text, clipped to the glyphs,
   with a soft light bar that occasionally sweeps across (screen-blended).
   Kept faint so the letters stay solidly black between glints. */
.phrase::after{
  content:attr(data-txt);
  position:absolute; left:0; top:0; width:100%; pointer-events:none;
  color:transparent;
  background:linear-gradient(100deg,transparent 44%,rgba(228,228,236,.55) 50%,transparent 56%);
  -webkit-background-clip:text; background-clip:text;
  background-repeat:no-repeat; background-size:300% 100%; background-position:170% 0;
  mix-blend-mode:screen; opacity:0;
}
.phrase.in::after{ animation:sheen 9s ease-in-out 2.2s infinite; }
@keyframes sheen{
  0%  { background-position:170% 0; opacity:0; }
  6%  { opacity:.9; }
  30% { background-position:-70% 0; opacity:.9; }
  40%,100%{ background-position:-70% 0; opacity:0; }
}

/* ── opening curtain ───────────────────────────────────────────────── */
#curtain{
  position:fixed; inset:0; z-index:50; background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
#curtain.lift{ opacity:0; pointer-events:none; }
#curtain.gone{ display:none; }
/* pre-ignition boot beat: a faint greyscale aperture iris opens, with a
   single scanline sweep, then the spark ignites at the iris centre. */
.aperture{
  position:absolute; width:240px; height:240px; border-radius:50%;
  border:1px solid rgba(160,160,166,0);
  transform:scale(.02);
  animation:aperture 1.55s cubic-bezier(.33,0,.18,1) forwards;
  pointer-events:none;
}
@keyframes aperture{
  0%   { transform:scale(.02); border-color:rgba(160,160,166,0); box-shadow:0 0 0 0 rgba(150,150,156,0); }
  20%  { border-color:rgba(184,184,190,.5); box-shadow:0 0 18px 1px rgba(120,120,126,.18); }
  62%  { transform:scale(1);   border-color:rgba(132,132,138,.30); box-shadow:0 0 26px 1px rgba(120,120,126,.10); }
  100% { transform:scale(1.55); border-color:rgba(110,110,116,0); box-shadow:0 0 0 0 rgba(120,120,126,0); opacity:0; }
}
.scanline{
  position:absolute; left:0; right:0; height:1px; top:42%;
  background:linear-gradient(90deg,transparent,rgba(168,168,174,.42),transparent);
  opacity:0; pointer-events:none;
  animation:scan 1.55s ease-in-out forwards;
}
@keyframes scan{
  0%   { top:40%; opacity:0; }
  22%  { opacity:.55; }
  78%  { opacity:.38; }
  100% { top:60%; opacity:0; }
}
.spark{
  width:3px; height:3px; border-radius:50%;
  background:#f4f4f5;
  box-shadow:0 0 0 0 rgba(230,230,235,.9);
  transform:scale(0);
  animation:ignite 2.1s cubic-bezier(.2,.7,.2,1) .85s forwards;
}
@keyframes ignite{
  0%   { transform:scale(0);   box-shadow:0 0 0 0 rgba(230,230,235,.0); opacity:0; }
  12%  { transform:scale(1);   opacity:1; }
  44%  { transform:scale(1.4); box-shadow:0 0 24px 6px rgba(210,210,216,.85); }
  100% { transform:scale(72);  box-shadow:0 0 190px 72px rgba(120,120,128,.0); opacity:0; }
}

/* ── reduced motion: skip the cinema, show the end state ───────────── */
@media (prefers-reduced-motion:reduce){
  #curtain{ display:none; }
  #fx{ opacity:.7; }
  .spark,.aperture,.scanline{ animation:none; }
  .phrase{ opacity:1; transform:none; filter:none; animation:none; }
  .phrase::after{ display:none; }
}