/**
 * AITopUp — base layout & utilities
 * @package AITopUp
 */

/* Theme mode transitions */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.site-header,
.glass,
.product-card,
.trust-bar,
.site-footer,
.nav-mobile {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, padding-top 0.25s ease;
}

/* === Mobile-first base (320–480px) === */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 1rem;
  overflow-x: clip;
  padding-bottom: var(--safe-bottom);
  -webkit-tap-highlight-color: var(--tap-highlight);
}

@media (prefers-reduced-motion: no-preference) {
  body,
  .site-header,
  .glass,
  .product-card,
  .step-card,
  .need-chip,
  .nav-mobile,
  .site-footer,
  .trust-pill,
  .footer-chat-btn,
  .btn-secondary,
  .woocommerce ul.products li.product {
    transition: var(--transition-theme);
  }
}

button,
.btn,
a.btn,
input,
select,
textarea {
  touch-action: manipulation;
}

@media (min-width: 1024px) {
  :root { --header-h: 4rem; }
}

@media (max-width: 1023px) {
  :root { --header-h: 3.5rem; }
  .site-header.is-scrolled { --header-h: 3.375rem; }
}

@keyframes aurora-drift {
  0%, 100% { opacity: 0.6; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.85; transform: translate(2%, -1%) scale(1.02); }
}

@keyframes mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
  33% { transform: translate(3%, -2%) scale(1.04); opacity: 0.9; }
  66% { transform: translate(-2%, 1.5%) scale(0.98); opacity: 0.82; }
}

@keyframes mesh-drift-alt {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3%, 2%) scale(1.06); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes text-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes conic-spin {
  to { --conic-angle: 360deg; }
}

@keyframes shine-sweep {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  35% { opacity: 0.7; }
  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
}

@keyframes header-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes footer-wave {
  0%, 100% { transform: translateX(-8%) scaleY(1); opacity: 0.55; }
  50% { transform: translateX(8%) scaleY(1.15); opacity: 0.85; }
}

@keyframes logo-pulse-ring {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.45); opacity: 0; }
}

@keyframes logo-glow-pulse {
  0%, 100% { opacity: 0.55; filter: blur(12px); }
  50% { opacity: 0.85; filter: blur(18px); }
}

@keyframes fab-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  50% { transform: scale(1.18); opacity: 0; }
}

@property --conic-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --hue {
  syntax: "<number>";
  initial-value: 18;
  inherits: false;
}

@keyframes hue-rotate {
  0% { --hue: 18; }
  25% { --hue: 48; }
  50% { --hue: 280; }
  75% { --hue: 195; }
  100% { --hue: 18; }
}

@keyframes iridescent-shift {
  0%, 100% { --iridescent-angle: 125deg; filter: hue-rotate(0deg); }
  50% { --iridescent-angle: 145deg; filter: hue-rotate(15deg); }
}

@keyframes btn-loading-stripe {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes price-underline-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

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

@keyframes aurora-wave-v2 {
  0%, 100% { transform: translateX(-12%) scaleY(1); opacity: 0.5; }
  33% { transform: translateX(4%) scaleY(1.2); opacity: 0.75; }
  66% { transform: translateX(12%) scaleY(0.95); opacity: 0.6; }
}

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--header-offset);
  background: var(--color-bg);
  background-image: var(--color-bg-pearl, none);
  color: var(--color-fg);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

[data-theme="light"] body {
  background: var(--color-bg-pearl);
}

/* Cinema vignette + starfield (dark mode) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: var(--mesh-opacity);
  background: var(--gradient-hero-mesh);
  background-blend-mode: screen, overlay, screen, soft-light;
  animation: none;
}

html[data-theme="dark"]::after,
:root:not([data-theme="light"])::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--vignette-edge);
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--starfield-opacity);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(255, 180, 140, 0.5), transparent),
    radial-gradient(1px 1px at 45% 35%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 62% 8%, rgba(200, 180, 255, 0.5), transparent),
    radial-gradient(1px 1px at 78% 55%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 88% 82%, rgba(255, 140, 180, 0.45), transparent),
    radial-gradient(1px 1px at 5% 45%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 35% 92%, rgba(180, 200, 255, 0.45), transparent),
    radial-gradient(1px 1px at 55% 62%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 92% 28%, rgba(255, 200, 160, 0.4), transparent),
    radial-gradient(1px 1px at 18% 58%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 72% 38%, rgba(220, 180, 255, 0.4), transparent);
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Premium grain noise overlay */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* Aurora mesh + subtle scanline overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--scanline-opacity);
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--scanline-color) 2px,
    var(--scanline-color) 3px
  );
  mix-blend-mode: overlay;
}

img {
  max-width: 100%;
  height: auto;
}

[data-theme="dark"] img:not([class*="logo"]):not(.payment-qr img) {
  filter: brightness(var(--image-brightness));
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.site-main { flex: 1; }

/* === Breakpoints: sm 640, md 768, lg 1024 === */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--site-pad-x);
}
@media (min-width: 640px) {
  .container { padding-inline: var(--site-pad-x-md); }
}

.font-heading { font-family: var(--font-heading); }

/* Text utilities */
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent-link); }
.text-bright { color: var(--fg-bright); }

.gradient-text {
  display: inline;
  background: var(--gradient-text);
  background-size: 100% auto;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: none;
}

.logo-wordmark.gradient-text {
  display: inline;
  background: var(--gradient-logo-wordmark);
  background-size: 100% auto;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

[data-theme="light"] .logo-wordmark.gradient-text {
  background: var(--gradient-logo-wordmark-light);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.glass {
  background: var(--card);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-inset);
}

.hero-grid {
  background-image:
    linear-gradient(var(--border-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-glow) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 75%);
}