/* ============================================
   ROYAL AYERS — Final Polish
   Prompt 6/6 — Luxury Animations, Smoke, Responsiveness, QA
   ============================================ */

/* === SMOOTH SCROLL & REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === SMOKE EFFECTS — REFINED ATMOSPHERE === */
.smoke-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.smoke-layer::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: 
    radial-gradient(ellipse 80% 50% at 50% 70%, rgba(139, 17, 22, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 30% 50%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
  animation: smoke-ambient 20s ease-in-out infinite;
}

@keyframes smoke-ambient {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

/* Inner hero smoke enhancement */
.inner-hero .inner-hero-smoke::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 80%, rgba(139, 17, 22, 0.03) 0%, transparent 60%);
  animation: smoke-drift-subtle 25s ease-in-out infinite;
}

@keyframes smoke-drift-subtle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

/* Footer subtle smoke */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(139, 17, 22, 0.06) 0%, transparent 100%);
  pointer-events: none;
}

.footer {
  position: relative;
}

/* === LUXURY MOTION — SCROLL REVEAL === */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.3s; }

.reveal-stagger.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* === BUTTON POLISH === */
.btn {
  min-height: 48px;
  border-radius: 2px;
}

.btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline:focus-visible,
.btn-outline-red:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* === CARD POLISH === */
.card-luxury {
  border-radius: 2px;
}

.card-luxury:focus-within {
  border-color: rgba(212, 175, 55, 0.4);
}

.package-card,
.testimonial-card,
.why-pillar,
.experience-pillar {
  border-radius: 2px;
}

/* === MOBILE MENU POLISH === */
.nav-mobile {
  display: flex;
  flex-direction: column;
  padding: var(--space-12) var(--space-8);
  background: linear-gradient(180deg, var(--color-black) 0%, var(--color-charcoal) 100%);
  border-left: 1px solid rgba(212, 175, 55, 0.1);
}

.nav-mobile .nav-link {
  padding: var(--space-5);
  font-size: var(--text-lg);
  border-bottom: 1px solid rgba(212, 175, 55, 0.08);
  min-height: 52px;
  display: flex;
  align-items: center;
}

.nav-mobile .btn-primary {
  margin-top: var(--space-6);
  align-self: stretch;
}

.nav-toggle {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-toggle span {
  transition: all var(--transition-smooth);
}

/* === FOCUS VISIBLE — ACCESSIBILITY === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.nav-link:focus-visible {
  outline-offset: 4px;
}

/* === PLACEHOLDER IMAGE REFINEMENT === */
.image-placeholder,
.about-image-placeholder,
.gallery-placeholder,
.merch-placeholder {
  position: relative;
  background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-light) 100%);
  border: 1px solid rgba(212, 175, 55, 0.12);
}

.image-placeholder::before,
.about-image-placeholder::before,
.gallery-placeholder::before,
.merch-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

/* === GALLERY HOVER REFINEMENT === */
.gallery-masonry-item .image-placeholder {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-masonry-item:hover .image-placeholder {
  transform: scale(1.02);
}

/* === ACCORDION TRANSITION === */
.faq-accordion-panel {
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-accordion-trigger:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* === MERCH CARD HOVER === */
.merch-card:hover .merch-placeholder {
  transform: scale(1.02);
}

/* === DIVIDER REFINEMENT === */
.divider-gold {
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

/* === HERO TITLE SUBTLE GLOW === */
.hero-title {
  text-shadow: 0 0 60px rgba(212, 175, 55, 0.08);
}

/* === RESPONSIVE SPACING REFINEMENTS === */
@media (max-width: 767px) {
  .section {
    padding: var(--space-16) var(--space-6);
  }
  
  .hero-content {
    padding: var(--space-10) var(--space-6);
  }
  
  .inner-hero-content {
    padding: var(--space-16) var(--space-6);
  }
  
  .package-card,
  .testimonial-card {
    padding: var(--space-8);
  }
}

@media (max-width: 480px) {
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-ctas .btn {
    width: 100%;
  }
  
  .booking-cta-buttons {
    flex-direction: column;
  }
  
  .booking-cta-buttons .btn {
    width: 100%;
  }
}

/* === CART TOAST ANIMATION === */
.cart-toast {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.4s ease;
}

/* === FORM INPUT FOCUS === */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: 0 0 0 2px var(--color-gold);
}

/* === SIZE OPTION FOCUS === */
.size-option:focus-within .size-option-label {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}