/* ============================================================================
   motion-fx.css — SeacareOS additive motion layer (namespace: fx-)
   Loaded AFTER the existing CSS. Adds ONLY motion/interaction.
   Animates ONLY transform / opacity / filter (GPU-composited),
   except the intentional Battle power-bar showcase (transform: scaleX).
   Does NOT touch layout, colors, fonts, spacing, content, or structure.
   ========================================================================= */

:root {
  /* Reuse the existing --ease if present; provide a safe fallback. */
  --fx-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --fx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-dur: 0.72s;
}

/* ---------------------------------------------------------------------------
   1) NEW REVEAL SYSTEM (fx- namespace, own IntersectionObserver in JS).
   Uses only transform + opacity. Gated behind html.fx-ready so that if JS
   never runs (or fails), content is NEVER left hidden.
   ------------------------------------------------------------------------- */
html.fx-ready .fx-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--fx-dur) var(--fx-ease),
    transform var(--fx-dur) var(--fx-ease);
  transition-delay: var(--fx-delay, 0s);
}
html.fx-ready .fx-reveal.fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Card cascade variant — adds a tiny scale for the premium feel. */
html.fx-ready .fx-card {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.985);
  transition:
    opacity 0.6s var(--fx-ease),
    transform 0.6s var(--fx-ease);
  transition-delay: var(--fx-delay, 0s);
}
html.fx-ready .fx-card.fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* ---------------------------------------------------------------------------
   2) HERO ENTRANCE cascade (coin, h1, lead, actions) is driven by JS tagging
   elements with .fx-reveal + an inline --fx-delay; handled by section 1.
   ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   3) SHORTCUT CARD HOVER — premium lift + gloss sweep + tilt vars.
   Card = a.hero-quick-card. Tilt vars default to 0 so non-JS/mobile = flat.
   ------------------------------------------------------------------------- */
html.fx-ready .hero-quick-card {
  position: relative;
  overflow: hidden; /* clip the gloss sweep so it never escapes the card frame */
  transition:
    transform 0.5s var(--fx-ease),
    box-shadow 0.5s var(--fx-ease),
    filter 0.5s var(--fx-ease);
  transform:
    translate3d(0, 0, 0)
    rotateX(var(--fx-rx, 0deg))
    rotateY(var(--fx-ry, 0deg));
  transform-style: preserve-3d;
}
html.fx-ready .hero-quick-card:hover,
html.fx-ready .hero-quick-card:focus-visible {
  transform:
    translate3d(0, -3px, 0)
    rotateX(var(--fx-rx, 0deg))
    rotateY(var(--fx-ry, 0deg));
  box-shadow: 0 14px 34px -12px rgba(16, 32, 51, 0.45);
}

/* Diagonal gloss sweep — JS injects a .fx-sheen span; clipped by card radius. */
html.fx-ready .hero-quick-card .fx-sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%
  );
  opacity: 0;
  transform: translate3d(-160%, 0, 0) skewX(-14deg);
  border-radius: inherit;
}
html.fx-ready .hero-quick-card:hover .fx-sheen,
html.fx-ready .hero-quick-card:focus-visible .fx-sheen {
  opacity: 1;
  transform: translate3d(260%, 0, 0) skewX(-14deg);
  transition:
    transform 0.85s var(--fx-ease-out),
    opacity 0.2s linear;
}

/* Gold golf star card + Namo chip micro-reactions */
html.fx-ready .hero-quick-card.star:hover {
  filter: brightness(1.04) saturate(1.05);
}
html.fx-ready .hero-quick-card .hq-chip {
  transition: transform 0.5s var(--fx-ease);
  transform: translateZ(0);
}
html.fx-ready .hero-quick-card.bot-primary:hover .hq-chip {
  transform: scale(1.08) rotate(-3deg);
}

/* ---------------------------------------------------------------------------
   4) NAV — animated underline (scaleX) + brand-dot glow.
   ------------------------------------------------------------------------- */
html.fx-ready .seacare-nav-link {
  position: relative;
}
html.fx-ready .seacare-nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  width: auto;               /* inset within the link/pill so it can't clip the nav frame */
  height: 1.5px;
  background: currentColor;
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--fx-ease);
  pointer-events: none;
}
html.fx-ready .seacare-nav-link:hover::after,
html.fx-ready .seacare-nav-link:focus-visible::after {
  transform: scaleX(1);
}

html.fx-ready .seacare-brand-dot {
  animation: fx-dot-pulse 2.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes fx-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 0 rgba(43, 111, 159, 0)); }
  50%      { transform: scale(1.18); opacity: 0.92; filter: drop-shadow(0 0 4px rgba(43, 111, 159, 0.55)); }
}

/* ---------------------------------------------------------------------------
   5) BUTTONS — press + arrow nudge.
   ------------------------------------------------------------------------- */
html.fx-ready .btn-primary,
html.fx-ready .btn-ghost {
  transition: transform 0.28s var(--fx-ease), box-shadow 0.28s var(--fx-ease);
  transform: translateZ(0);
}
html.fx-ready .btn-primary:hover,
html.fx-ready .btn-ghost:hover {
  transform: translateY(-1px);
}
html.fx-ready .btn-primary:active,
html.fx-ready .btn-ghost:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 0.08s;
}
/* Arrow nudge — animate the button's OWN existing <svg> arrow. No injected
   glyphs, so buttons without an arrow (e.g. "คลังความรู้") stay clean. */
html.fx-ready .btn-primary svg,
html.fx-ready .btn-ghost svg {
  transition: transform 0.32s var(--fx-ease);
  transform: translateX(0);
}
html.fx-ready .btn-primary:hover svg,
html.fx-ready .btn-ghost:hover svg {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   6) BATTLE SECTION
   ------------------------------------------------------------------------- */

/* Power-bar fill — INTENTIONAL showcase via transform: scaleX (NOT width).
   The original inline width % is left intact; JS reads it, sets scaleX(0),
   then toggles .fx-fill to grow to scaleX(1) inside the pre-sized track. */
html.fx-ready .pb-fill {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s var(--fx-ease);
}
html.fx-ready .pb-fill.fx-side-right {
  transform-origin: right center;
}
html.fx-ready .pb-fill.fx-fill {
  transform: scaleX(1);
}

/* VS badge gentle breathing */
html.fx-ready .vs-badge {
  animation: fx-vs-breathe 3.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes fx-vs-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Crown slow shimmer via filter only */
html.fx-ready .crown {
  animation: fx-crown-shimmer 4.5s ease-in-out infinite;
}
@keyframes fx-crown-shimmer {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(200, 145, 43, 0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(200, 145, 43, 0.6)); }
}

/* Section-title subtle text reveal (only elements WE tag, never existing .reveal) */
html.fx-ready .fx-heading {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.7s var(--fx-ease), transform 0.7s var(--fx-ease);
}
html.fx-ready .fx-heading.fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------------------------
   7) HERO PARALLAX targets (desktop only) — JS drives translate via a var.
   Kept tiny (<=12px).
   ------------------------------------------------------------------------- */
html.fx-ready .fx-parallax {
  transform: translate3d(0, var(--fx-par, 0px), 0);
}

/* ---------------------------------------------------------------------------
   8) MOBILE (<=700px) — lighten motion, no parallax, no 3D tilt.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  html.fx-ready .fx-reveal {
    transform: translate3d(0, 10px, 0);
  }
  html.fx-ready .fx-card {
    transform: translate3d(0, 10px, 0) scale(0.99);
  }
  html.fx-ready .fx-reveal.fx-in,
  html.fx-ready .fx-card.fx-in {
    transform: translate3d(0, 0, 0);
  }
  /* Kill 3D tilt on mobile regardless of any JS-set vars. */
  html.fx-ready .hero-quick-card {
    transform: translate3d(0, 0, 0) !important;
  }
  html.fx-ready .hero-quick-card:hover {
    transform: translate3d(0, -2px, 0) !important;
  }
  /* Parallax off */
  html.fx-ready .fx-parallax {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   9) REDUCED MOTION — disable EVERYTHING, show content instantly.
   Must win over all rules above.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.fx-ready .fx-reveal,
  html.fx-ready .fx-card,
  html.fx-ready .fx-heading {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  html.fx-ready .pb-fill {
    transform: none !important;   /* keep the original inline width visual */
    transition: none !important;
  }
  html.fx-ready .hero-quick-card,
  html.fx-ready .hero-quick-card:hover,
  html.fx-ready .hero-quick-card:focus-visible,
  html.fx-ready .btn-primary,
  html.fx-ready .btn-primary:hover,
  html.fx-ready .btn-ghost,
  html.fx-ready .btn-ghost:hover,
  html.fx-ready .fx-arrow,
  html.fx-ready .hq-chip,
  html.fx-ready .fx-parallax {
    transform: none !important;
    transition: none !important;
  }
  html.fx-ready .hero-quick-card .fx-sheen {
    display: none !important;
  }
  html.fx-ready .seacare-nav-link::after {
    transition: none !important;
  }
  html.fx-ready .seacare-brand-dot,
  html.fx-ready .vs-badge,
  html.fx-ready .crown {
    animation: none !important;
  }
}