/* ------------------------------------------------------------------
   Ask Fenix — askfenix.app

   The same visual system as the app, ported rather than approximated.
   Colour comes from FenixDesign.swift; the eclipse's breath period and
   depth come from FenixOrb.swift (9.0s, 0.022); the section reveal uses
   the Studio card timing (0.5s ease-out, 70ms stagger).

   Two registers, one system. Warm is Fenix and conversation; cool is
   breath, the catalogue and rest. The page descends from one into the
   other, which is the turn the app itself makes.
   ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  --ink: #000;
  --ink-raised: #0b0c0f;

  /* warm — Fenix */
  --cream: #fae6c2;
  --amber-bright: #ffe094;
  --amber: #ffa93d;
  --amber-deep: #b84d12;

  /* cool — breath, the Studio, rest. Measured off the shipping ring. */
  --night-ring: #99b4cc;
  --night-wash: #143366;
  --night-glass-top: #6194e0;
  --night-glass-bottom: #142651;
  --night-title: #edf5ff;
  --night-sub: #a8bcdb;

  /* text roles — the app's named opacities */
  --t-1: rgba(250, 230, 194, 1);
  --t-2: rgba(250, 230, 194, 0.72);
  --t-3: rgba(250, 230, 194, 0.52);
  --t-4: rgba(250, 230, 194, 0.38);

  --c-1: rgba(237, 245, 255, 1);
  --c-2: rgba(237, 245, 255, 0.7);
  --c-3: rgba(237, 245, 255, 0.46);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif;
  --serif: "New York", ui-serif, Georgia, "Times New Roman", serif;

  --s-tight: 8px;
  --s-snug: 12px;
  --s-base: 16px;
  --s-roomy: 24px;
  --s-loose: 32px;
  --s-vast: 48px;
  --s-huge: 96px;

  --page: 1160px;
  --reveal: 0.5s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--t-2);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--s-roomy); }

/* ---------------- type ---------------- */

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 3.4vw, 26px);
  letter-spacing: 0.34em;
  /* Optical centring for BREATHFLOW, measured rather than guessed.
     Two things move the mark off centre and they are easy to conflate:
     letter-spacing adds its 0.34em after the last letter as well, and
     New York's side bearings are not symmetric between B and W. Measured
     on the shipping font at 26px, the ink sits 3.63px left of the centre
     of the advance box. text-indent shifts centred text by HALF its
     value, so correcting 3.63px takes 7.26px — 0.279em.
     For the record: 0.34em leaves it 0.8px right, 0.17em 1.4px left. */
  text-indent: 0.279em;
  text-transform: uppercase;
  color: var(--t-1);
  margin: 0;
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-4);
  margin: 0 0 var(--s-roomy);
}

.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(29px, 5.4vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.008em;
  color: var(--t-1);
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}

.say {
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.56;
  color: var(--t-2);
  max-width: 40ch;
  margin: var(--s-roomy) 0 0;
}

/* ---------------- the eclipse ----------------
   A dark disc with a lit rim, not a glowing sphere. The app replaced the
   solid orb with this; the old site still drew the sphere.
   Breath: 9.0s period, 0.022 depth — FenixOrb's own numbers.        */

.eclipse-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
}

.eclipse {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: #020202;
  box-shadow:
    0 0 0 1.5px rgba(255, 176, 74, 0.92),
    0 0 18px 2px rgba(255, 169, 61, 0.46),
    0 0 52px 8px rgba(255, 169, 61, 0.2),
    0 0 130px 26px rgba(184, 77, 18, 0.17);
  animation: breathe 9s ease-in-out infinite alternate;
  display: grid;
  place-items: center;
}

.eclipse.night {
  box-shadow:
    0 0 0 1.5px rgba(173, 198, 222, 0.9),
    0 0 18px 2px rgba(153, 180, 204, 0.4),
    0 0 52px 8px rgba(120, 156, 200, 0.18),
    0 0 130px 26px rgba(20, 51, 102, 0.4);
}

@keyframes breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.022); }
}


/* ---------------- atmosphere ---------------- */

.atmosphere {
  position: absolute;
  top: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 165vw);
  height: min(1100px, 165vw);
  background: radial-gradient(circle, rgba(184, 77, 18, 0.16) 0%, rgba(184, 77, 18, 0) 62%);
  pointer-events: none;
  z-index: 0;
}
.atmosphere.cool {
  background: radial-gradient(circle, rgba(20, 51, 102, 0.42) 0%, rgba(20, 51, 102, 0) 64%);
}

/* ---------------- sections ---------------- */

section { position: relative; padding: var(--s-huge) 0; }
section > .wrap { position: relative; z-index: 1; }

/* On a phone the 96pt rhythm reads as dead space rather than as air,
   because the stacked column already puts a full device height between
   one idea and the next. */
@media (max-width: 700px) {
  section { padding: var(--s-vast) 0; }
  .duo { gap: var(--s-loose); }
}

.hero { min-height: 92vh; display: grid; align-items: center; padding-top: var(--s-vast); }
.hero .wrap { display: grid; gap: var(--s-vast); justify-items: center; text-align: center; }
.hero .statement { max-width: 16ch; }
.hero .say { margin-inline: auto; }

/* The cool half of the page. */
.cool {
  background: linear-gradient(180deg, #000 0%, #04060a 18%, #04060a 82%, #000 100%);
}
.cool .eyebrow { color: var(--c-3); }
.cool .statement,
.cool .lead-in b { color: var(--c-1); }
.cool .say,
.cool p { color: var(--c-2); }

/* ---------------- centred sections ----------------
   The product imagery all lives in the rail now, so these sections are
   type alone and are composed on the centre line rather than as columns. */

.centred {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
}
.centred .statement { max-width: 20ch; }
.centred .eyebrow { margin-bottom: var(--s-base); }
.centred .needs { justify-items: center; text-align: center; }
.centred .sections { width: 100%; max-width: 520px; text-align: left; }

/* ---------------- the hinge ---------------- */

.needs { display: grid; gap: var(--s-base); margin: var(--s-loose) 0 0; max-width: 34ch; }
.needs li {
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.3;
  color: var(--t-3);
  transition: color 0.6s ease;
}
.needs li.on { color: var(--t-1); }
.needs-note { margin: var(--s-loose) 0 0; color: var(--t-3); max-width: 34ch; }

/* ---------------- two-column feature ---------------- */

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-vast);
  align-items: center;
}
.duo-copy p { margin: var(--s-base) 0 0; max-width: 42ch; }
.duo-shot { justify-self: center; }

@media (min-width: 860px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--s-huge); }
  .duo.flip .duo-copy { order: 2; }
}

/* ---------------- device frame ---------------- */

/* The screens are mostly black by design — an eclipse in a dark field.
   On a phone in your hand that reads as space; as a small image on a
   black page it reads as nothing at all. So the frame has to do the
   separating: a bright hairline bezel, a black gap outside it, and a
   pool of light underneath for the device to sit on. */

.duo-shot,
.rail figure { position: relative; }

.duo-shot::before,
.rail figure::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 150%; height: 118%;
  background: radial-gradient(ellipse, rgba(255, 169, 61, 0.09) 0%, rgba(255, 169, 61, 0) 68%);
  pointer-events: none;
}
.cool .duo-shot::before,
.rail figure::before {
  background: radial-gradient(ellipse, rgba(97, 148, 224, 0.13) 0%, rgba(97, 148, 224, 0) 68%);
}

.device {
  position: relative;
  display: block;
  width: 260px;
  max-width: 72vw;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(250, 230, 194, 0.26);
  box-shadow:
    0 0 0 4px #000,
    0 26px 64px rgba(0, 0, 0, 0.9),
    0 0 52px rgba(255, 169, 61, 0.08);
  background: #000;
}
.device img { display: block; width: 100%; height: auto; }

/* A hairline of light down the top-left edge, so the bezel reads as an
   object rather than as a stroke. */
.device::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 33px;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 34%);
}

.cool .device {
  border-color: rgba(184, 205, 232, 0.3);
  box-shadow:
    0 0 0 4px #000,
    0 26px 64px rgba(0, 0, 0, 0.9),
    0 0 52px rgba(97, 148, 224, 0.13);
}

/* ---------------- the six sections ---------------- */

.sections { display: grid; gap: var(--s-snug); margin: var(--s-loose) 0 0; }

/* Name over description, as the app stacks them. A flex row let the
   description sit inline on wide cards and wrap onto its own line on
   narrow ones, so no two rows agreed with each other. */
.sect {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--s-snug);
  padding: var(--s-base) var(--s-roomy);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(97, 148, 224, 0.2) 0%, rgba(20, 38, 81, 0.36) 100%);
  border: 0.75px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0 4px 26px rgba(46, 87, 158, 0.18);
}
.sect .n { grid-column: 1; grid-row: 1; font-size: 17px; color: var(--night-title); font-weight: 400; }
.sect .d { grid-column: 1; grid-row: 2; font-size: 14px; color: var(--night-sub); }
.sect .soon-tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--night-sub);
  white-space: nowrap;
}
.sect.soon { opacity: 0.55; }
.sect.soon .n, .sect.soon .d { color: var(--night-sub); }

/* ---------------- the rail ---------------- */

.rail-head { margin-bottom: var(--s-loose); }
.rail {
  display: flex;
  gap: var(--s-roomy);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-base) 0 var(--s-loose);
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }

.rail figure {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: grid;
  gap: var(--s-base);
  justify-items: center;
  opacity: 0.5;
  transform: scale(0.96);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.rail figure.near { opacity: 1; transform: scale(1); }
.rail figcaption {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c-3);
  text-align: center;
  max-width: 24ch;
}
.rail .device { width: 244px; }

/* Bigger on a desktop, where this section is the product showcase and
   has a whole screen to itself. Capped at 300 because the screens are
   570x1240 — anything wider is taller than the viewport. */
@media (min-width: 900px) {
  .rail .device { width: 300px; }
}

/* The rail is capped to the content column rather than the viewport.
   Left full-bleed, four cards fit inside a 1280px window and the thing
   silently stopped being a rail on any desktop screen. */
.rail-edge {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--s-roomy);
}
.rail-edge::before,
.rail-edge::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  pointer-events: none;
  z-index: 2;
}
.rail-edge::before { left: 0; background: linear-gradient(90deg, #04060a, rgba(4, 6, 10, 0)); }
.rail-edge::after { right: 0; background: linear-gradient(270deg, #04060a, rgba(4, 6, 10, 0)); }

.progress {
  height: 2px;
  border-radius: 999px;
  background: rgba(168, 188, 219, 0.14);
  overflow: hidden;
  max-width: 260px;
}
.progress span {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 999px;
  background: var(--night-ring);
  transition: transform 0.12s linear;
}

/* ---------------- the voice sample ---------------- */

.player {
  display: flex;
  align-items: center;
  gap: var(--s-base);
  padding: var(--s-base);
  border-radius: 18px;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 0.5px solid rgba(250, 230, 194, 0.1);
  margin: var(--s-loose) 0 0;
}
.play-btn {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(to bottom, var(--amber-bright), var(--amber));
  color: rgba(0, 0, 0, 0.86);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 0.18s ease;
}
.play-btn:active { transform: scale(0.96); }
.play-btn svg { width: 20px; height: 20px; }
.icon-pause { display: none; }
.player.playing .icon-play { display: none; }
.player.playing .icon-pause { display: block; }

.player-body { flex: 1 1 auto; min-width: 0; }
.player-label {
  margin: 0 0 2px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t-4);
}
.player-title { margin: 0 0 10px; font-size: 15px; font-weight: 400; color: var(--t-1); }
.progress-track { height: 3px; border-radius: 999px; background: rgba(250, 230, 194, 0.13); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--amber-bright)); transition: width 0.1s linear; }

/* ---------------- language ---------------- */

.langs { display: flex; flex-wrap: wrap; gap: var(--s-base) var(--s-loose); margin: var(--s-loose) 0 0; }
.langs span {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 26px);
  color: var(--c-2);
}

/* ---------------- the button ---------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  min-height: 48px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--amber-bright), var(--amber));
  color: rgba(0, 0, 0, 0.88);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 22px rgba(255, 169, 61, 0.26);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.badge:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255, 169, 61, 0.32); }
.badge:active { transform: scale(0.985); }
.badge svg { width: 20px; height: 20px; }

/* ---------------- close + footer ---------------- */

.close .wrap { display: grid; gap: var(--s-vast); justify-items: center; text-align: center; }

footer { padding: var(--s-vast) 0 var(--s-loose); text-align: center; }
footer nav { display: flex; justify-content: center; gap: var(--s-roomy); flex-wrap: wrap; }
footer a {
  color: var(--t-3);
  font-size: 14px;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
footer a:hover { color: var(--t-2); }
.copyright { margin: var(--s-base) 0 0; font-size: 13px; color: var(--t-4); }

/* ---------------- reveal ---------------- */
/* 0.5s ease-out, 70ms stagger — the Studio card timing. */

.rise { opacity: 0; transform: translateY(14px); }
.revealed .rise {
  opacity: 1;
  transform: none;
  transition: opacity var(--reveal) ease-out, transform var(--reveal) ease-out;
}
.revealed .rise:nth-child(2) { transition-delay: 70ms; }
.revealed .rise:nth-child(3) { transition-delay: 140ms; }
.revealed .rise:nth-child(4) { transition-delay: 210ms; }
.revealed .rise:nth-child(5) { transition-delay: 280ms; }
.revealed .rise:nth-child(6) { transition-delay: 350ms; }

/* ---------------- accessibility ---------------- */

a:focus-visible,
button:focus-visible,
.rail:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}
.cool a:focus-visible,
.cool button:focus-visible,
.rail:focus-visible { outline-color: var(--night-ring); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eclipse { animation: none; }
  .rise { opacity: 1; transform: none; }
  .revealed .rise { transition: none; }
  .rail { scroll-snap-type: x proximity; }
  .rail figure { opacity: 1; transform: none; transition: none; }
  .badge, .play-btn, .needs li { transition: none; }
}

/* Glass falls back to a solid surface rather than an unreadable one. */
@media (prefers-reduced-transparency: reduce) {
  .player { background: #141414; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sect { background: #0e1524; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .player { background: #141414; }
}