/* ============================================================
   AssincTour — custom.css
   Light mode · Instrument Serif (display) + Inter (body)
   Page is now full-flow (multi-section), navbar fixed at top.
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

/* Design tokens */
:root {
  --background: 0 0% 100%;
  --foreground: 210 14% 17%;
  --primary: 210 14% 17%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96%;
  --muted-foreground: 184 5% 55%;
  --accent: 239 84% 67%;
  --accent-foreground: 0 0% 100%;
  --success: 158 64% 42%;
  --warning: 32 95% 49%;
  --danger:  352 84% 58%;
  --border: 0 0% 90%;
  --ring: 239 84% 67%;
  --radius: 0.5rem;
  --font-display: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
  --shadow-dashboard: 0 25px 80px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-card:      0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.06), 0 16px 40px -12px rgba(0,0,0,0.10);
}

html { scroll-behavior: smooth; }

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ----------- DISPLAY TYPOGRAPHY ----------- */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

/* ----------- ANIMATIONS (Framer Motion specs) ----------- */
@keyframes fadeUp10 { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeUp16 { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeUp30 { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }

.anim-badge     { opacity:0; animation: fadeUp10 .5s ease-out 0s     forwards; }
.anim-headline  { opacity:0; animation: fadeUp16 .6s ease-out .1s    forwards; }
.anim-sub       { opacity:0; animation: fadeUp16 .6s ease-out .2s    forwards; }
.anim-cta       { opacity:0; animation: fadeUp16 .6s ease-out .3s    forwards; }
.anim-dashboard { opacity:0; animation: fadeUp30 .8s ease-out .5s    forwards; }

/* Reveal-on-scroll (used by main.js IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal-stagger.is-visible > *      { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .00s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .07s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .14s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .21s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .28s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .35s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: .42s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: .49s; }

/* ----------- HEADER (fixed nav) ----------- */
#site-header {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: hsl(var(--border));
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -16px rgba(0,0,0,0.10);
}

/* ----------- BUTTONS ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 10px 22px;
  font-size: 14px;
}
.btn-primary:hover { background: hsl(var(--primary) / .9); }

.btn-accent {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  padding: 10px 22px;
  font-size: 14px;
}
.btn-accent:hover { background: hsl(var(--accent) / .9); }

.btn-outline {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  padding: 10px 22px;
  font-size: 14px;
}
.btn-outline:hover { background: hsl(var(--secondary)); }

.btn-lg { padding: 14px 26px; font-size: 15px; }

/* ----------- EYEBROW ----------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.01em;
}
.eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--accent));
}

/* ----------- CARD ----------- */
.card-soft {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card-soft:hover {
  border-color: hsl(var(--foreground) / 0.15);
  box-shadow: var(--shadow-card-hover);
}
.card-cream {
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
}

/* ----------- FROSTED GLASS (dashboard) ----------- */
.frosted {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-dashboard);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dashboard-preview {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* ----------- FAQ ACCORDION ----------- */
[data-faq] [data-faq-panel] { overflow: hidden; transition: max-height .3s ease; max-height: 0; }
[data-faq] .faq-icon         { transition: transform .25s ease; }
[data-faq].is-open .faq-icon { transform: rotate(45deg); color: hsl(var(--accent)); }
[data-faq].is-open           { background: hsl(var(--secondary) / 0.6); }

/* ----------- FOCUS VISIBLE ----------- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
  border-radius: 4px;
}

/* ----------- SELECTION ----------- */
::selection { background: hsl(var(--accent) / 0.15); color: hsl(var(--foreground)); }

/* ----------- SCROLL MARGIN ----------- */
@media (max-width: 1023.98px) {
  main section[id] { scroll-margin-top: 76px; }
  body             { padding-bottom: 88px; }
}
@media (min-width: 1024px) {
  main section[id] { scroll-margin-top: 96px; }
}

/* ----------- REDUCED MOTION ----------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .anim-badge, .anim-headline, .anim-sub, .anim-cta, .anim-dashboard,
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----------- UTILS ----------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Soft gradient halo behind feature cards (used in CTA / Nina) */
.halo {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(50% 40% at 30% 30%, hsl(var(--accent) / 0.10) 0%, transparent 60%),
    radial-gradient(40% 40% at 80% 70%, hsl(var(--accent) / 0.08) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(20px);
}