/* ============================================================
   AuditionMate — styles.css
   Custom styles layered on top of Tailwind utility classes.
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
  --ember:       #E85A0C;
  --ember-light: #FF7A35;
  --ember-glow:  rgba(232, 90, 12, 0.15);
  --ember-glow-strong: rgba(232, 90, 12, 0.30);
  --ash:         #111111;
  --smoke:       #1A1A1A;
  --glass-bg:    rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ── UPDATE THIS PATH if you rename your hero image ── */
  --hero-bg: url('hero-bg.jpg');
}

/* ── Base reset & smooth scroll ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ── Selection color ── */
::selection { background: var(--ember); color: #fff; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: var(--ember); border-radius: 2px; }


/* ════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════ */
#navbar {
  background: transparent;
  transition: background 0.5s ease, padding 0.4s ease;
}
#navbar.scrolled {
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.nav-cta {
  letter-spacing: 0.15em;
}


/* ════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════ */

/* Background image layer — parallax handled in JS */
.hero-bg {
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  transform-origin: center;
  will-change: transform;
}

/* Multi-layer dark gradient overlay: 
   left side darker so text is always readable,
   right side lets image breathe */
.hero-overlay {
  background:
    linear-gradient(
      105deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.65) 45%,
      rgba(0, 0, 0, 0.20) 75%,
      rgba(0, 0, 0, 0.40) 100%
    ),
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.80) 0%,
      transparent 40%
    );
}

/* Animated smoke / ambient glow overlay */
.hero-smoke {
  background:
    radial-gradient(ellipse 60% 60% at 70% 50%, rgba(232, 90, 12, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 30%, rgba(232, 90, 12, 0.05) 0%, transparent 60%);
  animation: smokeFloat 8s ease-in-out infinite alternate;
}
@keyframes smokeFloat {
  0%   { opacity: 0.7; transform: scale(1) translateY(0); }
  100% { opacity: 1;   transform: scale(1.04) translateY(-12px); }
}


/* ── Particles ── */
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--ember);
  opacity: 0;
  animation: particleRise var(--dur, 6s) var(--delay, 0s) ease-in infinite;
}
.particle:nth-child(1) { width: 3px; height: 3px; left: 15%; --dur: 7s;  --delay: 0s;   }
.particle:nth-child(2) { width: 2px; height: 2px; left: 30%; --dur: 9s;  --delay: 2s;   }
.particle:nth-child(3) { width: 4px; height: 4px; left: 55%; --dur: 6s;  --delay: 1s;   }
.particle:nth-child(4) { width: 2px; height: 2px; left: 70%; --dur: 8s;  --delay: 3.5s; }
.particle:nth-child(5) { width: 3px; height: 3px; left: 85%; --dur: 10s; --delay: 0.5s; }

@keyframes particleRise {
  0%   { opacity: 0;    bottom: 5%;  transform: translateX(0)      scale(1);   }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.3; }
  100% { opacity: 0;    bottom: 95%; transform: translateX(30px)   scale(0.5); }
}


/* ── Hero text entrance animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-eyebrow  { animation: fadeUp  0.7s 0.3s cubic-bezier(0.22,1,0.36,1) forwards; }
.hero-headline { animation: fadeUp  0.9s 0.5s cubic-bezier(0.22,1,0.36,1) forwards; }
.hero-sub      { animation: fadeUp  0.8s 0.75s cubic-bezier(0.22,1,0.36,1) forwards; }
.hero-form     { animation: fadeUp  0.8s 1.0s  cubic-bezier(0.22,1,0.36,1) forwards; }

/* Scroll indicator */
.scroll-indicator {
  animation: fadeIn 1s 2s ease forwards;
}
.scroll-line {
  animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.5; }
  50%       { transform: scaleY(1.3) translateY(4px); opacity: 1; }
}


/* ════════════════════════════════════════════════
   FORM
════════════════════════════════════════════════ */
.form-input {
  /* Remove browser autofill yellow background */
  -webkit-box-shadow: 0 0 0 30px rgba(255,255,255,0.03) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: var(--ember);
}
.form-input:focus {
  box-shadow: 0 0 0 1px rgba(232, 90, 12, 0.4);
}
.submit-btn {
  position: relative;
  overflow: hidden;
}
.submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.2s;
}
.submit-btn:hover::after { opacity: 1; }

/* Success state entrance */
.success-state {
  animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}


/* ════════════════════════════════════════════════
   FEATURE CARDS
════════════════════════════════════════════════ */
.glass-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.glass-card:hover {
  border-color: rgba(232, 90, 12, 0.35);
  transform: translateY(-4px);
}

/* Ember glow that appears on hover */
.feature-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--ember-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.glass-card:hover .feature-glow { opacity: 1; }

/* Icon container subtle ember tint */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(232, 90, 12, 0.08);
  border: 1px solid rgba(232, 90, 12, 0.2);
  transition: background 0.3s, border-color 0.3s;
}
.glass-card:hover .feature-icon {
  background: rgba(232, 90, 12, 0.16);
  border-color: rgba(232, 90, 12, 0.4);
}


/* ════════════════════════════════════════════════
   CTA SECTION
════════════════════════════════════════════════ */
.cta-glow {
  background:
    radial-gradient(ellipse 70% 70% at 50% 100%, rgba(232, 90, 12, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 50%,  rgba(232, 90, 12, 0.05) 0%, transparent 60%);
}

/* Subtle grid texture */
.cta-grid {
  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;
}


/* ════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered children via inline --delay */
.feature-card.is-visible {
  transition-delay: var(--delay, 0ms) !important;
}


/* ════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.modal-overlay:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay[hidden] { display: none; }

/* Cinematic dark transparent backdrop */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal-box {
  position: relative;
  z-index: 1;
  background: rgba(18, 18, 18, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.07);
  max-width: 580px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 3rem 2.5rem 2.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ember) transparent;
  animation: modalSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.modal-box::-webkit-scrollbar { width: 3px; }
.modal-box::-webkit-scrollbar-thumb { background: var(--ember); }

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

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s ease;
}
.modal-close:hover { color: var(--ember); }

.modal-title {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(232, 90, 12, 0.25);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal-body p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.875rem;
  line-height: 1.75;
  font-family: 'Outfit', sans-serif;
}


/* ════════════════════════════════════════════════
   RESPONSIVE HELPERS
════════════════════════════════════════════════ */

/* Mobile: hero bg centers on the smoke/light area */
@media (max-width: 768px) {
  .hero-bg {
    background-position: 70% center;
  }
  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.60) 0%,
        rgba(0,0,0,0.50) 40%,
        rgba(0,0,0,0.75) 100%
      );
  }
  .form-row {
    flex-direction: column;
  }
}