/* ============================================================
   COSMOS AUTO PRESTIGE — Global Animations & Polish
   Mobile-first, prefers-reduced-motion safe

   DESIGN TOKENS:
   - Easing:     cubic-bezier(0.16, 1, 0.3, 1)  (expo-out, all animations)
   - Reveals:    0.7s duration, 24px travel
   - Hero:       0.8s duration
   - Micro:      0.35s duration (buttons, toggles, accordions)
   - Stagger:    65ms increments
   ============================================================ */

/* ── Scroll-reveal (Intersection Observer hook) ─────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger variants — 65ms increments */
.reveal-d1 { transition-delay: 65ms; }
.reveal-d2 { transition-delay: 130ms; }
.reveal-d3 { transition-delay: 195ms; }
.reveal-d4 { transition-delay: 260ms; }
.reveal-d5 { transition-delay: 325ms; }

/* Slide from left/right */
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Scale-in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Hero entrance keyframes ─────────────────────────────────── */
@keyframes cosmos-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cosmos-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cosmos-scale-up {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-title {
  animation: cosmos-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-subtitle {
  animation: cosmos-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.hero-cta {
  animation: cosmos-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.hero-visual {
  animation: cosmos-scale-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* ── Booking step slide transitions (DO NOT MODIFY) ────────── */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

.step-enter-forward {
  animation: slide-in-right 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.step-enter-backward {
  animation: slide-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Nova chat widget ────────────────────────────────────────── */
@keyframes nova-open {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes nova-close {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.92) translateY(12px); }
}
@keyframes nova-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0, 173, 239, 0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 173, 239, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 173, 239, 0); }
}
@keyframes nova-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.nova-window-open  { animation: nova-open  0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nova-window-close { animation: nova-close 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nova-fab-pulse    { animation: nova-pulse-ring 2s cubic-bezier(0.16, 1, 0.3, 1); }
.nova-bubble       { animation: nova-bubble-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

.typing-dot-1 { animation: typing-dot 1.2s infinite 0ms; }
.typing-dot-2 { animation: typing-dot 1.2s infinite 200ms; }
.typing-dot-3 { animation: typing-dot 1.2s infinite 400ms; }

/* ── CTA button neon glow hover ─────────────────────────────── */
@keyframes btn-glow-once {
  0%   { box-shadow: 0 0 0px rgba(0, 173, 239, 0); }
  50%  { box-shadow: 0 0 20px rgba(0, 173, 239, 0.35); }
  100% { box-shadow: 0 0 8px rgba(0, 173, 239, 0.12); }
}
.btn-neon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-neon:hover {
  animation: btn-glow-once 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.btn-neon:active {
  transform: scale(0.97);
}

/* ── Input focus glow (BOOKING — DO NOT MODIFY) ───────────── */
.input-neon {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-neon:focus {
  border-color: #00ADEF !important;
  box-shadow: 0 0 0 2px rgba(0, 173, 239, 0.15);
  outline: none;
}

/* Floating label (BOOKING — DO NOT MODIFY) */
.label-float {
  position: relative;
}
.label-float label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #6b7280;
  transition: all 0.2s ease;
  pointer-events: none;
  background: transparent;
}
.label-float input:focus ~ label,
.label-float input:not(:placeholder-shown) ~ label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: #00ADEF;
  background: #050505;
  padding: 0 4px;
}

/* ── Card hover neon lift ───────────────────────────────────── */
.card-neon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-neon:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -12px rgba(0, 173, 239, 0.25);
  border-color: rgba(0, 173, 239, 0.35) !important;
}
.card-neon:active {
  transform: scale(0.98) translateY(0);
  transition-duration: 0.15s;
}

/* ── Service card hover (desktop only, uses CSS custom prop) ── */
@media (hover: hover) and (pointer: fine) {
  .card-hover:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 0 30px -5px var(--card-theme, #00ADEF) !important;
    border-color: var(--card-theme, #00ADEF) !important;
  }
}

/* ── Mobile active card highlight (touch devices) ────────────── */
@media (hover: none) and (pointer: coarse) {
  .service-card.mobile-active {
    transform: translateY(-4px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ── Gallery filter transition ──────────────────────────────── */
@keyframes filter-fade {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.gallery-item-enter {
  animation: filter-fade 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── FAQ accordion ──────────────────────────────────────────── */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-body.open {
  grid-template-rows: 1fr;
}
.faq-body > div {
  overflow: hidden;
}
.faq-chevron {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-chevron.open {
  transform: rotate(180deg);
}

/* ── Testimonials carousel dots ─────────────────────────────── */
@keyframes dot-fill {
  from { width: 8px; }
  to   { width: 48px; }
}
.dot-active {
  animation: dot-fill 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  background-color: #00ADEF;
}

/* ── Skeleton loading ───────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: 2px;
}

/* ── Hamburger morphing icon ────────────────────────────────── */
.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}
.hamburger-open .bar-top    { transform: translateY(7px) rotate(45deg); }
.hamburger-open .bar-mid    { opacity: 0; transform: scaleX(0); }
.hamburger-open .bar-bot    { transform: translateY(-7px) rotate(-45deg); }

/* ── Touch utilities ────────────────────────────────────────── */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Scrollbar — neon theme ─────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #020202; }
::-webkit-scrollbar-thumb {
  background: #1e1e1e;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: #00ADEF; }

/* ── Text selection ─────────────────────────────────────────── */
::selection { background: #00ADEF; color: #000; }

/* ── Custom focus ring ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #00ADEF;
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── Smooth scroll + header offset ─────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  overflow-anchor: none;
}

/* ── Overflow guard ─────────────────────────────────────────── */
body { overflow-x: hidden; }

/* ── Prefers-reduced-motion override (MUST be last) ─────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-title,
  .hero-subtitle,
  .hero-cta,
  .hero-visual {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}