/* ============================================================================
   /breathe — the experience.

   Always dark. Jordy's call, 3 Sep: the light mode does not follow you in here.
   So this file does not use the token flip on .bb-dark, it just is dark, and
   every colour is stated rather than inherited.

   Almost nothing on screen: a forest, a ring, one line of text, and four pieces
   of chrome so small they read as furniture. Everything else the reference does
   is done in the canvas.
   ========================================================================== */

:root {
  --br-ink:   #E8E4D9;
  --br-dim:   #8E877A;
  --br-line:  #C9C2B4;
  --br-green: #6F9C82;
  --br-ground:#0B0E0D;
}

html, body {
  margin: 0; height: 100%;
  background: var(--br-ground);
  color: var(--br-ink);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}
body { cursor: default; }

/* The world. One canvas, painted at device pixel ratio, holding every plate,
   the mote field and the root band. */
#world {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 2400ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.is-live #world { opacity: 1; }

/* ------------------------------------------------------------------ ring --
   Large, thin, pale, and it travels laterally across the frame the whole time
   rather than sitting in the middle. That travel is the thing Jordy pointed at
   in the reference ("and it moves from side to side"), and it is what stops a
   circle on a photograph reading as a loading spinner.

   The faint full circle is the track. The bright arc is the breath. The mark
   sits inside it, which is Jordy's addition and the reason this is our ring and
   not theirs. */
/* Dead centre and staying there. It travelled side to side on the first build,
   copying the reference, and Jordy's note was simply that it was off centre.
   He is right: the reference has a moving world AND a moving ring, which is one
   moving thing too many once the world itself is travelling. */
.br-ring {
  position: fixed; left: 50%; top: 50%;
  width: min(60vh, 74vw); aspect-ratio: 1;
  translate: -50% -50%;
  scale: 0.52;                    /* breathe.js drives this off the breath */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1600ms ease;
}
body.is-armed .br-ring, body.is-live .br-ring { opacity: 1; }
.br-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.br-ring__track { fill: none; stroke: var(--br-line); stroke-opacity: 0.22; stroke-width: 1; }
.br-ring__arc {
  fill: none; stroke: var(--br-line); stroke-opacity: 0.85; stroke-width: 1.4;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
/* The mark sits at the centre and does NOT scale with the ring: the ring is the
   breath you are following, the mark is the thing breathing inside it, and
   scaling both makes one gesture out of two. */
/* Counter-scaled against the ring from breathe.js, so the ring can swing from
   half height to nearly the full screen without the mark ballooning with it. */
.br-ring__mark {
  position: absolute; left: 50%; top: 42%;
  width: 22%; translate: -50% -50%;
  scale: var(--mark-s, 1);
  opacity: 0.9;
}
.br-ring__mark svg { position: static; width: 100%; height: auto; fill: var(--br-line); }

/* --------------------------------------------------------------- the line --
   One line at a time, built word by word over about a second and a half, held,
   then cleared. The reference splits its sentences across two to four of these
   and that fragmentation is most of why it reads as paced rather than read. */
/* Under the logo and much smaller, both Jordy's call. At the old size a long
   line filled the ring and the two competed; at this size the mark reads as the
   thing at the centre and the words sit beneath it. */
.br-text {
  position: fixed; left: 50%; top: 56%;
  translate: -50% 0;
  width: min(34rem, 76vw);
  text-align: center;
  pointer-events: none;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(0.98rem, 0.85rem + 0.7vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: 0.004em;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(6, 9, 8, 0.92), 0 0 60px rgba(6, 9, 8, 0.7);
}
.br-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  transition: opacity 620ms ease, transform 900ms cubic-bezier(0.2, 0.8, 0.25, 1);
}
.br-text span.on { opacity: 1; transform: none; }
.br-text.out span { opacity: 0; transition: opacity 900ms ease; }

/* ------------------------------------------------------------- the gate --
   Hold to begin. A deliberate, physical entry, and it is also the user gesture
   that lets the narration play at all: a browser will not start audio without
   one, so the hold does double duty. */
.br-gate {
  position: fixed; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: 1.6rem;
  text-align: center;
  padding: 2rem;
  transition: opacity 1200ms ease;
}
body.is-live .br-gate { opacity: 0; pointer-events: none; }
.br-gate__line {
  margin: 0;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
  color: var(--br-ink);
}
.br-hold {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  width: 84px; height: 84px; position: relative;
  border-radius: 999px;
  touch-action: none;
}
.br-hold__label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--br-line); opacity: 0.75; pointer-events: none;
}
.br-hold::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--br-line); border-radius: 999px; opacity: 0.4;
}
.br-hold i {
  position: absolute; inset: 4px;
  border-radius: 999px;
  background: var(--br-green);
  scale: 0; opacity: 0.9;
  transition: scale 60ms linear;
}
.br-hold:focus-visible { outline: 2px solid var(--br-line); outline-offset: 6px; }
/* Shown only when someone taps instead of holding. The first build failed
   silently there: Jordy pressed it, nothing happened, and he reported it as the
   sound not working. A gate that can fail without saying so is not a gate, it
   is a bug. */
.br-gate__nudge {
  margin: 0; height: 1.1em;
  font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--br-line);
  opacity: 0; transition: opacity 260ms ease;
}
.br-gate__nudge.on { opacity: 0.85; }

.br-gate__sub {
  margin: 0; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--br-dim);
}
.br-gate__sub button {
  appearance: none; background: none; border: 0; padding: 0 0 2px;
  color: var(--br-ink); font: inherit; letter-spacing: inherit; text-transform: inherit;
  border-bottom: 1px solid currentColor; cursor: pointer;
}

/* ---------------------------------------------------------------- chrome --
   Tiny, pale and static, exactly as in the reference. Nothing else on screen. */
.br-chrome {
  position: fixed; z-index: 5;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--br-dim);
  opacity: 0; transition: opacity 900ms ease;
}
body.is-live .br-chrome { opacity: 1; }
.br-chrome a, .br-chrome button {
  appearance: none; background: none; border: 0; padding: 6px 8px; margin: -6px -8px;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: none; cursor: pointer;
}
.br-chrome a:hover, .br-chrome button:hover { color: var(--br-ink); }
.br-chrome :focus-visible { outline: 1px solid var(--br-line); outline-offset: 2px; }
.br-chrome--tl { top: 1.5rem; left: 1.5rem; }
.br-chrome--tr { top: 1.5rem; right: 1.5rem; }
.br-transcript-link { opacity: 1; z-index: 6; color: var(--br-ink); }
.br-chrome--bl { bottom: 1.5rem; left: 1.5rem; }
.br-chrome--bc { bottom: 1.5rem; left: 50%; translate: -50% 0; }

/* ------------------------------------------------------------------ end --
   Two plain links, the same weight as the body text. No button, no CTA
   styling: the piece has just spent four minutes not selling anything. */
.br-end {
  position: fixed; left: 50%; top: 62%;
  translate: -50% 0;
  display: flex; gap: 2.5rem; align-items: baseline;
  opacity: 0; pointer-events: none;
  transition: opacity 1800ms ease;
}
body.is-ended .br-end { opacity: 1; pointer-events: auto; }
.br-end a, .br-end button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  color: var(--br-ink); text-decoration: none;
  border-bottom: 1px solid rgba(201, 194, 180, 0.35);
  padding-bottom: 3px;
}
.br-end a:hover, .br-end button:hover { border-bottom-color: var(--br-ink); }


/* ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .br-chrome--tl, .br-chrome--bl { left: 1rem; }
  .br-chrome--tr { right: 1rem; }
  .br-chrome--tl, .br-chrome--tr { top: 1rem; }
  .br-chrome--bl, .br-chrome--bc { bottom: 1.1rem; }
  .br-ring { width: min(52vh, 86vw); }
  .br-end { gap: 1.6rem; }
}

/* Reduced motion gets the piece, not a apology for it: the forest holds as one
   still frame, the ring stops travelling and simply fills, the words still
   arrive on Jordy's timing, and nothing has to be held down. */
@media (prefers-reduced-motion: reduce) {
  #world { transition: opacity 400ms linear; }
  .br-text span { transition: opacity 300ms linear; transform: none; }
  .br-text span.on { transform: none; }
  .br-ring { transition: none; }
}

/* 8 Sep: a welcoming arrival. The breathing ring belongs to the experience,
   so it appears after beginning, without crossing the introduction. */
:root { --br-ink: #F4EFE5; --br-dim: #C3CCBA; --br-line: #D6DDCB; --br-green: #80946D; }
.br-arrival {
  position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #101D1699, #0D1913BB, #101D1688), url('/assets/breathe/mid-a.webp') center 48% / cover;
  transition: opacity 1800ms ease;
}
body.is-live .br-arrival { opacity: 0; }
body.is-armed:not(.is-live) .br-ring { opacity: 0; }
.br-gate { gap: 0; padding: 85px 24px 55px; overflow-y: auto; }
.br-gate__eyebrow { margin: 0 0 24px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #D6DDCB; }
.br-gate__line { font-size: clamp(64px, 6.5vw, 100px); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.br-gate__line em { font-weight: 400; }
.br-gate__welcome { font-size: 13px; line-height: 1.85; color: #DEE3D6; margin: 25px 0 27px; }
.br-hold { width: 78px; height: 78px; background: #17271ECC; }
.br-hold::before { opacity: .85; }
.br-hold i { background: #4F6543; }
.br-hold__label { opacity: 1; color: #F4EFE5; font-size: 10px; letter-spacing: .1em; }
.bb-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.br-gate__nudge { margin-top: 13px; font-size: 11px; min-height: 16px; letter-spacing: 0; color: #F4EFE5; }
.br-gate__sub { margin-top: 20px; font-size: 10px; line-height: 2.3; text-transform: none; letter-spacing: .035em; color: #D1DAC8; }
.br-gate__sub button { min-height: 35px; padding: 3px 0; border: 0; text-decoration: underline; text-underline-offset: 4px; }
body:not(.is-live) .br-chrome--bl, body:not(.is-live) .br-chrome--bc { visibility: hidden; }
body:not(.is-ended) .br-end { visibility: hidden; }
.br-chrome--tl { opacity: 1; top: 32px; left: 38px; font-size: 20px; font-family: 'Crimson Pro', Georgia, serif; text-transform: none; letter-spacing: -.02em; color: #F4EFE5; }
.br-chrome--tl a { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; }
.br-chrome--tl a span { font-family: 'Manrope', sans-serif; font-size: 18px; }
.br-chrome--bl button, .br-chrome--bc button { min-width: 60px; min-height: 44px; text-shadow: 0 1px 8px #000; }
.br-end a:focus-visible, .br-end button:focus-visible, .br-gate__sub button:focus-visible { outline: 2px solid var(--br-line); outline-offset: 6px; }
.br-noscript { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; margin: 0; padding: 25px; background: #142117; font-size: 14px; text-align: center; }
.br-noscript a { color: inherit; }
@media (max-width: 640px) {
  .br-chrome--tl { top: 15px; left: 22px; font-size: 19px; }
  .br-gate__line { font-size: 68px; }
  .br-gate__eyebrow { font-size: 9px; margin-bottom: 22px; }
  .br-gate__welcome { font-size: 12px; }
  .br-arrival { background-position: center, 59% 48%; }
  .br-end { width: 85vw; justify-content: center; flex-wrap: wrap; gap: 15px 25px; text-align: center; }
}
@media (max-height: 650px) {
  .br-gate { padding-top: 72px; padding-bottom: 20px; }
  .br-gate__line { font-size: 48px; }
  .br-gate__eyebrow { margin-bottom: 14px; font-size: 8px; }
  .br-gate__welcome { margin: 15px 0; font-size: 11px; }
  .br-hold { width: 60px; height: 60px; }
  .br-gate__nudge { margin-top: 6px; }
  .br-gate__sub { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .br-arrival, .br-gate { transition: none; }
}

/* Concept entrance and controls: always dark; no marketing theme storage. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
.br-gate { gap: 0; padding: 96px 24px 32px; min-height: 100%; position: relative; z-index: 2; }
.br-gate__eyebrow { font-size: 12px; letter-spacing: .15em; margin-bottom: 22px; }
.br-gate__line { font-size: clamp(56px, 6.5vw, 96px); }
.br-gate__welcome { font-size: 16px; line-height: 1.7; margin: 24px 0; max-width: 34rem; }
.br-gate__sub { font-size: 13px; line-height: 1.8; margin-top: 12px; letter-spacing: 0; }
.br-gate__sub button { min-height: 44px; font-size: 14px; }
.br-hold { width: 88px; height: 88px; }
.br-hold__label { font-size: 14px; letter-spacing: .04em; text-transform: none; }
.br-hold:disabled { cursor: wait; opacity: .5; }
.br-gate__nudge { opacity: 1; min-height: 24px; height: auto; font-size: 12px; margin-top: 12px; max-width: 34rem; line-height: 1.5; }
.br-chrome { font-size: 14px; letter-spacing: .025em; text-transform: none; }
.br-chrome--tl { font-size: 22px; top: 24px; left: 32px; }
.br-chrome--br { bottom: 1.5rem; right: 1.5rem; }
.br-chrome button { min-height: 44px; min-width: 64px; }
.br-controls { position: relative; z-index: 5; }
.br-controls .br-chrome { background: #0b0e0dc2; border-radius: 3px; padding: 0 7px; }
.br-end { top: auto; bottom: 90px; z-index: 5; padding: 10px 18px; background: #0b0e0dbd; }
.br-end a, .br-end button { min-height: 44px; display: inline-flex; align-items: center; font-size: 20px; }
.br-text { font-size: clamp(17px, 1.5vw, 22px); }
.br-failure { position: fixed; z-index: 10; left: 50%; top: 50%; translate: -50% -50%; width: min(520px, calc(100% - 32px)); background: #17271f; border: 1px solid #53614c; padding: 32px; text-align: center; }
.br-failure h2 { font: 400 38px/1.1 'Crimson Pro', serif; margin: 0 0 18px; }
.br-failure p { font-size: 16px; line-height: 1.7; }
.br-failure div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0; }
.br-failure button { min-height: 44px; padding: 10px 18px; background: #b9c8a5; color: #18251b; border: 0; font-size: 14px; cursor: pointer; }
.br-failure a { color: #eee9dd; display: inline-block; padding: 12px 0; font-size: 14px; }
:focus-visible { outline: 2px solid #d6ddcb; outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body:not(.is-live) { overflow-y: auto; }
body.is-live .br-gate { display: none; }
body[data-state="ended"] .br-ring { opacity: .5; }
@media(max-width: 640px) {
 .br-chrome--tl { left: 20px; top: 16px; font-size: 20px; }
 .br-gate { padding: 86px 24px 28px; }
 .br-gate__line { font-size: clamp(56px, 16vw, 68px); }
 .br-gate__welcome { font-size: 16px; }
 .br-gate__eyebrow { font-size: 12px; }
 .br-end { bottom: 80px; gap: 4px 18px; }
 .br-chrome--br { right: 16px; bottom: 1.1rem; }
 .br-failure { padding: 24px; }
}
@media(max-height: 650px) {
 .br-gate { padding-top: 80px; padding-bottom: 24px; }
 .br-gate__line { font-size: 52px; }
 .br-gate__welcome { margin: 16px 0; font-size: 16px; }
 .br-gate__eyebrow { font-size: 12px; margin-bottom: 16px; }
 .br-hold { width: 76px; height: 76px; }
}
@media(prefers-reduced-motion: reduce) {
 *, *::before, *::after { transition: none !important; animation: none !important; }
 .br-text span { transform: none; }
}

body[data-state="paused"] #play-status, body.is-live[data-state="loading"] #play-status { position:fixed; left:50%; bottom:88px; transform:translateX(-50%); width:min(540px,calc(100% - 40px)); height:auto; clip:auto; white-space:normal; overflow:visible; margin:0; padding:12px 18px; background:#0b0e0de8; color:#eee9dd; font-size:14px; line-height:1.6; text-align:center; z-index:6; }