/* index.css — Index page specific styles */

/* Layer stack:
   0  — Three.js canvas (appended by renderer, sits at natural position)
   1  — page content
   5  — #glitch-title
   100 — #transition-overlay
*/

body {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
}

/* Exit transition overlay */
#transition-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 100;
}

#transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Scene object labels ────────────────────────────────────────────────── */
#scene-labels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.scene-label {
  position: absolute;
  transform: translate(-50%, 0);
  font-family: "Roboto", sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(142, 198, 197, 0.75); /* --c4 seafoam */
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ── Glitch title ─ crescendo: calm → max chaos over 12s ───────────────── */
#glitch-title {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-family: "Roboto", sans-serif;
  font-size: clamp(3.5rem, 12vw, 9rem);
  font-weight: 900;
  letter-spacing: 0.25em;
  color: #fff;
  pointer-events: none;
  user-select: none;
  animation: glitch-jitter 12s ease-in 1 forwards;
}

/* Small screens: title anchored to top, objects fill below */
@media (max-width: 700px) {
  #glitch-title {
    top: 10%;
    transform: translate(-50%, 0);
  }
}

#glitch-title::before,
#glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#glitch-title::before {
  color: rgba(142, 198, 197, 0.85); /* --c4 dusty seafoam */
  animation: glitch-cyan 12s ease-in 1 forwards;
  mix-blend-mode: screen;
}

#glitch-title::after {
  color: rgba(74, 143, 168, 0.85); /* --c3 steel blue */
  animation: glitch-magenta 12s ease-in 1 forwards;
  mix-blend-mode: screen;
}

/* ─ Base jitter ────────────────────────────────────────────── */
@keyframes glitch-jitter {
  0%, 38%  { transform: translate(-50%, -50%); }
  /* phase 1 — micro tremors */
  39%    { transform: translate(calc(-50% - 1px), -50%); }
  39.3%  { transform: translate(-50%, -50%); }
  44%    { transform: translate(calc(-50% + 1px), calc(-50% + 1px)); }
  44.3%  { transform: translate(-50%, -50%); }
  49%    { transform: translate(calc(-50% - 1px), -50%); }
  49.3%  { transform: translate(-50%, -50%); }
  /* phase 2 — small jolts */
  56%    { transform: translate(calc(-50% - 3px), -50%); }
  56.4%  { transform: translate(calc(-50% + 2px), -50%); }
  56.8%  { transform: translate(-50%, -50%); }
  62%    { transform: translate(calc(-50% + 3px), calc(-50% - 1px)); }
  62.4%  { transform: translate(-50%, -50%); }
  67%    { transform: translate(calc(-50% - 2px), calc(-50% + 2px)); }
  67.4%  { transform: translate(-50%, -50%); }
  /* phase 3 — medium */
  70%    { transform: translate(calc(-50% - 5px), -50%); }
  70.4%  { transform: translate(calc(-50% + 4px), -50%); }
  70.8%  { transform: translate(-50%, -50%); }
  74%    { transform: translate(calc(-50% + 5px), calc(-50% + 2px)); }
  74.4%  { transform: translate(calc(-50% - 3px), -50%); }
  74.8%  { transform: translate(-50%, -50%); }
  78%    { transform: translate(calc(-50% - 6px), calc(-50% - 2px)); }
  78.4%  { transform: translate(calc(-50% + 5px), -50%); }
  78.8%  { transform: translate(-50%, -50%); }
  /* phase 4 — heavy */
  82%    { transform: translate(calc(-50% - 7px), -50%); }
  82.3%  { transform: translate(calc(-50% + 6px), calc(-50% + 2px)); }
  82.6%  { transform: translate(calc(-50% - 4px), calc(-50% - 1px)); }
  82.9%  { transform: translate(-50%, -50%); }
  86%    { transform: translate(calc(-50% + 8px), -50%); }
  86.3%  { transform: translate(calc(-50% - 7px), calc(-50% + 3px)); }
  86.6%  { transform: translate(calc(-50% + 5px), -50%); }
  86.9%  { transform: translate(-50%, -50%); }
  /* phase 5 — max chaos */
  90%    { transform: translate(calc(-50% - 9px), calc(-50% - 2px)); }
  90.3%  { transform: translate(calc(-50% + 8px), -50%); }
  90.6%  { transform: translate(calc(-50% - 6px), calc(-50% + 2px)); }
  90.9%  { transform: translate(-50%, -50%); }
  93%    { transform: translate(calc(-50% + 9px), -50%); }
  93.3%  { transform: translate(calc(-50% - 8px), calc(-50% - 1px)); }
  93.6%  { transform: translate(calc(-50% + 7px), -50%); }
  93.9%  { transform: translate(-50%, -50%); }
  96%    { transform: translate(calc(-50% - 10px), calc(-50% + 3px)); }
  96.3%  { transform: translate(calc(-50% + 9px), -50%); }
  96.6%  { transform: translate(calc(-50% - 7px), calc(-50% - 2px)); }
  100%   { transform: translate(-50%, -50%); }
}

/* ─ Cyan channel ──────────────────────────────────────────── */
@keyframes glitch-cyan {
  0%, 40% { opacity: 0; clip-path: none; transform: translateX(0); }
  41%     { opacity: 0.20; clip-path: polygon(0 35%, 100% 35%, 100% 45%, 0 45%); transform: translateX(-2px); }
  41.4%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  47%     { opacity: 0.25; clip-path: polygon(0 55%, 100% 55%, 100% 68%, 0 68%); transform: translateX(-3px); }
  47.5%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  57%     { opacity: 0.45; clip-path: polygon(0 20%, 100% 20%, 100% 35%, 0 35%); transform: translateX(-4px); }
  57.5%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  63%     { opacity: 0.50; clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%); transform: translateX(-5px); }
  63.5%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  71%     { opacity: 0.60; clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); transform: translateX(-6px); }
  71.5%   {               clip-path: polygon(0 65%, 100% 65%, 100% 80%, 0 80%); transform: translateX(-4px); }
  72%     { opacity: 0;    clip-path: none; transform: translateX(0); }
  76%     { opacity: 0.65; clip-path: polygon(0 40%, 100% 40%, 100% 58%, 0 58%); transform: translateX(-7px); }
  76.5%   {               clip-path: polygon(0 5%,  100% 5%,  100% 18%, 0 18%);  transform: translateX(-5px); }
  77%     { opacity: 0;    clip-path: none; transform: translateX(0); }
  82.1%   { opacity: 0.72; clip-path: polygon(0 15%, 100% 15%, 100% 38%, 0 38%); transform: translateX(-8px); }
  82.5%   {               clip-path: polygon(0 55%, 100% 55%, 100% 72%, 0 72%); transform: translateX(-6px); }
  82.9%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  86.1%   { opacity: 0.78; clip-path: polygon(0 0%,  100% 0%,  100% 22%, 0 22%);  transform: translateX(-9px); }
  86.5%   {               clip-path: polygon(0 60%, 100% 60%, 100% 78%, 0 78%); transform: translateX(-7px); }
  86.9%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  90.1%   { opacity: 0.85; clip-path: polygon(0 8%,  100% 8%,  100% 32%, 0 32%);  transform: translateX(-10px); }
  90.4%   {               clip-path: polygon(0 48%, 100% 48%, 100% 68%, 0 68%); transform: translateX(-8px); }
  90.7%   {               clip-path: polygon(0 75%, 100% 75%, 100% 90%, 0 90%); transform: translateX(-11px); }
  91%     { opacity: 0;    clip-path: none; transform: translateX(0); }
  93.1%   { opacity: 0.88; clip-path: polygon(0 18%, 100% 18%, 100% 40%, 0 40%); transform: translateX(-11px); }
  93.4%   {               clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%); transform: translateX(-9px); }
  93.7%   {               clip-path: polygon(0 5%,  100% 5%,  100% 15%, 0 15%);  transform: translateX(-12px); }
  94%     { opacity: 0;    clip-path: none; transform: translateX(0); }
  96.1%   { opacity: 0.90; clip-path: polygon(0 25%, 100% 25%, 100% 48%, 0 48%); transform: translateX(-12px); }
  96.4%   {               clip-path: polygon(0 65%, 100% 65%, 100% 85%, 0 85%); transform: translateX(-10px); }
  96.7%   {               clip-path: polygon(0 0%,  100% 0%,  100% 12%, 0 12%);  transform: translateX(-13px); }
  97%     { opacity: 0;    clip-path: none; transform: translateX(0); }
  100%    { opacity: 0.80; clip-path: polygon(0 10%, 100% 10%, 100% 42%, 0 42%); transform: translateX(-10px); }
}

/* ─ Magenta channel ───────────────────────────────────────── */
@keyframes glitch-magenta {
  0%, 42% { opacity: 0; clip-path: none; transform: translateX(0); }
  43%     { opacity: 0.20; clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%); transform: translateX(2px); }
  43.4%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  49%     { opacity: 0.25; clip-path: polygon(0 20%, 100% 20%, 100% 33%, 0 33%); transform: translateX(3px); }
  49.5%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  59%     { opacity: 0.45; clip-path: polygon(0 65%, 100% 65%, 100% 78%, 0 78%); transform: translateX(4px); }
  59.5%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  65%     { opacity: 0.50; clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); transform: translateX(5px); }
  65.5%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  72.1%   { opacity: 0.60; clip-path: polygon(0 50%, 100% 50%, 100% 68%, 0 68%); transform: translateX(6px); }
  72.6%   {               clip-path: polygon(0 20%, 100% 20%, 100% 35%, 0 35%); transform: translateX(4px); }
  73.1%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  77.1%   { opacity: 0.65; clip-path: polygon(0 72%, 100% 72%, 100% 88%, 0 88%); transform: translateX(7px); }
  77.6%   {               clip-path: polygon(0 30%, 100% 30%, 100% 46%, 0 46%); transform: translateX(5px); }
  78.1%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  83.1%   { opacity: 0.72; clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translateX(8px); }
  83.5%   {               clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%); transform: translateX(6px); }
  83.9%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  87.1%   { opacity: 0.78; clip-path: polygon(0 75%, 100% 75%, 100% 92%, 0 92%); transform: translateX(9px); }
  87.5%   {               clip-path: polygon(0 35%, 100% 35%, 100% 55%, 0 55%); transform: translateX(7px); }
  87.9%   { opacity: 0;    clip-path: none; transform: translateX(0); }
  91.1%   { opacity: 0.85; clip-path: polygon(0 55%, 100% 55%, 100% 78%, 0 78%); transform: translateX(10px); }
  91.4%   {               clip-path: polygon(0 20%, 100% 20%, 100% 42%, 0 42%); transform: translateX(8px); }
  91.7%   {               clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); transform: translateX(11px); }
  92%     { opacity: 0;    clip-path: none; transform: translateX(0); }
  94.1%   { opacity: 0.88; clip-path: polygon(0 62%, 100% 62%, 100% 82%, 0 82%); transform: translateX(11px); }
  94.4%   {               clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%); transform: translateX(9px); }
  94.7%   {               clip-path: polygon(0 8%,  100% 8%,  100% 20%, 0 20%);  transform: translateX(12px); }
  95%     { opacity: 0;    clip-path: none; transform: translateX(0); }
  97.1%   { opacity: 0.90; clip-path: polygon(0 50%, 100% 50%, 100% 72%, 0 72%); transform: translateX(12px); }
  97.4%   {               clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%); transform: translateX(10px); }
  97.7%   {               clip-path: polygon(0 82%, 100% 82%, 100% 100%, 0 100%); transform: translateX(13px); }
  98%     { opacity: 0;    clip-path: none; transform: translateX(0); }
  100%    { opacity: 0.80; clip-path: polygon(0 55%, 100% 55%, 100% 88%, 0 88%); transform: translateX(10px); }
}