/* Daily Checkup — beta waitlist site
   Tokens pulled from the Figma Sites file "Beta Waitlist - Website"
   (Plus Jakarta Sans; blue #5271D4, yellow #FFD475, ink #383848,
   lavender #DAE0F1). One stylesheet for all four pages. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-latin.woff2") format("woff2");
  font-weight: 200 800; /* variable font */
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #5271d4;
  --yellow: #ffd475;
  --ink: #383848;
  --lavender: #dae0f1;
  --white: #ffffff;
  --placeholder: #a9b1c7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  background: var(--blue);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.light {
  background: var(--white);
  color: var(--ink);
}

/* ── Header ─────────────────────────────────────────────── */

.site-header {
  padding: 40px 48px 0;
}

.logo {
  display: block;
  width: 216px;
  aspect-ratio: 434 / 93;
  background-color: currentColor;
  -webkit-mask: url("../assets/dcu-logo.svg") no-repeat left center;
  -webkit-mask-size: contain;
  mask: url("../assets/dcu-logo.svg") no-repeat left center;
  mask-size: contain;
  color: var(--white);
}

body.light .logo { color: var(--blue); }

/* Legal pages: lavender runs to the very top, behind the logo, at all widths */
body.light .site-header { background: var(--lavender); position: relative; z-index: 2; }

/* Blue pages: header above the thanks-page plane's dive path */
body:not(.light) .site-header { position: relative; z-index: 3; }

/* ── Blue pages (home, thanks) ──────────────────────────── */

main {
  flex: 1;
  width: 100%;
}

/* Blue pages center their single column; legal pages manage their own flow */
body:not(.light) main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

.hero {
  width: 100%;
  max-width: 653px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: clamp(64px, 16vh, 172px);
}

.hero .eyes {
  width: clamp(150px, 24vw, 230px);
  height: auto;
  overflow: visible;
}

/* Blink: frame-swap through Mei's blink states (driven by js/eyes.js):
   open -> thin mid arcs -> thick closed lids -> mid -> open */
.eyes .lids,
.eyes .lids-mid { opacity: 0; }
.eyes.is-blinking .lids { opacity: 1; }
.eyes.is-blinking-mid .lids-mid { opacity: 1; }
.eyes.is-blinking .eye,
.eyes.is-blinking-mid .eye { opacity: 0; }

.eyes .pupil { will-change: transform; }

h1 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

.hero h1 {
  font-size: clamp(44px, 9vw, 96px);
  margin-top: clamp(28px, 5vh, 40px);
  white-space: nowrap;
}

/* ── Signup form ────────────────────────────────────────── */

.signup {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  margin-top: clamp(28px, 5vh, 42px);
}

.signup input[type="email"] {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: 32px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: clamp(17px, 2.4vw, 20px);
  text-align: center;
  padding: 0 28px;
}

.signup input[type="email"]::placeholder { color: var(--placeholder); }

.signup input[type="email"]:focus-visible,
.signup button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.signup button {
  margin-top: 24px;
  height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 20px;
  background: var(--yellow);
  color: var(--blue);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.signup button:hover { filter: brightness(1.04); }
.signup button:disabled { opacity: 0.7; cursor: default; }

/* Desktop: input + button side by side, centered as one row (1280 ref:
   315px input, 24px gap, 195px button) */
@media (min-width: 640px) {
  .signup { flex-direction: row; justify-content: center; }
  .signup input[type="email"] { width: 315px; height: 64px; border-radius: 32px; }
  .signup button { margin-top: 0; margin-left: 24px; }
  .signup .form-error { flex-basis: 100%; text-align: center; }
}


/* Honeypot — visually gone, still in the DOM for bots */
.signup .hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form-error {
  margin-top: 16px;
  font-size: 16px;
  color: var(--white);
  background: rgba(56, 56, 72, 0.35);
  border-radius: 12px;
  padding: 8px 16px;
  display: none;
}

.form-error.show { display: block; }

.hero .blurb {
  margin-top: clamp(24px, 4vh, 32px);
  display: grid;
  gap: 24px;
  font-size: clamp(16px, 2.2vw, 20px);
}

/* ── Easter egg: enormous monitors ──────────────────────────
   The blue pages are one narrow centered column, so on a huge
   monitor the sides are open sky — leave a note out there for
   the ultrawide crowd. Book-spine text on the right from
   2200px (clears full-screen 1920); 3360px (3440 ultrawides,
   XDR "more space" at 3376) adds a reply on the left. The
   / "" alt keeps it out of screen readers, and with no
   content declared the pseudos don't render at all, so this
   base rule is inert on normal screens. */

body:not(.light)::before,
body:not(.light)::after {
  position: fixed;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

@media (min-width: 2200px) {
  body:not(.light)::after {
    content: "wow, your monitor is huge!" / "";
    right: 34px;
  }
}

@media (min-width: 3360px) {
  body:not(.light)::before {
    content: "okay, now you’re just showing off." / "";
    left: 34px;
    transform: translateY(-50%) rotate(180deg);
  }
}

/* ── Thanks page ────────────────────────────────────────── */

/* x-only clip so the thrown plane exits at the viewport edge without
   widening the page; y stays visible so it can climb past the header */
.clip-x { overflow-x: clip; }

.thanks {
  width: 100%;
  max-width: 780px;
  margin-top: clamp(40px, 8vh, 74px);
}

.thanks .art {
  width: clamp(280px, 32.5vw, 416px);
  position: relative;
  margin: 0 auto;
}

/* z-index 1 so the returning plane (z 0) lodges BEHIND the cloud */
.thanks .art .cloud { width: 100%; height: auto; display: block; position: relative; z-index: 1; }

/* Export-derived scale: plane box 290 vs cloud 413 wide (desktop frame),
   216 vs 328 on the mobile frame; −17° tilt is baked into the SVG. */
.thanks .art .plane {
  position: absolute;
  left: 14.9%;
  top: 25%;
  width: 70.2%;
  height: auto;
  z-index: 2;
  animation: plane-throw 3.35s cubic-bezier(0.33, 0, 0.4, 1) 1.1s 1 both;
}

@media (max-width: 767px) {
  .thanks .art .plane { left: 17%; width: 65.9%; }
}

/* rest → wind-up (back + nose up) → beat of tension → launched off the right
   edge (the exported plane's nose points right; -rotate = nose up on it) →
   empty-sky beat → SCREEN-WRAP: reappears off the LEFT edge still flying
   rightward, glides down in decelerating, flares, and parks EXACTLY on the
   original Figma position (transform: none). Throw = the shipped 1.5s
   timing remapped onto 3.35s (0.54s wind-up / 0.15s hold / 0.81s launch /
   0.6s beat / 0.95s glide-in / 0.3s flare-park). */
@keyframes plane-throw {
  0%     { transform: none; }
  16.1%  { transform: translate(-11%, 4%) rotate(-6deg); animation-timing-function: linear; }
  20.6%  { transform: translate(-12%, 4.5%) rotate(-7deg); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.4); }
  44.8%  { transform: translate(120vw, -24vw) rotate(-13deg); }
  62.7%  { transform: translate(120vw, -24vw) rotate(-13deg); }
  62.8%  { transform: translate(-85vw, -14vw) rotate(-8deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  92%    { transform: translate(-6%, 0.8%) rotate(-5deg); animation-timing-function: cubic-bezier(0.35, 0, 0.45, 1); }
  100%   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .thanks .art .plane { animation: none; }
}

@media (max-width: 767px) {
  br.bd { display: none; }
}

.thanks h1 {
  font-size: clamp(28px, 3.2vw, 41px);
  text-align: center;
  margin: clamp(24px, 5vh, 44px) auto 0;
}

.thanks .copy {
  margin-top: clamp(24px, 4.5vh, 36px);
  display: grid;
  gap: 22px;
  font-size: clamp(16px, 1.5vw, 19px);
}

/* ── Light pages (privacy, terms) ───────────────────────────
   Reference template (1280): white header, flat-topped lavender panel,
   one giant symmetric white dome rising ~494px into it, art centered on
   the dome peak, centered one-line title on the white. */

.band {
  background: var(--lavender);
  position: relative;
}

.band .art {
  position: absolute;
  width: auto;
  z-index: 1;
}

.band .crest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  display: block;
  z-index: 0;
}

/* Desktop template (>=768px), the owner-approved composition: flat
   lavender panel, symmetric dome rising 28.672k, art sunk into the
   mound top, title 16px under the art. All measures run through
   --k = 1% of the design width, capped at the authored 1280 frame. */
@media (min-width: 768px) {
  body.light {
    --k: min(1vw, 12.8px);
    --mound-base: calc(var(--k) * 57.969);
    --mound-rise: calc(var(--k) * 28.672);
  }
  .band { height: calc(var(--mound-base) - var(--header-h, 86.29px)); overflow: hidden; }
  .band .art { top: auto; height: auto; }
  /* book.svg is the designer's desktop export with the -7.19deg tilt
     baked in; base sinks ~130px into the mound so the crest holds it */
  .band .art-book {
    left: 50%;
    width: calc(var(--k) * 17.969);
    bottom: calc(var(--mound-rise) - var(--k) * 10.129);
    transform: translateX(-50%);
  }
  /* shield base sinks ~150px past the apex; 197/1280 tall, width auto
     (owner-tuned 2026-08-26) */
  .band .art-shield {
    left: 50%;
    height: calc(var(--k) * 15.391);
    width: auto;
    bottom: calc(var(--mound-rise) - var(--k) * 11.719);
    transform: translateX(-50%);
  }
  .band .crest-m { display: none; }
  .band .crest-d { height: var(--mound-rise); }
  .band .art-book-m { display: none; }
}

/* Mobile template (<768px): the same gentle arc hill the design always
   had (375x47.06 crest, height 12.549u), slid up the page: the lavender
   now ends 280px from the page top (was 386). The art sits on the mound
   top with its base dipping 30px past the base line — the mobile mirror
   of the desktop sunk-art composition — and the title hangs 16px under
   the art. --u is 1% of width, capped at a 500px layout for the
   641-767px tablet gap. Raise the mound = shrink the 193.71px band. */
@media (max-width: 767px) {
  body.light { --header-h: 86.29px; --u: min(1vw, 5px); }
  .band { height: 193.71px; }
  .band .crest-d { display: none; }
  .band .art-book-d { display: none; }
  .band .crest-m { height: calc(var(--u) * 12.549); }
  .band .art { top: auto; height: auto; }
  .band .art-shield { left: 50%; transform: translateX(-50%); height: calc(var(--u) * 54.667); bottom: -30px; }
  .band .art-book { left: 50%; transform: translateX(-50%); width: calc(var(--u) * 56.293); bottom: -30px; }
  /* h1 hangs 16px below the art (art dips 30px past the band bottom) */
  .dome .legal { margin-top: 46px; }
}

.dome {
  background: var(--white);
  position: relative;
  flex: 1;
}

/* Title + copy ride up onto the dome (the band owns the full panel
   height, so the content column pulls itself back over the white). */
.legal {
  position: relative;
  z-index: 1;
  max-width: 808px;
  margin: 28px auto 0;
  padding: 0 24px 64px;
  width: 100%;
}

@media (min-width: 768px) {
  /* the h1 hangs 16px below the art's bottom edge; book and shield have
     different bottoms, hence per-page pull-ups */
  .legal { margin: calc(var(--k, 12.8px) * 10.129 + 16px - var(--mound-rise, 367px)) auto 0; }
  .page-privacy .legal { margin: calc(var(--k, 12.8px) * 11.719 + 16px - var(--mound-rise, 367px)) auto 0; }
}

.legal h1 {
  font-size: clamp(28px, 3.2vw, 41px);
  color: var(--ink);
  text-align: center;
}

.legal .copy {
  margin-top: clamp(24px, 3.5vw, 44px);
  display: grid;
  gap: 18px;
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.6;
}

.legal .copy .doc-meta {
  font-size: 15px;
  color: #7A7F94;
}

.legal .copy h2 {
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 800;
  line-height: 1.2;
  margin-top: 18px;
}

.legal .copy h3 {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  margin-top: 6px;
}

.legal .copy ul {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 10px;
}

.legal-placeholder {
  border: 2px dashed var(--blue);
  border-radius: 16px;
  padding: 20px 24px;
  color: var(--blue);
  font-size: 17px;
}

/* ── Footer ─────────────────────────────────────────────── */

.site-footer {
  text-align: center;
  font-size: 14px;
  padding: 48px 24px 32px;
}

.site-footer a { color: inherit; }
.site-footer .sep { margin: 0 8px; } /* match the 8px around the ::after pipe below */

@media (min-width: 720px) {
  .site-footer { display: flex; justify-content: center; gap: 8px; }
  .site-footer p:first-child::after { content: "|"; margin-left: 8px; }
}

body.light .site-footer { color: var(--blue); }

/* ── Small screens ──────────────────────────────────────── */

@media (max-width: 640px) {
  .site-header { padding: 28px 24px 0; }
  .logo { width: 168px; }
  .signup input[type="email"] { height: 60px; }
  body.light { --header-h: 64px; } /* 28px padding + 168px logo at 434/93 */
}

@media (prefers-reduced-motion: no-preference) {
  .hero .eyes { animation: blink-float 6s ease-in-out infinite; }
  @keyframes blink-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
}