/* ==========================================================================
   آموزشگاه رانندگی ابوذر — stylesheet
   Tailwind CSS (CDN, utility classes in HTML) handles layout, spacing,
   color tokens and typography scale. This file holds everything Tailwind's
   default build can't express: brand keyframes, component states, and the
   motion system.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. FALLBACK COLOR SAFETY NET
   These brand colors normally come from Tailwind's CDN config (tailwind.config
   in index.html). If that CDN script is ever blocked, slow, or fails to load,
   these plain rules make sure text/backgrounds still render in the correct
   colors instead of falling back to black-on-white or invisible text.
--------------------------------------------------------------------------- */
.bg-gold      { background-color: #E7B347; }
.bg-gold\/8   { background-color: rgba(231, 179, 71, .08); }
.bg-gold\/10  { background-color: rgba(231, 179, 71, .10); }
.bg-gold\/15  { background-color: rgba(231, 179, 71, .15); }
.bg-mist      { background-color: #F8FAFC; }
.bg-night     { background-color: #0F172A; }
.border-gold      { border-color: #E7B347; }
.border-gold\/25  { border-color: rgba(231, 179, 71, .25); }
.border-ink\/8    { border-color: rgba(17, 24, 39, .08); }
.border-ink\/10   { border-color: rgba(17, 24, 39, .10); }
.text-gold  { color: #E7B347; }
.text-ink   { color: #111827; }
.text-muted { color: #6B7280; }
.text-night { color: #0F172A; }

/* ---------------------------------------------------------------------------
   1. ROOT VARIABLES
--------------------------------------------------------------------------- */
:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHY & BASE
--------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Vazirmatn', sans-serif;
}

::selection {
  background: #E7B347;
  color: #0F172A;
}

:focus-visible {
  outline: 2px solid #E7B347;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   3. NAVBAR
   Glassmorphism is scoped ONLY to the navbar, floating cards, badges,
   and the mobile nav chrome — never on full sections.
--------------------------------------------------------------------------- */
.glass-dark {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.navbar-solid {
  background: rgba(15, 23, 42, .86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Scroll-spy active link: gold text, underline, glowing dot */
.nav-link {
  position: relative;
  padding-bottom: 6px;
  transition: color .35s ease;
}

.nav-dot {
  position: absolute;
  top: -11px;
  right: 50%;
  translate: 50% 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #E7B347;
  opacity: 0;
  box-shadow: 0 0 8px 2px rgba(231, 179, 71, .8);
  transition: opacity .35s ease;
}

.nav-underline {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 2px;
  background: #E7B347;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .35s var(--ease);
  box-shadow: 0 0 6px rgba(231, 179, 71, .6);
}

.nav-link.active { color: #E7B347; font-weight: 600; }
.nav-link.active .nav-underline { transform: scaleX(1); }
.nav-link.active .nav-dot { opacity: 1; }

/* Premium fullscreen mobile nav — blur, dark overlay, slide from the right */
#mobileNav {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 23, 42, .97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform: translateX(100%);
  transition: transform .55s var(--ease);
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

#mobileNav.open { transform: translateX(0); visibility: visible; }

.mnav-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

#mobileNav.open .mnav-item { opacity: 1; transform: translateY(0); }
#mobileNav.open .mnav-item:nth-child(1) { transition-delay: .10s; }
#mobileNav.open .mnav-item:nth-child(2) { transition-delay: .16s; }
#mobileNav.open .mnav-item:nth-child(3) { transition-delay: .22s; }
#mobileNav.open .mnav-item:nth-child(4) { transition-delay: .28s; }
#mobileNav.open .mnav-item:nth-child(5) { transition-delay: .34s; }
#mobileNav.open .mnav-item:nth-child(6) { transition-delay: .40s; }

#mobileMenuBtn { transition: transform .3s var(--ease); }

/* ---------------------------------------------------------------------------
   4. HERO
--------------------------------------------------------------------------- */
.gold-text {
  background: linear-gradient(90deg, #f3cf82, #E7B347 55%, #c8933a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kenburns {
  transform-origin: 50% 100%;
  animation: kenBurns 26s ease-in-out infinite alternate;
}

.cloud-drift {
  animation: cloudDrift 46s ease-in-out infinite alternate;
}

.sun-pulse {
  animation: sunPulse 5.5s ease-in-out infinite;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 180, .9), rgba(255, 230, 180, 0) 70%);
  animation: particleFloat 9s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   5. BUTTONS
--------------------------------------------------------------------------- */
.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #f6d999, #E7B347 55%, #cf9c3c);
  background-size: 180% 180%;
  color: #0F172A;
  box-shadow: 0 10px 28px -8px rgba(231, 179, 71, .55);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  animation: gradientMove 6s ease infinite, glowPulse 3.4s ease-in-out infinite;
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 20px 44px -10px rgba(231, 179, 71, .65);
}

.btn-primary:active { transform: translateY(-1px) scale(.99); }

.btn-ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .3);
  color: #fff;
  transition: background .5s var(--ease), border-color .5s var(--ease),
              transform .55s var(--ease), box-shadow .55s var(--ease);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(231, 179, 71, .6);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 30px -12px rgba(231, 179, 71, .35);
}

.btn-ghost:active { transform: translateY(-1px) scale(.99); }

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: scale(0);
  pointer-events: none;
  animation: rippleAnim .7s var(--ease) forwards;
}

.btn-ghost .ripple { background: rgba(231, 179, 71, .45); }

/* ---------------------------------------------------------------------------
   6. CARDS
--------------------------------------------------------------------------- */

/* Feature cards — strict design system: solid white, dark text, gold-only
   accents. Never change text color on hover; only lift / shadow / border /
   icon respond. */
.feature-card {
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .14);
  border-color: #E7B347;
}

.feature-card .feature-icon {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.feature-card:hover .feature-icon {
  transform: rotate(3deg);
  box-shadow: 0 0 0 8px rgba(231, 179, 71, .16), 0 0 22px rgba(231, 179, 71, .35);
}

/* "Why us" icon rows — lighter hover treatment */
.why-row { transition: transform .45s var(--ease); }
.why-row:hover { transform: translateX(-4px); }
.why-row:hover .why-icon { transform: translateY(-3px) scale(1.08); }
.why-icon { transition: transform .45s var(--ease); }

/* ---------------------------------------------------------------------------
   7. TIMELINE (registration process)
--------------------------------------------------------------------------- */
.timeline-line { transform-origin: right center; }

.js-ready .timeline-line {
  transform: scaleX(0);
  transition: transform 1.2s var(--ease);
}

.js-ready .timeline-line.in { transform: scaleX(1); }

.js-ready .node-pop {
  transition: transform .55s var(--ease), opacity .55s var(--ease);
  transform: scale(.6);
  opacity: 0;
  transition-delay: calc(var(--d, 0) * 140ms);
}

.js-ready .node-pop.in { transform: scale(1); opacity: 1; }

/* ---------------------------------------------------------------------------
   8. FAQ
--------------------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid rgba(17, 24, 39, .08); }

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}

.faq-panel > div { overflow: hidden; }
.faq-item.open .faq-panel { grid-template-rows: 1fr; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .4s var(--ease); }

/* ---------------------------------------------------------------------------
   9. FOOTER
   No custom rules — footer relies entirely on Tailwind utility classes.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   10. MOTION SYSTEM (reveal / mask scroll animations + idle icon loops)
--------------------------------------------------------------------------- */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(34px) scale(.98);
  filter: blur(9px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
  transition-delay: calc(var(--d, 0) * 100ms);
}

.js-ready .reveal.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.mask { overflow: hidden; display: block; }
.mask-inner { display: block; }

.js-ready .mask-inner {
  transform: translateY(112%);
  transition: transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}

.js-ready .mask.in .mask-inner { transform: translateY(0); }

.anim-float  { animation: floatY 4.5s ease-in-out infinite; }
.anim-rotate { animation: tinyRotate 5s ease-in-out infinite; }
.anim-shimmer{ animation: shimmer 2.6s ease-in-out infinite; }
.anim-bob    { animation: gentleBob 5.5s ease-in-out infinite; }
.anim-steer  { animation: slowSteer 6.5s ease-in-out infinite; }

@keyframes gradientMove  { 0%, 100% { background-position: 0% 50%; }   50% { background-position: 100% 50%; } }
@keyframes glowPulse     { 0%, 100% { box-shadow: 0 10px 28px -8px rgba(231,179,71,.4); } 50% { box-shadow: 0 14px 38px -8px rgba(231,179,71,.68); } }
@keyframes rippleAnim    { to { transform: scale(2.6); opacity: 0; } }
@keyframes kenBurns      { from { transform: scale(1); } to { transform: scale(1.055); } }
@keyframes cloudDrift    { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes sunPulse      { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } }
@keyframes particleFloat { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: .8; } 50% { transform: translateY(-38px) scale(1.15); opacity: .55; } 100% { transform: translateY(-78px) scale(.9); opacity: 0; } }
@keyframes floatY        { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tinyRotate    { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes shimmer       { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.18); } }
@keyframes gentleBob     { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes slowSteer     { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* ---------------------------------------------------------------------------
   11. RESPONSIVE
--------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .timeline-line { transform-origin: top center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal, .mask-inner, .feature-card, .feature-icon, .why-row, .why-icon,
  .btn-primary, .btn-ghost, .timeline-line, .node-pop, .faq-panel,
  .mnav-item, #mobileNav {
    transition: none !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mask-inner { transform: none !important; }
  .timeline-line, .node-pop { transform: none !important; opacity: 1 !important; }

  .anim-float, .anim-rotate, .anim-shimmer, .anim-bob, .anim-steer,
  .btn-primary, .kenburns, .cloud-drift, .sun-pulse, .particle {
    animation: none !important;
  }
}