/* Landing Page - REPLOID / DOPPLER */

:root {
  --bg: #000000;
  --text: #ffffff;
  --text-muted: #888888;
  --font: 'Courier New', Consolas, monospace;

  /* REPLOID colors (Cyan/Blue + Gold) */
  --reploid-primary: #00d9ff;
  --reploid-primary-alt: #0ea5e9;
  --reploid-secondary: #fbbf24;
  --reploid-glow: 0 0 10px rgba(0, 217, 255, 0.4);
  --reploid-dim: rgba(0, 217, 255, 0.15);

  /* DOPPLER colors (Purple + Red/Blue) */
  --doppler-primary: #a855f7;
  --doppler-secondary: #ef4444;
  --doppler-tertiary: #3b82f6;
  --doppler-glow: 0 0 10px rgba(168, 85, 247, 0.4);
  --doppler-dim: rgba(168, 85, 247, 0.15);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Soft repeating grid background */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: -1;
}

/* Scanline overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.15) 50%);
  background-size: 100% 3px;
  pointer-events: none;
  z-index: 100;
  opacity: 0.3;
}

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding: 2rem;
}

/* ============================================
   ORBITAL RINGS
   ============================================ */

.orbit-container {
  position: relative;
  width: 320px;
  height: 320px;
  cursor: pointer;
}

.ring {
  position: absolute;
  inset: 0;
  font-size: 28px;
  font-weight: bold;
}

.ring span {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  width: 1em;
  text-align: center;
  transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
}

/* Inner ring letters (REPLOID) - subtle cyan */
.ring.inner span {
  color: rgba(0, 217, 255, 0.35);
  transition: all 0.8s ease;
}

/* Outer ring letters (DOPPLER) - subtle purple */
.ring.outer span {
  color: rgba(168, 85, 247, 0.35);
  transition: all 0.8s ease;
}

/* Position letters in a circle (7 letters = 360/7 = ~51.4deg each) */
.ring.inner span { --r: 75px; }
.ring.outer span { --r: 130px; }

.ring span:nth-child(1) { transform: rotate(0deg) translateY(calc(var(--r) * -1)) rotate(0deg); }
.ring span:nth-child(2) { transform: rotate(51.4deg) translateY(calc(var(--r) * -1)) rotate(-51.4deg); }
.ring span:nth-child(3) { transform: rotate(102.8deg) translateY(calc(var(--r) * -1)) rotate(-102.8deg); }
.ring span:nth-child(4) { transform: rotate(154.3deg) translateY(calc(var(--r) * -1)) rotate(-154.3deg); }
.ring span:nth-child(5) { transform: rotate(205.7deg) translateY(calc(var(--r) * -1)) rotate(-205.7deg); }
.ring span:nth-child(6) { transform: rotate(257.1deg) translateY(calc(var(--r) * -1)) rotate(-257.1deg); }
.ring span:nth-child(7) { transform: rotate(308.6deg) translateY(calc(var(--r) * -1)) rotate(-308.6deg); }

/* Inner ring: REPLOID - rotates clockwise */
.ring.inner {
  animation: spin-cw 30s linear infinite;
}

/* Outer ring: DOPPLER - rotates counter-clockwise */
.ring.outer {
  animation: spin-ccw 30s linear infinite;
}

/* Interactive states */
.orbit-container.paused .ring {
  animation-play-state: paused;
}

.orbit-container.fast .ring.inner {
  animation-duration: 10s;
}

.orbit-container.fast .ring.outer {
  animation-duration: 10s;
}

/* Individual letter hover effects */
.ring span:hover {
  transform: rotate(var(--rot)) translateY(calc(var(--r) * -1)) rotate(calc(var(--rot) * -1)) scale(1.15);
  z-index: 10;
}

.ring.inner span:hover {
  color: rgba(0, 217, 255, 0.7);
}

.ring.outer span:hover {
  color: rgba(168, 85, 247, 0.7);
}

/* Hover glow on container - letters brighten slightly */
.orbit-container:hover .ring.inner span {
  color: rgba(0, 217, 255, 0.5);
}

.orbit-container:hover .ring.outer span {
  color: rgba(168, 85, 247, 0.5);
}

/* Link letters (D in REPLOID, R in DOPPLER) - slightly brighter */
.ring.inner span.link {
  color: rgba(251, 191, 36, 0.4);
}

.ring.outer span.link {
  color: rgba(0, 217, 255, 0.4);
}

/* Bisymmetry: when hovering link letters, both brighten */
.orbit-container.bisymmetry .ring.inner span.link,
.orbit-container.bisymmetry .ring.outer span.link {
  color: rgba(255, 255, 255, 0.7);
  transform: rotate(var(--rot)) translateY(calc(var(--r) * -1)) rotate(calc(var(--rot) * -1)) scale(1.2);
}

/* ============================================
   ENTANGLEMENT: Button ↔ Orbital Connection
   ============================================ */

/* When hovering REPLOID project, inner ring responds subtly */
.orbit-container.entangle-reploid .ring.inner {
  animation-duration: 15s;
}

.orbit-container.entangle-reploid .ring.inner span {
  color: rgba(0, 217, 255, 0.6);
}

.orbit-container.entangle-reploid .ring.inner span.link {
  color: rgba(251, 191, 36, 0.6);
}

/* When hovering DOPPLER project, outer ring responds subtly */
.orbit-container.entangle-doppler .ring.outer {
  animation-duration: 15s;
}

.orbit-container.entangle-doppler .ring.outer span {
  color: rgba(168, 85, 247, 0.6);
}

.orbit-container.entangle-doppler .ring.outer span.link {
  color: rgba(0, 217, 255, 0.6);
}

/* ============================================
   LETTER CROSSING EFFECTS - Smooth scaling
   ============================================ */

/* When letters cross - smooth scale up */
.ring span.crossing {
  transform: rotate(var(--rot)) translateY(calc(var(--r) * -1)) rotate(calc(var(--rot) * -1)) scale(1.2) !important;
  opacity: 0.6;
}

/* R-D vertex crossing - subtle pulse */
.orbit-container.vertex-crossing .ring.inner span.link,
.orbit-container.vertex-crossing .ring.outer span.link {
  transform: rotate(var(--rot)) translateY(calc(var(--r) * -1)) rotate(calc(var(--rot) * -1)) scale(1.3) !important;
  opacity: 0.5;
}

@keyframes spin-cw {
  to { transform: rotate(360deg); }
}

@keyframes spin-ccw {
  to { transform: rotate(-360deg); }
}

/* Ripples emanating from center - alternating colors */
.ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 4s ease-out infinite;
  pointer-events: none;
}

.ripple.r1 {
  border: 1px solid rgba(0, 217, 255, 0.3);
}

.ripple.r2 {
  border: 1px solid rgba(168, 85, 247, 0.3);
  animation-delay: 1.3s;
}

.ripple.r3 {
  border: 1px solid rgba(251, 191, 36, 0.2);
  animation-delay: 2.6s;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4;
  }
  100% {
    width: 400px;
    height: 400px;
    opacity: 0;
  }
}

/* ============================================
   PROJECT LINKS - RECURSIVE BOXES
   ============================================ */

.projects {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.project {
  text-decoration: none;
  color: var(--text);
  transition: transform 0.4s ease;
}

.project:hover {
  transform: scale(1.03);
}

/* Recursive box effect - nested borders */
.box-recursive {
  position: relative;
  padding: 4px;
}

/* Outer recursive border - very subtle */
.box-recursive::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--text-muted);
  opacity: 0.08;
  transition: all 0.8s ease;
}

/* Middle recursive border - very subtle */
.box-recursive::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--text-muted);
  opacity: 0.12;
  transition: all 0.8s ease;
}

.box-inner {
  position: relative;
  padding: 1.5rem 2rem;
  border: 1px solid var(--text-muted);
  background: var(--bg);
  transition: all 0.8s ease;
  width: 340px;
  text-align: center;
  opacity: 0.5;
  border-color: rgba(136, 136, 136, 0.3);
}

/* REPLOID hover - subtle cyan */
.project.reploid:hover .box-recursive::before {
  border-color: var(--reploid-primary);
  opacity: 0.2;
}

.project.reploid:hover .box-recursive::after {
  border-color: var(--reploid-primary);
  opacity: 0.3;
}

.project.reploid:hover .box-inner {
  border-color: var(--reploid-primary);
  opacity: 0.85;
}

/* DOPPLER hover - subtle purple */
.project.doppler:hover .box-recursive::before {
  border-color: var(--doppler-primary);
  opacity: 0.2;
}

.project.doppler:hover .box-recursive::after {
  border-color: var(--doppler-primary);
  opacity: 0.3;
}

.project.doppler:hover .box-inner {
  border-color: var(--doppler-primary);
  opacity: 0.85;
}

/* Labels */
.project .label {
  font-size: 1.6rem;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
  transition: color 0.8s ease;
}

.project.reploid .label {
  color: rgba(0, 217, 255, 0.5);
}

.project.doppler .label {
  color: rgba(168, 85, 247, 0.5);
}

.project.reploid:hover .label {
  color: var(--reploid-primary);
}

.project.doppler:hover .label {
  color: var(--doppler-primary);
}

/* Descriptions - bigger */
.project .desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  display: block;
}

.cycle {
  color: var(--text-muted);
  font-size: 1.5rem;
  opacity: 0.2;
  transition: opacity 0.8s ease;
}

.projects:hover .cycle {
  opacity: 0.4;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 700px) {
  .orbit-container {
    width: 260px;
    height: 260px;
  }

  .ring {
    font-size: 22px;
  }

  .ring.inner span { --r: 60px; }
  .ring.outer span { --r: 105px; }

  @keyframes ripple {
    0% { width: 0; height: 0; opacity: 0.4; }
    100% { width: 320px; height: 320px; opacity: 0; }
  }

  .project .label {
    font-size: 1.5rem;
  }

  .box-inner {
    padding: 1rem 1.5rem;
    width: 280px;
  }

  /* Mobile: buttons highlighted by default (no hover state) */
  .box-inner {
    opacity: 0.75;
  }

  .box-recursive::before {
    opacity: 0.15;
  }

  .box-recursive::after {
    opacity: 0.2;
  }

  .project.reploid .box-recursive::before,
  .project.reploid .box-recursive::after {
    border-color: var(--reploid-primary);
  }

  .project.reploid .box-inner {
    border-color: rgba(0, 217, 255, 0.4);
  }

  .project.reploid .label {
    color: rgba(0, 217, 255, 0.7);
  }

  .project.doppler .box-recursive::before,
  .project.doppler .box-recursive::after {
    border-color: var(--doppler-primary);
  }

  .project.doppler .box-inner {
    border-color: rgba(168, 85, 247, 0.4);
  }

  .project.doppler .label {
    color: rgba(168, 85, 247, 0.7);
  }

  /* Active/tap state for mobile */
  .project:active .box-inner {
    opacity: 0.9;
  }

  .project.reploid:active .label {
    color: var(--reploid-primary);
  }

  .project.doppler:active .label {
    color: var(--doppler-primary);
  }
}