/* ============================================
   DEFERRED STYLES — loaded non-blocking after first paint
   These styles enhance visual polish but aren't needed for initial render.
   Loaded via media="print" onload trick in app.html.
   ============================================ */

/* --- Animation utilities --- */

.animate-in {
  animation-duration: var(--tw-animate-duration, 150ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-from-top-2 {
  --tw-enter-translate-y: -0.5rem;
  animation-name: slideInFromTop;
}
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(var(--tw-enter-translate-y, 0));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .gradient-text moved to app.css (critical) — it sets text-fill-color: transparent,
   making hero title invisible if deferred. Causes LCP to fall to ToS paragraph. */

/* --- Skeleton loading --- */

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 0%,
    var(--skeleton-highlight) 20%,
    var(--skeleton-base) 40%,
    var(--skeleton-base) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer {
    animation: none;
  }
}

/* --- Cursor glow + animated border (desktop only) --- */

@media (hover: hover) {
  .glass-card:is([data-glow], [data-highlight]) {
    --glow-alpha: 0.1;
    --highlight-alpha: 0.6;
    position: relative;
    overflow: hidden;
  }

  :root.dark .glass-card:is([data-glow], [data-highlight]) {
    --glow-alpha: 0.15;
    --highlight-alpha: 0.8;
  }

  .glass-card[data-highlight] {
    border: none;
  }

  .glass-card[data-glow]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--glow-opacity, 0);
    background: radial-gradient(
      300px circle at var(--glow-x, 50%) var(--glow-y, 50%),
      oklch(from var(--primary) l c h / var(--glow-alpha)),
      transparent 60%
    );
    transition: opacity 0.3s ease;
  }

  .glass-card[data-highlight]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: var(--glow-opacity, 0);
    transition: opacity 0.3s ease;
    background: conic-gradient(
      from var(--border-angle, 0deg) at 50% 50%,
      transparent 0%,
      oklch(from var(--primary) l c h / var(--highlight-alpha)) 5%,
      transparent 14%,
      transparent 36%,
      oklch(from var(--primary) l c h / var(--highlight-alpha)) 41%,
      transparent 50%,
      transparent 100%
    );
    -webkit-mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
    mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1.5px;
  }

  .glass-card:is([data-glow], [data-highlight]) > * {
    position: relative;
    z-index: 1;
  }
}

/* --- Platform theme transitions --- */

:root[data-platform] {
  transition:
    --primary var(--duration-slow) var(--ease-out),
    --primary-foreground var(--duration-slow) var(--ease-out),
    --secondary var(--duration-slow) var(--ease-out),
    --secondary-foreground var(--duration-slow) var(--ease-out),
    --accent var(--duration-slow) var(--ease-out),
    --accent-foreground var(--duration-slow) var(--ease-out),
    --ring var(--duration-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-platform] {
    transition: none;
  }
}

/* --- Platform themes (inlined from @snapfetcher/tokens/themes/) --- */

/* Pinterest - Warm rose palette */
:root[data-platform="pinterest"].platform-theme-loaded {
  --primary: oklch(0.55 0.19 12);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.88 0.1 12);
  --secondary-foreground: oklch(0.28 0.06 12);
  --accent: oklch(0.6 0.2 12);
  --accent-foreground: oklch(0.99 0 0);
  --ring: oklch(0.55 0.19 12);
}

/* Instagram - Gradient warm palette */
:root[data-platform="instagram"].platform-theme-loaded {
  --primary: oklch(0.62 0.2 5);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.75 0.18 45);
  --secondary-foreground: oklch(0.25 0.06 45);
  --accent: oklch(0.82 0.15 75);
  --accent-foreground: oklch(0.2 0.05 75);
  --ring: oklch(0.62 0.2 5);
}

/* Facebook - Blue palette */
:root[data-platform="facebook"].platform-theme-loaded {
  --primary: oklch(0.55 0.2 250);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.5 0.15 250);
  --secondary-foreground: oklch(0.99 0 0);
  --accent: oklch(0.6 0.22 250);
  --accent-foreground: oklch(0.99 0 0);
  --ring: oklch(0.55 0.2 250);
}

/* TikTok - Pink-red + teal */
:root[data-platform="tiktok"].platform-theme-loaded {
  --primary: oklch(0.6 0.24 12);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.72 0.08 10);
  --secondary-foreground: oklch(0.25 0.04 10);
  --accent: oklch(0.5 0.06 200);
  --accent-foreground: oklch(0.99 0 0);
  --ring: oklch(0.6 0.24 12);
}

/* X (Twitter) - Cyan-blue */
:root[data-platform="twitter"].platform-theme-loaded {
  --primary: oklch(0.58 0.16 220);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.85 0.08 220);
  --secondary-foreground: oklch(0.25 0.06 220);
  --accent: oklch(0.65 0.18 220);
  --accent-foreground: oklch(0.99 0 0);
  --ring: oklch(0.58 0.16 220);
}

/* Reddit - Orange-red */
:root[data-platform="reddit"].platform-theme-loaded {
  --primary: oklch(0.6 0.22 35);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.88 0.1 35);
  --secondary-foreground: oklch(0.25 0.06 35);
  --accent: oklch(0.65 0.24 35);
  --accent-foreground: oklch(0.99 0 0);
  --ring: oklch(0.6 0.22 35);
}

/* --- content-visibility for below-fold sections --- */

.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}