/* ============================================================
   CLAIPOT — LIVING MOTION LAYER
   Award-winning, immersive, breathing. The site is never still.
   Loaded on top of design-system.css on every page.
   ============================================================ */

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0); z-index: 2000;
  background: linear-gradient(90deg, var(--clay-700), var(--spark-light), var(--clay-700));
  background-size: 200% 100%; animation: progress-flow 3s linear infinite;
}
@keyframes progress-flow { to { background-position: 200% 0; } }

/* ---------- AMBIENT BREATHING ORBS ---------- */
/* glow orbs now slowly drift + pulse — the page "breathes" */
.glow-orb {
  animation: orb-breathe 14s ease-in-out infinite;
  will-change: transform, opacity;
}
.glow-orb:nth-of-type(2) { animation-duration: 18s; animation-delay: -6s; }
@keyframes orb-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(28px, -22px) scale(1.12); }
  66%      { transform: translate(-20px, 18px) scale(0.94); }
}

/* a soft living aurora behind dark sections */
.bg-kiln, .cta-banner {
  position: relative; isolation: isolate;
}
.bg-kiln::before, .cta-banner::before {
  content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(79,70,229,0.35), transparent 70%),
    radial-gradient(35% 35% at 80% 70%, rgba(129,140,248,0.28), transparent 70%);
  animation: aurora-drift 22s ease-in-out infinite;
  will-change: transform;
}
@keyframes aurora-drift {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50%      { transform: translate(6%, -5%) rotate(8deg); }
}

/* ---------- BREATHING ACCENTS ---------- */
/* live status dots, badges and the brand mark gently pulse */
.h-badge .dot, .pill.live::before {
  animation: soft-pulse 2.6s ease-in-out infinite;
}
@keyframes soft-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(14,159,110,0.4); }
  50%      { transform: scale(1.18); opacity: 0.85; box-shadow: 0 0 0 6px rgba(14,159,110,0); }
}
.brand-mark { transition: transform 0.5s var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.08); }

/* ---------- SCROLL-VELOCITY SKEW ---------- */
/* sections subtly skew with scroll speed, then settle — momentum/flow */
[data-flow] { will-change: transform; transition: transform 0.4s var(--ease-clay); }

/* ---------- WORD-BY-WORD HERO REVEAL ---------- */
.reveal-words .word {
  display: inline-block; opacity: 0;
  transform: translateY(0.5em) rotateX(-40deg);
  transform-origin: 0 100%;
  transition: opacity 0.7s var(--ease-clay), transform 0.7s var(--ease-clay);
}
.reveal-words.lit .word { opacity: 1; transform: translateY(0) rotateX(0); }

/* ---------- ENHANCED SCROLL REVEAL ---------- */
/* blur-in for a softer, more cinematic entrance */
[data-reveal] { filter: blur(6px); transition-property: opacity, transform, filter; }
[data-reveal].revealed { filter: blur(0); }

/* a continuous float on featured visuals */
[data-float] { animation: gentle-float 6s ease-in-out infinite; will-change: transform; }
[data-float="slow"] { animation-duration: 9s; }
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------- LIVING CARDS ---------- */
/* product/bento cards lift, tilt toward cursor, and catch light */
.h-prod, .bento-cell, .card, .quote-card, .price-card, .article-card,
.market-card, .course-card, .h-aud-card, .h-step, .h-define-row {
  will-change: transform;
}
.h-prod::after, .card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%),
    rgba(79,70,229,0.10), transparent 65%);
  opacity: 0; transition: opacity 0.4s var(--ease-clay);
}
.h-prod:hover::after, .card:hover::after { opacity: 1; }
.h-prod { position: relative; overflow: hidden; }

/* ---------- MAGNETIC + SHIMMER CTA ---------- */
.btn-primary, .btn-dark, .btn-light {
  position: relative; overflow: hidden; will-change: transform;
}

/* ---------- ANIMATED GRADIENT TEXT ON ACCENTS ---------- */
.h-hero h1 .accent, .ink-accent {
  background-image: linear-gradient(100deg, var(--clay-700), var(--spark-light), var(--clay-700));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-flow 6s ease-in-out infinite;
}
@keyframes text-flow { 0%,100%{ background-position: 0% 0; } 50%{ background-position: 100% 0; } }
/* keep the underline accent visible (it sat under transparent text) */
.ink-accent::after { -webkit-text-fill-color: initial; }

/* ---------- MARQUEE — depth + speed-on-scroll ---------- */
.marquee-track { will-change: transform; }
.logo-item { transition: color 0.3s var(--ease-clay), transform 0.3s var(--ease-clay); }
.logo-item:hover { color: var(--clay-700); transform: scale(1.06); }

/* ---------- COUNT-UP GLOW ---------- */
.stat-num, .h-metric .v, .a-stat .val {
  transition: text-shadow 0.6s var(--ease-clay);
}
[data-count].counting { text-shadow: 0 0 24px rgba(79,70,229,0.35); }

/* ---------- LIVE LINK UNDERLINES ---------- */
.nav-link::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px;
  background: var(--clay-700); border-radius: 2px;
  transition: left 0.3s var(--ease-clay), right 0.3s var(--ease-clay);
}
.nav-link:hover::after { left: 14px; right: 14px; }

/* ---------- SECTION ENTRANCE GLOW ---------- */
.section { position: relative; }

/* ---------- CURSOR-FOLLOW SPOTLIGHT (hero only) ---------- */
.h-hero { --spot-x: 50%; --spot-y: 30%; }
.h-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px circle at var(--spot-x) var(--spot-y),
    rgba(79,70,229,0.07), transparent 70%);
  transition: background 0.2s linear;
}
.h-hero > .container { position: relative; z-index: 2; }

/* ---------- PAGE-LOAD WASH ---------- */
.page-wash {
  position: fixed; inset: 0; z-index: 3000; pointer-events: none;
  background: var(--cream); transform-origin: top;
  animation: wash-out 0.7s var(--ease-clay) forwards;
}
@keyframes wash-out {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* ---------- SCROLL-DOWN HINT ---------- */
.scroll-hint {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  width: 24px; height: 38px; border: 2px solid var(--clay-300); border-radius: 14px;
  display: grid; place-items: start center; padding-top: 6px; z-index: 3;
}
.scroll-hint span {
  width: 4px; height: 8px; border-radius: 4px; background: var(--clay-700);
  animation: scroll-bob 1.8s ease-in-out infinite;
}
@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(9px); opacity: 0.3; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .glow-orb, .bg-kiln::before, .cta-banner::before, .h-badge .dot,
  .pill.live::before, [data-float], .scroll-progress, .h-hero h1 .accent,
  .ink-accent, .scroll-hint span {
    animation: none !important;
  }
  [data-reveal] { filter: none !important; }
  .h-hero::after { display: none; }
  .h-hero h1 .accent, .ink-accent { -webkit-text-fill-color: initial; background: none; color: var(--clay-700); }
}