/* ─────────────────────────────────────────────
   Be Happy — design tokens
   Handhold-flavored: cream, big light serif headlines,
   one italic word, tiny labels, calm pacing.
   ───────────────────────────────────────────── */

:root {
  /* Surface */
  --white:       #ffffff;
  --cream:       #F7F4ED;     /* warm cream — section backgrounds */
  --cream-soft:  #FAF8F2;     /* lightest cream — page base */
  --paper:       #F2EFE7;     /* deeper cream — for contrast bands */

  /* Ink */
  --ink:         #0E0E0E;
  --ink-soft:    #2A2A2A;
  --body:        #5A6A7A;
  --muted:       #9B9B9B;
  --hairline:    #E8E4DA;     /* warm border, not gray */
  --hairline-2:  #DCD6C8;

  /* Accents */
  --sky:         #4A90B8;     /* primary accent (kept) */
  --sky-deep:    #2D5A7B;
  --terra:       #C9925F;     /* warm secondary */
  --sage:        #8EA68A;

  /* Banner */
  --banner-bg:   #ECE7D8;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Geist', system-ui, sans-serif;
  background: var(--cream-soft);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* safe — does NOT break position:sticky */
}

/* ─── Typography helpers ─── */
.serif      { font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; font-weight: 400; }
.serif-it   { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }
.font-ui    { font-family: 'Geist', system-ui, sans-serif; }
.font-mono  { font-family: 'Geist Mono', ui-monospace, monospace; }

.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
}

.eyebrow-dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sky);
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ─── Nav link ─── */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: background 200ms ease, color 200ms ease;
}
.nav-link:hover { background: rgba(14,14,14,0.06); }

/* ─── Buttons ─── */
.btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: background 200ms ease, transform 200ms ease;
  text-decoration: none;
  border: none; cursor: pointer;
  white-space: nowrap;
}
.btn-dark:hover { background: var(--ink-soft); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  border: 1px solid var(--hairline-2);
  transition: background 200ms ease, border-color 200ms ease;
  text-decoration: none;
}
.btn-ghost:hover { background: rgba(14,14,14,0.04); border-color: var(--ink); }

/* ─── Logo Ticker ─── */
@keyframes logoSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logoSlide 38s linear infinite;
  will-change: transform;
}
.logo-track:hover { animation-play-state: paused; }
.logo-mask {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* ─── Card tilt shine ─── */
.card-3d {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
  position: relative;
}
.card-3d::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,0.22) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 4;
}
.card-3d:hover::after { opacity: 1; }

/* ─── Announcement slide-in ─── */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-down { animation: slideDown 0.5s ease forwards; }

/* ─── Hero image slots inside cards ─── */
.dest-card image-slot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  overflow: hidden;
  display: block;
}
.dest-card image-slot::part(empty-state) { display: none; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream-soft); }
::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── Marquee text divider ─── */
@keyframes textSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.text-marquee {
  display: flex;
  width: max-content;
  animation: textSlide 60s linear infinite;
}

/* Hero scroll container — shorter scroll distance on mobile (smoother scrub) */
.hero-scroll { height: 360vh; }
@media (min-width: 768px) { .hero-scroll { height: 500vh; } }

/* Section base padding */
.section { padding: 120px 32px; }
@media (max-width: 768px) { .section { padding: 80px 24px; } }
.container { max-width: 1240px; margin: 0 auto; }
.container-narrow { max-width: 900px; margin: 0 auto; }