/* ─── Gate of Truth Easter Egg ─────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   1. OVERLAY — dark screen during sequence, transparent after gate opens
   ══════════════════════════════════════════════════════════════════════════ */
.got-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.got-overlay.active {
  display: flex;
  pointer-events: auto;
}
/* After gate opens: overlay itself becomes invisible but stays in DOM for border lightning */
.got-overlay.gate-open {
  pointer-events: none;
}

/* Backdrop: dark during sequence, fades to transparent when gate opens */
.got-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #060c1a 0%, #000408 100%);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.got-overlay.active .got-backdrop      { opacity: 1; }
.got-overlay.flash  .got-backdrop      { background: #ffffff; opacity: 1; }
.got-overlay.gate-open .got-backdrop   { opacity: 0; transition: opacity 4s linear; }


/* ══════════════════════════════════════════════════════════════════════════
   2. GATE PANELS — steel/metal theme
   ══════════════════════════════════════════════════════════════════════════ */
.got-gate-left,
.got-gate-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #111318 0%, #2a313c 40%, #3a4454 50%, #2a313c 60%, #111318 100%);
  z-index: 1;
  opacity: 0; /* Hidden until step 5 */
  transition: opacity 0.6s ease, transform 4s linear;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.9);
}
.got-gate-left  { left: 0;   transform: translateX(0); border-right: 2px solid #000; }
.got-gate-right { right: 0;  transform: translateX(0); border-left: 2px solid #000; }

/* Metallic panel lines / texture */
.got-gate-left::before,
.got-gate-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Inner embossed panel */
.got-gate-left::after,
.got-gate-right::after {
  content: '';
  position: absolute;
  top: 40px; bottom: 40px;
  border: 2px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 1px rgba(255,255,255,0.1);
  pointer-events: none;
}
.got-gate-left::after { left: 40px; right: 10px; }
.got-gate-right::after { left: 10px; right: 40px; }

.got-overlay.show-gates .got-gate-left,
.got-overlay.show-gates .got-gate-right {
  opacity: 1;
}

/* Glowing seam (Crack) */
.got-gate-seam {
  position: absolute;
  top: 0; height: 100%; width: 0px;
  background: #fff;
  box-shadow: 0 0 30px 15px #c8972a, 0 0 60px 30px #f0c040;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  z-index: 2;
}
.got-gate-left .got-gate-seam { right: -1px; }
.got-gate-right .got-gate-seam { left: -1px; }

.got-overlay.gate-unlock .got-gate-seam {
  opacity: 0.6; width: 2px;
}
.got-overlay.gate-crack .got-gate-seam {
  opacity: 1; width: 8px;
}

/* Slide open */
.got-overlay.gate-open .got-gate-left  { transform: translateX(-100%); }
.got-overlay.gate-open .got-gate-right { transform: translateX(100%); }


/* ══════════════════════════════════════════════════════════════════════════
   3. STAGE — centers the SVG + message
   ══════════════════════════════════════════════════════════════════════════ */
.got-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  z-index: 2; /* above gate panels */
}

/* Stage fades out when gate opens */
.got-overlay.gate-open .got-stage {
  animation: got-fade-out-stage 3s 0.5s ease forwards;
}
@keyframes got-fade-out-stage { to { opacity: 0; } }


/* ══════════════════════════════════════════════════════════════════════════
   4. MESSAGE — positioned ABOVE the SVG
   ══════════════════════════════════════════════════════════════════════════ */
.got-message {
  order: -1; /* flex: renders before SVG */
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: clamp(26px, 6vmin, 48px);
  letter-spacing: 0.2em;
  color: #e8b84b;
  text-shadow: 0 0 16px rgba(232,184,75,1.0), 0 0 32px rgba(232,184,75,0.6), 0 0 60px rgba(232,184,75,0.25);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  min-height: 1.4em;
  padding: 0 16px;
}
.got-message.visible   { opacity: 1;  transform: translateY(0); }
.got-message.fade-out  { opacity: 0;  transform: translateY(-6px); }


/* ══════════════════════════════════════════════════════════════════════════
   5. PROGRESS BAR — below the SVG
   ══════════════════════════════════════════════════════════════════════════ */
.got-progress {
  width: min(200px, 45vw);
  height: 2px;
  background: rgba(200,151,42,0.2);
  border-radius: 1px;
  overflow: hidden;
}
.got-progress-bar {
  height: 100%;
  background: #e8b84b;
  box-shadow: 0 0 6px #e8b84b;
  width: 0%;
  transition: width 0.55s ease;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. SVG TRANSMUTATION CIRCLE
   ══════════════════════════════════════════════════════════════════════════ */
.got-svg {
  width: min(68vmin, 440px);
  height: min(68vmin, 440px);
  overflow: visible;
  flex-shrink: 0;
}

/* rings */
.got-ring {
  fill: none;
  stroke: #c8972a;
  stroke-width: 0.8;
  opacity: 0;
  transition: opacity 0.6s ease, stroke-width 0.6s ease;
  filter: url(#glow-gold);
}
.got-ring.visible { opacity: 0.55; }
.got-ring.bright  { opacity: 0.92; stroke-width: 1.3; }

/* radials */
.got-radials line {
  stroke: #c8972a;
  stroke-width: 0.5;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: url(#glow-gold);
}
.got-radials.visible line { opacity: 0.35; }
.got-radials.bright  line { opacity: 0.65; }

/* hexagons */
.got-hex {
  fill: none;
  stroke: #c8972a;
  stroke-width: 0.7;
  opacity: 0;
  transition: opacity 0.6s ease, stroke-width 0.5s ease;
  filter: url(#glow-gold);
}
.got-hex.visible { opacity: 0.45; }
.got-hex.bright  { opacity: 0.82; stroke-width: 1.0; }

.got-hex-inner { stroke: #e8b84b; transform: rotate(30deg); }

/* orbit dots */
.got-orbit-dots circle {
  fill: #e8b84b;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: url(#glow-gold);
}
.got-orbit-dots.visible circle { opacity: 0.6; }
.got-orbit-dots.bright  circle { opacity: 1.0; }

/* tick marks */
.got-ticks line {
  stroke: #c8972a;
  stroke-width: 0.6;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.got-ticks.visible line { opacity: 0.4; }
.got-ticks.bright  line { opacity: 0.75; }

/* data arcs */
.got-arcs path {
  fill: none;
  stroke: #e8b84b;
  stroke-width: 1.5;
  opacity: 0;
  stroke-dasharray: 12 6;
  transition: opacity 0.5s ease;
  filter: url(#glow-gold);
}
.got-arcs.visible path { opacity: 0.55; }
.got-arcs.bright  path { opacity: 0.9; }

/* brackets */
.got-brackets path {
  fill: none;
  stroke: #c8972a;
  stroke-width: 1.0;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: url(#glow-gold);
}
.got-brackets.visible path { opacity: 0.5; }
.got-brackets.bright  path { opacity: 0.88; }

/* core / eye */
.got-core { opacity: 0; transition: opacity 0.7s ease; }
.got-core.visible { opacity: 1; }

.got-core-bg     { fill: #0d1b2e; stroke: #c8972a; stroke-width: 1.2; filter: url(#glow-gold); }
.got-core-iris   { fill: none; stroke: #e8b84b; stroke-width: 1.0; filter: url(#glow-strong); }
.got-core-pupil  { fill: #f0c040; filter: url(#glow-strong); }
.got-core-reflex { fill: rgba(255,255,255,0.7); }


/* ══════════════════════════════════════════════════════════════════════════
   7. ROTATION ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes got-spin-cw       { to { transform: rotate(360deg);  } }
@keyframes got-spin-ccw      { to { transform: rotate(-360deg); } }
@keyframes got-spin-cw-fast  { to { transform: rotate(360deg);  } }

.got-rotate-cw        { animation: got-spin-cw      18s linear infinite; transform-origin: center; transform-box: fill-box; }
.got-rotate-ccw       { animation: got-spin-ccw     24s linear infinite; transform-origin: center; transform-box: fill-box; }
.got-rotate-cw-slow   { animation: got-spin-cw      32s linear infinite; transform-origin: center; transform-box: fill-box; }
.got-rotate-cw-fast   { animation: got-spin-cw-fast  6s linear infinite; transform-origin: center; transform-box: fill-box; }


/* ══════════════════════════════════════════════════════════════════════════
   8. SHAKE / PULSE
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes got-tremble {
  0%,100% { transform: translate(0,0); }
  20%     { transform: translate(-2px, 1px); }
  40%     { transform: translate(2px,-1px); }
  60%     { transform: translate(-1px, 2px); }
  80%     { transform: translate(1px,-2px); }
}
.got-shake { animation: got-tremble 0.18s ease infinite; }

@keyframes got-pulse {
  0%,100% { filter: brightness(1)   drop-shadow(0 0 8px #c8972a); }
  50%     { filter: brightness(1.6) drop-shadow(0 0 22px #f0c040); }
}
.got-pulse { animation: got-pulse 1.2s ease-in-out infinite; }

@keyframes got-pulse-max {
  0%,100% { filter: brightness(1.5) drop-shadow(0 0 18px #f0c040); }
  50%     { filter: brightness(2.6) drop-shadow(0 0 48px #ffe87a); }
}
.got-pulse-max { animation: got-pulse-max 0.7s ease-in-out infinite; }

@keyframes got-shake-heavy {
  0%,100% { transform: translate(0,0); }
  20%     { transform: translate(-4px, 2px); }
  40%     { transform: translate(4px,-2px); }
  60%     { transform: translate(-2px, 4px); }
  80%     { transform: translate(2px,-4px); }
}
.got-shake-heavy { animation: got-shake-heavy 0.12s ease infinite; }
@keyframes got-scan { to { stroke-dashoffset: -100; } }
.got-scan-anim { stroke-dasharray: 8 4; animation: got-scan 2s linear infinite; }


/* data arc scan */


/* ══════════════════════════════════════════════════════════════════════════
   9. EASTER EGG TRIGGER BUTTON
   ══════════════════════════════════════════════════════════════════════════ */
.easter-egg-button {
  position: fixed;
  bottom: 28px; right: 24px;
  width: 32px; height: 32px;
  background-color: transparent;
  border: 2px dashed rgba(100,116,139,0.65);
  border-radius: 6px;
  z-index: 999;
  cursor: pointer;
  transition: all 0.3s ease;
  display: none;
  align-items: center; justify-content: center;
  font-size: 14px;
  color: rgba(100,116,139,0.65);
}
.easter-egg-button:hover {
  border-color: rgba(100,116,139,0.9);
  background-color: rgba(241,245,249,0.9);
  color: rgba(100,116,139,0.9);
  transform: scale(1.2);
}
.easter-egg-tooltip {
  position: absolute;
  bottom: 38px; right: 0;
  background: rgba(255,255,255,0.88);
  color: #1e293b;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
  letter-spacing: 1px;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(15,23,42,0.12);
}
.easter-egg-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; right: 12px;
  border: 4px solid transparent;
  border-top-color: rgba(255,255,255,0.88);
}
.easter-egg-button:hover .easter-egg-tooltip,
.easter-egg-button.active .easter-egg-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════════════════════
   10. YOUTUBE MINI PLAYER
   ══════════════════════════════════════════════════════════════════════════ */
.youtube-container {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10900;
  box-shadow: 0 0 30px rgba(232,184,75,0.35);
  border-radius: 10px;
  overflow: hidden;
  display: none;
  border: 1px solid rgba(232,184,75,0.3);
}
.youtube-container.active { display: block; animation: got-pop-in 0.5s forwards; }

@keyframes got-pop-in {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.youtube-container.minimized {
  top: 80px; left: 16px; right: auto; bottom: auto;
  transform: none; width: auto; z-index: 10900;
}
.youtube-container.minimized iframe { width: 360px; height: 202px; display: block; }
.youtube-container.minimized .close-youtube { top: 4px; right: 4px; width: 24px; height: 24px; font-size: 14px; }

.close-youtube {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.7); color: #fff;
  border: none; border-radius: 50%;
  width: 30px; height: 30px; font-size: 16px;
  cursor: pointer; z-index: 10901;
}
.close-youtube:hover { background: rgba(200,0,0,0.75); }


/* ══════════════════════════════════════════════════════════════════════════
   11. MOBILE D-PAD
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-konami-container {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 10700;
  background-color: rgba(255,255,255,0.55);
  border-radius: 10px;
  padding: 5px;
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow: 0 4px 24px rgba(15,23,42,0.45), 0 1px 6px rgba(15,23,42,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mobile-konami-container.active {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
  grid-gap: 3px;
}
/* code shown in tooltip only */
.mobile-konami-seq { display: none; }
.mobile-konami-btn {
  width: 30px; height: 30px;
  background-color: rgba(255,255,255,0.52);
  border: 1px solid rgba(148,163,184,0.55);
  border-radius: 6px;
  color: rgba(30,41,59,0.85); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-weight: bold;
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: all 0.12s ease;
}
.mobile-konami-btn:active {
  background-color: rgba(37,99,235,0.18);
  border-color: rgba(37,99,235,0.35);
  color: #1e40af;
  transform: scale(0.90);
}
.mobile-konami-up    { grid-column:2; grid-row:1; }
.mobile-konami-down  { grid-column:2; grid-row:3; }
.mobile-konami-left  { grid-column:1; grid-row:2; }
.mobile-konami-right { grid-column:3; grid-row:2; }


/* ══════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .youtube-container.minimized { top: 70px; left: 8px; right: auto; }
  .youtube-container.minimized iframe { width: 280px; height: 158px; }
  .got-message { font-size: clamp(15px, 4.8vw, 26px); letter-spacing: 0.12em; }
}