/* =========================================================================
   Feal — marketing site
   One stylesheet, no build step. Dark only. Hierarchy from size + color,
   never weight (the app does not bold; only the wordmark reaches 600).

   Contents
     1. Fonts            (@font-face, self-hosted WOFF2, SIL OFL — see fonts/OFL.txt)
     2. Tokens           (:root custom properties — color, type, space, layout)
     3. Reset / base
     4. Layout           (.wrap, .section, .divider)
     5. Type utilities   (.label, .display, .body, .voice, .wordmark)
     6. Components        (nav, constellation, orb, glow-dot, phone, compass,
                           timeline, insight-card, pill, link, isnt-list, footer)
     7. Motion           (welling-up, gated by prefers-reduced-motion)
     8. Media queries     (the one real breakpoint)
     9. A11y fallbacks    (reduced-transparency, forced-colors)
   ========================================================================= */

/* 1. Fonts ---------------------------------------------------------------- */
/* Self-hosted to avoid a third-party request and match the app's exact
   Fraunces variable axes. Google Fonts is the documented fallback: replace
   these four blocks with the equivalent <link> tags if ever needed. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-var.woff2") format("woff2");
  font-weight: 100 900; /* variable wght axis */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Same family, italic style — italic is the app's gentle voice. */
  font-family: "Lora";
  src: url("fonts/Lora-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* Surfaces (from the app's ColorSemantics) */
  --base: #0d0c0b;          /* screen background */
  --subtle: #131210;        /* card surface (insight card sits here in-app) */
  --surface: #1a1916;       /* raised surface */

  /* Text */
  --text-primary: #eae7e0;  /* ~13.9:1 on base */
  --text-secondary: #b5b0a6;/* ~8.0:1 — default body */
  --text-tertiary: #706b62; /* ~3.3:1 — LARGE or decorative text ONLY */
  --text-tertiary-web: #928d83; /* ~4.6:1 — small tertiary text (AA-safe) */

  /* Accent — amber. CTA + focus rings only, never a mood color. */
  --accent: #c2842a;        /* ~5.6:1 on base */

  /* The five emotions. 500 = atmosphere/glow; 600 = dot core. */
  --anger-500: #c44e25;      --anger-600: #d96840;
  --fear-500: #1f5e74;       --fear-600: #317a93;
  --sadness-500: #513d9b;    --sadness-600: #7256b5;
  --resistance-500: #535e32; --resistance-600: #6d7a46;
  --enjoyment-500: #9b6318;  --enjoyment-600: #c2842a;

  /* Legible text tints of each emotion — brighter than the pip core so the
     names read as the same hue while staying readable on the dark base. */
  --anger-text: #e0795a;
  --fear-text: #56a6c2;
  --sadness-text: #9d83da;
  --resistance-text: #9aa867;
  --enjoyment-text: #d9a855;

  /* Lines */
  --divider: rgba(255, 255, 255, 0.06);

  /* Families */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, serif;
  --font-label: "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale — clamp(min @ ~360px, fluid, max @ ~560px+) */
  --fs-display: clamp(2rem, 1.30rem + 3.1vw, 2.625rem);   /* 32 -> 42 */
  --fs-hero:    clamp(1.75rem, 1.25rem + 2.2vw, 2.125rem);/* 28 -> 34 */
  --fs-title:   clamp(1.5rem, 1.20rem + 1.3vw, 1.75rem);  /* 24 -> 28 */
  --fs-body-lg: 1.1875rem;  /* 19 */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-body-sm: 1rem;       /* 16 */
  --fs-label:   0.6875rem;  /* 11 */
  --fs-caption: 0.75rem;    /* 12 */

  /* Tracking (em ~ app pt / size) */
  --track-label: 0.16em;
  --track-micro: 0.20em;
  --track-wordmark: 0.28em;

  /* Spacing (4pt grid) */
  --s4: 0.25rem;  --s8: 0.5rem;   --s12: 0.75rem; --s16: 1rem;
  --s24: 1.5rem;  --s32: 2rem;    --s48: 3rem;    --s64: 4rem;

  /* Layout */
  --content-max: 560px;
  --gutter: clamp(1.25rem, 5vw, 1.5rem);
  --section-gap: clamp(4rem, 10vw, 7.5rem);
}

/* 3. Reset / base --------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, p { margin: 0; }

/* Visually hidden but available to assistive tech. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

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

/* 4. Layout --------------------------------------------------------------- */

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); }

.divider {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 0;
}

/* 5. Type utilities ------------------------------------------------------- */

.label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 100, "WONK" 0;
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-wrap: balance;
}
.display--xl    { font-size: var(--fs-display); }
.display--hero  { font-size: var(--fs-hero); }
.display--title { font-size: var(--fs-title); }

.body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-secondary);
}
.body--primary { color: var(--text-primary); }
.body--lg { font-size: var(--fs-body-lg); }

/* The app's gentle voice — italic Lora, never mid-sentence emphasis. */
.voice {
  font-family: var(--font-body);
  font-style: italic;
  line-height: 1.6;
  color: var(--text-secondary);
}
.voice--muted { color: var(--text-tertiary-web); }

/* 6. Components ----------------------------------------------------------- */

/* --- Wordmark (live Fraunces, the one place 600 appears) --- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 100, "WONK" 0;
  font-size: 1.0625rem;
  letter-spacing: var(--track-wordmark);
  color: var(--text-primary);
  text-decoration: none;
  display: inline-block;
  padding-left: 0.04em; /* optical: balance the wide right-side tracking */
}

/* --- Nav --- */
.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s16);
  padding-block: var(--s24);
}
.nav__descriptor {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-tertiary-web);
}

/* --- Glow-dot (mirrors the app's TimelineEntryView pip: 600 core + halo) --- */
.glow-dot {
  --dot: var(--anger-600);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--dot);
  box-shadow:
    0 0 6px 2px color-mix(in srgb, var(--dot) 50%, transparent),
    0 0 16px 6px color-mix(in srgb, var(--dot) 32%, transparent);
  flex: none;
}
.glow-dot--anger      { --dot: var(--anger-600); }
.glow-dot--fear       { --dot: var(--fear-600); }
.glow-dot--sadness    { --dot: var(--sadness-600); }
.glow-dot--resistance { --dot: var(--resistance-600); }
.glow-dot--enjoyment  { --dot: var(--enjoyment-600); }

/* --- Constellation (the brand mark, rebuilt from the Figma logo system) ---
   Five pips at the canonical compass geometry (centers as % of the square,
   from the 1024px logo canvas). Atmospheric: 500 core + large soft halo. */
.constellation {
  position: relative;
  width: clamp(180px, 52vw, 264px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.constellation--sm { width: clamp(120px, 34vw, 168px); }
.constellation__pip {
  position: absolute;
  width: 26.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--c500);
  box-shadow:
    0 0 8px 0 color-mix(in srgb, var(--c500) 70%, transparent),
    0 0 22px 6px color-mix(in srgb, var(--c500) 45%, transparent),
    0 0 56px 22px color-mix(in srgb, var(--c500) 24%, transparent);
}
.constellation__pip--sadness    { left: 50%;   top: 23.1%; --c500: var(--sadness-500); }
.constellation__pip--fear       { left: 75.5%; top: 41.7%; --c500: var(--fear-500); }
.constellation__pip--enjoyment  { left: 65.8%; top: 71.7%; --c500: var(--enjoyment-500); }
.constellation__pip--resistance { left: 34.2%; top: 71.7%; --c500: var(--resistance-500); }
.constellation__pip--anger      { left: 24.5%; top: 41.7%; --c500: var(--anger-500); }

/* --- Orb (warm amber bloom — closing section only) --- */
.orb {
  width: clamp(120px, 34vw, 180px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%,
    rgba(194, 132, 42, 0.50) 0%,
    rgba(194, 132, 42, 0.26) 35%,
    rgba(194, 132, 42, 0) 70%);
  filter: blur(4px);
}

/* --- Hero / closing figure spacing --- */
.figure { margin: 0; }
.figure--center { display: flex; flex-direction: column; align-items: center; }

/* --- Hero --- */
.hero { text-align: center; padding-block: clamp(2.5rem, 8vw, 4.5rem) var(--section-gap); }
.hero__mark { margin-bottom: clamp(1.75rem, 5vw, 2.75rem); }
.hero__title { margin-bottom: var(--s24); white-space: pre-line; }
.hero__sub { font-size: var(--fs-body-lg); margin-bottom: clamp(2rem, 6vw, 2.75rem); }

/* --- Section heads --- */
.section__label { display: block; margin-bottom: var(--s16); text-align: center; }
.section__heading { margin-bottom: var(--s16); text-align: center; }
.section__body { margin-bottom: var(--s32); }
.section--center { text-align: center; }

/* --- Pill (amber outline CTA) --- */
.pill {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.95em 1.6em;
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease;
}
a.pill:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* --- Quiet link --- */
.link-quiet {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
}
.link-quiet:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Phone frame (holds the placeholder app visuals) --- */
.phone {
  width: clamp(220px, 62vw, 290px);
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  border-radius: 34px;
  background: var(--subtle);
  border: 1px solid var(--divider);
  box-shadow: 0 30px 80px -42px rgba(0, 0, 0, 0.85);
  position: relative;
  overflow: hidden;
  padding: var(--s24) var(--s16);
}

/* --- Compass (in-phone pentagon) — same geometry as the mark, with labels --- */
.compass {
  position: absolute;
  inset: 14% 8% auto 8%;
  aspect-ratio: 1;
}
.compass__center {
  position: absolute;
  left: 50%; top: 50%;
  width: 20%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%,
    rgba(194, 132, 42, 0.42) 0%, rgba(194, 132, 42, 0) 70%);
}
.compass__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  width: max-content;
}
.compass__node .glow-dot { width: 0.6rem; height: 0.6rem; }
.compass__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 400, "SOFT" 100, "WONK" 0;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.compass__node--label-above { flex-direction: column-reverse; }
.compass__node--sadness    { left: 50%;   top: 23.1%; }
.compass__node--fear       { left: 75.5%; top: 41.7%; }
.compass__node--enjoyment  { left: 65.8%; top: 71.7%; }
.compass__node--resistance { left: 34.2%; top: 71.7%; }
.compass__node--anger      { left: 24.5%; top: 41.7%; }

/* --- Emotions row (five labeled dots) --- */
.emotion-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 2.75rem);
  margin-bottom: var(--s24);
}
.emotion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s12);
}
.emotion--anger      { --name-color: var(--anger-text); }
.emotion--fear       { --name-color: var(--fear-text); }
.emotion--sadness    { --name-color: var(--sadness-text); }
.emotion--resistance { --name-color: var(--resistance-text); }
.emotion--enjoyment  { --name-color: var(--enjoyment-text); }
.emotion__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 100, "WONK" 0;
  font-size: 1rem;
  color: var(--name-color, var(--text-primary));
}

/* --- Insight card --- */
.insight-card {
  background: var(--subtle);
  border: 1px solid var(--divider);
  border-radius: 18px;
  padding: var(--s24) clamp(1.25rem, 5vw, 1.75rem);
  box-shadow:
    0 0 0 1px rgba(194, 132, 42, 0.10),
    0 0 44px -10px rgba(194, 132, 42, 0.22);
}
.insight-card__head {
  display: flex;
  align-items: center;
  gap: var(--s12);
  margin-bottom: var(--s8);
}
.insight-card__emotion {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 100, "WONK" 0;
  font-size: var(--fs-title);
  color: var(--text-primary);
}
.insight-row { padding-block: var(--s16); border-top: 1px solid var(--divider); }
.insight-row__label { display: block; color: var(--text-primary); margin-bottom: var(--s4); }
.insight-row__text { font-family: var(--font-body); color: var(--text-secondary); }
.insight-row--ask .insight-row__text { font-style: italic; }
.insight-card__link { margin-top: var(--s24); display: block; text-align: center; }

/* --- Reflect timeline (navigational list — never a chart) --- */
.timeline { display: flex; flex-direction: column; gap: var(--s16); }
.timeline__group-label { display: block; margin-bottom: var(--s8); }
.timeline__group { margin-bottom: var(--s16); }
.timeline__row {
  display: flex;
  align-items: baseline;
  gap: var(--s12);
  padding-block: var(--s8);
}
.timeline__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 400, "SOFT" 100, "WONK" 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  flex: none;
}
.timeline__note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline__time {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-tertiary-web);
  margin-inline-start: auto;
  flex: none;
}
.timeline__row .glow-dot { width: 0.55rem; height: 0.55rem; align-self: center; }

/* --- What Feal isn't (line + gloss) --- */
.isnt-list { display: flex; flex-direction: column; gap: var(--s24); margin-bottom: var(--s48); }
.isnt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s24);
  align-items: baseline;
}
.isnt-line { font-family: var(--font-body); color: var(--text-primary); }
.isnt-gloss { font-family: var(--font-body); font-style: italic; color: var(--text-tertiary-web); }

/* --- Footer --- */
.footer {
  padding-block: var(--s48);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s24); }
.footer__link {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-tertiary-web);
  text-decoration: none;
}
.footer__link:hover { color: var(--text-secondary); }

/* --- Prose (philosophy / privacy) --- */
.prose { max-width: var(--content-max); }
.prose h2 { margin-block: var(--s48) var(--s16); }
.prose h3 { margin-block: var(--s32) var(--s8); font-size: var(--fs-body-lg); color: var(--text-primary); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 100, "WONK" 0; }
.prose p { margin-bottom: var(--s16); color: var(--text-secondary); }
.prose .voice { display: block; margin-bottom: var(--s24); }
.prose .voice--primary { color: var(--text-primary); }
.prose ul { color: var(--text-secondary); padding-left: 1.25em; }
.prose li { margin-bottom: var(--s8); }
.prose a { color: var(--accent); }
.page-header { padding-block: var(--s48) var(--s24); }
.page-eyebrow { display: block; margin-bottom: var(--s12); }
.review-note {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--text-tertiary-web);
  border: 1px dashed var(--divider);
  border-radius: 10px;
  padding: var(--s12) var(--s16);
  margin-bottom: var(--s24);
}

/* 7. Motion --------------------------------------------------------------- */
/* Slow, fluid — glows well up and settle. Nothing snaps. */

@keyframes breathe {
  0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.035); }
}
@keyframes breathe-orb {
  0%, 100% { opacity: 0.88; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.constellation__pip { animation: breathe 7s ease-in-out infinite; }
.constellation__pip--fear       { animation-delay: -1.4s; }
.constellation__pip--enjoyment  { animation-delay: -2.8s; }
.constellation__pip--resistance { animation-delay: -4.2s; }
.constellation__pip--anger      { animation-delay: -5.6s; }

.orb { animation: breathe-orb 7s ease-in-out infinite; }

/* No entrance animation. Content visibility must never depend on an animation
   running — the ambient breathe above is safe because its base keyframe is
   already visible. The `.reveal` class is kept in the markup as a styling hook
   in case a future, JS-gated entrance is added. */

/* 8. Media queries -------------------------------------------------------- */
/* The single real breakpoint: stack the line + gloss list on narrow screens. */

@media (max-width: 520px) {
  .isnt-row { grid-template-columns: 1fr; gap: var(--s4); }
}

/* 9. A11y fallbacks ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .constellation__pip { transform: translate(-50%, -50%); opacity: 0.95; }
}

/* When transparency is reduced, drop the blooms but keep solid cores —
   meaning is always carried by the adjacent emotion name, so nothing is lost. */
@media (prefers-reduced-transparency: reduce) {
  .glow-dot,
  .constellation__pip { box-shadow: none; }
  .orb, .compass__center { filter: none; background: var(--accent); opacity: 0.6; }
  .insight-card { box-shadow: 0 0 0 1px var(--divider); }
}

@media (forced-colors: active) {
  .pill { border: 1px solid; }
  .insight-card, .phone { border: 1px solid; }
  .glow-dot, .constellation__pip { box-shadow: none; }
}