/* /css/base.css — biến màu, font, reset, grain và kiểu chữ dùng chung */

/*
  Font chọn theo 2 ảnh tham chiếu (tất cả đều có bộ chữ tiếng Việt trên Google Fonts):
  - Grandstander 900  ← chữ "Freshmen orientation" (a2): mập, tròn, uốn lượn, gradient xanh dương → xanh lá
  - Baloo 2 800       ← chữ "SENIOR PICNIC", "TICKETS STILL FOR SALE" (a1): khối tròn, đậm
  - Mali 600/700      ← chữ viết tay "lu'au theme", "until 4/30" (a1): màu vàng viền đậm
  - Quicksand 700     ← dòng "JULY 23-24, 2026 | 8:00 AM" (a2), "APRIL 30TH" (a1): viết hoa, giãn chữ, màu kem đổ bóng
  - Nunito            ← chữ thường "buy during all lunches…" (a1): tròn, dễ đọc cho body
*/

:root {
  /* Bảng màu */
  --sky: #8ED6EA;
  --sun: #FFE27A;
  --pink: #FF8DB5;
  --blush: #F9CAD7;
  --leaf: #A5D85F;
  --violet: #B13FD1;
  --cream: #FFF6DA;

  /* Màu phụ để đủ tương phản khi đặt chữ */
  --ink: #3A2F55;
  --ink-soft: #64587E;
  --blue-deep: #3561CC;
  --leaf-deep: #3F9F5A;
  --pink-deep: #E24F8A;
  --gold-deep: #C9861A;
  --lilac: #9A68C9;
  --violet-soft: #8E4FC0;

  --title-grad: linear-gradient(180deg, #FFA6CB 14%, #FF6FA8 46%, #E23F82 86%);
  --btn-grad: linear-gradient(180deg, #F873A6 0%, #E24F8A 100%);

  --font-display: 'Grandstander', 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-heading: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-script: 'Mali', 'Nunito', cursive;
  --font-info: 'Quicksand', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-pill: 999px;
  --radius-card: 28px;
  --shadow-soft: 0 22px 44px -22px rgba(84, 52, 120, .38);
  --shadow-text: 0 2px 0 rgba(96, 66, 128, .45), 0 5px 14px rgba(58, 40, 88, .38);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.22, .8, .24, 1);

  --gutter: 16px;
  --maxw: 1120px;
  --header-h: 72px;

  /* ui.js gán ảnh grain (SVG feTurbulence) vào biến này */
  --grain: none;
}

@media (min-width: 720px) {
  :root { --gutter: clamp(24px, 4vw, 48px); }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 12px;
}

::selection { background: var(--blush); color: var(--ink); }

/* ---------- Kiểu chữ ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.005em;
}

h2 { font-size: clamp(1.9rem, 5.2vw, 3rem); }
h3 { font-size: clamp(1.35rem, 3vw, 1.7rem); }

/* Tiêu đề chính: chữ mập uốn lượn, hồng kẹo viền trắng dày + bóng hồng đậm cho nổi trên mọi nền */
.title-wave {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.7rem, 11vw, 6.6rem);
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--pink-deep);
  filter:
    drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff)
    drop-shadow(-2px 0 0 #fff) drop-shadow(2px 0 0 #fff)
    drop-shadow(0 5px 0 #B8326C)
    drop-shadow(0 12px 16px rgba(120, 30, 70, .28));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .title-wave,
  .wave-char {
    background: var(--title-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* Khi đã tách chữ, mỗi chữ tự mang gradient riêng */
  .title-wave.is-waved { background: none; }
}

.wave-word { display: inline-block; white-space: nowrap; }

/* Padding dọc rộng để dấu tiếng Việt (Ê, Á, ở, ỏ…) không bị cắt bởi background-clip */
.wave-char {
  display: inline-block;
  padding: .3em .02em .14em;
  margin: -.3em -.02em -.14em;
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg));
  animation: wave-bob 3.4s ease-in-out calc(var(--i, 0) * -.2s) infinite;
}

@keyframes wave-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -.045em; }
}

/* Câu phụ viết tay màu vàng, viền vàng đậm (theo "lu'au theme" của a1) */
.script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.6vw, 1.85rem);
  line-height: 1.35;
  color: var(--sun);
  text-shadow:
    0 1.5px 0 var(--gold-deep), 1.5px 0 0 var(--gold-deep),
    0 -1px 0 var(--gold-deep), -1.5px 0 0 var(--gold-deep),
    1px 1px 0 var(--gold-deep), -1px 1px 0 var(--gold-deep),
    0 5px 0 rgba(201, 134, 26, .3);
}

/* Thông tin nhỏ: viết hoa, giãn chữ, màu kem có đổ bóng (theo a2) */
.info-caps {
  font-family: var(--font-info);
  font-weight: 700;
  font-size: clamp(.78rem, 1.9vw, .95rem);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--cream);
  text-shadow: var(--shadow-text);
}

.info-caps--ink {
  color: var(--violet-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* Dòng nhãn nhỏ phía trên tiêu đề lớn (vd. "Dự án thiện nguyện · Xuân Đinh Mùi 2027"):
   nằm trên nhãn nền kem, chữ tím đậm để đọc rõ trên nền trời, nền núi */
.story-step--final .info-caps,
.page-hero .info-caps--ink {
  display: inline-block;
  padding: .45em 1.1em .4em;
  border-radius: var(--radius-pill);
  color: #6E33A6;
  text-shadow: none;
  background: rgba(255, 246, 218, .9);
  box-shadow: inset 0 0 0 1.5px rgba(142, 79, 192, .35), 0 8px 18px -12px rgba(58, 47, 85, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (max-width: 480px) {
  .story-step--final .info-caps,
  .page-hero .info-caps--ink {
    padding-inline: .9em;
    font-size: .68rem;
    letter-spacing: .1em;
  }
}

.lead {
  font-size: clamp(1.08rem, 2.4vw, 1.25rem);
  color: var(--ink-soft);
}

/* ---------- Grain (ảnh SVG feTurbulence do ui.js tạo) ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: .22;
  mix-blend-mode: multiply;
}

/* ---------- Tiện ích ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px; top: -80px;
  z-index: 120;
  padding: .7em 1.2em;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ---------- Tôn trọng prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}