/* ==========================================================================
   Mission Me — theme "Tactile" · v0.1
   The look, on top of the base system (tokens.css, components.css). Everything
   here is scoped to [data-theme="tactile"], which theme.js always sets. (The
   other look, "Polish", is kept on the polish-archive branch.)

   Source: Figma page "Tactile" (286:2641), five screens: Home, Journey intro,
   Choose your filters, Arrival, Breathing.
   - Paper: #EFEDE9 with a scanned sheet (ghost type showing through) and a
     15% white wash. Journey screens sit on paper too, not on the photo.
   - Serif: Libre Baskerville, 400–700 with italics. Key words go Bold Italic.
   - Ink, not glass: 1px ink outlines, hairline rules, no blur, no shadows.
   - Colour comes only as a soft blurred glow: amber in a chosen card, the
     night blue rising from the bottom of the screen.
   - The interactions stay (flip, tilt, liquid haze, breathing); only their
     material changes.
   ========================================================================== */

@font-face {
  font-family: "Libre Baskerville";
  src: url("../assets/fonts/libre-baskerville/LibreBaskerville-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../assets/fonts/libre-baskerville/LibreBaskerville-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../assets/fonts/libre-baskerville/LibreBaskerville-Italic-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../assets/fonts/libre-baskerville/LibreBaskerville-Italic-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ------------------------------------------------------------------ */
[data-theme="tactile"] {
  --paper-100: #EFEDE9;
  --ink-btn:   #1E1E1E;
  --surface-paper: var(--paper-100);
  /* The scanned sheet, placed as in the Figma frames (728 × 1155 at x −142, y −182) */
  --paper-sheet: url("../assets/img/paper/paper.webp");
  --paper-size: 728px auto;
  --paper-pos: -142px -182px;
  --paper-wash: linear-gradient(rgb(255 255 255 / .15), rgb(255 255 255 / .15));
  --paper: var(--paper-wash), var(--paper-sheet) var(--paper-pos) / var(--paper-size) no-repeat, var(--paper-100);

  /* Type: Libre Baskerville, tracked open (+3%) like the Figma frames */
  --font-sans: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-kicker: var(--font-sans);   /* the small caps too: Tactile is set in Libre Baskerville only (Bernt's rule, though some Figma frames say Inter) */
  --weight-light: 400; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;
  --type-numeral-size:    96px; --type-numeral-lh: 1;     --type-numeral-track: -.02em;
  --type-display-xl-size: 34px; --type-display-xl-lh: 1.2; --type-display-track: .03em;
  --type-display-l-size:  28px; --type-display-l-lh: 1.3;                               /* Title, 28 */
  --type-title-size:      24px; --type-title-lh: 1.3;     --type-title-track: -.003em;  /* Card title */
  --type-body-l-size:     17px; --type-body-l-lh: 1.35;   --type-body-l-track: 0;
  --type-row-size:        16px; --type-row-lh: 1.3;       --type-row-track: -.005em;
  --type-button-size:     16px; --type-button-lh: 1.4;    --type-button-track: 0;
  --type-body-size:       14px; --type-body-lh: 1.3;      --type-body-track: .03em;      /* Body */
  --type-small-size:      13px; --type-small-lh: 1.45;
  --type-label-size:      12px; --type-label-lh: 1.45;    --type-label-track: .01em;
  --type-caption-size:    11px; --type-caption-lh: 1.3;
  --type-statement-size:  22px; --type-statement-lh: 1.18;                               /* Arrival text */

  /* Ink instead of glass: no fill, no blur, no shadow, a 1px line */
  --glass-blur: 0px;
  --glass-highlight: 0 0 0 transparent;
  --glass-shadow: 0 0 0 transparent;
  --elevation-button: 0 0 0 transparent;
  --size-control: 48px;
  --grain-opacity: 0;

  /* The two glows */
  --glow-warm: radial-gradient(60% 90% at 50% 100%, #FE6448 0%, #F78825 35%, #EFAC02 60%, transparent 100%);
  --glow-night: radial-gradient(88% 100% at 50% 100%, #000062 0%, #00398A 40%, #0073B1 62%, #00E5FF 82%, transparent 100%);
  /* Colour is printed into the paper, never laid on top: plus-darker where the
     browser has it (Safari), multiply everywhere else */
  --glow-blend: multiply;
}
@supports (mix-blend-mode: plus-darker) { [data-theme="tactile"] { --glow-blend: plus-darker; } }

/* On colour or on a photo (eyes closed, full scenes): light ink, still no glass */
[data-theme="tactile"] .screen {
  --surface-glass: transparent;
  --surface-glass-subtle: transparent;
  --surface-glass-strong: rgb(255 255 255 / .08);
  --border-glass: rgb(255 255 255 / .55);
  --action-primary-bg: var(--paper-100);
  --action-primary-fg: var(--ink-900);
  --glass-blur: 0px;
  --glass-highlight: 0 0 0 transparent;
  --glass-shadow: 0 0 0 transparent;
  --elevation-button: 0 0 0 transparent;
}

/* On paper — every Home, Reflect and Mission screen, and every journey screen
   that would sit on the blurred photo (it gets paper here instead) */
[data-theme="tactile"] .screen--paper,
[data-theme="tactile"] .screen:has(> .scene--haze),
[data-theme="tactile"] :is(.screen--chapter, .screen--blue, .screen--column, .screen--influence),
[data-theme="tactile"] .panel--paper,
[data-theme="tactile"] .sheet__panel,
[data-theme="tactile"] .on-paper {
  --text-primary:   var(--ink-900);
  --text-secondary: rgb(20 20 20 / .60);
  --text-tertiary:  rgb(20 20 20 / .45);
  --surface-glass:        transparent;
  --surface-glass-subtle: transparent;
  --surface-glass-strong: rgb(20 20 20 / .04);
  --border-glass:   var(--ink-900);
  --indicator-active:   var(--ink-900);
  --indicator-inactive: rgb(20 20 20 / .18);
  --action-primary-bg: var(--ink-btn);
  --action-primary-fg: var(--white);
  --focus-ring: var(--ink-900);
  --rule-light: rgb(20 20 20 / .18);
  --drkm: 0;
  --glass-blur: 0px;
  --glass-highlight: 0 0 0 transparent;
  --glass-shadow: 0 0 0 transparent;
  --elevation-button: 0 0 0 transparent;
}

/* ---- Base ---------------------------------------------------------------------- */
[data-theme="tactile"] * { font-variation-settings: normal; }
[data-theme="tactile"] .screen--paper,
[data-theme="tactile"] .screen:has(> .scene--haze),
[data-theme="tactile"] :is(.screen--chapter, .screen--blue, .screen--column, .screen--influence),
[data-theme="tactile"] .sheet__panel { background: var(--paper); color: var(--text-primary); }
/* Move the sheet around a little, so the ghost type isn't in the same place on every screen */
[data-theme="tactile"] .screen:nth-of-type(3n+2) { --paper-pos: -101px -290px; }
[data-theme="tactile"] .screen:nth-of-type(3n)   { --paper-pos: -280px -21px; }
[data-theme="tactile"] .shot:nth-child(3n+2) .screen { --paper-pos: -101px -290px; }
[data-theme="tactile"] .shot:nth-child(3n) .screen   { --paper-pos: -280px -21px; }
[data-theme="tactile"] .play-body { background: var(--paper-100); }

/* ---- Type ----------------------------------------------------------------------- */
[data-theme="tactile"] .t-display-l,
[data-theme="tactile"] .t-title-l,
[data-theme="tactile"] .heading__title { font-weight: var(--weight-medium); }
[data-theme="tactile"] .t-statement { font-size: var(--type-statement-size); line-height: var(--type-statement-lh); letter-spacing: 0; font-weight: var(--weight-regular); }
/* Key words: Bold Italic ("Choose your filters.") */
[data-theme="tactile"] .t-em,
[data-theme="tactile"] .t-statement em,
[data-theme="tactile"] .heading__title em { font-style: italic; font-weight: var(--weight-bold); }
/* Labels are set in the serif, not as small caps */
[data-theme="tactile"] .t-label,
[data-theme="tactile"] .t-meta,
[data-theme="tactile"] .t-caption,
[data-theme="tactile"] .t-note { font-weight: var(--weight-regular); }
[data-theme="tactile"] .t-upper { font-family: var(--font-kicker); font-size: 10px; letter-spacing: .1em; }
[data-theme="tactile"] .heading__eyebrow { font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-track); font-weight: var(--weight-regular); }
[data-theme="tactile"] .heading__title { font-size: var(--type-display-l-size); line-height: var(--type-display-l-lh); letter-spacing: var(--type-display-track); }

/* ---- Haze → glow: the stop's photo stays (and still flows under the finger),
   but only as colour rising from the bottom of the paper ------------------------ */
[data-theme="tactile"] .scene--haze { background: transparent; mix-blend-mode: var(--glow-blend);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / .55) 14%, transparent 34%);
  mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / .55) 14%, transparent 34%); }
[data-theme="tactile"] .scene--haze::after { display: none; }
/* Multiply on paper turns the photo muddy; lift it back towards a clean colour */
[data-theme="tactile"] .scene--haze > * { filter: blur(var(--blur-haze)) saturate(1.9) brightness(1.15); }

/* Sky: paper behind, the colour as one soft column */
[data-theme="tactile"] .sky { background: var(--paper); }
[data-theme="tactile"] .sky::before { mix-blend-mode: var(--glow-blend); }

/* ---- Buttons --------------------------------------------------------------------- */
/* Primary: a 48px ink pill, the label centred, no arrow */
[data-theme="tactile"] .btn { font-weight: var(--weight-medium); }
[data-theme="tactile"] .btn--block { justify-content: center; text-align: center; }
[data-theme="tactile"] .btn--block::after { display: none; }
[data-theme="tactile"] .btn--glass,
[data-theme="tactile"] .btn--line { background: transparent; border-color: var(--border-glass); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="tactile"] .btn--text { font-weight: var(--weight-regular); }
/* Icon buttons: just the line icon */
[data-theme="tactile"] .icon-btn { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="tactile"] .icon-btn--l { background: var(--indicator-active); color: var(--action-primary-fg); }

/* ---- Surfaces: an ink outline instead of glass ------------------------------------ */
[data-theme="tactile"] :is(.glass, .choice, .chip, .flip__face, .route, .reflect-card, .ledger__row, .toggle, .zone, .field__input, .stop-card, .wheel__item.is-selected, .breath) {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
[data-theme="tactile"] .glass,
[data-theme="tactile"] .choice,
[data-theme="tactile"] .flip__face,
[data-theme="tactile"] .reflect-card,
[data-theme="tactile"] .ledger__row,
[data-theme="tactile"] .route,
[data-theme="tactile"] .field__input { border: 1px solid var(--border-glass); }
[data-theme="tactile"] .stop-card { background: var(--paper-100); border: 1px solid var(--ink-900); }
[data-theme="tactile"] .chip { border: 1px solid var(--border-glass); }

/* The finger's light: on paper it reads as a warm smudge, not a white sheen */
[data-theme="tactile"] :is(.glass, .choice, .chip, .zone, .flip__face) {
  background-image: radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%), rgb(239 172 2 / calc(.10 * var(--sheen))), transparent 70%); }

/* Chosen: the warm glow rises from the bottom of the card (Figma: "What matters to you") */
[data-theme="tactile"] .choice[aria-checked="true"],
[data-theme="tactile"] .flip__face--back { background-color: transparent; border-color: var(--indicator-active);
  background-image: var(--glow-warm); background-size: 100% 46%; background-position: bottom; background-repeat: no-repeat; }
[data-theme="tactile"] .choice[aria-checked="true"],
[data-theme="tactile"] .flip { mix-blend-mode: var(--glow-blend); }
[data-theme="tactile"] .choice--row[aria-checked="true"] { background-image: none; background-color: var(--surface-glass-strong); }
[data-theme="tactile"] .flip__face > :last-child { font-size: var(--type-body-l-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-track); }
[data-theme="tactile"] .flip__face--back > :last-child { font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: 0; }
[data-theme="tactile"] .chip[aria-checked="true"] { background-color: var(--indicator-active); }

/* ---- Segmented control: an ink outline, the chosen half filled ------------------- */
[data-theme="tactile"] .toggle { padding: 0 4px; background: transparent; border: 1px solid var(--ink-900); }
[data-theme="tactile"] .toggle__opt { font-size: var(--type-label-size); }

/* ---- Journey header ------------------------------------------------------------------ */
[data-theme="tactile"] .wayfinder__where { font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: 0; font-weight: var(--weight-regular); }
[data-theme="tactile"] .wayfinder__time { font-size: var(--type-small-size); }

/* ---- Breath: thin rings on the night glow, no glass ---------------------------- */
[data-theme="tactile"] .breath::before { background: transparent; border-color: currentColor; opacity: .7; }
[data-theme="tactile"] .breath::after { content: ""; position: absolute; inset: 25%; border-radius: 50%; border: 1px solid currentColor; opacity: .4; }
[data-theme="tactile"] .breath > * { font-family: var(--font-kicker); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Home: the journeys as a quiet timeline (Figma: A · 01 Home) -----------------
   No pictures. Items sit centred on one hairline; the open journey is set left
   between two short vertical rules, with a plain arrow. */
[data-theme="tactile"] .wheel__img { display: none; }
[data-theme="tactile"] .wheel__item { --x: 0px; justify-content: center; text-align: center; padding: 0; border: 0; border-radius: 0; transform-origin: 50% 50%; }
[data-theme="tactile"] .wheel__text { flex: none; }
[data-theme="tactile"] .wheel__text > :first-child { font-weight: var(--weight-medium); }
[data-theme="tactile"] .wheel__item::before { content: ""; position: absolute; left: 50%; top: -24px; height: 52px; width: 1px; background: var(--ink-900); }
[data-theme="tactile"] .wheel__item::after { content: ""; position: absolute; left: 50%; bottom: -24px; height: 52px; width: 1px; background: var(--ink-900); }
[data-theme="tactile"] .wheel__item.is-selected { justify-content: space-between; text-align: left; height: 75px; margin-top: -37px; padding: 0 var(--space-2);
  background: transparent; border-left: 1px solid var(--ink-900); border-right: 1px solid var(--ink-900); }
[data-theme="tactile"] .wheel__item.is-selected::before,
[data-theme="tactile"] .wheel__item.is-selected::after { display: none; }
[data-theme="tactile"] .wheel__item.is-selected .wheel__text > :first-child { font-size: var(--type-row-size); }
[data-theme="tactile"] .wheel__item .btn--s { width: 32px; height: 32px; background: transparent; color: var(--ink-900); }
[data-theme="tactile"] .wheel__item--static { margin: 0; }

/* ---- Journey map: grey contour lines on paper ---------------------------------- */
[data-theme="tactile"] .terrain { --terrain-ground: var(--paper-100); --terrain-line: #6E6E6A; --terrain-low: var(--paper-100); --terrain-peak: #E4E2DD; }
[data-theme="tactile"] .pin__label { font-family: var(--font-sans); }


/* ---- Card wheel: see-through cards with an ink edge, on bare paper ---------------- */
/* See-through cards: just the ink edge on the paper */
[data-theme="tactile"] .card-wheel { --card-bg: transparent; mix-blend-mode: var(--glow-blend); }
[data-theme="tactile"] .wcard__title { font-weight: var(--weight-regular); }
[data-theme="tactile"] .card-wheel__hub { color: var(--ink-900); }
/* Figma has no photo glow on this screen; the only colour is the front card's light */
[data-theme="tactile"] .screen:has(.card-wheel) > .scene--haze { display: none; }
[data-theme="tactile"] .screen:has(.card-wheel) .heading__eyebrow { font-weight: var(--weight-bold); }

/* ---- Chapter opening (Figma 322:94): bare paper, a warm glow along the floor --- */
[data-theme="tactile"] .screen--chapter > .scene,
[data-theme="tactile"] .screen--chapter .screen__foot { display: none; }
[data-theme="tactile"] .chapter-text .t-title { font-size: var(--type-statement-size); line-height: 1.2; letter-spacing: -.005em; font-weight: var(--weight-medium); }
[data-theme="tactile"] .screen--chapter::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -44px; height: 118px; border-radius: 195px; pointer-events: none;
  background: radial-gradient(344px 104px at 50% 7px, #EFAC02 0%, #F39A14 25%, #F78825 50%, #FE6448 100%);
  filter: blur(28px); mix-blend-mode: var(--glow-blend); }

/* ---- "The blue was there all along" (Figma 322:54): the blue rises as one big
   soft column, cyan at its crown, night blue at the floor; the second line and the
   button sit in it, in white ------------------------------------------------------ */
[data-theme="tactile"] .screen--blue .sky::before { left: -10%; right: -10%; top: 45.5%; bottom: auto; height: 655px; border-radius: 195px;
  background: radial-gradient(413px 578px at 50% 40px, #00E5FF 0%, #00ACD8 25%, #0073B1 50%, #00569D 62.5%, #003989 75%, #001D76 87.5%, #000E6C 93.75%, #000062 100%);
  filter: blur(30px); }
[data-theme="tactile"] .screen--blue .screen__body > .t-statement { position: absolute; left: var(--gutter); right: var(--gutter); top: 27.3%; }
[data-theme="tactile"] .screen--blue .split { top: 72.7%; padding-top: 0; color: var(--white); }
[data-theme="tactile"] .screen--blue .split .t-body { font-size: var(--type-statement-size); line-height: var(--type-statement-lh); letter-spacing: 0; }
[data-theme="tactile"] .screen--blue .screen__foot { --action-primary-bg: transparent; --action-primary-fg: var(--white); }
[data-theme="tactile"] .screen--blue .btn--block { border: 1px solid rgb(255 255 255 / .2); }

/* ---- Influence (Figma 322:171): bare paper, the words in italic around one circle */
[data-theme="tactile"] .screen--influence > .scene--haze { display: none; }
[data-theme="tactile"] .screen--influence .t-statement i { font-style: italic; font-weight: var(--weight-regular); }

/* ---- Home: the journey picker ------------------------------------------------------ */
[data-theme="tactile"] .screen--home .wheel { display: none; }
:root:not([data-theme="tactile"]) .picker { display: none; }

/* ---- Journey v2 (Figma 307:17678) ------------------------------------------ */
/* Titles set Medium Italic for the turn, not Bold */
[data-theme="tactile"] .heading__title em { font-weight: inherit; }
[data-theme="tactile"] .t-kicker { font-family: var(--font-kicker); }
/* The map: grey contours printed onto the paper */
[data-theme="tactile"] .terrain { --terrain-ground: #ffffff; --terrain-low: #ffffff; --terrain-peak: #ffffff; --terrain-line: #141414;
  background: transparent; mix-blend-mode: multiply; }
[data-theme="tactile"] .pin { color: #8a8a8a; }
[data-theme="tactile"] .pin__label { color: var(--text-primary); font-family: var(--font-kicker); font-size: 12px; }
/* The overview's list view, like a line on a metro map: the stops as dots on one thin line,
   the name beside each and its time on the right, over the paper (the contour map fades out) */
[data-theme="tactile"] .screen--overview .terrain { transition: opacity var(--dur) var(--ease-out); }
[data-theme="tactile"] .screen--overview.is-list .terrain { opacity: 0; pointer-events: none; }
[data-theme="tactile"] .screen--overview .map-list { top: 40%; padding: 0 56px 110px 54px; background: none; }
[data-theme="tactile"] .map-list li { position: relative; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: 32px; padding: 0 0 0 29px; border-top: 0; }
[data-theme="tactile"] .map-list li > .t-meta { display: none; }
[data-theme="tactile"] .map-list li > .t-body { font-size: 17px; }
[data-theme="tactile"] .map-list__time { display: block; font-family: var(--font-kicker); font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* The dot, and the line on to the next stop's dot */
[data-theme="tactile"] .map-list li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--ink-900); }
[data-theme="tactile"] .map-list li:not(:last-child)::after { content: ""; position: absolute; left: 4.5px; top: 50%; width: 1px; height: 100%; background: rgb(20 20 20 / .3); }
/* Where you are: the dot gets a ring */
[data-theme="tactile"] .map-list li.is-next::before { box-shadow: 0 0 0 3px var(--paper-100, #EFEDE9), 0 0 0 4px var(--ink-900); }
[data-theme="tactile"] .map-list li.is-done { color: var(--text-tertiary); }
[data-theme="tactile"] .pin--current .pin__ring { border-color: #8a8a8a; box-shadow: 0 0 0 6px rgb(20 20 20 / .06); }
[data-theme="tactile"] .pin--current .pin__ring::after { background: #8a8a8a; }
[data-theme="tactile"] .screen--dark { background: #0A0A0D; }
/* Breathing (Figma 307:17794): the blue rises as one tall soft column from a third
   of the way down; the ring and its small caps sit in it, in white */
[data-theme="tactile"] .screen--column .sky { background: none; }
[data-theme="tactile"] .screen--column .sky::before { content: ""; position: absolute; left: 0; right: 0; top: 25.6%; bottom: -8%; border-radius: 195px;
  background: radial-gradient(413px 760px at 50% 40px, #00E5FF 0%, #00ACD8 22%, #0073B1 45%, #00569D 58%, #003989 72%, #001D76 86%, #000062 100%);
  filter: blur(30px); mix-blend-mode: var(--glow-blend); }
[data-theme="tactile"] .screen--column :is(.breath, .screen__foot) { color: var(--white); }
[data-theme="tactile"] .screen--column .screen__foot { --action-primary-bg: transparent; --action-primary-fg: var(--white); --text-tertiary: rgb(255 255 255 / .55); }
[data-theme="tactile"] .screen--column .btn--block { border: 1px solid rgb(255 255 255 / .2); }
[data-theme="tactile"] .screen--column .breath { margin-top: 12%; }

/* Breathing at Shinjuku (Figma 338:54052). The paper stays still; the blue is a layer of its
   own (night-column-glow: the Figma export with its paper divided out, so the paper parts are
   white) multiplied onto it, so the grain and ghost type show through and only the colour
   rises in and breathes */
[data-theme="tactile"] .play__breathe { background: var(--paper); }
[data-theme="tactile"] .screen.play__reveal { background: var(--paper); }
[data-theme="tactile"] .play__breathe > .grad-layer { background: url("../assets/img/paper/night-column-glow.webp") center top / cover no-repeat; mix-blend-mode: multiply; }
[data-theme="tactile"] .play__breathe .sky { display: none; }
/* Shibuya breathes in green, the tones of its opening (#A9D6A0 → #6DB37E), into a deep green */
[data-theme="tactile"] .play__breathe--green > .grad-layer { background-image: url("../assets/img/paper/green-column-glow.webp"); }

/* The ring and its parts follow the Figma timeline, played by play.js through
   --phase, --rot, --outer-op, --tail-op, --echo-op and --echo-s */
/* Centred on y 431 of the 844 frame, as in Figma (the body centres it, so the margin counts double) */
[data-theme="tactile"] .play__breathe .breath--ring { width: 272px; height: 272px; margin-top: 125px; }
[data-theme="tactile"] .breath--ring::before { border-color: rgb(255 255 255 / .5); opacity: var(--outer-op, .5); transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* The inner circle swells by 13% as you breathe in */
[data-theme="tactile"] .breath--ring::after { inset: 69px; background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .18); opacity: 1;
  transform: scale(calc(1 + .134 * var(--phase, 0))); }
[data-theme="tactile"] .breath--ring > span { font-weight: 400; letter-spacing: .1em; }
/* "Start" in the middle of the ring before the breathing begins (play.js): the inner circle is
   the button, a frosted, see-through disc with the word centred on it; it breathes softly while
   it waits, and fades as the breathing starts. (The text is padded by its letter-spacing on the
   left too, so the spaced-out word sits truly in the middle) */
.breath__start { grid-area: 1 / 1; position: relative; z-index: 2; width: 134px; height: 134px; border-radius: 50%; padding: 0 0 0 .1em;
  border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--white); font: inherit; letter-spacing: .1em; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: breath-start-wait 3.2s var(--ease-in-out) infinite; transition: opacity 700ms var(--ease-out), background-color var(--dur) var(--ease-out); }
.breath__start:active { background: rgb(255 255 255 / .26); }
.breath__start.is-gone { opacity: 0; pointer-events: none; animation: none; }
@keyframes breath-start-wait { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .breath__start { animation: none; } }
[data-theme="tactile"] .breath--ring > i { display: block; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
/* 72 ticks just inside the ring; each one flares and stretches inwards as the tip passes */
[data-theme="tactile"] .breath__ticks > i { position: absolute; top: 8px; left: calc(50% - 1px); width: 2px; height: 3px; border-radius: .75px;
  background: var(--white); opacity: .088; transform-origin: 1px 128px; transform: rotate(var(--a)); }
/* The breath line: a quarter-circle tail that brightens towards its tip */
[data-theme="tactile"] .breath__tail { transform: rotate(var(--rot, 0deg)); opacity: var(--tail-op, 0); }
[data-theme="tactile"] .breath__tail::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 270deg, rgb(255 255 255 / 0) 0deg, rgb(255 255 255 / .06) 22.5deg, rgb(255 255 255 / .24) 45deg, rgb(255 255 255 / .53) 67.5deg, rgb(255 255 255 / .95) 90deg, transparent 90deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
[data-theme="tactile"] .breath__tail::after { content: ""; position: absolute; top: -.5px; left: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%; background: var(--white); }
/* As you start to breathe out, a faint echo of the ring drifts outwards */
[data-theme="tactile"] .breath__echo { border: 1px solid var(--white); opacity: var(--echo-op, 0); transform: scale(var(--echo-s, 1)); }