* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a06; }
@media (hover: hover) { html, body { cursor: none; } }

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

.title {
  margin-top: 8vh;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(2.5rem, 8vw, 6rem);
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.12);
  text-transform: uppercase;
  user-select: none;
  pointer-events: all;
  transition: color 0.3s ease;
  position: relative;
}

.title.glitch {
  color: rgba(255, 90, 0, 0.85);
  text-shadow:
    3px 0 #ff2200,
    -3px 0 #ffaa00,
    0 0 40px rgba(255, 80, 0, 0.9),
    0 0 80px rgba(200, 40, 0, 0.5);
}

.title.glitch::before,
.title.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  letter-spacing: inherit;
}

.title.glitch::before {
  color: #ff2200;
  animation: glitch-before 0.1s steps(1) infinite;
  opacity: 0.7;
}

.title.glitch::after {
  color: #ffaa00;
  animation: glitch-after 0.13s steps(1) infinite;
  opacity: 0.6;
}

@keyframes glitch-before {
  0%   { clip-path: inset(15% 0 75% 0); transform: translate(-4px, 0); }
  20%  { clip-path: inset(60% 0 10% 0); transform: translate(4px, 1px); }
  40%  { clip-path: inset(35% 0 45% 0); transform: translate(-2px, -2px); }
  60%  { clip-path: inset(80% 0 5%  0); transform: translate(3px, 0); }
  80%  { clip-path: inset(5%  0 80% 0); transform: translate(-3px, 2px); }
  100% { clip-path: inset(50% 0 30% 0); transform: translate(2px, -1px); }
}

@keyframes glitch-after {
  0%   { clip-path: inset(40% 0 40% 0); transform: translate(4px, 0); }
  25%  { clip-path: inset(10% 0 70% 0); transform: translate(-4px, -1px); }
  50%  { clip-path: inset(70% 0 15% 0); transform: translate(2px, 2px); }
  75%  { clip-path: inset(25% 0 55% 0); transform: translate(-2px, 0); }
  100% { clip-path: inset(55% 0 25% 0); transform: translate(3px, 1px); }
}

.bottom {
  margin-bottom: 4vh;
  text-align: center;
}

.tagline {
  font-family: monospace;
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  color: rgba(200, 180, 160, 0.75);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(255, 120, 40, 0.5),
    0 0 25px rgba(255, 80, 0, 0.3);
  letter-spacing: 0.15em;
  transition: color 0.5s, text-shadow 0.5s;
}

.studio {
  position: fixed;
  bottom: 2vh;
  right: 3vw;
  font-family: monospace;
  font-size: 0.7rem;
  color: rgba(180, 160, 140, 0.5);
  text-shadow: 0 0 10px rgba(255, 100, 20, 0.3);
  z-index: 10;
}

#cursor-orb {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 130, 30, 0.2);
  box-shadow:
    0 0 20px 20px rgba(255, 100, 0, 0.5),
    0 0 20px 40px rgba(200, 60, 0, 0.25);
  pointer-events: none;
  z-index: 200;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

#secret-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

#secret-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

#secret-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 0, 0.88);
}

.secret-text {
  position: relative;
  font-family: monospace;
  font-size: clamp(0.8rem, 1.6vw, 1.15rem);
  color: rgba(255, 140, 30, 0.95);
  letter-spacing: 0.18em;
  text-align: center;
  line-height: 2.4em;
  text-shadow:
    0 0 20px rgba(255, 100, 0, 0.8),
    0 0 60px rgba(180, 60, 0, 0.4);
  animation: text-flicker 5s ease-in-out infinite;
}

.secret-text .dim {
  color: rgba(160, 80, 20, 0.55);
  text-shadow: none;
}

@keyframes text-flicker {
  0%, 100% { opacity: 1; }
  45%       { opacity: 1; }
  47%       { opacity: 0.6; }
  49%       { opacity: 1; }
  78%       { opacity: 1; }
  79%       { opacity: 0.4; }
  80%       { opacity: 1; }
}

.secret-dismiss {
  position: relative;
  margin-top: 3.5em;
  font-family: monospace;
  font-size: 0.65rem;
  color: #3a2a10;
  letter-spacing: 0.25em;
  cursor: pointer;
  pointer-events: all;
  transition: color 0.3s;
}
.secret-dismiss:hover { color: #aa7040; }

#keyword-echo {
  position: fixed;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: monospace;
  font-size: 0.7rem;
  color: rgba(255, 100, 0, 0.35);
  letter-spacing: 0.3em;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.4s;
}

@media (hover: none) {
  #cursor-orb { display: none; }
  .title { cursor: pointer; }
}

@media (hover: hover) {
  .title { cursor: none; }
}

@media (max-width: 600px) {
  video {
    transform: translate(-35%, -50%);
  }
  .studio {
    bottom: 1.5vh;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .bottom {
    margin-bottom: 6vh;
  }
  .secret-text {
    padding: 0 1.5rem;
    font-size: clamp(0.7rem, 3.5vw, 1rem);
    line-height: 2em;
  }
  .secret-dismiss {
    font-size: 0.75rem;
    padding: 0.8em 1.2em;
  }
}