/* ═══════════════════════════════════════════════════════════════════
   Motion, transitions, animations
═══════════════════════════════════════════════════════════════════ */

/* ─── Hero banner enter ─────────────────────────────────── */
.hero-banner {
  animation: hero-enter 0.7s var(--ease-app) both;
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-banner__media.is-slide-in .hero-banner__img {
  animation: hero-img-in 0.6s var(--ease-app);
}

@keyframes hero-img-in {
  from {
    opacity: 0.4;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── Header scroll behaviour ───────────────────────────── */
.site-header {
  transition:
    box-shadow 0.3s var(--ease-app),
    background 0.3s var(--ease-app);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* ─── Podium slot stagger ───────────────────────────────── */
.podium-slot {
  animation: podium-rise 0.6s var(--ease-app) both;
}

.podium-slot:nth-child(1) { animation-delay: 0.12s; }
.podium-slot:nth-child(2) { animation-delay: 0.04s; }
.podium-slot:nth-child(3) { animation-delay: 0.18s; }

@keyframes podium-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Card hover lift (centralised) ─────────────────────── */
.chef-card,
.product-card,
.feature-card,
.league-card,
.site-live-stats__card {
  will-change: transform;
}

/* ─── Button micro animations ───────────────────────────── */
.btn-gold .cn-icon-label__icon {
  transition: transform 0.25s var(--ease-app);
}

.btn-gold:hover .cn-icon-label__icon {
  transform: translateX(2px);
}

.btn-ghost .cn-icon-label__icon,
.btn-soft .cn-icon-label__icon,
.site-back-link .cn-icon-label__icon,
.section-head__link .cn-icon-label__icon,
.cab-back-link .cn-icon-label__icon,
.hero-side-card__link .cn-icon-label__icon {
  transition: transform 0.25s var(--ease-app);
}

.btn-ghost:hover .cn-icon-label__icon,
.btn-soft:hover .cn-icon-label__icon {
  transform: translateX(2px);
}

.site-back-link:hover .cn-icon-label__icon {
  transform: translateX(-2px);
}

.section-head__link:hover .cn-icon-label__icon,
.hero-side-card__link:hover .cn-icon-label__icon,
.cab-back-link:hover .cn-icon-label__icon {
  transform: translateX(2px);
}

/* ─── Auth modal entrance ───────────────────────────────── */
.modal-root:not([hidden]) .auth-modal {
  animation: auth-modal-in 0.45s var(--ease-bounce);
}

@keyframes auth-modal-in {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes auth-page-bg-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes auth-page-shell-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes auth-part-slide-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes auth-field-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes auth-hero-glow-a {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-6%, 8%) scale(1.1);
  }
}

@keyframes auth-hero-glow-b {
  0%,
  100% {
    opacity: 0.4;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translate(10%, -6%) scale(1.14);
  }
}

.modal-root:not([hidden]) .auth-modal__logo {
  animation: logo-pop 0.6s var(--ease-bounce) 0.15s both;
}

@keyframes logo-pop {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-12deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* ─── Theme toggle rotate ───────────────────────────────── */
[data-theme-toggle] .cn-icon {
  transition: transform 0.45s var(--ease-app);
}

[data-theme-toggle]:hover .cn-icon {
  transform: rotate(180deg) scale(1.1);
}

/* ─── Cart badge bump ───────────────────────────────────── */
.cart-badge:not([hidden]) {
  animation: badge-pop 0.4s var(--ease-bounce);
}

/* ─── Smooth focus ring ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.icon-btn:focus-visible,
.btn-gold:focus-visible,
.btn-ghost:focus-visible,
.site-nav__link:focus-visible {
  outline-offset: 3px;
}

/* ─── Smooth scroll for hash links ──────────────────────── */
html {
  scroll-padding-top: 120px;
}

/* ─── Full site motion layer ────────────────────────────── */

body {
  animation: site-fade-in 0.45s var(--ease-app) both;
}

@keyframes site-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.page-main {
  animation: page-in 0.48s var(--ease-app) both;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity 0.72s var(--ease-app),
    transform 0.72s var(--ease-app),
    filter 0.72s var(--ease-app);
  will-change: opacity, transform, filter;
}

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

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 0.58s var(--ease-app),
    transform 0.58s var(--ease-app),
    box-shadow 0.24s var(--ease-app),
    border-color 0.24s var(--ease-app),
    background 0.24s var(--ease-app);
}

.is-revealed .reveal-stagger > *,
.reveal-stagger > * {
  animation: stagger-card-in 0.58s var(--ease-app) both;
}

.reveal-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.reveal-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { animation-delay: 0.22s; }
.reveal-stagger > *:nth-child(5) { animation-delay: 0.28s; }
.reveal-stagger > *:nth-child(6) { animation-delay: 0.34s; }
.reveal-stagger > *:nth-child(n + 7) { animation-delay: 0.4s; }

@keyframes stagger-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.site-brand__logo-wrap,
.auth-modal__logo,
.admin-sidebar__logo,
.cab-topbar__logo,
.cab-login__logo {
  transition:
    transform 0.28s var(--ease-app),
    filter 0.28s var(--ease-app);
}

.site-brand:hover .site-brand__logo-wrap,
.auth-modal__logo:hover,
.admin-sidebar__brand:hover .admin-sidebar__logo,
.cab-topbar__brand:hover .cab-topbar__logo {
  transform: translateY(-1px) scale(1.02);
  filter: saturate(1.06);
}

.site-nav__link,
.drawer-nav a,
.footer-link,
.footer-link--button,
.admin-nav__item {
  transition:
    transform 0.22s var(--ease-app),
    color 0.22s var(--ease-app),
    background 0.22s var(--ease-app),
    border-color 0.22s var(--ease-app),
    box-shadow 0.22s var(--ease-app);
}

.site-nav__link:hover,
.footer-link:hover,
.footer-link--button:hover {
  transform: translateY(-1px);
}

.btn-gold,
.btn-ghost,
.btn-soft,
.icon-btn,
.modal-close,
.auth-modal__close,
.cart-qty button,
.card-qty button,
.hero-dot {
  transition:
    transform 0.2s var(--ease-app),
    box-shadow 0.2s var(--ease-app),
    background 0.2s var(--ease-app),
    border-color 0.2s var(--ease-app),
    color 0.2s var(--ease-app);
}

.btn-gold:hover,
.btn-ghost:hover,
.btn-soft:hover,
.icon-btn:hover,
.modal-close:hover,
.auth-modal__close:hover {
  transform: translateY(-1px);
}

.btn-gold:active,
.btn-ghost:active,
.btn-soft:active,
.icon-btn:active,
.modal-close:active,
.auth-modal__close:active,
.cart-qty button:active,
.card-qty button:active {
  transform: translateY(0) scale(0.97);
}

.hero-banner__panel > * {
  animation: hero-copy-in 0.62s var(--ease-app) both;
}

.hero-banner__panel > *:nth-child(1) { animation-delay: 0.12s; }
.hero-banner__panel > *:nth-child(2) { animation-delay: 0.2s; }
.hero-banner__panel > *:nth-child(3) { animation-delay: 0.28s; }

@keyframes hero-copy-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-side-card {
  animation: side-card-in 0.72s var(--ease-app) 0.18s both;
}

@keyframes side-card-in {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.hero-dot.is-active {
  animation: dot-pulse 1.7s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(212, 168, 87, 0.28);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(212, 168, 87, 0);
  }
}

.chef-card,
.product-card,
.feature-card,
.league-card,
.site-live-stats__card,
.admin-card,
.cab-card,
.rules-card,
.top3-profile-card {
  transition:
    transform 0.24s var(--ease-app),
    box-shadow 0.24s var(--ease-app),
    border-color 0.24s var(--ease-app),
    background 0.24s var(--ease-app),
    filter 0.24s var(--ease-app);
}

.chef-card:hover,
.product-card:hover,
.feature-card:hover,
.league-card:hover,
.site-live-stats__card:hover,
.rules-card:hover {
  transform: translateY(-4px);
}

.product-card__media img,
.hero-side-card__img,
.cart-line__media img,
.avatar,
.chef-card__avatar-wrap img {
  transition:
    transform 0.42s var(--ease-app),
    filter 0.42s var(--ease-app);
}

.product-card:hover .product-card__media img,
.hero-side-card:hover .hero-side-card__img,
.cart-line__media:hover img,
.chef-card:hover .chef-card__avatar-wrap img {
  transform: scale(1.045);
  filter: saturate(1.06);
}

.badge,
.vip-badge,
.product-card__category,
.admin-pill {
  transition:
    transform 0.2s var(--ease-app),
    box-shadow 0.2s var(--ease-app),
    background 0.2s var(--ease-app);
}

.badge:hover,
.vip-badge:hover,
.product-card__category:hover {
  transform: translateY(-1px) scale(1.02);
}

.modal-root:not([hidden]) .modal-panel:not(.auth-modal),
.cart-modal-anchor.is-open .cart-modal {
  animation: modal-panel-in 0.34s var(--ease-bounce) both;
}

@keyframes modal-panel-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.site-drawer.is-open .drawer-nav a,
.site-drawer.is-open .drawer-nav__foot > * {
  animation: drawer-item-in 0.36s var(--ease-app) both;
}

.site-drawer.is-open .drawer-nav a:nth-child(1) { animation-delay: 0.06s; }
.site-drawer.is-open .drawer-nav a:nth-child(2) { animation-delay: 0.1s; }
.site-drawer.is-open .drawer-nav a:nth-child(3) { animation-delay: 0.14s; }
.site-drawer.is-open .drawer-nav a:nth-child(4) { animation-delay: 0.18s; }
.site-drawer.is-open .drawer-nav a:nth-child(5) { animation-delay: 0.22s; }
.site-drawer.is-open .drawer-nav__foot > * { animation-delay: 0.26s; }

@keyframes drawer-item-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.form-input,
select.form-input,
textarea.form-input {
  transition:
    border-color 0.2s var(--ease-app),
    box-shadow 0.2s var(--ease-app),
    background 0.2s var(--ease-app),
    transform 0.2s var(--ease-app);
}

.form-input:focus,
select.form-input:focus,
textarea.form-input:focus {
  transform: translateY(-1px);
}

.toast {
  animation: toast-in 0.38s var(--ease-bounce) both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.site-footer {
  animation: footer-in 0.7s var(--ease-app) both;
  animation-delay: 0.08s;
}

@keyframes footer-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 640px) {
  .page-main,
  .hero-banner,
  .hero-side-card,
  .reveal-on-scroll {
    animation-duration: 0.36s;
    transition-duration: 0.42s;
  }

  .chef-card:hover,
  .product-card:hover,
  .feature-card:hover,
  .league-card:hover,
  .site-live-stats__card:hover,
  .rules-card:hover {
    transform: translateY(-2px);
  }
}