/* =================================================================
   Hero — "ออมสิน AI" (Figma "Highlight", 1440×550).
   Background: city photo (fill 0) + HQ tower cut-out (fill 1), box
   1440×962 at y=-170. Glass search card 1140×194 @150,307.
   ================================================================= */
.s-hero {
  --hero-shift: 0px;
  --hero-scale: 1;
  --hero-hover-t: 480ms;              /* hover-in and hover-out, one curve (--ease-out) */
  position: relative;
  height: 550px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #E9859F;             /* photo fallback while loading */
}

/* ---------- background ---------- */
.s-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.s-hero__media {
  position: absolute;
  left: 50%;
  top: -170px;
  width: 1440px;
  height: 962px;
  margin-left: -720px;
  transform: translate3d(0, var(--hero-shift), 0) scale(var(--hero-scale));
  transform-origin: 50% 40%;
  will-change: transform;
}
.s-hero__media > picture { display: contents; }
.s-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* tower cut-out is cropped to its opaque band: rows 650–1924 of the 1924-row frame */
.s-hero__img--hq { top: 33.784%; height: 66.216%; transform-origin: 50% 24.49%; }
html:not(.static) .s-hero__img { animation: s-hero-zoom 2200ms var(--ease-out) both; }
html:not(.static) .s-hero__img--hq { animation-duration: 2600ms; }
@keyframes s-hero-zoom { from { transform: scale(1.06); } to { transform: none; } }
@media (min-width: 1441px) {
  .s-hero__media {
    width: 100vw; height: calc(100vw * 962 / 1440);
    margin-left: -50vw;
    top: calc(100vw * -170 / 1440);
  }
}

/* ---------- headline ---------- */
.s-hero__inner { position: relative; padding-top: 156px; }
.s-hero__head { text-align: center; }
.s-hero__title {
  position: relative;
  display: inline-block;
  font-size: 64px;
  line-height: 1.2;
  font-weight: var(--fw-bold);
  color: #fff;
  white-space: nowrap;
}
.s-hero__title-text { display: block; }
.s-hero__spark {
  position: absolute;
  color: #fff;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.s-hero__spark--lg { right: -11px; top: -16px; width: 28px; height: 28px; }
.s-hero__spark--sm { right: -26px; top: 9px; width: 21px; height: 21px; }
html:not(.static) .s-hero__spark--lg { animation: s-hero-twinkle 3.6s var(--ease-in-out) 1.2s infinite; }
html:not(.static) .s-hero__spark--sm { animation: s-hero-twinkle 3.6s var(--ease-in-out) 2.4s infinite; }
@keyframes s-hero-twinkle {
  0%, 62%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  70% { transform: scale(0.72) rotate(-18deg); opacity: 0.75; }
  82% { transform: scale(1.14) rotate(12deg); opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); }
}
.s-hero__sub {
  margin-top: 4px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  color: #fff;
}

/* entrance (live only) */
html:not(.static) .s-hero__title,
html:not(.static) .s-hero__sub,
html:not(.static) .s-hero__glass { animation: s-hero-rise 760ms var(--ease-out) backwards; }
html:not(.static) .s-hero__sub { animation-delay: 90ms; }
html:not(.static) .s-hero__glass { animation-delay: 180ms; }
@keyframes s-hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- glass search card ---------- */
.s-hero__glass {
  position: relative;
  margin-top: 32px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(5px) saturate(1.15);
  backdrop-filter: blur(5px) saturate(1.15);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.55),
    0 5px 10px -6px rgba(0, 0, 0, 0.12);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.s-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #EBF2F1;
  border-radius: 12px;
  background: #FDFDFD;
  color: var(--ink);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.s-hero__glass:focus-within { transform: translateY(-2px); }
.s-hero__glass:focus-within .s-hero__card {
  box-shadow: 0 0 0 3px rgba(237, 0, 140, 0.22), 0 22px 44px -22px rgba(237, 0, 140, 0.55);
}
/* keyboard focus (hero.js sets .is-kbd-focus when the input was reached with Tab):
   same language as the global ring — 3px gap + 2px solid brand pink */
.s-hero__glass.is-kbd-focus .s-hero__card,
.s-hero__glass.is-kbd-focus.is-summoned .s-hero__card {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gsb-pink), 0 22px 44px -22px rgba(237, 0, 140, 0.55);
  animation: none;
}
.s-hero__glass.is-summoned .s-hero__card { animation: s-hero-summon 900ms var(--ease-out); }
@keyframes s-hero-summon {
  0% { box-shadow: 0 0 0 0 rgba(237, 0, 140, 0.5); }
  45% { box-shadow: 0 0 0 8px rgba(237, 0, 140, 0.18); }
  100% { box-shadow: 0 0 0 3px rgba(237, 0, 140, 0.22), 0 22px 44px -22px rgba(237, 0, 140, 0.55); }
}

/* form row */
.s-hero__form {
  display: flex;
  align-items: center;
  height: 56px;
  margin-top: 7px;
  padding: 0 7px 0 19px;
}
.s-hero__g { flex: none; width: 27px; height: 32px; transition: transform var(--t-slow) var(--ease-spring); }
.s-hero__glass:focus-within .s-hero__g { transform: rotate(-12deg) scale(1.06); }
.s-hero__input {
  flex: 1;
  min-width: 0;
  height: 56px;
  margin-left: 12px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  font-weight: var(--fw-regular);
  color: var(--ink);
  caret-color: var(--gsb-pink);
  text-overflow: ellipsis;
}
.s-hero__input::placeholder { color: var(--ink-5); opacity: 1; }
.s-hero__input:focus-visible { outline: none; }
.s-hero__input::-webkit-search-cancel-button { display: none; }

.s-hero__mic {
  flex: none;
  position: relative;
  width: 40px; height: 40px;
  margin: 0 10px 0 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #8E8E93;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.s-hero__mic svg { width: 22px; height: 22px; }
@media (hover: hover) { .s-hero__mic:hover { background: var(--gsb-pink-tint); color: var(--gsb-pink); } }
.s-hero__mic:active { transform: scale(0.92); }
.s-hero__mic::before {             /* listening ring (ai-ui toggles aria-pressed / .is-listening) */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(237, 0, 140, 0.45);
  opacity: 0;
}
.s-hero__mic[aria-pressed="true"], .s-hero__mic.is-listening { background: var(--gsb-pink); color: #fff; }
.s-hero__mic[aria-pressed="true"]::before, .s-hero__mic.is-listening::before { opacity: 1; animation: s-hero-listen 1.4s var(--ease-out) infinite; }
@keyframes s-hero-listen { from { box-shadow: 0 0 0 0 rgba(237, 0, 140, 0.45); } to { box-shadow: 0 0 0 14px rgba(237, 0, 140, 0); } }

.s-hero__send {
  flex: none;
  position: relative;
  width: 56px; height: 56px;
  border-radius: 15.15px;
  display: grid; place-items: center;
  background: var(--gsb-pink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out);
}
.s-hero__send::before {            /* brand gradient that fades in on hover / when armed */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, #ED008C 0%, #FD266E 60%, #FC8555 100%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}
.s-hero__send svg { width: 22px; height: 22px; transition: transform var(--t-med) var(--ease-spring); }
@media (hover: hover) {
  .s-hero__send:hover { box-shadow: var(--shadow-pink); }
  .s-hero__send:hover::before { opacity: 1; }
  .s-hero__send:hover svg { transform: translateX(2px); }
}
.s-hero__send:active { transform: scale(0.95); }
/* live mode: always the design's solid brand pink; "armed" (has text) adds the
   gradient sheen + glow below rather than dimming the empty state */
html:not(.static) .s-hero__form.has-value .s-hero__send { box-shadow: 0 10px 22px -10px rgba(237, 0, 140, 0.6); }
html:not(.static) .s-hero__form.has-value .s-hero__send::before { opacity: 1; }
html:not(.static) .s-hero__form.has-value .s-hero__send svg { animation: s-hero-nudge 420ms var(--ease-spring); }
@keyframes s-hero-nudge { from { transform: translateX(-4px) scale(0.85); } to { transform: none; } }

/* ---------- pills + chips (horizontal scrollers with edge fades) ---------- */
.s-hero [data-fade-scroller] {
  --fade: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.s-hero [data-fade-scroller]::-webkit-scrollbar { display: none; }
.s-hero [data-fade="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent); }
.s-hero [data-fade="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade)); mask-image: linear-gradient(90deg, transparent, #000 var(--fade)); }
.s-hero [data-fade="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }

.s-hero__pills-wrap { margin-top: 16px; }
.s-hero__pills > li, .s-hero__chips > li { display: flex; }
.s-hero__pills {
  display: flex;
  gap: 6px;
  width: max-content;
  padding: 0 15px;
}
.s-hero__pill {
  display: inline-flex; align-items: center;
  height: 36px;
  padding: 0 16.4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1;
  color: var(--ink-3);
  white-space: nowrap;
  position: relative;
  /* One calm curve for every property, on hover-in AND hover-out (defined on the base state). */
  transition:
    background-color var(--hero-hover-t) var(--ease-out),
    color var(--hero-hover-t) var(--ease-out),
    transform var(--hero-hover-t) var(--ease-out);
}
/* hover shadow lives on a pseudo-element and fades in (opacity only — no box-shadow animation) */
.s-hero__pill::after,
.s-hero__chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hero-hover-t) var(--ease-out);
}
.s-hero__pill::after { box-shadow: 0 6px 14px -10px rgba(237, 0, 140, 0.6); }
@media (hover: hover) and (pointer: fine) {
  .s-hero__pill:hover { background: var(--gsb-pink-tint); color: var(--gsb-pink); transform: translateY(-1px); will-change: transform; }
  .s-hero__pill:hover::after { opacity: 1; }
}
.s-hero__pill:active { transform: scale(0.975); transition-duration: 160ms; }

.s-hero__strip {
  margin: 10px -1px -1px 0;
  height: 52px;
  display: flex;
  align-items: center;
  border-radius: 0 0 12px 12px;
  background: var(--surface-3);
  overflow: hidden;
}
.s-hero__chips-wrap { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }
.s-hero__chips {
  display: flex;
  gap: 6px;
  width: max-content;
  padding: 0 19px;
}
.s-hero__chip {
  display: inline-flex; align-items: center;
  height: 32px;
  padding: 0 12.5px 0 0;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-3);
  white-space: nowrap;
  position: relative;
  transition:
    transform var(--hero-hover-t) var(--ease-out),
    color var(--hero-hover-t) var(--ease-out),
    background-color var(--hero-hover-t) var(--ease-out);
}
.s-hero__chip-thumb {
  flex: none;
  width: 32px; height: 32px;
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  background: #D9D9D9;
}
.s-hero__chip-thumb img { width: 32px; height: 32px; object-fit: cover; transition: transform 700ms var(--ease-out); }
.s-hero__chip-label { margin-left: 10px; }
.s-hero__chip--foryou { padding: 0 12.5px; }
.s-hero__chip-grad {
  font-size: 14px;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  background: var(--gsb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s-hero__chip-spark { flex: none; width: 9px; height: 10px; margin: -1px 0 0 1px; transition: transform var(--t-slow) var(--ease-spring); }
html:not(.static) .s-hero__chip-spark { animation: s-hero-twinkle 3.6s var(--ease-in-out) 3s infinite; }
.s-hero__chip::after { box-shadow: 0 8px 16px -10px rgba(42, 42, 42, 0.35), 0 0 0 1px rgba(237, 0, 140, 0.14); }
@media (hover: hover) and (pointer: fine) {
  .s-hero__chip:hover { transform: translateY(-1px); color: var(--gsb-pink); will-change: transform; }
  .s-hero__chip:hover::after { opacity: 1; }
  .s-hero__chip:hover .s-hero__chip-thumb img { transform: scale(1.05); }
  .s-hero__chip--foryou:hover { background: var(--gsb-pink-tint); }
}
.s-hero__chip:active { transform: scale(0.975); transition-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .s-hero__pill, .s-hero__chip, .s-hero__pill::after, .s-hero__chip::after, .s-hero__chip-thumb img { transition-duration: 0.01ms; }
  .s-hero__pill:hover, .s-hero__chip:hover, .s-hero__chip:hover .s-hero__chip-thumb img { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .s-hero__inner { padding-top: 150px; }
}
@media (max-width: 1023px) {
  .s-hero { height: auto; }
  .s-hero__media { top: -110px; left: -150px; margin-left: 0; }
  .s-hero__inner { padding-top: 124px; padding-bottom: 48px; }
  .s-hero__title { font-size: 56px; }
  .s-hero__sub { font-size: 26px; }
  .s-hero__glass { margin-top: 28px; }
}
@media (max-width: 767px) {
  .s-hero__media {
    top: -60px;
    width: auto;
    height: calc(100% + 120px);
    aspect-ratio: 1440 / 962;
    left: -34%;
    margin-left: 0;
  }
  .s-hero__inner { padding-top: 112px; padding-bottom: 32px; }
  .s-hero__title { font-size: 40px; }
  .s-hero__spark--lg { right: -14px; top: -12px; width: 20px; height: 20px; }
  .s-hero__spark--sm { right: -24px; top: 6px; width: 15px; height: 15px; }
  .s-hero__sub { margin-top: 6px; font-size: 20px; }
  .s-hero__glass { margin-top: 24px; padding: 6px; border-radius: 18px; }
  .s-hero__form { height: 52px; margin-top: 6px; padding: 0 6px 0 14px; }
  .s-hero__g { width: 22px; height: 26px; }
  .s-hero__input { height: 52px; margin-left: 10px; font-size: 16px; }
  .s-hero__mic { width: 44px; height: 44px; margin: 0 4px 0 6px; }
  .s-hero__send { width: 48px; height: 48px; border-radius: 13px; }
  .s-hero__pills-wrap { margin-top: 12px; --fade: 20px; }
  .s-hero__pills { padding: 0 12px; }
  .s-hero__pill { height: 38px; padding: 0 14px; }
  .s-hero__strip { margin-top: 12px; height: 56px; }
  .s-hero__chips-wrap { --fade: 20px; }
  .s-hero__chips { padding: 0 12px; }
  .s-hero__chip { height: 36px; }
  .s-hero__chip-thumb, .s-hero__chip-thumb img { width: 36px; height: 36px; }
  .s-hero__chip--foryou { height: 36px; }
}
@media (max-width: 479px) {
  .s-hero__inner { padding-top: 104px; }
  .s-hero__title { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-hero__media { transform: none !important; }
}