/* =============================================================================
   Oveal — coming-soon page (oveal.com)
   Ported from the Claude Design handoff export "Oveal Coming Soon.html".
   The export was a bundled React + custom-runtime page; this is the same design
   as static HTML/CSS/vanilla JS, matching the full site in ../web/.
   Tokens are the authoritative values from _ds/.../tokens/*.css.
   ========================================================================== */

/* ----------------------------------------------------------------- Fonts -- */
/* Josefin Sans (substitute for Brandon Grotesque). Self-hosted woff2 — no
   Google Fonts CDN. Only the three weights this page paints are shipped. */
@font-face { font-family:'Josefin Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/JosefinSans-400.woff2') format('woff2'); }
@font-face { font-family:'Josefin Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/JosefinSans-600.woff2') format('woff2'); }
@font-face { font-family:'Josefin Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/JosefinSans-700.woff2') format('woff2'); }

/* ---------------------------------------------------------------- Tokens -- */
:root {
  --ov-yellow:#FFD100;
  --ov-green-deep:#07524B;
  --ov-teal:#009086;
  --ov-leaf:#88C257;
  --ov-orange:#F27646;
  --ov-cream:#F8F1E7;
  --ov-salmon:#FBA091;
  --ov-body:#3C6B64;              /* deep-green tint for paragraphs */
  --ov-muted:#6B8F8A;             /* captions, meta */
  --ov-green-hover:#063F3A;

  --font-sans:'Josefin Sans','Brandon Grotesque','Gill Sans',system-ui,sans-serif;

  --duration-fast:150ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------------ Base -- */
*,*::before,*::after { box-sizing:border-box; }
/* The signup form and success pill are flex containers, and an author
   `display` beats the UA rule for [hidden] — so state them explicitly. */
[hidden] { display:none !important; }
body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--ov-cream);
  font-family:var(--font-sans);
  color:var(--ov-green-deep);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:var(--ov-teal); text-decoration:none; }
a:hover { color:var(--ov-green-deep); }
h1,p { margin:0; }

/* Keyboard focus — never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline:3px solid var(--ov-green-deep);
  outline-offset:3px;
}

.sr-only {
  position:absolute; 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:-60px; z-index:100;
  background:var(--ov-green-deep); color:var(--ov-cream);
  padding:12px 20px; border-radius:999px; font:600 14px var(--font-sans);
  transition:top .2s ease;
}
.skip-link:focus { top:16px; color:var(--ov-cream); }

/* The wordmark is letter-spaced; the negative margin removes the trailing gap
   so it still optically centres. */
.wordmark {
  font:700 18px var(--font-sans);
  letter-spacing:.32em;
  margin-right:-.32em;
  text-transform:uppercase;
  color:var(--ov-green-deep);
}

/* -------------------------------------------------------------- Masthead -- */
.masthead {
  background:var(--ov-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:15px 32px;
}
.masthead__mark { display:block; }

/* ------------------------------------------------------------------ Hero -- */
.hero {
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:72px 24px 64px;
  overflow:hidden;
}
.hero__canvas { position:absolute; inset:0; pointer-events:none; }
.hero__inner {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  width:100%;
  max-width:820px;
}
.hero__eyebrow {
  font:700 13px var(--font-sans);
  letter-spacing:.38em;
  margin-right:-.38em;
  text-transform:uppercase;
  color:var(--ov-teal);
}
.hero__title {
  font:600 clamp(46px,6.6vw,84px)/1.06 var(--font-sans);
  letter-spacing:-.01em;
  color:var(--ov-green-deep);
}
.hero__smile {
  width:.78em; height:.78em;
  display:inline-block;
  vertical-align:-.06em;
}
.hero__lede {
  font:400 19px/1.6 var(--font-sans);
  color:var(--ov-body);
  max-width:48ch;
}

/* ---------------------------------------------------------------- Signup -- */
.signup {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:520px;
  margin-top:10px;
}
.signup__form {
  display:flex;
  gap:10px;
  width:100%;
  flex-wrap:wrap;
  justify-content:center;
}
.signup__input {
  flex:1 1 240px;
  min-width:0;
  background:#fff;
  border:2px solid rgba(7,82,75,.18);
  border-radius:999px;
  padding:16px 22px;
  font:400 16px var(--font-sans);
  color:var(--ov-green-deep);
}
.signup__input:focus { border-color:var(--ov-teal); outline-offset:1px; }
.signup__input[aria-invalid="true"] { border-color:var(--ov-orange); }
.signup__button {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ov-green-deep);
  color:var(--ov-cream);
  border:none;
  border-radius:999px;
  padding:17px 30px;
  font:600 16px var(--font-sans);
  cursor:pointer;
  transition:background var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.signup__button:disabled { opacity:.6; cursor:default; }
.signup__button:hover { background:var(--ov-green-hover); color:#fff; }
.signup__button:active { transform:scale(.98); }
.signup__note { font:400 13px var(--font-sans); color:var(--ov-muted); }
.signup__done {
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border-radius:999px;
  padding:16px 28px;
}
.signup__done-text { font:600 17px var(--font-sans); color:var(--ov-green-deep); text-align:left; }

/* -------------------------------------------------------------- Entrance -- */
/* The handoff drove this with `gsap.from(..., {autoAlpha:0})`. Done in CSS
   instead: GSAP was in the bundle for this one staggered rise, and a JS-set
   opacity:0 leaves the whole page blank if the tween is ever set up but not
   ticked. A CSS animation always finishes. */
@keyframes ov-rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }

[data-hero] { animation:ov-rise .9s var(--ease-out) both; }
.hero__eyebrow { animation-delay:.12s; }
.hero__title   { animation-delay:.24s; }
.hero__lede    { animation-delay:.36s; }
.signup        { animation-delay:.48s; }
.garland       { animation-delay:.60s; }

/* --------------------------------------------------------------- Garland -- */
@keyframes ov-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } }

/* Centred with flex rather than translateX(-50%) so the entrance keyframe owns
   `transform` outright and can end on `none`. */
.garland {
  position:absolute;
  bottom:26px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.garland__dot { border-radius:50%; animation:ov-bob 1.7s ease-in-out infinite; }
.garland__dot--1 { width:9px;  height:9px;  background:var(--ov-yellow); }
.garland__dot--2 { width:14px; height:14px; background:var(--ov-teal);   animation-delay:.18s; }
.garland__dot--3 { width:10px; height:10px; background:var(--ov-orange); animation-delay:.36s; }
.garland__dot--4 { width:16px; height:16px; background:var(--ov-leaf);   animation-delay:.54s; }
.garland__dot--5 { width:9px;  height:9px;  background:var(--ov-salmon); animation-delay:.72s; }

/* ---------------------------------------------------------------- Footer -- */
.footer {
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:22px 44px;
}
.footer__line {
  font:700 12px var(--font-sans);
  letter-spacing:.3em;
  margin-right:-.3em;
  text-transform:uppercase;
  color:var(--ov-green-deep);
}
.footer__links { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.footer__links a { font:600 13.5px var(--font-sans); }
.footer__copy { font:400 13px var(--font-sans); color:var(--ov-muted); }

/* ------------------------------------------------------------ Responsive -- */
@media (max-width:640px) {
  .hero { padding:48px 20px 88px; }
  .hero__lede { font-size:17px; }
  .footer { padding:20px 24px; justify-content:center; text-align:center; }
}

/* --------------------------------------------------------- Reduced motion -- */
/* Mirrors the JS guard in main.js: no bobbing, no orb field, no entrance. */
@media (prefers-reduced-motion:reduce) {
  [data-hero],
  .garland__dot { animation:none; }
  .signup__button { transition:none; }
}