/* ========================================
   HOME PAGE
   This file controls the public homepage.

   Design direction:
   - luxury technology feel
   - clean layout
   - strong glowing logo
   - locked private-system vibe
   - public brand shell, private real code
   ======================================== */

/* This sets the full-page dark background and default text color */
body.home-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top center, rgba(0, 255, 255, 0.10), transparent 26%),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 18%),
    linear-gradient(180deg, #05070b 0%, #090d14 45%, #04060a 100%);
  color: #f5f7fb;
}

/* This keeps the main content centered and gives the page breathing room */
.home-shell {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 40px 0 60px;
}

/* Hero section:
   This holds the logo and the main brand message */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0 18px;
}

/* This wraps the logo so it stays centered and spaced properly */
.brand-mark-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
}

/* This soft ring sits behind the logo.
   It adds atmosphere without fighting the logo itself. */
.brand-mark-wrap::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 255, 0.04);
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.04);
}

/* Main logo image */
.brand-mark {
  width: clamp(180px, 22vw, 260px);
  height: auto;
  display: block;
  position: relative;
  z-index: 1;

  filter:
    drop-shadow(0 0 8px rgba(0, 255, 255, 0.7))
    drop-shadow(0 0 22px rgba(0, 255, 255, 0.45))
    drop-shadow(0 0 60px rgba(0, 255, 255, 0.2));

  animation:
    logoFloat 6s ease-in-out infinite,
    logoPulse 4s ease-in-out infinite;
}

/* Small brand label above the main headline */
.eyebrow {
  margin: 0 0 14px;
  color: rgba(214, 223, 234, 0.72);
  font-size: 0.82rem;
  letter-spacing: 0.40rem;
}

/* Main homepage headline */
.hero-copy h1 {
  margin: 10px 0 0;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #ffffff;
}

/* Supporting paragraph below the main headline */
.hero-text {
  width: min(700px, 100%);
  margin: 24px auto 0;
  color: rgba(221, 229, 238, 0.80);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.85;
}

/* This adds spacing before the locked orb section */
.orb-section {
  margin-top: 56px;
}

/* This lays out the orbs in a clean grid */
.orb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 36px 24px;
  align-items: start;
}

/* Each orb card centers its contents */
.orb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* We hide old text labels because we want a cleaner locked-system feel */
.orb-card p {
  display: none;
}

/* This slightly lifts the first orb so the grid feels less flat */
.featured {
  transform: translateY(-8px);
}

/* Base orb style:
   dark glass, subtle cyan edge, soft internal lighting */
.orb {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.30), transparent 16%),
    radial-gradient(circle at 50% 42%, rgba(28, 41, 55, 0.96), rgba(7, 10, 16, 0.98) 74%);
  border: 1px solid rgba(172, 219, 236, 0.16);
  box-shadow:
    inset 0 0 35px rgba(255, 255, 255, 0.04),
    0 0 24px rgba(0, 255, 255, 0.08),
    0 0 60px rgba(0, 0, 0, 0.34);
}

/* Gloss highlight across each orb */
.orb::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 14%;
  width: 46%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.03)
  );
  filter: blur(10px);
}

/* Inner ring detail to add depth */
.orb::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 255, 0.08);
  box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.04);
}

/* Orb sizes only.
   We keep animation separate so the lock behavior stays clean. */
.orb-large {
  width: 230px;
  height: 230px;
}

.orb-medium {
  width: 168px;
  height: 168px;
}

/* Locked orb style:
   This changes the mood from open navigation to private systems */
.locked-orb {
  border: 1px solid rgba(255, 80, 80, 0.12);
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, 0.03),
    0 0 10px rgba(255, 60, 60, 0.08),
    0 0 28px rgba(255, 60, 60, 0.12);

  animation:
    orbFloat 5.5s ease-in-out infinite,
    orbRotate 22s linear infinite,
    redLockGlow 4.8s ease-in-out infinite;
}

/* Main lock body inside each orb.
   We keep it centered and counter-rotate it so it stays upright
   while the orb itself rotates behind it. */
.lock-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 28px;
  transform: translate(-50%, -50%) rotate(0deg);
  border: 2px solid rgba(255, 90, 90, 0.95);
  border-radius: 7px;
  z-index: 2;

  box-shadow:
    0 0 6px rgba(255, 60, 60, 0.4),
    0 0 14px rgba(255, 60, 60, 0.2);

  animation: lockCounterRotate 22s linear infinite;
}

/* Rounded shackle at the top of the lock */
.lock-symbol::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 20px;
  height: 16px;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 90, 90, 0.95);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 0 10px rgba(255, 60, 60, 0.14);
}

/* Small keyhole in the center of the lock */
.lock-symbol::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 6px;
  height: 10px;
  transform: translateX(-50%);
  background: rgba(255, 90, 90, 0.9);
  clip-path: polygon(
    50% 0%,
    100% 35%,
    72% 35%,
    72% 100%,
    28% 100%,
    28% 35%,
    0% 35%
  );
  box-shadow: 0 0 8px rgba(255, 60, 60, 0.18);
}

/* Quiet closing note at the bottom of the page */
.closing-note {
  margin-top: 48px;
  text-align: center;
}

.closing-note p {
  margin: 0;
  color: rgba(190, 200, 214, 0.56);
  font-size: 0.95rem;
  letter-spacing: 0.08rem;
}

/* Logo pulse animation */
@keyframes logoPulse {
  0% {
    filter:
      drop-shadow(0 0 8px rgba(0, 255, 255, 0.55))
      drop-shadow(0 0 22px rgba(0, 255, 255, 0.35))
      drop-shadow(0 0 48px rgba(0, 255, 255, 0.14));
  }
  50% {
    filter:
      drop-shadow(0 0 12px rgba(0, 255, 255, 0.85))
      drop-shadow(0 0 30px rgba(0, 255, 255, 0.50))
      drop-shadow(0 0 70px rgba(0, 255, 255, 0.22));
  }
  100% {
    filter:
      drop-shadow(0 0 8px rgba(0, 255, 255, 0.55))
      drop-shadow(0 0 22px rgba(0, 255, 255, 0.35))
      drop-shadow(0 0 48px rgba(0, 255, 255, 0.14));
  }
}

/* Gentle floating logo motion */
@keyframes logoFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Slow orb rotation */
@keyframes orbRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* This counter-rotates the lock so it stays upright while the orb rotates */
@keyframes lockCounterRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* Subtle red breathing glow for locked orbs */
@keyframes redLockGlow {
  0% {
    box-shadow:
      inset 0 0 30px rgba(255, 255, 255, 0.03),
      0 0 10px rgba(255, 60, 60, 0.08),
      0 0 28px rgba(255, 60, 60, 0.12);
  }
  50% {
    box-shadow:
      inset 0 0 30px rgba(255, 255, 255, 0.04),
      0 0 18px rgba(255, 60, 60, 0.16),
      0 0 36px rgba(255, 60, 60, 0.18);
  }
  100% {
    box-shadow:
      inset 0 0 30px rgba(255, 255, 255, 0.03),
      0 0 10px rgba(255, 60, 60, 0.08),
      0 0 28px rgba(255, 60, 60, 0.12);
  }
}

/* Soft floating motion for the orbs */
@keyframes orbFloat {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 -7px;
  }
  100% {
    translate: 0 0;
  }
}

/* Tablet layout: switch from 3 columns to 2 */
@media (max-width: 920px) {
  .orb-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

/* Mobile layout: stack the orbs and tighten spacing */
@media (max-width: 640px) {
  .home-shell {
    width: min(100% - 28px, 1200px);
    padding-top: 28px;
  }

  .hero-text {
    line-height: 1.72;
  }

  .orb-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .orb-large {
    width: 210px;
    height: 210px;
  }

  .orb-medium {
    width: 155px;
    height: 155px;
  }
}