/* Shared site styles (all pages). Tokens come from files/tokens.css. */
html { scroll-padding-top: 71px; }
@media (min-width: 768px) { html { scroll-padding-top: 81px; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Icons: Figma exports each icon per theme (assets/*.svg and assets/*-dark.svg);
   the pair is swapped with dark:hidden / hidden dark:block. */

/* Colour cross-fade while switching theme only (not on every hover). */
.theme-switching, .theme-switching * {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease !important;
}

/* Scroll reveal. Content stays visible without JS or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal="fade"] { transform: none; }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  .hero-bg { animation: hero-bg-in 1.6s ease-out both; }

  @keyframes hero-bg-in {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: none; }
  }
}

/* Material Symbols Outlined, weight 300 (design-system icon set). Size with font-size; colour with a text-* token.
   Add .ms-fill for the filled variant. */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  display: inline-block;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* Ticker tape under the hero: js/market-live.js clones the list twice and adds .ticker-animate;
   the track slides one copy's width per loop. Without JS or with reduced motion it stays a scrollable row. */
.ticker-animate.ticker-animate { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ticker-animate .ticker-track { animation: ticker 45s linear infinite; }
  .ticker-animate:hover .ticker-track { animation-play-state: paused; }
  @keyframes ticker {
    to { transform: translateX(calc(-100% / 3)); }
  }
}

/* Menu drawer scrim — Figma overlay/scrim (#000 at 20%) has no token in files/ yet */
.scrim { background-color: rgb(0 0 0 / 0.2); }

/* ---------- Mobile hero (below 768px) — Figma 294:1993 ----------
   Kept apart from the tablet/desktop classes in index.html. Selectors are scoped with .hero so they outrank the
   single-class Tailwind utilities in the markup. The hero is 382px tall with centred copy; the whole 8:3 art sits along
   its bottom edge at full width (402×151 in Figma) and fades in from the canvas colour at its top. Figma draws that fade
   as a rotated image; here it is a gradient on the background-canvas token, so dark mode needs no extra artwork. */
@media (max-width: 767.98px) {
  .hero .hero-art {
    display: block;
    min-height: 382px;
    padding: 49px 20px 0;
  }
  .hero .hero-media { top: auto; height: 37.5vw; }
  .hero .hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--background-canvas), transparent);
  }
  .hero .hero-overlay,
  .hero .hero-fade { display: none; }

  .hero .hero-copy { gap: 50px; max-width: none; }
  .hero .hero-title {
    font-size: var(--text-mobile-display-d2-size);
    line-height: var(--text-mobile-display-d2-line);
    font-weight: var(--text-mobile-display-d2-weight);
  }
  .hero .hero-desc {
    font-size: var(--text-body-l-regular-size);
    line-height: var(--text-body-l-regular-line);
    font-weight: var(--text-body-l-regular-weight);
  }

  /* Mobile uses Button / White for "สำรวจตลาด" (desktop: Ghost) */
  .hero .hero-cta-secondary {
    border-color: var(--button-white-border);
    background-color: var(--button-white-bg);
    color: var(--button-white-text);
  }
  .hero .hero-cta-secondary:hover { background-color: var(--button-white-bg-hover); }
  .hero .hero-cta-secondary:active { background-color: var(--button-white-bg-pressed); }
}