/* ==========================================================
   Hanaya Vastra — Animations
   All transitions, keyframes and motion effects live here,
   kept separate from styles.css (layout, color, typography).
   ========================================================== */

@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;
  }
}

/* ---------- keyframes ---------- */

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-16px); }
}

@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0.7rem); opacity: 0; }
}

@keyframes mouseBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes headerSlideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes mobileNavOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- header entrance ---------- */

.site-header {
  animation: headerSlideDown 0.6s ease both;
}

/* ---------- links / nav micro-interactions ---------- */

.nav-links a,
.nav-actions a,
.dropdown-toggle {
  transition: color 0.25s ease;
}

.nav-links a::after,
.nav-actions a::after {
  transition: width 0.25s ease;
}

.icon-btn {
  transition: transform 0.25s ease, background 0.25s ease;
}

.dropdown-panel {
  transition: opacity 0.2s ease;
}

.dropdown:hover .dropdown-panel,
.dropdown.open .dropdown-panel {
  animation: dropdownFade 0.2s ease both;
}

.mobile-nav.open {
  animation: mobileNavOpen 0.3s ease both;
}

.mobile-nav a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-nav a:hover {
  color: var(--gold);
  padding-left: 0.35rem;
}

/* ---------- hero ---------- */

.hero::before {
  animation: float 8s ease-in-out infinite;
}

.hero::after {
  animation: float 10s ease-in-out infinite reverse;
}

.hero-copy .eyebrow {
  animation: fadeInUp 0.6s ease 0.35s both;
}

.hero-copy .hero-title {
  animation: fadeInUp 0.6s ease 0.45s both;
}

.hero-copy .lead {
  animation: fadeInUp 0.6s ease 0.55s both;
}

.hero-copy .hero-actions {
  animation: fadeInUp 0.6s ease 0.65s both;
}

.hero-copy .hero-stats {
  animation: fadeIn 0.6s ease 0.9s both;
}

.hero-media {
  animation: scaleIn 0.9s ease 0.25s both;
}

.scroll-indicator {
  animation: fadeIn 0.6s ease 1.3s both;
}

.mouse {
  animation: mouseBounce 1.6s ease-in-out infinite;
}

.mouse::before {
  animation: scrollDot 1.6s infinite;
}

/* ---------- buttons ---------- */

.btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.wishlist-btn {
  transition: transform 0.2s ease, background 0.2s ease;
}

.wishlist-btn:active {
  transform: scale(0.9);
}

.wishlist-btn svg {
  transition: color 0.2s ease, fill 0.2s ease;
}

/* ---------- scroll reveal (driven by IntersectionObserver in script.js) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(.2,.7,.2,1), transform 0.65s cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* staggered reveal for grid items */
.cards-grid.reveal .reveal,
.cards-grid .reveal:nth-child(1) { transition-delay: 0s; }
.cards-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.cards-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.cards-grid .reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- product / collection / instagram cards ---------- */

.product-card {
  transition: transform 0.3s ease;
}

.product-media img {
  transition: transform 0.4s ease;
}

.product-info-link .product-title {
  transition: color 0.2s ease;
}

.product-actions {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.collection-card img {
  transition: transform 0.5s ease;
}

.instagram-card img {
  transition: transform 0.5s ease;
}

.instagram-card::after {
  transition: opacity 0.3s ease;
}

.view-all-link a {
  transition: color 0.2s ease;
}

.social-btn {
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-btn:hover {
  transform: translateY(-2px);
}

.contact-info-card {
  transition: transform 0.25s ease;
}

.contact-info-card:hover {
  transform: scale(1.02);
}

.collection-tile img {
  transition: transform 0.6s ease;
}

.collection-tile:hover img {
  transform: scale(1.05);
}

.tile-underline {
  transition: width 0.4s ease;
}

.collection-tile:hover .tile-underline {
  width: 100%;
}

.pd-thumb {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.pd-thumb:hover {
  transform: scale(1.05);
}

.pd-nav-btn,
.pd-side-actions button {
  transition: background 0.2s ease, transform 0.2s ease;
}

.pd-nav-btn:hover,
.pd-side-actions button:hover {
  background: #fff;
}

.pd-size-btn {
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.pd-size-btn:hover {
  transform: scale(1.05);
}

.pd-qty button:active {
  transform: scale(0.9);
}

.auth-tab {
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.auth-social-btn:hover,
.auth-form button[type="submit"]:hover {
  transform: translateY(-2px);
}

/* Auth page entrance choreography */
.auth-media {
  animation: fadeInLeft 0.7s ease 0.1s both;
}

.auth-media-card {
  animation: fadeInUp 0.6s ease 0.4s both;
}

.auth-form-wrap {
  animation: fadeInUp 0.6s ease 0.25s both;
}

.auth-title {
  animation: fadeInUp 0.5s ease 0.35s both;
}

.auth-subtitle {
  animation: fadeInUp 0.5s ease 0.42s both;
}

.auth-toggle {
  animation: fadeInUp 0.5s ease 0.5s both;
}

.auth-form {
  animation: fadeInUp 0.5s ease 0.58s both;
}

.auth-divider,
.auth-social-grid {
  animation: fadeIn 0.6s ease 0.8s both;
}

@media (max-width: 760px) {
  .auth-media {
    animation: none;
  }
}

.auth-title,
.auth-subtitle,
.auth-form,
.auth-field {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.auth-form-wrap.switching .auth-title,
.auth-form-wrap.switching .auth-subtitle,
.auth-form-wrap.switching .auth-form {
  opacity: 0;
  transform: translateY(10px);
}

.auth-field-name {
  overflow: hidden;
  transition: opacity 0.25s ease;
}

.faq-item summary {
  transition: color 0.2s ease;
}

.faq-item .chevron {
  transition: transform 0.25s ease;
}

.faq-cta a {
  transition: transform 0.2s ease;
}

.faq-cta a:hover {
  transform: scale(1.05);
}

.cart-item-remove {
  transition: color 0.2s ease, transform 0.2s ease;
}

.cart-item-remove:hover {
  color: var(--terracotta, #c1633f);
  transform: scale(1.1);
}

.cart-item {
  transition: opacity 0.2s ease;
}

.checkout-step-badge {
  transition: background 0.3s ease, color 0.3s ease;
}

.address-card,
.payment-card {
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}

.address-card:hover,
.payment-card:hover {
  border-color: var(--gold);
}

.add-address-btn {
  transition: border-color 0.25s ease, color 0.25s ease;
}

.order-confirmed-icon {
  animation: scaleIn 0.5s cubic-bezier(.34,1.56,.64,1) both;
}

.order-confirmed h2,
.order-confirmed .order-id,
.order-confirmed > p {
  animation: fadeInUp 0.5s ease 0.15s both;
}

.order-delivery-card {
  animation: fadeInUp 0.5s ease 0.3s both;
}

.order-confirmed-actions {
  animation: fadeInUp 0.5s ease 0.4s both;
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.wishlist-item {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.wishlist-item:hover {
  box-shadow: 0 20px 50px -15px rgba(184, 134, 11, 0.2), 0 8px 30px -10px rgba(47, 36, 29, 0.1);
}

.wishlist-remove-btn {
  transition: background 0.2s ease, transform 0.2s ease;
}

.wishlist-remove-btn:hover {
  background: rgba(200, 60, 60, 0.08);
  transform: scale(1.05);
}

.wishlist-empty-icon {
  animation: pulseScale 2s ease-in-out infinite;
}

/* ---------- responsive tuning for motion ---------- */

@media (max-width: 760px) {
  .hero-copy .eyebrow,
  .hero-copy .hero-title,
  .hero-copy .lead,
  .hero-copy .hero-actions,
  .hero-copy .hero-stats {
    animation-duration: 0.5s;
  }

  .hero-media {
    animation: fadeIn 0.6s ease 0.2s both;
  }

  .hero::before,
  .hero::after {
    animation-duration: 12s;
  }

  .product-card:hover,
  .btn:hover,
  .icon-btn:hover {
    transform: none;
  }
}