/* En Armonía Studio — layout and components. Values come from tokens.css.
   R7 (2026-10-03): the brand lockup (A over "Studio") travels from the hero into the centre of the header;
   each stage is two zones, the person and an info column, so text never overlaps text.
   R10 (2026-10-03): the hero shows its own A and title at rest (zoom-proof); plain names; cut-paper props.
   R22 (2026-10-06): the hero is the full logo, "en Armonía" with the prism A; only the A travels to the header. */

/* Shared foundations (base, header shell, the mark, footer) live in base.css (R16). */

.header .explore-toggle, .header .lang-toggle { opacity: var(--p); pointer-events: none; }
.header.is-on .explore-toggle, .header.is-on .lang-toggle { pointer-events: auto; }
.explore-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-chip); border: 1px solid var(--line); font-size: var(--t-small); background: var(--paper); }
.explore-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background var(--d-fast); }
.explore-toggle.is-active .dot { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.explore-toggle[aria-expanded="true"] { background: var(--ink-2); color: var(--paper); border-color: var(--ink-2); }

/* ========== Brand lockup (positioned every frame by site.js) ==========
   At rest the hero's full logo is what you see. Once the page moves (html.brand-flight) this fixed copy of its A
   takes over from exactly where it is and carries it into the centre of the header; the other letters fade. */
.brand { position: fixed; left: 0; top: 0; z-index: 21; width: 0; height: 0; text-decoration: none; pointer-events: none; opacity: 0; }
html.brand-flight .brand, .brand.is-docked { opacity: 1; }
.brand.is-docked { pointer-events: auto; }
.brand-a { position: absolute; left: 0; top: 0; display: block; transform-origin: 50% 50%; will-change: transform; overflow: visible; }
.brand:focus-visible { outline: none; }
.brand:focus-visible .brand-a { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
html.brand-flight .hero-a { opacity: 0; }   /* the lockup stands in for it while it moves */

/* ========== Explore popover (opens under the Explore button, top left) ========== */
.explore {
  position: fixed; top: calc(var(--header-h) + 8px); left: var(--gutter); z-index: 19; width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-tile);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--ink) 18%, transparent); display: grid; gap: var(--s4);
}
.explore[hidden] { display: none; }
.explore-group { display: grid; gap: var(--s2); }
.explore-areas, .explore-langs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.explore-areas button { --c: var(--area-color); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 8px; border: 1px solid var(--line); font-size: var(--t-small); background: var(--paper); }
.explore-areas button .seal { width: 20px; height: 20px; }
.explore-areas button[aria-pressed="true"] { border-color: var(--c); background: color-mix(in oklab, var(--c) 12%, var(--paper)); }
.explore-langs button { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: var(--t-small); background: var(--paper); }
.explore-langs button[aria-pressed="true"] { border-color: var(--ink-2); background: var(--ink-2); color: var(--paper); }
.explore-media { justify-self: start; font-size: var(--t-small); color: var(--ink-2); padding-top: var(--s3); border-top: 1px solid var(--line); width: 100%; text-decoration: none; }
.explore-clear { justify-self: start; font-size: var(--t-small); color: var(--muted); text-decoration: underline; text-underline-offset: .15em; }

/* ========== Hero ========== */
.hero { min-height: 74svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + var(--s5)) var(--gutter) var(--s7); }
.hero-inner { max-width: var(--measure); }
.hero h1 { display: grid; justify-items: center; gap: .32em; font-family: var(--font-title); font-size: var(--t-logo); line-height: 1; font-weight: 400; color: var(--name-ink); }
.hero-studio { font-size: .2em; letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; }
.hero .rule { width: 48px; height: 1px; background: var(--accent-2); margin: var(--s6) auto; }
.hero-line { font-family: var(--font-display); font-size: clamp(1.15rem, 3.2vw, 1.5rem); color: var(--ink); font-style: italic; }
.hero-line:empty { display: none; }
.scroll-hint { margin-top: var(--s6); color: var(--muted); }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 40px; margin: var(--s3) auto 0; background: linear-gradient(var(--accent), transparent); animation: drift var(--d-drift) var(--ease) infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(8px); opacity: .4; } }

/* ========== Stream: shared ground + a thread behind the stages ========== */
.stream { position: relative; padding: 0 0 var(--s9); }
.stream .thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.stream .thread path { fill: none; stroke: var(--accent-2); stroke-width: 1.5; opacity: .85; stroke-dasharray: 5 7; }
.stages { position: relative; z-index: 1; display: grid; gap: var(--s7); padding: 0 var(--gutter); max-width: 620px; margin: 0 auto; }
.no-results { text-align: center; padding: var(--s6) var(--gutter) 0; }

/* ========== Stage: two zones in one grid row ==========
   media (the person) spans the full width, behind; the info column sits on the side the person faces, in front.
   The row is as tall as whichever is taller, so the column can never spill onto anything else.
   Layers inside a stage (it's isolated): glow -1 · media 0 · person button 1 · info 3. */
.stage {
  --c: var(--area-color, var(--accent)); --c2: var(--area-color-2, var(--c));
  --info-w: 56%; --px: 39%;
  container-type: inline-size; position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr var(--info-w); align-items: start;
  scroll-margin-top: calc(var(--header-h) + 16px); transition: opacity var(--d-base) var(--ease);
}
.stage[data-facing="left"] { grid-template-columns: var(--info-w) 1fr; --px: 61%; }
.stage.is-hidden { display: none; }

/* the person: floating a little, with a ground shadow and a faint glow of the area colour */
.stage .media { grid-row: 1; grid-column: 1 / -1; position: relative; height: min(100cqi, 600px); animation: hover 7s ease-in-out infinite; }
.stage:nth-child(even) .media { animation-duration: 8.5s; animation-delay: -3s; }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.stage .media::before { content: ""; position: absolute; inset: 20% 0 -6% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 42% at var(--px) 72%, color-mix(in oklab, var(--c) 26%, transparent), transparent 72%); }
.stage .media::after { content: ""; position: absolute; left: var(--px); bottom: -6px; width: 40%; height: 18px; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--ink) 18%, transparent), transparent); }
.stage video, .stage .poster { position: absolute; bottom: 0; width: 78%; height: 100%; object-fit: contain; object-position: bottom; }
.stage[data-facing="right"] video, .stage[data-facing="right"] .poster { left: 0; }
.stage[data-facing="left"]  video, .stage[data-facing="left"]  .poster { right: 0; }
.stage video { opacity: 0; transition: opacity var(--d-slow) var(--ease); }
.stage[data-load="light"] video, .stage[data-load="full"] video { opacity: 1; }
.stage .poster { transition: opacity var(--d-slow) var(--ease); }
.stage[data-load="light"] .poster, .stage[data-load="full"] .poster { opacity: 0; }
.stage .haze { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: color-mix(in oklab, var(--paper) 22%, transparent);
  -webkit-mask-image: radial-gradient(70% 75% at 50% 60%, #000 40%, transparent 100%); mask-image: radial-gradient(70% 75% at 50% 60%, #000 40%, transparent 100%); }

/* the person as a button, for keyboards and screen readers; pointer clicks anywhere on the stage open it too */
.stage .person { position: absolute; inset: 0; z-index: 1; }
.stage .person:focus-visible { outline-offset: -4px; }

/* ---------- the info column: name → indicator → languages → line → contacts, all in normal flow ---------- */
.stage .info { grid-row: 1; grid-column: 2; position: relative; z-index: 3; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: var(--s4);
  padding: 7cqi 5cqi 6cqi 0;
  transform: translateY(calc(var(--sy, 0) * -10px)); transition: transform var(--d-base) var(--ease);
  will-change: transform; }                                    /* its own layer: the drift never repaints the props */
.stage[data-facing="left"] .info { grid-column: 1; align-items: flex-start; text-align: left; padding: 7cqi 0 6cqi 5cqi; }

/* name: plain Gloock (R10), sized by the stage's own width, so it always fits its column */
.stage .name { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 12.5cqi, 3.4rem); line-height: .95; letter-spacing: -.01em;
  color: var(--ink-2); max-width: 100%; overflow-wrap: anywhere; text-shadow: 0 0 .35em color-mix(in oklab, var(--paper) 85%, transparent); }
.stage .name span { display: block; }
.stage .name .first { font-style: italic; }

/* discipline indicator ("Objeto", R10): the cut-paper prop and the area name side by side, never touching */
.stage .indicator { display: flex; align-items: center; gap: var(--s3); max-width: 100%; }
.stage[data-facing="right"] .indicator { flex-direction: row-reverse; }
.stage .ind-prop { flex: none; width: 60px; height: 60px; }
.stage .ind-label { min-width: 0; font-family: var(--font-text); font-size: .74rem; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; color: var(--ink-2); }

/* ---------- props: pieces of coloured paper (props.js). Tones come from the area colour --c. ---------- */
.pp { display: block; overflow: visible; --pp-c: var(--c, var(--accent)); filter: drop-shadow(0 5px 7px color-mix(in oklab, var(--ink) 16%, transparent)); }
.pp .pc :is(path, circle):not(.ln) { fill: currentColor; }
.pp .pc .ln { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.pp .t-base  { color: var(--pp-c); }
.pp .t-deep  { color: color-mix(in oklab, var(--pp-c) 62%, var(--ink)); }
.pp .t-light { color: color-mix(in oklab, var(--pp-c) 42%, var(--paper)); }
.pp .t-ink   { color: color-mix(in oklab, var(--ink) 88%, var(--pp-c)); }
.pp .t-cream { color: #f7efe1; }
/* the core a torn edge shows: a pale tint of the piece's own colour, not white (R11, "Suave" in R15) */
.pp .rim { color: color-mix(in oklab, currentColor 20%, #f6efe3); }
.pp .rim :is(path, circle):not(.ln) { stroke: currentColor; stroke-linejoin: round; }

/* languages: translucent paper ("vellum") on the nearer layer */
.stage .langs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.stage[data-facing="right"] .langs { justify-content: flex-end; }
.stage .langs li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 6px;
  font-size: .82rem; letter-spacing: .06em; line-height: 1.2; color: var(--ink-2);
  background: color-mix(in oklab, var(--paper) 72%, transparent); border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 12%, transparent); }
.stage .langs li:lang(zh), .stage .langs li:lang(ja) { letter-spacing: 0; }
.stage .langs li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lc, var(--ink-2)); }

/* reveal: the line, bio, offers and contacts. Phones: the column grows to make room (tap).
   Desktop: the room is always reserved, so hovering never moves anything. */
.stage .reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-base) var(--ease); max-width: 100%; }
.stage .reveal-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--s3);
  padding: 4px 6px 14px; margin: -4px -6px -14px;           /* room for shadows inside the clip */
  opacity: 0; visibility: hidden; transition: opacity var(--d-base) var(--ease), visibility 0s linear var(--d-base); }
.stage[data-facing="right"] .reveal-inner { align-items: flex-end; }
.stage[data-facing="left"]  .reveal-inner { align-items: flex-start; }
.stage.is-open .reveal { grid-template-rows: 1fr; }
.stage.is-open .reveal-inner { opacity: 1; visibility: visible; transition: opacity var(--d-base) var(--ease), visibility 0s; }
@media (hover: hover) {
  .stage .reveal { grid-template-rows: 1fr; }
  .stage.is-hover .reveal-inner { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease), visibility 0s; }
}
.stage .line { max-width: 100%; padding: 10px 14px; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; line-height: 1.35; color: var(--ink-2); }
/* bio and offers (R17): only when switched on in the editor. Vellum like the language tags; read left to right
   even in a right-hand column, because a right-aligned paragraph is hard to read. */
.stage .bio { max-width: 100%; padding: 10px 14px; border-radius: 6px; text-align: start;
  font-size: .92rem; line-height: 1.45; color: var(--ink);
  background: color-mix(in oklab, var(--paper) 72%, transparent); border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 12%, transparent); }
.stage .offers { max-width: 100%; display: grid; gap: 6px; text-align: start; }
.stage[data-facing="right"] .offers { justify-items: end; }
.stage .offers .label { color: var(--ink-2); }
.stage .offers ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .92rem; line-height: 1.35; color: var(--ink); }
.stage .offers li { display: flex; gap: 8px; }
.stage .offers li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .45em; border-radius: 50%; background: var(--c); }
.stage .contacts { display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 100%; }
.stage[data-facing="right"] .contacts { justify-content: flex-end; }
.stage .contact { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px; border-radius: var(--r-chip);
  font-size: .95rem; line-height: 1.2; color: var(--ink-2); text-decoration: none;
  background: color-mix(in oklab, var(--paper) 72%, transparent); border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 12%, transparent); transition: border-color var(--d-fast), background var(--d-fast); }
.stage .contact:hover { border-color: var(--c); background: color-mix(in oklab, var(--paper) 88%, transparent); }
.stage .contact .ico { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--c); }

/* ========== Desktop: a staggered grid of stages (R15; the carousel was pruned) ========== */
@media (min-width: 820px) {
  .stages { max-width: 1180px; grid-template-columns: 1fr 1fr; column-gap: var(--s7); row-gap: var(--s7); align-items: start; }
  .stage:nth-child(even) { margin-top: var(--s9); }
}
@media (min-width: 1280px) {
  .stages { grid-template-columns: repeat(3, 1fr); max-width: 1400px; }
  .stage:nth-child(n) { margin-top: 0; }
  .stage:nth-child(3n+2) { margin-top: var(--s8); }
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint::after { animation: none; }
  .stage .media { animation: none; }
  .stage video { display: none; }
  .stage .poster { opacity: 1 !important; }
  .stage .info { transform: none; }
  .stage .reveal, .stage .reveal-inner { transition: none !important; }
}