/* ============================================================
   Chrysalia — styles
   Systems: tokens · base · hero + intro · flight layer ·
   sections · chrysanthemums + petals · founders · footer ·
   reveals · reduced motion (last, wins)
   ============================================================ */

:root {
  --bg: #0a0a0f;
  --bg-glow: #14121f;
  --fg: #f4f2ee;
  --muted: #9a97a6;
  --accent: #b8a4ff;
  --accent-2: #6ee7c7;
  --gold: #e6c27a;
  --gold-dim: #a9822e;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --surface: rgba(255, 255, 255, 0.02);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --accent-glow: rgba(184, 164, 255, 0.28);
  --accent2-pulse: rgba(110, 231, 199, 0.5);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--bg-glow), transparent 70%),
    var(--bg);
  color: var(--fg);
  line-height: 1.6;
  overflow-x: clip;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

a:focus-visible,
.scroll-cue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Flight layer (fixed butterfly that travels the page) ---- */

.flight-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
}

.motion .flight-layer { display: block; }

.flight-butterfly {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 10px 34px var(--accent-glow));
}

.flight-layer.active .flight-butterfly {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Content sits above the flight layer, so the translucent butterfly
   passes behind text — depth, never obstruction. */
.hero, main, .footer {
  position: relative;
  z-index: 2;
}

/* ---- Hero ---- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.mark {
  width: 120px;
  height: 120px;
  margin: 0 auto 2.4rem;
  display: block;
  filter: drop-shadow(0 10px 34px var(--accent-glow));
}

.hero-title {
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--fg) 20%, var(--accent) 55%, var(--accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.1rem;
}

.tagline {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--muted);
  max-width: 38ch;
  margin: 0 auto 3rem;
}

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-cue:hover { text-decoration: none; color: var(--fg); }

.scroll-cue svg {
  width: 20px;
  height: 20px;
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---- Hero mark: default (no-JS / reduced motion) = static butterfly ---- */

.flight-butterfly .wing,
.mark .wing {
  transform-box: fill-box;
}

.chrysalis {
  transform-box: view-box;
  transform-origin: 60px 8px; /* hangs from the silk attachment */
  opacity: 0;
}

.wing-hints,
.gape,
.lump,
.emergent { opacity: 0; }

.gape {
  transform-box: view-box;
  transform-origin: 59.7px 44px;   /* edges part around the crack line, apex fixed */
}

.lump {
  transform-box: view-box;
  transform-origin: 60px 58px;     /* grows downward out of the gape */
}

.sidewing {
  transform-box: view-box;
  transform-origin: 66.5px 55px;   /* the wing grows from the thorax */
}

.burst {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.butterfly {
  transform-box: view-box;
  transform-origin: 60px 60px;   /* true viewBox center */
  opacity: 1;
}

.wing {
  transform-origin: center right;
  animation: flutter 0.9s ease-in-out infinite;
}

.wing.right { transform-origin: center left; }

@keyframes flutter {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.68); }
}

/* ---- Intro (JS + motion allowed): plays once, following the
        natural stages of eclosion ---- */

/* Pre-intro state: chrysalis hanging, everything else hidden */
.js.motion .chrysalis { opacity: 1; }
.js.motion .mark .butterfly { opacity: 0; }
.js.motion .mark .wing { animation: none; }
.js.motion .hero-title,
.js.motion .tagline,
.js.motion .scroll-cue { opacity: 0; }

/* Timeline (modeled on real eclosion, brisk pacing):
   0–1.1s     sway (decaying) — the shell is opaque white
   1.2–1.8s   the shell clears a step: folded wings show through
   1.5–1.9s   tremble — the butterfly stirs
   1.6–1.95s  the zigzag crack splits the bottom of the shell
   1.95–2.45s the crack parts open; the bundle squeezes out and
              resolves straight into the clinging figure
   2.2–2.8s   the closed wing stretches to full
   3.0–3.7s   the side view rotates toward us: three-quarter → edge-on
   3.5–4.3s   the frontal view fades in mid-turn, wings opening from
              edge-on; it lifts to center as the spent husk fades
   4.2s       first true flutters
   4.2–4.9s   title, then tagline rise in
   5.0s       scroll cue appears                                  */
.intro .chrysalis {
  animation:
    sway-once 1.1s ease-in-out 1,
    tremble 0.4s linear 1.5s 1;
}

/* The shell gets more translucent at every stage */
.intro .pod {
  animation: pod-clear 1.6s linear 1.1s 1 forwards;
}

.intro .wing-hints {
  animation:
    hints-in 0.6s ease-in 1.2s 1 forwards,
    fade-away 0.4s ease-out 2s 1 forwards;
}

.intro .crack {
  animation:
    crack-in 0.35s ease-out 1.6s 1 forwards,
    fade-away 0.2s ease-out 1.95s 1 forwards;
}

/* The thin crack gives way to a gaping opening that stays in the
   husk until the whole shell fades */
.intro .gape {
  animation:
    gape-open 0.35s ease-out 1.95s 1 forwards,
    fade-away 0.5s ease-out 3.8s 1 forwards;
}

.intro .lump {
  animation:
    lump-life 0.5s ease-in-out 1.95s 1 forwards,
    fade-away 0.3s ease-out 2.15s 1 forwards;   /* crossfades into the figure while still growing */
}

.intro .emergent {
  animation:
    hints-in 0.35s ease-out 2.1s 1 forwards,
    fade-away 0.35s ease-in 3.5s 1 forwards;
}

/* The wing stretches to full, holds as two stacked ovals, then
   rotates gradually toward the viewer to edge-on. */
.intro .sidewing {
  animation:
    sidewing-grow 0.6s ease-in-out 2.2s 1 both,
    side-turn 0.7s ease-in-out 3s 1 forwards;
}

/* The husk keeps hanging from its silk, then fades at liftoff */
.intro .shell { animation: fade-away 0.5s ease-out 3.8s 1 forwards; }
.intro .silk  { animation: fade-away 0.5s ease-out 3.8s 1 forwards; }

.intro .burst {
  animation: burst-once 0.5s ease-out 1.95s 1 forwards;
}

/* The frontal view emerges mid-turn: it fades in with its wings
   still edge-on and opens them gradually, completing the rotation
   the side view began, then lifts to center as the husk disappears. */
.intro .mark .butterfly {
  animation: hatch 0.8s ease-in-out 3.5s 1 both;
}

/* (.js.intro to out-specify the pre-intro animation:none above) */
.js.intro .mark .wing {
  animation:
    wing-open 0.7s ease-in-out 3.5s 1 both,
    flutter 0.9s ease-in-out 4.2s infinite;
}

.intro .hero-title { animation: rise 1s var(--ease-out-expo) 4.2s 1 forwards; }
.intro .tagline    { animation: rise 1s var(--ease-out-expo) 4.5s 1 forwards; }
.intro .scroll-cue { animation: rise 1s var(--ease-out-expo) 5s 1 forwards; }

@keyframes sway-once {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-4deg); }
  55%  { transform: rotate(4deg); }
  80%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tremble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(1.6deg); }
  40% { transform: rotate(-1.4deg); }
  60% { transform: rotate(1.2deg); }
  80% { transform: rotate(-0.8deg); }
}

@keyframes crack-in {
  from { stroke-dashoffset: 70; opacity: 0.4; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes hints-in {
  to { opacity: 0.8; }
}

/* Stepped translucency: opaque white → clearer at every stage of the
   emergence, ending as a near-transparent spent husk.
   (runs 1.6s–6.8s; percentages mark the stage boundaries) */
@keyframes pod-clear {
  0%   { fill-opacity: 0.85; }   /* 1.6s: opaque */
  19%  { fill-opacity: 0.4; }    /* 2.6s: wings show through */
  25%  { fill-opacity: 0.33; }   /* 2.9s: split at the bottom */
  35%  { fill-opacity: 0.26; }   /* 3.4s: lump out */
  50%  { fill-opacity: 0.18; }   /* 4.2s: lump at full size */
  62%  { fill-opacity: 0.12; }   /* 4.8s: butterfly clinging */
  100% { fill-opacity: 0.05; }   /* 6.8s: clear husk */
}

@keyframes gape-open {
  0%   { opacity: 0.9; transform: scale(0.12, 1); }  /* a sliver — the crack itself */
  100% { opacity: 1; transform: scale(1); }          /* the same zigzag, parted open */
}

/* An oval bundle, shaped like the shell: it stays attached, top half
   inside the gape, and squeezes out growing down and to the right */
@keyframes lump-life {
  0%   { opacity: 0; transform: translate(0, -5px) scale(0.35); }               /* 2.9s: inside the gape */
  25%  { opacity: 1; transform: translate(0, -2px) scale(0.55); }               /* 3.3s: bulging through */
  60%  { opacity: 1; transform: translate(2px, 1px) scale(1.1) rotate(-6deg); } /* 3.8s: half out */
  100% { opacity: 1; transform: translate(5px, 3px) scale(1.8) rotate(-9deg); } /* 4.4s: shell-sized oval, still attached */
}

/* The side view rotates toward the viewer in slow phases: full side →
   three-quarter → narrow → edge-on */
@keyframes side-turn {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.72, 1); }   /* 7.74s: barely turning */
  55%  { transform: scale(0.45, 1); }   /* 8.19s: three-quarter view */
  80%  { transform: scale(0.22, 1); }   /* 8.64s: nearly edge-on */
  100% { transform: scale(0.06, 1); }   /* 9.0s: edge-on */
}

/* The figure appears at the oval's size, wings already well formed —
   they only stretch the last way to full, in one visible spurt */
@keyframes sidewing-grow {
  0%   { transform: scale(0.68); }
  45%  { transform: scale(0.72); }
  65%  { transform: scale(0.88); }
  85%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes fade-away {
  to { opacity: 0; }
}

@keyframes burst-once {
  0%   { opacity: 0; transform: scale(0.4); }
  40%  { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* The open-winged butterfly starts where the side-view figure hangs
   (lower-right of the husk) and rises to center as it takes over. */
@keyframes hatch {
  0%   { opacity: 0; transform: translate(6px, 14px) scale(0.65); }  /* 8.6s: over the turning side view */
  25%  { opacity: 1; transform: translate(5px, 11px) scale(0.72); }  /* wings parting */
  100% { opacity: 1; transform: translate(0, 0) scale(1); }          /* 10.2s: centered, husk gone */
}

/* The frontal wings open gradually, completing the rotation the side
   view began, with a small overshoot at the end */
@keyframes wing-open {
  0%   { transform: scaleX(0.1); }    /* edge-on, matching the side view */
  30%  { transform: scaleX(0.28); }
  60%  { transform: scaleX(0.7); }
  80%  { transform: scaleX(1.06); }
  100% { transform: scaleX(1); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Intro finished (or fast-forwarded by scrolling): jump to final states.
   Must out-specify the .js.motion pre-intro rules above. */
.js.motion.intro-done .chrysalis { animation: none; opacity: 0; }
.js.motion.intro-done .burst     { animation: none; opacity: 0; }
.js.motion.intro-done .mark .butterfly { animation: none; opacity: 1; }
.js.motion.intro-done .hero-title,
.js.motion.intro-done .tagline,
.js.motion.intro-done .scroll-cue { animation: none; opacity: 1; transform: none; }

/* After handoff the flight butterfly replaces the hero one */
.mark.handed-off .butterfly { opacity: 0 !important; }

/* ---- Sections ---- */

.section {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(6rem, 14vh, 10rem) 1.5rem;
}

.section-wide { max-width: 960px; }

.section h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
  background: linear-gradient(120deg, var(--fg) 30%, var(--accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--fg);
  max-width: 56ch;
  margin-bottom: 3rem;
}

.section p + p { margin-top: 1.2rem; }

.section > p:not(.lede) {
  color: var(--muted);
  max-width: 60ch;
}

/* ---- Cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

.card {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface);
  padding: 1.8rem 1.6rem;
  transition: transform 0.4s var(--ease-out-expo),
              background 0.4s ease,
              border-color 0.4s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card:hover {
  transform: translateY(-4px);
  background: var(--surface-hover);
  border-color: rgba(184, 164, 255, 0.25);
}

.card:hover::before { opacity: 0.8; }

.card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
}

.card p {
  font-size: 0.95rem;
  color: var(--muted);
}

/* ---- Why Chrysalia (chrysanthemums + gold) ---- */

.section-why {
  position: relative;
  overflow: hidden;
  max-width: none;          /* full-bleed backdrop for the flowers */
}

.section-why .why-inner {
  max-width: 760px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.section-why h2 {
  background: linear-gradient(120deg, var(--fg) 15%, var(--gold) 60%, var(--accent) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.etymology {
  margin-top: 2.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.etymology .greek {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: none;
}

.mums {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mum {
  position: absolute;
  height: auto;
  will-change: transform;
}

/* Below 1100px there is no side margin next to the text column, so the
   flowers live in the vertical padding bands above/below the text —
   never on top of it. The section grows to give them room. */
.section-why {
  padding-top: clamp(12rem, 26vh, 16rem);
  padding-bottom: clamp(11rem, 24vh, 15rem);
}

.mum-a {
  width: 170px;
  top: 1.2rem;
  left: calc(50% - 150px);
  opacity: 0.45;
}

.mum-b {
  width: 120px;
  bottom: 1rem;
  left: calc(50% + 10px);
  opacity: 0.35;
}

/* Wide screens: real side margins exist, so the flowers flank the
   column, anchored to it (right edge stays clear of the text). */
@media (min-width: 1100px) {
  .section-why {
    padding-top: clamp(6rem, 14vh, 10rem);
    padding-bottom: clamp(6rem, 14vh, 10rem);
  }
  .mum-a {
    width: 320px;
    top: 4%;
    left: calc(50% - 720px);
    opacity: 0.5;
  }
  .mum-b {
    width: 220px;
    bottom: 6%;
    left: calc(50% + 400px);
    opacity: 0.35;
  }
}

/* Bloom: rings scale up (inner first) when the section reveals */
.mum .ring {
  transform-box: fill-box;
  transform-origin: center;
}

.js.motion .mum .ring {
  transform: scale(0.2) rotate(-24deg);
  opacity: 0;
  transition: transform 1.2s var(--ease-out-expo), opacity 0.9s ease;
}

.js.motion .mum .r3 { transition-delay: 0s; }
.js.motion .mum .r2 { transition-delay: 0.15s; }
.js.motion .mum .r1 { transition-delay: 0.3s; }

.js.motion .section-why.in-view .mum .ring {
  transform: none;
  opacity: 1;
}

/* ---- Particles (JS-populated; hidden without motion) ---- */

.petal-field,
.mote-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

.motion .petal-field,
.motion .mote-field { display: block; }

.petal {
  position: absolute;
  top: -30px;
  left: var(--x0);
  animation: petal-fall var(--dur) linear var(--delay) infinite;
}

@keyframes petal-fall {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: var(--op); }
  85%  { opacity: var(--op); }
  100% { transform: translateY(var(--fall)); opacity: 0; }
}

.petal .sway {
  animation: petal-sway var(--sway-dur) ease-in-out var(--delay) infinite alternate;
}

@keyframes petal-sway {
  from { transform: translateX(calc(-1 * var(--drift))); }
  to   { transform: translateX(var(--drift)); }
}

.petal svg {
  display: block;
  width: var(--size);
  height: var(--size);
  animation: petal-spin calc(var(--dur) * 0.8) linear var(--delay) infinite;
}

@keyframes petal-spin {
  to { transform: rotate(var(--spin)); }
}

.mote {
  position: absolute;
  bottom: -20px;
  left: var(--x0);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  animation: mote-rise var(--dur) linear var(--delay) infinite;
}

@keyframes mote-rise {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: var(--op); }
  80%  { opacity: var(--op); }
  100% { transform: translateY(calc(-1 * var(--fall))); opacity: 0; }
}

/* ---- Founders ---- */

.founder { text-align: center; }

.avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.2rem;
}

.avatar svg { width: 100%; height: 100%; }

.avatar text {
  font-family: inherit;
  font-weight: 600;
  font-size: 20px;
  fill: var(--muted);
}

.founder .role {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

/* ---- Footer ---- */

.footer {
  text-align: center;
  padding: 4rem 1.5rem 3rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--muted);
  font-size: 0.9rem;
}

.footer .glyph {
  width: 34px;
  height: 34px;
  margin: 0 auto 1.2rem;
  display: block;
}

/* Written out rather than a mailto link, to keep scrapers off it */
.footer .contact {
  color: var(--accent);
  font-size: 0.95rem;
  margin-top: 0;
}

.footer p { margin-top: 0.8rem; font-size: 0.8rem; }

/* ---- Scroll reveals ---- */

.js.motion .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.js.motion .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ---- Reduced motion: static everything (kept last so it wins) ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto; }
  .flight-layer, .petal-field, .mote-field { display: none !important; }
  .chrysalis { opacity: 0 !important; }
  .mark .butterfly { opacity: 1 !important; }
  .burst { opacity: 0 !important; }
  .hero-title, .tagline, .scroll-cue { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .mum .ring { transform: none !important; opacity: 1 !important; }
}