/* ==========================================================================
   Capitan Gamenet — Soft Motion + Performance
   GPU-friendly, lag-free, buttery transitions
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 160ms var(--ease-soft);
  --transition-base: 280ms var(--ease-out);
  --transition-slow: 420ms var(--ease-out);
  --glass-blur: blur(12px);
}

/* ---- Instant paint: never hide the page ---- */
body.page-loading {
  opacity: 1;
}

body.page-ready {
  opacity: 1;
}

/* Soft page enter for main content only */
.app-main {
  animation: page-enter 380ms var(--ease-out) both;
}

@keyframes page-enter {
  from {
    opacity: 0.01;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ---- Fade-up: short, soft, GPU ---- */
.fade-up {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
  will-change: opacity, transform;
  contain: layout style;
}

.fade-up--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.fade-up--delay-1 { transition-delay: 60ms; }
.fade-up--delay-2 { transition-delay: 120ms; }
.fade-up--delay-3 { transition-delay: 180ms; }

/* ---- Float: desktop only, cheap transform ---- */
.float {
  animation: float 7s var(--ease-soft) infinite;
  will-change: transform;
}

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

.badge-bounce {
  animation: badge-bounce 0.35s var(--ease-spring);
}

@keyframes badge-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* ---- Soft interactive polish ---- */
.btn,
.icon-btn,
.tabbar__item,
.product-card,
.blog-card,
.service-card,
.promo-banner,
.category-pill,
.category-bar__item,
.list-row,
.surface-card--hover {
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-base),
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.btn:hover:not(:disabled),
.product-card:hover,
a.card:hover,
.blog-card:hover,
.service-card:hover,
.promo-banner:hover,
.surface-card--hover:hover {
  transform: translate3d(0, -3px, 0);
}

.btn:active:not(:disabled),
.tabbar__item:active,
.icon-btn:active {
  transform: scale(0.97);
}

/* Images: smooth decode + no layout jump */
img {
  content-visibility: auto;
}

.product-card__image img,
.hero-visual-img,
.blog-card__image img,
.promo-banner__bg {
  transform: translateZ(0);
}

/* Off-screen sections skip paint work */
.section,
.page-shell > section,
.cta-banner,
.banner-grid,
.product-grid,
.blog-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* Cards: isolate paint */
.card,
.product-card,
.surface-card,
.auth-card {
  contain: layout style;
}

/* ---- Glass: lighter by default, off on weak devices ---- */
.site-header,
.topbar,
.tabbar,
.card,
.page-hero,
.shop-toolbar,
.cta-banner,
.pwa-install-bar,
.sticky-cta {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

@media (max-width: 767px) {
  :root {
    --glass-blur: blur(8px);
    --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.05);
    --shadow-card: 0 6px 20px rgba(124, 58, 237, 0.08);
  }

  .float { animation: none; will-change: auto; }

  .app-main { animation-duration: 280ms; }

  .fade-up {
    transform: translate3d(0, 10px, 0);
    transition-duration: 320ms;
  }

  /* Kill expensive blur on mobile chrome layers */
  .card,
  .page-hero,
  .shop-toolbar,
  .cta-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--color-white);
  }

  .promo-banner__content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .promo-banner__badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header,
  .topbar,
  .tabbar {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .hero-split::before,
  .hero-split::after {
    display: none;
  }

  .section,
  .product-grid,
  .blog-grid {
    contain-intrinsic-size: auto 240px;
  }
}

/* Prefer reduced data / low power */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .float,
  .badge-bounce,
  .skeleton,
  .app-main {
    animation: none !important;
  }

  body.page-ready,
  .btn,
  .product-card,
  a.card {
    transition: none !important;
  }
}

/* Soft overlays already use GPU-friendly transforms.
   Bottom sheets keep their translateY state from components.css. */
.toast,
.search-overlay,
.mini-cart {
  transform: translateZ(0);
}