/* Cada Dia Studio — the whole public site, hand-written, no build step.
   Five colours, one typeface, compositor-friendly animation only. */

/* ── fonts ────────────────────────────────────────────────────────────────
   Self-hosted, latin-subset TeX Gyre Pagella (a libre Palatino).
   No external font requests — the site makes zero third-party requests. */
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("/fonts/texgyrepagella-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("/fonts/texgyrepagella-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("/fonts/texgyrepagella-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --peach: #EAA089;
  --ink: #3C3D3D;
  --paper: #FBF7F4;
  --peach-deep: #C97B5E;
  --peach-wash: #F8E3DA;
  --serif: "TeX Gyre Pagella", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  overflow-x: hidden;           /* parallax must never create a sideways scroll */
}

::selection { background: var(--peach); color: var(--ink); }

a { color: var(--peach-deep); }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--peach-deep); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible { outline-color: var(--ink); }

p { margin: 0; }

/* ═══ section 1 — hero ═══════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--peach);
  color: var(--ink);
  overflow: hidden;
  padding: 2rem 1.5rem 5rem;
  isolation: isolate;
}

.sun {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.18;
  will-change: transform, opacity;
}
/* Barely perceptible — alive, not busy. */
.sun-g { animation: drift 20s var(--ease) infinite; transform-origin: 50% 60%; }
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.hero-text { position: relative; z-index: 1; text-align: center; will-change: transform; }

.wordmark {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.tagline {
  margin: 0.6rem 0 0;
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}

/* Entrance: the text fades up once the first strokes are on screen. */
.js .hero-text .wordmark,
.js .hero-text .tagline { opacity: 0; transform: translateY(14px); }
.js .hero-text .wordmark { animation: riseIn 0.9s var(--ease) 0.5s forwards; }
.js .hero-text .tagline  { animation: riseIn 0.9s var(--ease) 0.75s forwards; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

/* Scroll cue: a line that draws down, holds, then leaves from the top. */
.cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  translate: -50% 0;
  width: 1px; height: 44px;
  z-index: 1;
  transition: opacity 0.5s ease;
}
.cue span {
  display: block;
  width: 100%; height: 100%;
  background: var(--ink);
  animation: cue 2.2s ease-in-out infinite;
}
.cue.gone { opacity: 0; pointer-events: none; }
@keyframes cue {
  0%   { transform: scaleY(0);  transform-origin: 50% 0;    opacity: 0; }
  45%  { transform: scaleY(1);  transform-origin: 50% 0;    opacity: 1; }
  60%  { transform: scaleY(1);  transform-origin: 50% 100%; opacity: 1; }
  100% { transform: scaleY(0);  transform-origin: 50% 100%; opacity: 0; }
}

/* ═══ line drawing (shared) ══════════════════════════════════════════════
   Paths render complete by default; site.js measures each one, hides it with
   a dashoffset, and lets this transition draw it in. No JS → no dashes → the
   drawing is simply already finished, which is the right fallback. */
.draw { transition: stroke-dashoffset var(--dur, 0.9s) var(--ease) var(--d, 0s); }

/* ═══ section 2 — who we are ════════════════════════════════════════════ */
.who {
  background: var(--paper);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: clamp(3rem, 9vh, 6rem);
  padding: clamp(5rem, 14vh, 9rem) 1.5rem;
}

.lede {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  max-width: 26em;
  margin-inline: auto;
  text-align: center;
}

.phrases { text-align: center; }
.phrase {
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(0.6rem, 2vh, 1.4rem);
}
.phrase:last-child { margin-bottom: 0; }

/* The underline hangs off the last word, so it always tracks the wrap. */
.uw { position: relative; display: inline-block; white-space: nowrap; }
.ul {
  position: absolute;
  left: 0; right: 0;
  bottom: -0.22em;
  width: 100%; height: 0.28em;
  overflow: visible;
}

.bridge {
  max-width: 34em;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 5vh, 3rem);
}
.bridge > p { text-align: left; }
/* The opening sits as two separate thoughts: the gap, then why it persists. */
.break-after-first span { display: block; }
.break-after-first span + span { margin-top: 0.9em; }

/* ── the seed ──────────────────────────────────────────────────────────────
   Strokes reveal themselves via stroke-dashoffset (site.js releases them);
   only the seed and the leaves need keyframes, and both are gated on .grow so
   nothing runs until the figure is actually on screen. */
.plant { margin: 0; }
.plant-svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* Hidden only when scripted — with JS off the whole tree is simply there. */
.js .plant .seed { opacity: 0; }
.js .plant .leaf { opacity: 0; transform: scale(0); }

/* Leaves open from where they meet the branch, not from their own middle. */
.leaf { transform-box: fill-box; transform-origin: 0% 50%; }

.plant.grow .seed { animation: seedDrop 0.8s cubic-bezier(0.45, 0, 0.7, 1) 0.15s forwards; }
.plant.grow .leaf { animation: leafOpen 0.5s var(--ease) var(--d, 0s) forwards; }

/* Falls, lands, settles — gravity, then one small bounce. */
@keyframes seedDrop {
  0%   { opacity: 0; transform: translateY(-150px); }
  20%  { opacity: 1; }
  70%  { transform: translateY(0); }
  82%  { transform: translateY(-7px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes leafOpen {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── entrances ── */
.js .reveal, .js .phrase { opacity: 0; transform: translateY(18px); }
.js .reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .phrase { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i) * 140ms); }
.js .reveal.in, .js .phrase.in { opacity: 1; transform: none; }

/* ═══ section 3 — the name, contact, footer ═════════════════════════════ */
.name {
  background: var(--ink);
  color: var(--paper);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3rem, 10vh, 6rem);
  padding: clamp(5rem, 12vh, 8rem) 1.5rem 0;
  position: relative;
}
.name ::selection { background: var(--peach); color: var(--ink); }
.name :focus-visible { outline-color: var(--peach); }

.name-block { max-width: 34em; margin-inline: auto; text-align: center; }
.meaning { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5; }
.meaning .es { color: var(--peach); }
.glyph {
  width: 28px; height: 28px;
  vertical-align: -0.32em;
  margin-right: 0.5rem;
  overflow: visible;
}
.meaning-sub { margin-top: 1.1rem; opacity: 0.82; }

.contact { text-align: center; }
.invite {
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 16em;
  margin-inline: auto;
}
/* Two deliberate lines — the break after "idea." is the point of the line. */
.invite span { display: block; }
.contact-slot { margin-top: clamp(1.75rem, 5vh, 2.75rem); min-height: 3.4rem; }

.cta {
  display: inline-block;
  background: var(--peach);
  color: var(--ink);
  font: inherit;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 2.4rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.2s ease;
}
.cta:hover { background: var(--peach-deep); transform: translateY(-1px); }
.cta.out { opacity: 0; }

/* The revealed address: one span per character, each rising in turn. */
.mail {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--peach);
  text-decoration: none;
  border-bottom: 1px solid rgba(234, 160, 137, 0.4);
  padding-bottom: 0.1em;
}
.mail:hover { color: var(--peach); border-bottom-color: var(--peach); }
.mail span {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(6px);
  animation: charIn 0.35s var(--ease) forwards;
  animation-delay: calc(var(--i) * 20ms);
}
@keyframes charIn { to { opacity: 1; transform: none; } }

noscript { display: block; opacity: 0.75; font-size: 0.95rem; }

.foot {
  margin-top: auto;
  padding: clamp(2.5rem, 6vh, 4rem) 0 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ═══ 404 ═══════════════════════════════════════════════════════════════ */
.page-404 { background: var(--peach); }
.nf {
  min-height: 100svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
}
.nf .wordmark { font-size: clamp(2.2rem, 6vw, 4rem); }
.nf-back { margin-top: 1.5rem; }
.nf-back a { color: var(--ink); }

/* ═══ desktop nicety ════════════════════════════════════════════════════ */
@media (min-width: 900px) and (pointer: fine) {
  html { scroll-snap-type: y proximity; }
  .hero, .who, .name { scroll-snap-align: start; }
}

/* ═══ reduced motion ════════════════════════════════════════════════════
   Everything renders in its finished state: drawings complete, the tree fully
   grown, all copy visible. Nothing moves, nothing loops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .hero-text .wordmark,
  .js .hero-text .tagline,
  .js .reveal,
  .js .phrase { opacity: 1; transform: none; }
  .js .reveal { transition: opacity 0.25s linear; }
  .cue { display: none; }
  .sun { transform: none !important; }
  .js .plant .seed, .js .plant .leaf { opacity: 1; transform: none; }
  .mail span { opacity: 1; transform: none; }
}