/* ============================================
   CANDIDATE LANDING PAGE — Clean, focused
   ============================================ */

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(50px, -60px) scale(1.1);
  }
  66% {
    transform: translate(-40px, 40px) scale(0.9);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 oklch(70% 0.22 145 / 0.6);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 6px oklch(70% 0.22 145 / 0);
  }
}

@keyframes shimmer {
  0% {
    inset-inline-start: -100%;
  }
  100% {
    inset-inline-start: 200%;
  }
}

@layer components {
  .hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: calc(100cqb - 60px);
    padding: var(--space-3xl) clamp(1rem, 5vw, 4rem);

    .hero-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      overflow: hidden;
    }

    .gradient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      animation: float 18s ease-in-out infinite;
    }

    .gradient-orb--1 {
      width: 700px;
      height: 700px;
      top: -25%;
      left: -10%;
    }

    .gradient-orb--2 {
      width: 600px;
      height: 600px;
      bottom: -20%;
      right: -5%;
      animation-delay: -6s;
    }

    .noise-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-lg);
      text-align: center;
      max-inline-size: 700px;
      animation: fadeInUp 0.7s ease-out both;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: 6px 16px;
      border-radius: 100px;
      font-family: var(--font-heading);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      inline-size: fit-content;
    }

    .badge-dot {
      inline-size: 8px;
      block-size: 8px;
      border-radius: 50%;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    h1 {
      font-family: var(--font-heading);
      font-size: clamp(2.5rem, 5.5vw, 4.2rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .hero-line {
      display: block;
    }

    .tagline {
      font-size: clamp(1rem, 1.5vw, 1.15rem);
      line-height: 1.7;
      max-inline-size: 55ch;
    }

    .cta-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-md);
      padding-block-start: var(--space-sm);
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: 14px 32px;
      border-radius: 100px;
      font-family: var(--font-heading);
      font-size: 0.95rem;
      font-weight: var(--fw-semibold);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      overflow: hidden;

      svg {
        transition: transform 0.3s ease-out;
      }
      &:hover svg {
        transform: translateX(4px);
      }
    }

    .btn-shimmer {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: -100%;
      inline-size: 60%;
      block-size: 100%;
      animation: shimmer 3s ease-in-out infinite;
      pointer-events: none;
    }

    .help-text {
      font-size: var(--fs-small);
      opacity: 0.5;
    }
  }
}

/* ==============================
   THEME LAYER
   ============================== */
@layer theme {
  .hero {
    .gradient-orb--1 {
      background: light-dark(oklch(55% 0.25 270 / 0.08), oklch(55% 0.25 270 / 0.2));
    }
    .gradient-orb--2 {
      background: light-dark(oklch(65% 0.22 25 / 0.04), oklch(65% 0.22 25 / 0.08));
    }
    .noise-overlay {
      background: light-dark(oklch(100% 0 0 / 0.03), oklch(100% 0 0 / 0.015));
    }

    .hero-badge {
      background: light-dark(oklch(55% 0.18 145 / 0.1), oklch(70% 0.22 145 / 0.12));
      border: 1px solid light-dark(oklch(55% 0.18 145 / 0.25), oklch(70% 0.22 145 / 0.25));
      color: light-dark(oklch(40% 0.15 145), oklch(75% 0.2 145));
    }

    .badge-dot {
      background: light-dark(oklch(55% 0.22 145), oklch(70% 0.22 145));
    }

    h1 {
      color: var(--text-primary);
    }

    .hero-line--accent {
      background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .tagline {
      color: var(--text-secondary);
    }

    .btn-shimmer {
      background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.08), transparent);
    }

    .help-text {
      color: var(--text-secondary);
    }
  }
}