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

:root {
  --gold:      #F5C518;
  --gold-dim:  #D4941A;
  --black:     #0a0a0a;
}

html, body {
  width: 100%; height: 100%;
  background: var(--black);
  overflow: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z' fill='none' stroke='%23ffffff07' stroke-width='1'/%3E%3Cpath d='M28 34 L56 50 L56 84 L28 100 L0 84 L0 50 Z' fill='none' stroke='%23ffffff07' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  pointer-events: none; z-index: 0;
}

/* ── Stage ───────────────────────────────────────────────────────────── */

.stage {
  position: relative; z-index: 1;
  width: 100%; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4.5rem;
}

.logo-wrap svg {
  width: min(360px, 78vw);
  height: auto;
  overflow: visible;
}

/* ── Hex entrance animation — spread from centre ── */

.hex-fill {
  opacity: 0;
}

.hex-strokes path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}

svg:has(.anim-draw) .hex-strokes path {
  animation: strokeDraw 0.96s linear forwards;
}

svg:has(.anim-draw) .hex-fill {
  animation: fillReveal 0.05s linear 0.96s forwards;
}

@keyframes strokeDraw {
  from { stroke-dashoffset: 160; }
  to   { stroke-dashoffset: 0;   }
}

@keyframes fillReveal {
  to { opacity: 1; }
}

/* ── Logo cell states ────────────────────────────────────────────────── */

/* Hex outlines always visible; only inner content starts hidden */
#see-text, #bee-text { opacity: 0; }

/* SEE: flicker like a CRT monitor warming up */
#cell-see.anim-flicker #see-text {
  animation: cellFlicker 0.7s steps(1) forwards;
}
@keyframes cellFlicker {
  0%   { opacity: 0;   filter: brightness(0); }
  15%  { opacity: 0.7; filter: brightness(3) grayscale(1); }
  30%  { opacity: 0;   filter: brightness(0); }
  50%  { opacity: 0.9; filter: brightness(4) grayscale(0.5); }
  65%  { opacity: 0.2; filter: brightness(0.5); }
  80%  { opacity: 1;   filter: brightness(2.5); }
  100% { opacity: 1;   filter: brightness(1); }
}

/* BEE: gold glow pulse */
#cell-bee.anim-glow #bee-text {
  animation: cellGlow 1s ease-out forwards;
}
@keyframes cellGlow {
  0%   { opacity: 0; filter: brightness(0); }
  20%  { opacity: 1; filter: brightness(6) drop-shadow(0 0 36px #F5C518ff) drop-shadow(0 0 72px #F5C518bb); }
  60%  { opacity: 1; filter: brightness(2.4) drop-shadow(0 0 28px #F5C518dd); }
  100% { opacity: 1; filter: brightness(1.1) drop-shadow(0 0 14px #F5C51899); }
}

#cell-bee.idle #bee-text {
  opacity: 1;
  animation: beeIdle 4s ease-in-out infinite;
}
@keyframes beeIdle {
  0%, 100% { filter: brightness(1)   drop-shadow(0 0 12px #F5C51880); }
  50%       { filter: brightness(1.4) drop-shadow(0 0 28px #F5C518bb); }
}

/* LABS: mask tile grows from centre; gradient soft edges track the expanding boundary.
   At 300% the opaque region extends well outside the element — fully opaque, no snap. */
#labs-panel {
  mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
  mask-size: 0% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
  -webkit-mask-size: 0% 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

#cell-labs.anim-trace #labs-panel {
  animation: revealMask 1.0s ease both 0.85s;
}

@keyframes revealMask {
  from { mask-size: 0% 100%;   -webkit-mask-size: 0% 100%;   }
  to   { mask-size: 300% 100%; -webkit-mask-size: 300% 100%; }
}

/* ── Tagline ─────────────────────────────────────────────────────────── */

.tagline {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
  letter-spacing: 0.08em;
  color: var(--gold-dim);
  text-shadow: 0 0 1px currentColor;
  opacity: 0;
  transition: opacity 0.5s ease;
  white-space: nowrap;
  user-select: none;
}
.tagline.visible { opacity: 1; }

.cursor {
  display: inline-block;
  width: 0;
  overflow: visible;
  color: var(--gold);
  animation: blink 1.1s step-start infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Pre-exit: tagline pixel corruption ─────────────────────────────── */

.tagline.text-corrupt {
  animation: taglineCorrupt 2.6s linear forwards;
}

@keyframes taglineCorrupt {
  /* clean(0.5s) → corrupt2(0.7s) → corrupt3(0.7s) → corrupt4(0.7s) */
  0%      { animation-timing-function: steps(1, end); filter: none; }
  /* 19.23% { animation-timing-function: steps(1, end); filter: url(#text-block-1); } */
  19.23%  { animation-timing-function: steps(1, end); filter: url(#text-block-2); }
  46.15%  { animation-timing-function: steps(1, end); filter: url(#text-block-3); }
  73.08%  { animation-timing-function: steps(1, end); filter: url(#text-block-4); }
  100%    { filter: url(#text-block-4); }
}

/* ── Exit: glitch / signal dropout ──────────────────────────────────── */

.logo-wrap svg.signal-loss {
  animation: signalLoss 1.05s steps(1) forwards;
}

@keyframes signalLoss {
  0%   { opacity: 1;    transform: translate(0,      0);   filter: brightness(1)   saturate(1);                                                              }
  8%   { opacity: 0.7;  transform: translate(5px,  -2px);  filter: url(#strip-tear) brightness(2)                saturate(0.3) hue-rotate(90deg);            }
  12%  { opacity: 1;    transform: translate(-3px,  3px);  filter: url(#pixel-noise) brightness(1)               saturate(0.7) hue-rotate(15deg);            }
  17%  { opacity: 0;    transform: translate(0,      0);   filter: brightness(0);                                                                            }
  20%  { opacity: 0.85; transform: translate(-6px,  2px);  filter: url(#strip-tear) url(#pixel-noise) brightness(3)  saturate(0.4) hue-rotate(180deg);       }
  25%  { opacity: 0.3;  transform: translate(4px,  -3px);  filter: url(#strip-tear) brightness(0.5)              saturate(0);                               }
  29%  { opacity: 1;    transform: translate(-2px,  4px);  filter: url(#pixel-noise) brightness(2)               saturate(0.2) hue-rotate(45deg);            }
  34%  { opacity: 0;    transform: translate(0,      0);   filter: brightness(0);                                                                            }
  38%  { opacity: 0.6;  transform: translate(7px,  -2px);  filter: url(#strip-tear) brightness(1.5)              saturate(0)   hue-rotate(130deg);            }
  42%  { opacity: 0;    transform: translate(2px,   2px);  filter: brightness(0);                                                                            }
  48%  { opacity: 0.25; transform: translate(-4px, -3px);  filter: url(#strip-tear) url(#pixel-noise) brightness(0.8) saturate(0);                           }
  53%  { opacity: 0;    transform: translate(0,      0);   filter: brightness(0);                                                                            }
  61%  { opacity: 0.1;  transform: translate(3px,   2px);  filter: url(#strip-tear) brightness(0.4)              saturate(0);                               }
  66%  { opacity: 0;    transform: translate(-1px,  1px);  filter: brightness(0);                                                                            }
  100% { opacity: 0;    transform: translate(0,      0);   filter: brightness(0);                                                                            }
}

/* ── Tagline signal dropout — on the wrapper so it composites over corruption ─ */
/* opacity + transform only; no filter here so the corruption filter on the inner
   element is what the browser rasterises before applying these glitch movements. */

#tagline-wrap.signal-loss {
  animation: taglineSignalLoss 1.05s steps(1) forwards;
}

@keyframes taglineSignalLoss {
  0%   { opacity: 1;    transform: translate(0,     0); }
  8%   { opacity: 0.7;  transform: translate(5px,   0); }
  12%  { opacity: 1;    transform: translate(-3px,  0); }
  17%  { opacity: 0;    transform: translate(0,     0); }
  20%  { opacity: 0.85; transform: translate(-6px,  0); }
  25%  { opacity: 0.3;  transform: translate(4px,   0); }
  29%  { opacity: 1;    transform: translate(-2px,  0); }
  34%  { opacity: 0;    transform: translate(0,     0); }
  38%  { opacity: 0.6;  transform: translate(7px,   0); }
  42%  { opacity: 0;    transform: translate(2px,   0); }
  48%  { opacity: 0.25; transform: translate(-4px,  0); }
  53%  { opacity: 0;    transform: translate(0,     0); }
  61%  { opacity: 0.1;  transform: translate(3px,   0); }
  66%  { opacity: 0;    transform: translate(-1px,  0); }
  100% { opacity: 0;    transform: translate(0,     0); }
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  position: fixed;
  bottom: 1.5rem;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold-dim);
  opacity: 0.55;
  z-index: 1;
  user-select: none;
}