/* Home hero copy — hover play (owner 2026-10-06: "อยากให้ textข้อความ hover แล้วมีลูกเล่นหรือ
   อนิเมชั่นหน่อย"). Markup: storefront/home.blade (.sf-ht*), driver: pkg-hero-copy.js.
   One-shot plays — the CHASE letter wave and the RARE flash + sparks — are an `.is-fx` class
   the script adds on pointerenter and takes off when the play is over, so leaving half-way
   never snaps a letter back. Looks that last while hovered (THE filling up, the h2 mark,
   a fact's bar) are plain :hover transitions, mouse only. A fact's number re-rolls (script).
   Reduced motion / .effects-off: the script plays nothing, the CSS keeps colour changes only.
   This file sorts BEFORE pkg-hero.css, so .rare-type rules here are one class stronger. */

[data-hero-showcase] .sf-ht .sf-ht-ch { display: inline-block; }
/* Thai headline: Orbitron has no Thai, so Noto Sans Thai ExtraBold, at .76 of the Latin size
   (home.blade --ht-fit), no negative tracking (it crushes the marks) and air between the lines
   for ซื้ / เช็ (owner: "ดูแน่นและดูสูงไป"). */
[data-hero-showcase] .sf-ht:lang(th) { font-family: 'Noto Sans Thai', sans-serif; font-weight: 800; letter-spacing: .01em; --ht-lh: 1.18; }
/* --ht-fit (home.blade, from the longest line) scales the WORDS, not the h1 — the theme sets the
   h1's size per breakpoint. The h1's own line box (its strut) is scaled with them, or a shrunk
   headline would keep full-size gaps between its lines. */
[data-hero-showcase] .sf-ht { --ht-lh: 1.02; line-height: calc(var(--ht-lh) * var(--ht-fit, 1)); }
[data-hero-showcase] .sf-ht > .word-pop { font-size: calc(var(--ht-fit, 1) * 1em); line-height: var(--ht-lh); }
@media (max-width: 680px) {
  [data-hero-showcase] .sf-ht:not(:lang(th)) { --ht-lh: 1.08; }
}
[data-hero-showcase] .sf-ht-rare { position: relative; }

/* CHASE — a wave through the letters, each one split cyan / magenta at its peak */
[data-hero-showcase] .sf-ht-chase.is-fx .sf-ht-ch {
  animation: sf-ht-wave .62s cubic-bezier(.3, .7, .3, 1) calc(var(--k) * 55ms) both;
}
@keyframes sf-ht-wave {
  0%, 100% { transform: none; }
  30% { transform: translateY(-.16em) rotate(-5deg) scale(1.06); color: var(--v2-accent); text-shadow: -.05em 0 #ff2e88, .05em 0 #00f0ff; }
  55% { transform: translateY(.04em) rotate(2deg); color: #ff6fb8; text-shadow: .03em 0 #ff2e88, -.03em 0 #00f0ff; }
  80% { transform: translateY(-.02em); }
}

/* THE — the outline fills with the pink → cyan gradient, left to right */
[data-hero-showcase] .sf-ht-the {
  background: linear-gradient(100deg, #ff2e88, #b56bff 52%, var(--v2-accent)) no-repeat 0 0 / 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size .45s cubic-bezier(.3, .7, .3, 1), -webkit-text-stroke-color .3s;
}

/* RARE — a fast sheen, a two-frame glitch, four sparks */
[data-hero-showcase] .sf-ht-rare.is-fx .rare-type {
  animation: sf-ht-sheen .9s ease-out both, sf-ht-jolt .5s steps(1, end) both;
}
@keyframes sf-ht-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes sf-ht-jolt {
  0% { transform: translateX(.04em) skewX(-9deg); filter: drop-shadow(-.05em 0 #ff2e88) drop-shadow(.05em 0 #00f0ff); }
  18% { transform: translateX(-.03em) skewX(7deg); filter: drop-shadow(.04em 0 #ff2e88) drop-shadow(-.04em 0 #00f0ff); }
  36% { transform: none; filter: drop-shadow(0 0 .28em #00f0ffaa); }
  70%, 100% { transform: none; filter: none; }
}
[data-hero-showcase] .sf-ht-spark {
  position: absolute;
  width: .24em;
  height: .24em;
  color: #fff;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
[data-hero-showcase] .sf-ht-spark:nth-of-type(1) { top: -.06em; left: -.14em; }
[data-hero-showcase] .sf-ht-spark:nth-of-type(2) { top: .02em; right: -.2em; color: var(--v2-accent); width: .18em; height: .18em; }
[data-hero-showcase] .sf-ht-spark:nth-of-type(3) { bottom: .04em; right: 18%; color: #ff6fb8; width: .16em; height: .16em; }
[data-hero-showcase] .sf-ht-spark:nth-of-type(4) { top: -.16em; left: 46%; width: .14em; height: .14em; }
[data-hero-showcase] .sf-ht-rare.is-fx .sf-ht-spark {
  animation: sf-ht-spark .8s ease-out calc(var(--s) * 90ms + 80ms) both;
}
@keyframes sf-ht-spark {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  35% { opacity: 1; transform: scale(1.25) rotate(45deg); }
  100% { opacity: 0; transform: scale(.2) rotate(130deg); }
}

/* h2 — the key words sit on a thin cyan → pink line; hovered, a pink marker wipes in
   behind them, leaning "\" like the buttons' wipe */
[data-hero-showcase] .sf-ht-sub { width: fit-content; max-width: 100%; }
[data-hero-showcase] .sf-ht-mark { position: relative; isolation: isolate; white-space: nowrap; }
[data-hero-showcase] .sf-ht-mark::before,
[data-hero-showcase] .sf-ht-mark::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.06em;
  right: -.1em;
  pointer-events: none;
}
[data-hero-showcase] .sf-ht-mark::before {
  bottom: .06em;
  height: .12em;
  background: linear-gradient(90deg, var(--v2-accent), #ff2e88);
}
[data-hero-showcase] .sf-ht-mark::after {
  bottom: .1em;
  height: .88em;
  background: linear-gradient(90deg, #ff2e88a6, #b56bff80);
  transform: skewX(16deg) scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.3, .7, .3, 1);
}

/* Lead — the site count stands out, the bell is the card page's "แจ้งเตือนฉัน" */
[data-hero-showcase] .sf-ht-lead b { color: #fff; font-weight: 700; }
[data-hero-showcase] .sf-ht-bell { color: #fff; font-weight: 600; white-space: nowrap; }
[data-hero-showcase] .sf-ht-bell .icon { width: 1.05em; height: 1.05em; margin-right: .3em; vertical-align: -.16em; color: #ffd48e; transform-origin: 50% 8%; }

/* Facts — the row may wrap on a narrow phone; a hovered fact lights up and gets a bar */
[data-hero-showcase] .sf-ht-facts { flex-wrap: wrap; row-gap: 14px; }
[data-hero-showcase] .sf-ht-facts > div { position: relative; padding-bottom: 6px; }
[data-hero-showcase] .sf-ht-facts > div::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--v2-accent), #ff2e88);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.3, .7, .3, 1);
}
[data-hero-showcase] .sf-ht-facts dt { font-variant-numeric: tabular-nums; transition: color .2s, text-shadow .2s; }

@media (hover: hover) and (pointer: fine) {
  [data-hero-showcase] .sf-ht-the:hover { background-size: 100% 100%; -webkit-text-stroke-color: #fff; }
  [data-hero-showcase] .sf-ht-rare:hover .rare-type { filter: drop-shadow(0 0 .22em #00f0ff77); }
  [data-hero-showcase] .sf-ht-sub:hover .sf-ht-mark::after { transform: skewX(16deg) scaleX(1); }
  [data-hero-showcase] .sf-ht-lead:hover .sf-ht-bell .icon { animation: sf-ht-ring .9s ease-in-out; }
  [data-hero-showcase] .sf-ht-facts > div:hover::after { transform: scaleX(1); }
  [data-hero-showcase] .sf-ht-facts > div:hover dt { color: var(--v2-accent); text-shadow: 0 0 18px #00f0ff66; }
}
@keyframes sf-ht-ring {
  0%, 100% { transform: none; }
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-15deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}

/* No motion: colours only, no wipes */
.effects-off [data-hero-showcase] .sf-ht-the,
.effects-off [data-hero-showcase] .sf-ht-mark::after,
.effects-off [data-hero-showcase] .sf-ht-facts > div::after { transition: none; }
.effects-off [data-hero-showcase] .sf-ht-bell .icon { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-hero-showcase] .sf-ht-the,
  [data-hero-showcase] .sf-ht-mark::after,
  [data-hero-showcase] .sf-ht-facts > div::after { transition: none; }
  [data-hero-showcase] .sf-ht-bell .icon { animation: none !important; }
}