/* gromovaasya Wedding Invitations — Animations · Minimalist Hitech */

:root {
  /* ---- Hitech Easing Palette ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* snappy entrance */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);      /* smooth standard */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);  /* dramatic reveal */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* subtle bounce */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);   /* buttery smooth */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* decelerate fast */
}

/* ---- Keyframes ---- */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* FAB: elegant breathing glow — subtle, not intrusive */
@keyframes fabBreathe {
  0%, 100% {
    box-shadow:
      0 2px 8px rgba(126,205,192,0.15),
      0 0 0 0 rgba(126,205,192,0);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 4px 16px rgba(126,205,192,0.2),
      0 0 0 8px rgba(126,205,192,0.06);
    transform: scale(1.03);
  }
}

/* Nav menu item stagger entrance */
@keyframes navItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Hero Staggered Entrance: snappy & precise ---- */
.hero__subtitle, .hero__title, .hero__description, .hero__actions {
  opacity: 0; transform: translateY(12px) scale(0.99);
  animation: heroFadeIn 280ms var(--ease-out-expo) forwards;
}
.hero__subtitle    { animation-delay: 80ms; }
.hero__title       { animation-delay: 140ms; }
.hero__description { animation-delay: 200ms; }
.hero__actions     { animation-delay: 260ms; }

/* ---- Hero Parallax: subtle depth layer ---- */
.hero__overlay {
  will-change: transform;
}

/* ---- Scroll Reveal: precise & fast ---- */
.reveal {
  opacity: 0; transform: translateY(10px);
  transition: opacity 280ms var(--ease-out-expo), transform 280ms var(--ease-out-expo);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-children > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity 280ms var(--ease-out-expo), transform 280ms var(--ease-out-expo);
}
.reveal-children.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-children.is-visible > *:nth-child(2) { transition-delay: 40ms; }
.reveal-children.is-visible > *:nth-child(3) { transition-delay: 80ms; }
.reveal-children.is-visible > *:nth-child(4) { transition-delay: 120ms; }
.reveal-children.is-visible > *:nth-child(5) { transition-delay: 160ms; }
.reveal-children.is-visible > *:nth-child(6) { transition-delay: 200ms; }
.reveal-children.is-visible > *:nth-child(n+7) { transition-delay: 240ms; }
.reveal-children.is-visible > * { opacity: 1; transform: none; }

/* ---- Card Hover (GPU-friendly) ---- */
.catalog-card {
  transition: transform 300ms var(--ease-out-quart), box-shadow 300ms var(--ease-out-quart);
}
.catalog-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08); }
.catalog-card__image { transition: transform 500ms var(--ease-out-quart); }
.catalog-card:hover .catalog-card__image { transform: scale(1.05); }
.catalog-card__overlay { opacity: 0; transition: opacity 300ms var(--ease-in-out); }
.catalog-card:hover .catalog-card__overlay { opacity: 1; }
.catalog-card__btn {
  transform: translateY(8px); opacity: 0;
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.catalog-card:hover .catalog-card__btn { transform: none; opacity: 1; }

/* ---- Filter Pills ---- */
.filter-btn {
  transition: transform 180ms var(--ease-spring), background-color 180ms var(--ease-in-out),
              color 180ms var(--ease-in-out), box-shadow 180ms var(--ease-in-out);
}
.filter-btn:hover { transform: scale(1.04); background-color: #E8ECF1; }
.filter-btn--active {
  transform: scale(1.06); background-color: #2C3E50; color: #fff;
  box-shadow: 0 2px 8px rgba(44,62,80,0.25);
}
.filter-btn:active { transform: scale(0.97); }

/* ============================================
   FAQ ACCORDION — Smooth grid-rows + @starting-style
   ============================================ */

/* Question text — subtle color shift on hover/open */
.faq__question {
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-in-out);
  border-radius: var(--radius-sm);
}
.faq__question:hover {
  color: var(--color-primary-dark);
}

/* Chevron icon — smooth rotation with slight spring */
.faq__question::after {
  content: ''; display: inline-block; width: 16px; height: 16px;
  margin-left: auto; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636E72' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  transition: transform 350ms var(--ease-spring), filter 200ms var(--ease-in-out);
}
.faq__item[open] .faq__question { color: #2C3E50; }
.faq__item[open] .faq__question::after {
  transform: rotate(180deg);
  filter: brightness(0) saturate(100%) invert(56%) sepia(25%) saturate(567%) hue-shift(130deg) brightness(95%) contrast(90%);
}

/* Answer — grid-template-rows with @starting-style for discrete animation */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms var(--ease-out-quart);
}
.faq__item[open] .faq__answer {
  grid-template-rows: 1fr;
}
.faq__answer > * {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 300ms var(--ease-out) 40ms, transform 300ms var(--ease-out) 40ms;
}
.faq__item[open] .faq__answer > * {
  opacity: 1;
  transform: translateY(0);
}

/* @starting-style for first-open smoothness (Chrome 117+) */
@starting-style {
  .faq__item[open] .faq__answer {
    grid-template-rows: 0fr;
  }
  .faq__item[open] .faq__answer > * {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ============================================
   REVIEWS CAROUSEL — Snap scroll + momentum feel
   ============================================ */
.reviews__track {
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* During drag — no transition for instant response */
.reviews__track.is-dragging {
  scroll-behavior: auto;
}

/* Scroll snap already set in main.css — enhanced with momentum */
.reviews__track {
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--container-padding);
}

.review-card {
  scroll-snap-align: start;
  transition: transform 300ms var(--ease-out-quart), box-shadow 300ms var(--ease-out-quart);
}
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Carousel navigation buttons — subtle scale on press */
.reviews__btn {
  transition: transform 200ms var(--ease-spring), background-color 200ms var(--ease-in-out),
              border-color 200ms var(--ease-in-out);
}
.reviews__btn:hover {
  transform: scale(1.08);
}
.reviews__btn:active {
  transform: scale(0.95);
}

/* ============================================
   FAB — Elegant breathing pulse (non-intrusive)
   ============================================ */
.fab--telegram {
  animation: fabBreathe 4s var(--ease-in-out) 3s infinite;
}
.fab--telegram:hover {
  animation: none;
  box-shadow:
    0 4px 12px rgba(0,136,204,0.3),
    0 0 0 4px rgba(0,136,204,0.08);
  transform: scale(1.08);
  transition: transform 250ms var(--ease-spring), box-shadow 250ms var(--ease-in-out);
}
.fab--telegram:active {
  transform: scale(0.96);
  transition: transform 100ms var(--ease-in-out);
}

/* ============================================
   BURGER — Morphing animation (≡ → ✕)
   ============================================ */
.burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transform-origin: center center;
  transition: transform 350ms var(--ease-spring), opacity 200ms var(--ease-in-out);
}

/* Open state: morph lines into X */
.header__burger[aria-expanded="true"] .burger-line:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.header__burger[aria-expanded="true"] .burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header__burger[aria-expanded="true"] .burger-line:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Burger hover — subtle scale */
.header__burger {
  transition: transform 200ms var(--ease-spring);
}
.header__burger:hover {
  transform: scale(1.1);
}
.header__burger:active {
  transform: scale(0.92);
}

/* ============================================
   NAV MENU — Slide-down with stagger
   ============================================ */
.header__nav {
  overflow: hidden;
  transition: max-height 400ms var(--ease-out-quart), opacity 300ms var(--ease-out);
  max-height: 0;
  opacity: 0;
}
.header__nav.is-open {
  max-height: 400px;
  opacity: 1;
}

/* Staggered menu item entrance */
.header__nav.is-open .header__menu a {
  animation: navItemIn 300ms var(--ease-out) forwards;
}
.header__nav.is-open .header__menu a:nth-child(1) { animation-delay: 60ms; }
.header__nav.is-open .header__menu a:nth-child(2) { animation-delay: 100ms; }
.header__nav.is-open .header__menu a:nth-child(3) { animation-delay: 140ms; }
.header__nav.is-open .header__menu a:nth-child(4) { animation-delay: 180ms; }
.header__nav.is-open .header__menu a:nth-child(5) { animation-delay: 220ms; }
.header__nav.is-open .header__menu a:nth-child(6) { animation-delay: 260ms; }

/* ============================================
   PAGE TRANSITION FEEL — Smooth section reveals
   ============================================ */

/* Section transitions — subtle parallax feel */
section {
  transition: opacity 600ms var(--ease-out);
}

/* Smooth page-level scroll */
html {
  scroll-behavior: smooth;
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-children > *,
  .hero__subtitle, .hero__title, .hero__description, .hero__actions {
    opacity: 1; transform: none;
  }
  .faq__answer {
    grid-template-rows: 1fr !important;
  }
  .faq__answer > * {
    opacity: 1 !important; transform: none !important;
  }
  .header__nav {
    max-height: none !important; opacity: 1 !important;
  }
  .burger-line {
    transform: none !important; opacity: 1 !important;
  }
}