/* =========================================================
   SP Pool Thailand — base
   Design tokens, reset, typography and shared components
   (buttons, section headings, waves, bubbles, reveal).
   ========================================================= */

:root {
    /* brand (from the original logo: SP blue + POOL yellow) */
    --brand-blue: #2f7fc4;
    --sky: #51a5f2;
    --aqua: #2ec4d6;
    --deep: #0b5d8c;
    --sun: #fae056;
    --sun-dark: #f7c948;
    --sand: #f4da68;
    --sand-soft: #fbf3d2;
    --line-green: #06c755;

    /* text */
    --ink: #0b2a45;
    --muted: #4a6378;

    /* surfaces */
    --bg: #ffffff;
    --bg-water: #eef9fd;

    /* shape */
    --radius: 28px;
    --radius-sm: 18px;
    --shadow: 0 20px 50px rgba(47, 127, 196, .14);
    --shadow-lg: 0 30px 70px rgba(47, 127, 196, .24);
    --ease: cubic-bezier(.2, .8, .2, 1);

    --nav-h: 76px;
    --font: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
svg { fill: currentColor; }
a { color: inherit; }
button { font: inherit; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none; }
.skip-link:focus { top: 16px; }

:focus-visible { outline: 3px solid var(--sun-dark); outline-offset: 3px; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 28px; border: 0; border-radius: 999px; cursor: pointer;
    font: 600 17px var(--font); text-decoration: none; white-space: nowrap;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-3px); }
.btn-sun   { background: var(--sun); color: var(--ink); box-shadow: 0 10px 30px rgba(250, 224, 86, .5); }
.btn-blue  { background: var(--brand-blue); color: #fff; box-shadow: 0 10px 30px rgba(47, 127, 196, .35); }
.btn-line  { background: var(--line-green); color: #fff; box-shadow: 0 10px 30px rgba(6, 199, 85, .35); }
.btn-line svg { width: 22px; height: 22px; }
.btn-ghost { background: #fff; color: var(--brand-blue); border: 2px solid rgba(47, 127, 196, .25); }
.btn-ghost:hover { border-color: var(--brand-blue); }

/* ---------- section heading ---------- */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.tag {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
    color: var(--brand-blue); background: rgba(81, 165, 242, .12);
}
.h2, .section-head h2 { margin-top: 12px; font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; line-height: 1.2; }
.hl-grad {
    background: linear-gradient(90deg, var(--brand-blue), var(--aqua));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- icon tile ---------- */
.ic {
    width: 68px; height: 68px; flex: none; display: grid; place-items: center;
    border-radius: 22px; color: #fff;
    background: linear-gradient(135deg, var(--sky), var(--aqua));
    box-shadow: 0 12px 26px rgba(46, 196, 214, .4);
}
.ic svg { width: 34px; height: 34px; }

/* ---------- wave dividers ---------- */
section, .page-hero, .post-hero { position: relative; }
.wave { position: absolute; left: 0; width: 100%; height: 80px; pointer-events: none; }
.wave-bottom { bottom: -1px; }
.wave-top { top: -1px; transform: rotate(180deg); }

/* ---------- floating bubbles (filled by main.js) ---------- */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bubbles span {
    position: absolute; bottom: -40px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 60%);
    border: 1px solid rgba(255, 255, 255, .5);
    animation: bubble-rise linear infinite;
}
@keyframes bubble-rise { to { transform: translate(30px, -110vh); opacity: 0; } }

/* ---------- reveal on scroll (toggled by main.js) ---------- */
.js .reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--d, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}