/* ============================================================
   ZABARDAST · Student Waitlist — site styles
   Tokens sourced from the Zabardast design system
   (Brand Guidelines · Essentials · v2.0)
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Druk Wide';
  src: url('../assets/fonts/DrukWideBold.woff2') format('woff2'),
       url('../assets/fonts/DrukWideBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- BRAND BOLT (replaces the ⚡ emoji — colour-controlled, cross-platform) ----------
   Renders assets/img/bolt.svg as a mask filled with currentColor, so each bolt takes the
   colour (and 1em size) of the element it sits in. */
.zbolt {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; flex: none;
  background-color: currentColor;
  -webkit-mask: url('../assets/img/bolt.svg') no-repeat center / contain;
          mask: url('../assets/img/bolt.svg') no-repeat center / contain;
}

/* ---------- WAITLIST "JOINED" + SKIP-THE-LINE REFERRAL ---------- */
.join-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; }
.join-ok .join-sub { font: 400 13px/1.5 'Inter', sans-serif; color: rgba(250,247,240,0.7); margin: 0; }
.ref-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ref-wa { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #FFFFFF;
  font: 800 11px/1 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 999px; text-decoration: none; transition: transform .12s ease; }
.ref-wa:hover { transform: translateY(-1px); }
.ref-copy { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #ECE54C;
  border: 1px solid #ECE54C; font: 800 11px/1 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.ref-copy.copied { background: #ECE54C; color: #1E2952; }

:root {
  /* Core palette — five colours, no more */
  --zd-indigo:   #1E2952;
  --zd-fuchsia:  #FF0054;
  --zd-banana:   #ECE54C;
  --zd-aqua:     #79C7C5;
  --zd-white:    #FAF7F0;
  --zd-ink:      #0A1029;
  --zd-pink-deep:#B81945;

  /* Gradients — locked pairs */
  --zd-grad-atmospheric: linear-gradient(135deg, #1E2952 0%, #0A1029 100%);
  --zd-grad-pink-depth:  linear-gradient(135deg, #FF0054 0%, #B81945 100%);

  /* Text */
  --zd-fg-muted: #4A547A;

  /* Families */
  --zd-font-display: 'Druk Wide', 'Inter', system-ui, sans-serif;
  --zd-font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ---------- BASE RESET ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { display: block; }
section[id], header[id] { scroll-margin-top: 84px; }

/* ---------- ANIMATIONS ---------- */
@keyframes zd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes zd-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

[data-marquee] { animation: zd-marquee 42s linear infinite; }
[data-float]   { animation: zd-float 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-marquee], [data-float] { animation: none !important; }
}

/* ---------- INTERACTIVE STATES
   (these replace the prototype's style-hover / style-focus / style-active hints) */
.nav-link  { transition: color 160ms ease; }
.nav-link:hover,
.footer-link:hover { color: var(--zd-aqua); }

.contact-link:hover { text-decoration: underline; }

.cta-btn { transition: box-shadow 200ms ease, transform 120ms ease; }
.cta-btn--nav:hover  { box-shadow: 0 14px 36px rgba(255,0,84,0.45); transform: translateY(-1px); }
.cta-btn--form:hover { box-shadow: 0 12px 32px rgba(255,0,84,0.40); }
.cta-btn--form:active { transform: scale(0.97); }

.email-input { transition: box-shadow 160ms ease; }
.email-input:focus { box-shadow: 0 0 0 4px rgba(255,0,84,0.12); }

.deal-card { transition: transform 200ms ease, box-shadow 200ms ease; }
.deal-card:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(10,16,41,0.28); }

/* ---------- WAITLIST FORM TOGGLE ---------- */
.is-hidden { display: none !important; }

/* ---------- REVEAL ON SCROLL (added via JS; safe if JS/motion off) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ============================================================
   FULL-SCREEN SECTION VARIANTS (comparison)
   - body.v-full      → every content section fills the viewport
   - body.v-select    → only the 4 "moment" sections fill the viewport
   Connective tissue (countdown, marquee, footer) stays a band in both.
   ============================================================ */
.v-full .zsec,
.v-select .zsec--moment {
  /* P7: content-light moments sized so they feel full on a laptop but not
     cavernous on tall monitors. The hero overrides this to a true full screen. */
  min-height: clamp(560px, 82vh, 900px);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* lets the column shrink below content min-width (no overflow) */
  align-content: safe center;     /* centre, but fall back to top if content is taller (no clip) */
}
/* Hero keeps a true full-viewport height */
#join.zsec--moment { min-height: 100vh; min-height: 100dvh; }
/* On phones, let the lighter moments size to their content (no empty voids) */
@media (max-width: 600px) {
  .v-select .zsec--moment:not(#join) { min-height: auto; }
}

/* Tame the prototype's huge inline vertical padding so a full screen
   reads as one screen. padding-block (vertical only) keeps the inline
   horizontal gutter intact. :not([aria-hidden]) skips the decorative bolts. */
.v-full .zsec > :not([aria-hidden="true"]),
.v-select .zsec--moment > :not([aria-hidden="true"]) {
  padding-block: clamp(72px, 9vh, 150px) !important;
}

/* Gentle scroll-snap on the selective moments — lands on each beat
   without hijacking the scroll. */
@media (min-width: 700px) and (prefers-reduced-motion: no-preference) {
  body.v-select { scroll-snap-type: y proximity; }
  .v-select .zsec--moment { scroll-snap-align: start; }
}

/* ============================================================
   FULL-PAGE SNAP VARIANT (body.v-fullpage)
   Every block is one screen; one scroll gesture jumps to the next
   section and can't skip past it (scroll-snap-stop: always).
   ============================================================ */
html:has(.v-fullpage) { scroll-snap-type: y mandatory; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.v-fullpage) { scroll-behavior: smooth; }
}

.v-fullpage .fp-panel {
  height: 100vh;                 /* fallback */
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;      /* the "jump one section per scroll" rule */
  scroll-margin-top: 0;
  display: grid;
  align-content: safe center;    /* centre content; fall back to top if it overflows */
}
.v-fullpage .fp-panel > :not([aria-hidden="true"]) {
  padding-block: clamp(64px, 8vh, 140px) !important;
}

/* Side dot navigation */
.fp-dots {
  position: fixed; top: 50%; right: 18px; transform: translateY(-50%);
  z-index: 80; display: flex; flex-direction: column; gap: 12px;
}
.fp-dots button {
  width: 11px; height: 11px; padding: 0; border: 0; border-radius: 999px;
  cursor: pointer; background: rgba(250,247,240,0.35);
  transition: background 160ms ease, transform 160ms ease;
}
.fp-dots button:hover { background: rgba(250,247,240,0.75); }
.fp-dots button[aria-current="true"] { background: #FF0054; transform: scale(1.35); }
@media (max-width: 760px) { .fp-dots { right: 10px; gap: 9px; } }

/* ============================================================
   RESPONSIVE — class-based (de-coupled from inline style values).
   The base (desktop) sizes still come from the elements' inline styles;
   these breakpoints override via stable classes (.pad-xl/.pad-lg/.pad-md/
   .hero-inner/.pad-footer/.cd-*/.ten-sec), so changing an inline padding
   value no longer silently breaks a breakpoint. An attribute selector and
   a class have the same specificity, so render behaviour is unchanged.
   ============================================================ */

/* ---- Tablet: bring the oversized section padding down ---- */
@media (max-width: 920px) {
  .pad-xl { padding: 140px 28px !important; }
  .pad-lg { padding: 132px 28px !important; }
  .pad-md { padding: 96px 28px !important; }
}

/* ---- Phone ---- */
@media (max-width: 600px) {
  /* Nav: drop the middle links (they overflow); keep wordmark + CTA */
  header nav { display: none !important; }
  header > div { padding-left: 18px !important; padding-right: 18px !important; gap: 12px !important; }
  header img { height: 19px !important; }
  header a.cta-btn--nav { padding: 11px 15px !important; }

  /* Section padding: generous but not enormous on a phone */
  .pad-xl,
  .pad-lg { padding: 88px 20px !important; }
  .pad-md { padding: 72px 20px !important; }
  .pad-footer { padding: 60px 20px 36px !important; }

  /* Hero: force a single column (minmax(360px) won't collapse on its own
     at phone widths), tighter gap, smaller padding */
  .hero-inner { padding: 64px 20px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  /* Hero: pull the floating tags back on-screen */
  .tag-tl { top: 12px !important; left: 12px !important; }
  .tag-br { right: 12px !important; }

  /* Countdown: hide the colon separators (they dangle on wrap) and lay the
     four units out as an even 4-up row that always fits. */
  .cd-sep { display: none !important; }
  #cd-grid { gap: 10px !important; flex-wrap: nowrap !important; }
  .cd-unit { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
  .cd-num { font-size: clamp(24px,8vw,40px) !important; }

  /* "10 seconds." display text: shrink so SECONDS. fits the screen. */
  .ten-sec { font-size: clamp(30px,11vw,48px) !important; }

  /* Forms: keep the email + button comfortably inside the screen */
  .js-waitlist { max-width: 100% !important; }

  /* Moment containers are grid items with `margin:0 auto`, which makes them
     size to content (overflowing) instead of shrinking. Cap them to the screen. */
  .v-select .zsec--moment > :not([aria-hidden="true"]) { max-width: 100% !important; }
}

/* ============================================================
   COMPONENTS — P2 menu · P4 FAQ accordion · P6 WhatsApp · sticky CTA
   ============================================================ */

/* ---- P2 · Hamburger button (mobile only) ---- */
.nav-burger {
  display: none; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer;
  background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #FAF7F0; transition: transform .22s ease, opacity .22s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 600px) { .nav-burger { display: inline-flex; } }

/* ---- P2 · Mobile menu overlay ---- */
#mobile-menu { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(10,16,41,0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#mobile-menu.is-open { display: block; }
@media (min-width: 601px) { #mobile-menu { display: none !important; } }
.mobile-menu-panel { display: flex; flex-direction: column; padding: 88px 24px 40px; max-width: 460px; margin: 0 auto; }
.mobile-menu-panel a { font: 800 15px/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #FAF7F0; text-decoration: none; padding: 20px 4px; border-bottom: 1px solid rgba(250,247,240,0.12); }
.mobile-menu-panel a:active { color: #79C7C5; }
.mobile-menu-cta { margin-top: 22px; border-bottom: 0 !important; text-align: center; color: #FAF7F0; background: linear-gradient(135deg,#FF0054 0%,#B81945 100%); border-radius: 999px; padding: 18px !important; box-shadow: 0 12px 32px rgba(255,0,84,0.32); }

/* ---- P4 · FAQ accordion ---- */
.faq-list { max-width: 720px; margin: 0 auto; border-top: 1px solid rgba(30,41,82,0.15); text-align: left; }
.faq-item { border-bottom: 1px solid rgba(30,41,82,0.15); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent; border: 0; cursor: pointer; text-align: left; padding: 26px 4px;
  font-family: 'Druk Wide','Inter',sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.005em; font-size: 15px; line-height: 1.25; color: #1E2952;
}
.faq-q:focus-visible { outline: 2px solid #FF0054; outline-offset: 3px; border-radius: 4px; }
.faq-chev { flex: none; color: #FF0054; font-size: 18px; transition: transform .25s ease; }
.faq-item.is-open .faq-chev { transform: rotate(180deg); }
/* Pure-CSS height toggle (class-driven; no JS measurement, robust off-screen) */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.is-open .faq-a { max-height: 340px; }   /* ample for the short answers */
.faq-a p { margin: 0; padding: 0 4px 26px; max-width: 640px; font: 400 16px/1.6 'Inter',sans-serif; letter-spacing: -0.005em; color: #4A547A; }

/* ---- P6 · WhatsApp share button ---- */
.wa-share {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: max-content; max-width: 100%; margin: 44px auto 0; min-height: 44px; padding: 15px 28px;
  background: #25D366; color: #FFFFFF; border-radius: 999px; text-decoration: none;
  font: 800 13px/1 'Inter',sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(37,211,102,0.30); transition: transform .12s ease, box-shadow .2s ease;
}
.wa-share:hover { box-shadow: 0 14px 34px rgba(37,211,102,0.45); transform: translateY(-1px); }
.wa-share:active { transform: scale(0.98); }

/* ---- Sticky mobile CTA bar ---- */
#sticky-cta { display: none; }
@media (max-width: 600px) {
  #sticky-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; padding: 16px;
    border-radius: 999px; text-decoration: none;
    background: linear-gradient(135deg,#FF0054 0%,#B81945 100%); color: #FAF7F0;
    font: 800 13px/1 'Inter',sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(255,0,84,0.42);
  }
  body { padding-bottom: 78px; }                 /* room so the bar never covers the footer */
  .wa-share { width: 100%; }                      /* full-width, easy tap target on phones */
  .faq-q { font-size: 14px; padding: 22px 2px; }
}

/* ============================================================
   PREMIUM DEPTH — grain · glow · hover motion
   ============================================================ */

/* Subtle film grain over the whole page (adds texture so flat fills
   don't read cheap). Very low opacity, non-interactive. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::before { display: none; } }

/* Ambient fuchsia glow behind the hero — depth without flatness */
#join::before {
  content: ""; position: absolute; top: -12%; right: -6%; width: 62%; height: 72%;
  background: radial-gradient(circle, rgba(255,0,84,0.22), rgba(255,0,84,0) 70%);
  filter: blur(46px); pointer-events: none; z-index: 0;
}

/* Deal + lifestyle photos gently zoom on hover */
.deal-card img,
.zsec [style*="aspect-ratio:3/4"] > img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.deal-card:hover img { transform: scale(1.05); }
@media (hover: hover) {
  .zsec [style*="aspect-ratio:3/4"]:hover > img { transform: scale(1.04); }
}

/* Slightly richer resting shadow on the deal cards */
.deal-card { box-shadow: 0 6px 20px rgba(10,16,41,0.10); }

/* ============================================================
   MICRO-INTERACTIONS — marquee fade · nav underline · CTA sheen · focus
   ============================================================ */

/* University ticker fades softly at both edges instead of hard-cutting */
.marquee-band {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Animated underline on the desktop nav links */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: #79C7C5; transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* Sheen sweep across the pill CTAs on hover */
.cta-btn { position: relative; overflow: hidden; }
.cta-btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.cta-btn:hover::after { left: 150%; }
@media (prefers-reduced-motion: reduce) { .cta-btn::after { display: none; } }

/* Consistent brand focus ring for keyboard users (polish + a11y) */
a:focus-visible,
button:focus-visible,
.wa-share:focus-visible {
  outline: 2px solid #FF0054; outline-offset: 3px; border-radius: 8px;
}

/* ============================================================
   COOL MOTION — bolt-burst · living glow · tilt · magnetic
   All guarded for reduced-motion; tilt/magnetic are pointer-only.
   ============================================================ */

/* ⚡ burst particles fired on a successful waitlist join */
@keyframes zd-burst {
  0%   { transform: translate(0,0) scale(.4) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.15) rotate(var(--rot)); opacity: 0; }
}
.zd-particle {
  position: fixed; z-index: 130; pointer-events: none; line-height: 1;
  will-change: transform, opacity; animation: zd-burst .85s cubic-bezier(.15,.6,.3,1) forwards;
}

/* Hero glow slowly breathes/drifts so the background feels alive */
@keyframes zd-glow-drift {
  0%,100% { transform: translate(0,0) scale(1);     opacity: .9; }
  50%     { transform: translate(-4%,3%) scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  #join::before { animation: zd-glow-drift 9s ease-in-out infinite; }
}

/* Punchier scroll-reveal: rise + slight scale */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(26px) scale(.975); }
}

/* 3D tilt cards (JS sets the transform; this just smooths + adds depth) */
.tilt { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.tilt.is-tilting { transition: transform .08s linear; }

/* Magnetic buttons (JS sets translate; smooth return on leave) */
.magnetic { transition: transform .25s cubic-bezier(.2,.7,.2,1); }

/* Kinetic headline reveal — wipe up + slight skew as the heading enters view */
@media (prefers-reduced-motion: no-preference) {
  .kinetic-head {
    opacity: 0;
    transform: translateY(30px) skewY(2.5deg);
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
    transition: opacity .55s ease,
                transform .8s cubic-bezier(.16,.84,.28,1),
                clip-path .8s cubic-bezier(.16,.84,.28,1);
    will-change: transform, clip-path, opacity;
  }
  .kinetic-head.in {
    opacity: 1; transform: none;
    -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
  }
}

/* Living glow on the dark moment sections (no blur = cheap on phones).
   Their inner content already has position:relative;z-index:1, so the glow
   sits behind it cleanly. */
@media (prefers-reduced-motion: no-preference) {
  #refer::before, #final-cta::before {
    content: ""; position: absolute; width: 78%; height: 82%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(255,0,84,0.15), rgba(255,0,84,0) 68%);
    animation: zd-glow-drift 11s ease-in-out infinite;
  }
  #refer::before   { bottom: -12%; right: -10%; }
  #final-cta::before { top: -10%; left: -8%; animation-duration: 13s; }
}