/* ============================================================
   EVERHATCH — Brand option system (client review)
   3 logo/type systems x palettes, driven by
   [data-brand] and [data-palette] on <html>.
   ============================================================ */

/* ---------------- TYPE SYSTEMS (1:1 with logo option) ---------------- */

/* Option 1 — Chivo + Inter (site default) */
[data-brand="opt1"] {
  --f-display: 'Chivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --brand-display-weight: 900;
  --brand-display-transform: none;
  --brand-display-tracking: -0.02em;
  --brand-body-weight: 400;
  --brand-radius: 3px;
  --brand-radius-btn: 3px;
  --brand-rule-w: 2px;
  --lh-tight: 1.06;
  --lh-snug: 1.14;
  --fs-hero: clamp(2.7rem, 6.4vw, 5.6rem);
  --fs-d2: clamp(2.1rem, 4vw, 3.5rem);
  --fs-d3: clamp(1.6rem, 2.5vw, 2.2rem);
}

/* Option 2 — Nexa + Josefin Sans */
[data-brand="opt2"] {
  --f-display: 'Nexa', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
  --brand-display-weight: 900;
  --brand-display-transform: uppercase;
  --brand-display-tracking: 0;
  --brand-body-weight: 400;
  --brand-radius: 6px;
  --brand-radius-btn: 999px;
  --brand-rule-w: 2px;
  --lh-tight: 1.08;
  --lh-snug: 1.16;
  --fs-hero: clamp(2.5rem, 6vw, 5.2rem);
  --fs-d2: clamp(2rem, 3.8vw, 3.3rem);
  --fs-d3: clamp(1.55rem, 2.4vw, 2.1rem);
  --lh-body: 1.7;
}

/* Option 3 — Carmen Sans + Quicksand */
[data-brand="opt3"] {
  --f-display: 'Carmen Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
  --brand-display-weight: 700;
  --brand-display-transform: none;
  --brand-display-tracking: -0.015em;
  --brand-body-weight: 400;
  --brand-radius: 14px;
  --brand-radius-btn: 999px;
  --brand-rule-w: 1.5px;
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --fs-hero: clamp(2.5rem, 5.8vw, 5rem);
  --fs-d2: clamp(2rem, 3.7vw, 3.2rem);
  --fs-d3: clamp(1.55rem, 2.4vw, 2.1rem);
  --lh-body: 1.7;
}

/* ---------------- PALETTES ---------------- */
/* Each sets the core tokens the whole site already consumes. */

/* --- Option 1 palettes --- */

/* 1A · Spruce + bone + brass (the original interim palette, now the last option) */
[data-palette="o1-current"] {
  --spruce-950: #0B1310; --spruce-900: #101C17; --spruce-850: #132219;
  --spruce-800: #16281F; --spruce-700: #1F3A2D; --spruce-600: #2C5240;
  --spruce-500: #3E6E57; --spruce-400: #5E8A72;
  --bone-0: #FAF7F0; --bone-50: #F5F1E6; --bone-100: #EDE7D7;
  --bone-200: #E0D8C2; --bone-300: #CFC4A8;
  --brass-200: #F0D79E; --brass-300: #E7C071; --brass-400: #D5A342;
  --brass-500: #B98A2E; --brass-600: #8A6210;
  --ink: #17211B; --ink-soft: #3D4A42; --ink-mute: #67746B;
  --paper-text: #EDE8DA; --paper-soft: #B9C2B4; --paper-mute: #7E8B7F;
  --brand-mark-bg: #D5A342; --brand-mark-fg: #0B1310;
  --on-brass: #0B1310; --on-brass-soft: #16281F;
  --accent-on-dark: var(--brass-300);
}

/* 1B · Forest green + orange (deck pg 2 / mockup pg 9) — SITE DEFAULT */
[data-palette="o1-forest"] {
  --spruce-950: #0C3B26; --spruce-900: #10492F; --spruce-850: #135334;
  --spruce-800: #165C3A; --spruce-700: #1B6B47; --spruce-600: #237A52;
  --spruce-500: #2F8F62; --spruce-400: #4CA87C;
  --bone-0: #FFFFFF; --bone-50: #F7F5EF; --bone-100: #EFEBE0;
  --bone-200: #E2DCCB; --bone-300: #CDC5AF;
  --brass-200: #FFD9A0; --brass-300: #FBBF63; --brass-400: #F5A623;
  --brass-500: #DC8F12; --brass-600: #A96A08;
  --ink: #10281C; --ink-soft: #34493C; --ink-mute: #5F7268;
  --paper-text: #F3F1E9; --paper-soft: #C5D6CB; --paper-mute: #A8BCAF;
  --brand-mark-bg: #F5A623; --brand-mark-fg: #10492F;
  --on-brass: #0C2418; --on-brass-soft: #14361F;
  --accent-on-dark: var(--brass-300);
}

/* 1C · Navy + pale citron (deck pg 2, middle) */
[data-palette="o1-navy"] {
  --spruce-950: #14123F; --spruce-900: #1B1852; --spruce-850: #201C5E;
  --spruce-800: #251F69; --spruce-700: #2F2880; --spruce-600: #3B3399;
  --spruce-500: #4E45B5; --spruce-400: #7169CC;
  --bone-0: #FDFEE8; --bone-50: #F7F9D6; --bone-100: #F2F79E;
  --bone-200: #E4EA84; --bone-300: #CBD268;
  --brass-200: #FBFFBE; --brass-300: #F2F79E; --brass-400: #E3EB6A;
  --brass-500: #C3CB44; --brass-600: #8E9422;
  --ink: #14123F; --ink-soft: #35315E; --ink-mute: #5C5880;
  --paper-text: #F7F9E4; --paper-soft: #C2C0E0; --paper-mute: #8C89B4;
  --brand-mark-bg: #F2F79E; --brand-mark-fg: #1B1852;
  --on-brass: #14123F; --on-brass-soft: #251F69;
  --accent-on-dark: var(--brass-300);
}

/* 1D · Terracotta + cream (deck pg 2, right) */
[data-palette="o1-terra"] {
  --spruce-950: #4A1F12; --spruce-900: #5C2818; --spruce-850: #6B2E1C;
  --spruce-800: #7A3520; --spruce-700: #97452B; --spruce-600: #B15738;
  --spruce-500: #D2694A; --spruce-400: #E08A70;
  --bone-0: #FFFDFA; --bone-50: #FBF5EE; --bone-100: #F4EADF;
  --bone-200: #E9D9C8; --bone-300: #D8C2AC;
  --brass-200: #F6C6B0; --brass-300: #EBA083; --brass-400: #B4482A;
  --brass-500: #963A1F; --brass-600: #8A3B25;
  --ink: #33170D; --ink-soft: #5A3527; --ink-mute: #856152;
  --paper-text: #FDF3EC; --paper-soft: #E8C6B6; --paper-mute: #D6AE9D;
  --brand-mark-bg: #D2694A; --brand-mark-fg: #FFFDFA;
  --on-brass: #FFFDFA; --on-brass-soft: #FBEDE6;
  --accent-on-dark: var(--brass-300);
}

/* --- Option 2 palettes --- */

/* 2A · Charcoal + orange (deck pg 3, centre) */
[data-palette="o2-charcoal"] {
  --spruce-950: #1E1E1E; --spruce-900: #2B2B2B; --spruce-850: #333333;
  --spruce-800: #3A3A3A; --spruce-700: #4A4A4A; --spruce-600: #5C5C5C;
  --spruce-500: #737373; --spruce-400: #8F8F8F;
  --bone-0: #FFFFFF; --bone-50: #F7F6F4; --bone-100: #EEECE8;
  --bone-200: #E0DDD7; --bone-300: #C9C5BC;
  --brass-200: #FFC7A3; --brass-300: #FF9C63; --brass-400: #FF6B2C;
  --brass-500: #E2551A; --brass-600: #AE3F10;
  --ink: #1E1E1E; --ink-soft: #444444; --ink-mute: #6E6E6E;
  --paper-text: #F5F4F1; --paper-soft: #C4C1BB; --paper-mute: #A5A29B;
  --brand-mark-bg: #FF6B2C; --brand-mark-fg: #FFFFFF;
  --on-brass: #1A1A1A; --on-brass-soft: #242424;
  --accent-on-dark: var(--brass-300);
}

/* 2B · Amber gradient family (deck pg 3, left) */
[data-palette="o2-amber"] {
  --spruce-950: #6B3B02; --spruce-900: #82480A; --spruce-850: #915110;
  --spruce-800: #A05A15; --spruce-700: #BE6D1C; --spruce-600: #DC8420;
  --spruce-500: #F09A2B; --spruce-400: #F7B45C;
  --bone-0: #FFFDF8; --bone-50: #FEF7EA; --bone-100: #FBEDD6;
  --bone-200: #F4DDB8; --bone-300: #E6C795;
  --brass-200: #FFE0B0; --brass-300: #FCC46F; --brass-400: #F5A623;
  --brass-500: #D98A12; --brass-600: #A56508;
  --ink: #3A2000; --ink-soft: #5E3C13; --ink-mute: #8A6636;
  --paper-text: #FFF6E7; --paper-soft: #F0D3A8; --paper-mute: #E8D5B4;
  --brand-mark-bg: #FFFFFF; --brand-mark-fg: #F5A623;
  --on-brass: #3A2000; --on-brass-soft: #472B05;
  --accent-on-dark: var(--brass-300);
}

/* 2C · Bright orange + white (deck pg 3, right) */
[data-palette="o2-blaze"] {
  --spruce-950: #571D00; --spruce-900: #6E2705; --spruce-850: #82300A;
  --spruce-800: #96380E; --spruce-700: #D8511A; --spruce-600: #F05F20;
  --spruce-500: #FF7A3D; --spruce-400: #FF9A6B;
  --bone-0: #FFFFFF; --bone-50: #FFF7F2; --bone-100: #FFEADF;
  --bone-200: #FCD7C4; --bone-300: #F2BCA1;
  --brass-200: #FFD2B8; --brass-300: #FFA678; --brass-400: #FF6B2C;
  --brass-500: #E15318; --brass-600: #A93C0C;
  --ink: #331100; --ink-soft: #5C2D14; --ink-mute: #8C5B3C;
  --paper-text: #FFF4EC; --paper-soft: #FBCDB2; --paper-mute: #EFC9B4;
  --brand-mark-bg: #FFFFFF; --brand-mark-fg: #FF6B2C;
  --on-brass: #2B0E00; --on-brass-soft: #421702;
  --accent-on-dark: #FFBE9A;
}

/* --- Option 3 palettes --- */

/* 3A · Green + white (deck pg 4 / mockup pg 13) */
[data-palette="o3-green"] {
  --spruce-950: #14400F; --spruce-900: #1B5215; --spruce-850: #1F5D18;
  --spruce-800: #23681B; --spruce-700: #2C7A22; --spruce-600: #35902A;
  --spruce-500: #46A838; --spruce-400: #6DC060;
  --bone-0: #FFFFFF; --bone-50: #F6F9F5; --bone-100: #EAF1E8;
  --bone-200: #D8E5D5; --bone-300: #BCCFB8;
  --brass-200: #C8E9BE; --brass-300: #92D482; --brass-400: #2C7A22;
  --brass-500: #23681B; --brass-600: #23681B;
  --ink: #14260F; --ink-soft: #3A4C35; --ink-mute: #66765F;
  --paper-text: #F2F8F0; --paper-soft: #C0D8BA; --paper-mute: #A6C39F;
  --brand-mark-bg: #2C7A22; --brand-mark-fg: #FFFFFF;
  --on-brass: #FFFFFF; --on-brass-soft: #EAF6E6;
  --accent-on-dark: var(--brass-300);
}

/* 3B · Charcoal + white (deck pg 4, centre) */
[data-palette="o3-slate"] {
  --spruce-950: #232323; --spruce-900: #2F2F2F; --spruce-850: #383838;
  --spruce-800: #404040; --spruce-700: #525252; --spruce-600: #666666;
  --spruce-500: #7D7D7D; --spruce-400: #9B9B9B;
  --bone-0: #FFFFFF; --bone-50: #F8F8F7; --bone-100: #EFEFEE;
  --bone-200: #E1E1DF; --bone-300: #C7C7C4;
  --brass-200: #D9D9D6; --brass-300: #A8A8A4; --brass-400: #3F3F3F;
  --brass-500: #2F2F2F; --brass-600: #232323;
  --ink: #232323; --ink-soft: #494949; --ink-mute: #737373;
  --paper-text: #F6F6F5; --paper-soft: #C6C6C3; --paper-mute: #A6A6A2;
  --brand-mark-bg: #2F2F2F; --brand-mark-fg: #FFFFFF;
  --on-brass: #FFFFFF; --on-brass-soft: #E8E8E6;
  --accent-on-dark: var(--brass-300);
}

/* 3C · Amber + white (deck pg 4, right) */
[data-palette="o3-amber"] {
  --spruce-950: #2A1E00; --spruce-900: #3D2C04; --spruce-850: #48340A;
  --spruce-800: #533C0E; --spruce-700: #6B4E14; --spruce-600: #86621C;
  --spruce-500: #A87D28; --spruce-400: #C79A45;
  --bone-0: #FFFFFF; --bone-50: #FDF9EF; --bone-100: #FAF1DC;
  --bone-200: #F1E2BF; --bone-300: #E0CD9C;
  --brass-200: #FFE7B4; --brass-300: #FBD077; --brass-400: #F0B32B;
  --brass-500: #D2991A; --brass-600: #9E720C;
  --ink: #3A2A00; --ink-soft: #5E4813; --ink-mute: #8A7236;
  --paper-text: #FFFAEC; --paper-soft: #F0DDAE; --paper-mute: #C9B48A;
  --brand-mark-bg: #F0B32B; --brand-mark-fg: #FFFFFF;
  --on-brass: #2A1E00; --on-brass-soft: #3D2C04;
  --accent-on-dark: var(--brass-300);
}

/* ---------------- LIGHT-TOUCH GEOMETRY ---------------- */

[data-brand] .d1, [data-brand] .d2, [data-brand] .d3, [data-brand] .h4 {
  font-weight: var(--brand-display-weight);
  text-transform: var(--brand-display-transform);
  letter-spacing: var(--brand-display-tracking);
}
[data-brand] body { font-weight: var(--brand-body-weight); }
[data-brand] .lede { font-weight: calc(var(--brand-body-weight) + 100); }

[data-brand] .btn { border-radius: var(--brand-radius-btn); }
[data-brand] .field-note, [data-brand] .form-card, [data-brand] .rpt-card,
[data-brand] .std-doc, [data-brand] .info-card, [data-brand] .check-grid,
[data-brand] .inc-list, [data-brand] .faq, [data-brand] .post-card,
[data-brand] .mega-hero, [data-brand] .area-map, [data-brand] .hf-cell {
  border-radius: var(--brand-radius);
}
[data-brand] .split figure img, [data-brand] .about-img img,
[data-brand] .fig-fill img, [data-brand] .rpt-card-img img {
  border-radius: var(--brand-radius);
}
[data-brand="opt3"] .eyebrow,
[data-brand="opt2"] .eyebrow { border-radius: var(--brand-radius); overflow: hidden; }

/* softer options lighten the heavy 2px rules */
[data-brand="opt3"] { --rule: var(--brand-rule-w) solid var(--ink); }

/* option 3: highlight reads as a soft pill rather than a hard marker block */
[data-brand="opt3"] .d1 em, [data-brand="opt3"] .d2 em, [data-brand="opt3"] .d3 em {
  border-radius: 6px; padding: 0 .18em;
}
[data-brand="opt2"] .d1 em, [data-brand="opt2"] .d2 em, [data-brand="opt2"] .d3 em {
  border-radius: 4px;
}

/* ---------------- LOGOS (client vectors, currentColor) ---------------- */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; color: inherit; }
.brand-logo .lockup-svg { display: block; height: 34px; width: auto; }
.logo-o2 .lockup-svg { height: 40px; }
.logo-o3 .lockup-svg { height: 38px; }
.ft-brand .brand-logo .lockup-svg { height: 46px; }
.ft-brand .logo-o2 .lockup-svg { height: 54px; }
@media (max-width: 560px) { .brand-logo .lockup-svg { height: 28px; } .logo-o2 .lockup-svg { height: 32px; } }

/* hero stamp: the real mark of the active option sits inside the ring */
.stamp .sm { display: none; }
.stamp .sm-o1 { display: block; }
[data-brand="opt2"] .stamp .sm-o1, [data-brand="opt3"] .stamp .sm-o1 { display: none; }
[data-brand="opt2"] .stamp .sm-o2 { display: block; }
[data-brand="opt3"] .stamp .sm-o3 { display: block; }

/* ---------------- REVIEW CONTROLS ---------------- */
.brand-switch {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
  font-family: ui-monospace, Menlo, monospace;
}
.bs-panel {
  background: #0B1310; color: #EDE8DA;
  border: 1.5px solid rgba(237,232,218,.28);
  border-radius: 4px;
  padding: .85rem .95rem;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  min-width: 15.5rem;
}
.bs-row + .bs-row { margin-top: .8rem; }
.bs-label {
  font-size: .62rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #7E8B7F; display: block; margin-bottom: .42rem;
}
.bs-select {
  width: 100%; appearance: none;
  background: #16281F; color: #EDE8DA;
  border: 1.5px solid rgba(237,232,218,.3); border-radius: 3px;
  font-family: inherit; font-size: .78rem; font-weight: 500;
  padding: .5rem 1.9rem .5rem .6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23D5A342' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 11px;
}
.bs-select:focus-visible { outline: 2px solid #D5A342; outline-offset: 1px; }
.bs-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.bs-sw {
  width: 1.6rem; height: 1.6rem; border-radius: 3px; cursor: pointer;
  border: 1.5px solid rgba(237,232,218,.35); padding: 0;
  position: relative; transition: transform .15s;
}
.bs-sw:hover { transform: translateY(-2px); }
.bs-sw[aria-pressed="true"] { border-color: #D5A342; border-width: 2.5px; }
.bs-sw span {
  position: absolute; inset: auto 0 0 0; height: 40%;
  border-radius: 0 0 1px 1px;
}
.bs-toggle {
  background: #D5A342; color: #0B1310;
  border: 0; border-radius: 4px;
  font-family: inherit; font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem .9rem; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.brand-switch[data-open="false"] .bs-panel { display: none; }
@media (max-width: 640px) {
  .brand-switch { right: .75rem; bottom: .75rem; }
  .bs-panel { min-width: 13rem; }
}
@media print { .brand-switch { display: none; } }


/* ---------------- SECTION 06 · BRAND ANIMATIONS (scroll-scrubbed) ---------------- */
[data-brand] .about-img img, [data-brand] .about-img figcaption { display: none; }
.brand-stage { display: none; position: absolute; inset: 0; overflow: visible; color: var(--ink); }
[data-brand="opt1"] .stage-egg, [data-brand="opt2"] .stage-fox, [data-brand="opt3"] .stage-frames { display: block; }
.stage-svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: min(122%, 900px); width: auto; max-width: 100%; overflow: visible; }
.stage-egg .stage-svg { height: min(156%, 1150px); }          /* egg reads ~28% larger than the other marks */
@media (max-width: 900px) { .stage-svg { height: 108%; } .stage-egg .stage-svg { height: 136%; } }

/* --- egg (opt1) --- */
.egg-fill    { fill: var(--bone-0); }
.egg-band    { fill: var(--ink); }
.egg-line    { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.egg-crack   { fill: none; stroke: var(--brass-400); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round;
               stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0; }
.eh-wall, .eh-chimney, .eh-door { fill: var(--bone-0); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.eh-door     { fill: var(--ink); }
.eh-roof     { fill: var(--brass-400); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.eh-win      { fill: var(--bone-100); stroke: var(--ink); stroke-width: 4; }
.eh-winbar   { fill: none; stroke: var(--ink); stroke-width: 3; }
.eh-star     { fill: var(--brass-400); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.eh-smoke    { fill: none; stroke: var(--ink-mute); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.egg-group   { transform-box: fill-box; transform-origin: 50% 100%; }
.egg-house-in{ transform: translateY(300px); }
.egg-top-l, .egg-top-r { transform-box: fill-box; }
.egg-top-l   { transform-origin: 100% 100%; }
.egg-top-r   { transform-origin: 0% 100%; }
.is-live .egg-group    { animation: eggWobble 1.7s cubic-bezier(.36,.07,.19,.97) both; }
.is-live .egg-crack    { animation: eggCrack .6s ease-out 1.6s both; }
.is-live .egg-top-l    { animation: shellL .85s cubic-bezier(.3,.6,.4,1) 2.45s both; }
.is-live .egg-top-r    { animation: shellR .85s cubic-bezier(.3,.6,.4,1) 2.5s both; }
.is-live .egg-house-in { animation: houseRise 1s cubic-bezier(.22,1.2,.36,1) 2.7s both; }
.is-live .eh-win       { animation: winLight .35s ease-out 3.8s both; }
.is-live .eh-star      { animation: starPop .35s cubic-bezier(.34,1.56,.64,1) 3.85s both, starTwinkle 2.6s ease-in-out 4.25s infinite; }
.is-live .eh-smoke-1   { animation: smokeRise 3.2s ease-out 4.0s infinite; }
.is-live .eh-smoke-2   { animation: smokeRise 3.2s ease-out 5.6s infinite; }
@keyframes eggWobble { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-4deg) } 55% { transform: rotate(4deg) } 80% { transform: rotate(-2.5deg) } }
@keyframes eggCrack  { 0% { stroke-dashoffset: 300; opacity: 1 } 80% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes shellL    { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(-70px,-130px) rotate(-26deg); opacity: 0 } }
@keyframes shellR    { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(70px,-130px) rotate(26deg); opacity: 0 } }
@keyframes houseRise { 0% { transform: translateY(300px) } 100% { transform: translateY(-96px) } }
@keyframes winLight  { 0% { fill: var(--bone-100) } 100% { fill: var(--brass-300) } }
@keyframes starPop   { 0% { transform: scale(0) rotate(-40deg) } 100% { transform: scale(1) rotate(0) } }
@keyframes starTwinkle { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@keyframes smokeRise { 0% { opacity: 0; transform: translateY(0) } 15% { opacity: .7 } 100% { opacity: 0; transform: translateY(-60px) } }

/* --- fox (opt2) --- */
.fm-word { transform: translateY(8px); }
.fm-final { fill: var(--ink); }

/* --- frames (opt3) --- */
.fr-frame path { fill: var(--spruce-600); fill-opacity: .82; }
.fr-frame { transform-box: fill-box; transform-origin: center; }
.fr-lab text { font-family: var(--f-body); font-size: 8.5px; font-weight: 700; letter-spacing: .14em; fill: var(--ink-mute); }
.fr-lab { opacity: 0; }
.fr-word { opacity: 0; }
.is-live .fr-1 { animation: frFly1 1.5s cubic-bezier(.2,.8,.2,1) 0s both; }
.is-live .fr-2 { animation: frFly2 1.5s cubic-bezier(.2,.8,.2,1) .55s both; }
.is-live .fr-3 { animation: frFly3 1.5s cubic-bezier(.2,.8,.2,1) 1.1s both; }
.is-live .fr-lab-1 { animation: frLab 2.3s linear .2s both; }
.is-live .fr-lab-2 { animation: frLab 2.3s linear .75s both; }
.is-live .fr-lab-3 { animation: frLab 2.3s linear 1.3s both; }
.is-live .fr-stack { animation: frSettle .6s cubic-bezier(.34,1.4,.64,1) 2.7s both; transform-box: fill-box; transform-origin: center; }
.is-live .fr-word  { animation: frWord .7s cubic-bezier(.22,1,.36,1) 3.3s both; }
@keyframes frFly1 { 0% { transform: translate(-120px,-80px) rotate(-14deg); opacity: 0 } 25% { opacity: 1 } 100% { transform: none; opacity: 1 } }
@keyframes frFly2 { 0% { transform: translate(140px,10px) rotate(10deg); opacity: 0 } 25% { opacity: 1 } 100% { transform: none; opacity: 1 } }
@keyframes frFly3 { 0% { transform: translate(-110px,90px) rotate(12deg); opacity: 0 } 25% { opacity: 1 } 100% { transform: none; opacity: 1 } }
@keyframes frLab  { 0% { opacity: 0 } 15% { opacity: 1 } 80% { opacity: 1 } 100% { opacity: 0 } }
@keyframes frSettle { 0% { transform: scale(1) } 40% { transform: scale(1.06) } 100% { transform: scale(1) } }
@keyframes frWord { 0% { opacity: 0; transform: translateY(10px) } 100% { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  .egg-top-l, .egg-top-r, .egg-crack { display: none; }
  .egg-house-in { transform: translateY(-96px); }
  .eh-star { transform: scale(1); }
  .fm-strokes { display: none; } .fm-final, .fm-word { opacity: 1 !important; }
  .fr-word { opacity: 1; }
  .is-live * { animation: none !important; }
}