/* Prototype. Values come from tokens.css / tokens.json; exceptions are in prototype-exceptions.md. */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; } /* the drifting giant type must not widen the page */
html { background: var(--color-neutral-0); color: var(--color-neutral-1000); }
body {
  margin: 0; font-family: var(--font-family); font-size: var(--text-body-size); line-height: var(--text-body-line);
  font-kerning: normal; font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
main img, .mask__photo img { filter: grayscale(1); } /* imagery.md: «natural o blanco y negro» */

/* =====================================================================================
   TYPE SYSTEM
   One family (Source Sans 3), three registers that never mix on the same line:
   1. Monumental — a single word or line sized to its box ([data-fit]), Bold, tight leading.
      It is the image of the screen, so nothing else on that screen competes with it.
   2. Statement — display/h1 sizes from the brand scale, Bold, for sentences you read at a glance.
   3. Reading — lead and body, Regular, 1.5 leading, short measure (30-45 ch).
   Italic is reserved for two things: Japanese terms (first mention) and the giant interlude.
   ===================================================================================== */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
em { font-style: italic; }

/* 1 · Monumental (prototype exception: above text-display; slight negative tracking at size) */
[data-fit] { display: block; white-space: nowrap; font-weight: 700; line-height: .86; letter-spacing: -.02em; }

/* 2 · Statement */
.display { margin: 0; font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: 700; }
.h1 { margin: 0; font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: 700; }
.h2 { margin: 0; font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: 700; }

/* 3 · Reading */
.lead { margin: var(--space-5) 0 0; max-width: 32ch; font-size: var(--text-lead-size); line-height: var(--text-lead-line); }
.info p { max-width: 45ch; }
.card__times, .places, .steps { font-variant-numeric: tabular-nums; }

/* ---------- Icons, buttons ---------- */
.icon { display: inline-block; flex: none; width: var(--icon-lg); height: var(--icon-lg); background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.button {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--space-6);
  padding: var(--space-3) var(--space-5); border-radius: var(--space-1);
  /* Colour roles in this prototype: primary (red) only for the symbol; secondary (indigo) for
     buttons; tertiary (ochre) for the small points of colour (icons). */
  background: var(--color-brand-secondary); color: var(--color-neutral-0);
  font-size: var(--text-label-size); font-weight: var(--text-label-weight); text-decoration: none;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}
.button:hover { opacity: .9; }
.button:focus-visible, .dots a:focus-visible { outline: 2px solid currentColor; outline-offset: var(--space-1); }
.button--dark { background: #497CC4; color: var(--color-neutral-1000); } /* indigo, dark-mode AA variant (4,51:1) */

/* ---------- Dot navigation (replaces the header: the mask is always on screen) ---------- */
.dots {
  position: fixed; z-index: 40; right: var(--space-4); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; padding: var(--space-2) 0; border-radius: var(--space-6);
  /* the rail takes the page colour, so the dots stay legible when the mask passes behind them */
  --rail-bg: var(--color-neutral-0); --rail-fg: var(--color-neutral-1000);
  color: var(--rail-fg); background: var(--rail-bg);
  transition: color var(--motion-duration-medium) var(--motion-easing-standard), background-color var(--motion-duration-medium) var(--motion-easing-standard);
}
body[data-bg="dark"] .dots { --rail-bg: var(--color-neutral-1000); --rail-fg: var(--color-neutral-0); }
body[data-bg="indigo"] .dots { --rail-bg: var(--color-brand-secondary); --rail-fg: var(--color-neutral-0); }
.dots a { position: relative; display: grid; place-items: center; width: 48px; height: 32px; color: inherit; }
.dots a::before {
  content: ""; width: var(--space-2); height: var(--space-2); border-radius: 50%;
  border: 2px solid currentColor; transition: transform var(--motion-duration-medium) var(--motion-easing-standard), background-color var(--motion-duration-medium) var(--motion-easing-standard);
}
.dots a.is-active::before { background: currentColor; transform: scale(1.5); }
.dots span {
  /* the label sits on the rail colour too, so it reads over the mask or the ink */
  position: absolute; right: calc(100% + var(--space-1)); white-space: nowrap; padding: var(--space-1) var(--space-3);
  border-radius: var(--space-6); background: var(--rail-bg); color: var(--rail-fg);
  font-weight: 600; opacity: 0; transform: translateX(var(--space-2)); pointer-events: none;
  transition: opacity var(--motion-duration-medium) var(--motion-easing-standard), transform var(--motion-duration-medium) var(--motion-easing-standard);
}
.dots a:hover span, .dots a:focus-visible span { opacity: 1; transform: none; }

/* ---------- Stage ---------- */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg { position: absolute; inset: 0; opacity: 0; }
.bg--light { background: var(--color-neutral-0); opacity: 1; }
.bg--red { background: var(--color-brand-primary); }
.bg--dark { background: var(--color-neutral-1000); }
.bg--indigo { background: var(--color-brand-secondary); }
.ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* prototype exception: texture */

.mask { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.mask__layer { position: absolute; inset: 0; opacity: 0; }
.mask__layer--color { opacity: 1; }
.mask__layer svg { display: block; width: 100%; height: 100%; }
.mask__layer--black [class^="p-"] { fill: #000000 !important; } /* «Negro» treatment, logo.md */
.mask__layer--white [class^="p-"] { fill: #FFFFFF !important; } /* «Blanco» treatment, logo.md */
.mask__layer:not(.mask__layer--color) .sg { display: none; }
/* Vertical lockup in Sangen units: symbol transform translate(-2834.031 -238.564) scale(1.741340),
   viewBox -2689.5 0 5379 7601 (vertical-color.svg) */
.mask__lockup { position: absolute; left: 11.8965%; top: 14.4773%; width: 76.0838%; height: 99.2052%; max-width: none; opacity: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mask__photo { position: absolute; left: 44.852%; top: 46.818%; width: 10.148%; height: 9.364%; border-radius: 50%; overflow: hidden; opacity: 0; }
.mask__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Brand moment (D126), timings of sangen-claro.html */
.mask .sg { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mask__layer--color [class^="p-"] { opacity: 0; }
.is-playing .sg1 { animation: sg-draw .7s linear forwards, sg-fade .5s 2.4s forwards; }
.is-playing .sg2 { animation: sg-draw .7s .5s linear forwards, sg-fade .5s 2.4s forwards; }
.is-playing .sg3 { animation: sg-draw .7s 1s linear forwards, sg-fade .5s 2.4s forwards; }
.is-playing .p-orejas    { animation: sg-in .4s 1.5s var(--motion-easing-standard) forwards; }
.is-playing .p-tablillas { animation: sg-in .4s 1.6s var(--motion-easing-standard) forwards; }
.is-playing .p-cuernos   { animation: sg-in .4s 1.7s var(--motion-easing-standard) forwards; }
.is-playing .p-casco     { animation: sg-in .4s 1.8s var(--motion-easing-standard) forwards; }
.is-playing .p-mascara   { animation: sg-in .4s 1.9s var(--motion-easing-standard) forwards; }
.is-playing .p-emblema   { animation: sg-in .4s 2.3s var(--motion-easing-standard) forwards; }
@keyframes sg-draw { to { stroke-dashoffset: 0; } }
@keyframes sg-fade { to { opacity: 0; } }
@keyframes sg-in { to { opacity: 1; } }

/* ---------- Scenes ---------- */
main, .site-footer { position: relative; z-index: 2; }
.scene { position: relative; min-height: 100vh; }
.on-dark, .on-red, .on-indigo { color: var(--color-neutral-0); }

/* Hero: «Aikido» monumental, the rest of the name a step down, then one sentence */
.scene--hero { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 var(--space-8) var(--space-7); }
.hero__since { margin: 0; font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: 400; }
.hero__lead { margin: var(--space-4) auto 0; max-width: 45ch; font-size: var(--text-lead-size); line-height: var(--text-lead-line); }
.reveal { opacity: 0; transform: translateY(var(--space-2)); transition: opacity var(--motion-duration-slow) var(--motion-easing-standard), transform var(--motion-duration-slow) var(--motion-easing-standard); }
.is-shown .reveal { opacity: 1; transform: none; }
.is-shown .reveal:nth-child(2) { transition-delay: var(--motion-duration-slow); }
.is-shown .reveal:nth-child(3) { transition-delay: calc(var(--motion-duration-slow) * 2); }

/* Horns: the sentence sits in their hollow, one idea per line */
.scene--horns { display: grid; place-items: center; }
.horns__text { margin: 12vh 0 0; width: min(64vh, 80vw); text-align: center; font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: 700; }
.horns__text .line { display: block; }

/* Panels: fixed columns that slide in from the left over the mask (main.js panels()).
   The page colour is slightly translucent and blurs what is behind, so the text stays legible. */
.panel {
  position: fixed; z-index: 1; top: 0; left: 0; width: 42vw; height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-8) var(--space-7);
  transform: translateX(-101%);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.panel--light { background: color-mix(in srgb, var(--color-neutral-0) 86%, transparent); }
.panel--indigo { background: color-mix(in srgb, var(--color-brand-secondary) 88%, transparent); }
.panel--dark { background: color-mix(in srgb, var(--color-neutral-1000) 88%, transparent); }
.word { margin: 0; overflow: hidden; padding-bottom: .08em; }
/* The sentence under the word is read, not scanned: a step down from the statement size, Regular */
.panel .lead { max-width: 20ch; font-size: var(--text-h2-size); line-height: var(--text-h2-line); }
.rise { display: inline-block; }

/* Interlude: two giant italic lines */
.scene--type { height: 220vh; }
.giant { position: sticky; top: 0; height: 100vh; margin: 0; padding: 0 var(--space-7); display: flex; flex-direction: column; justify-content: center; overflow: hidden; font-style: italic; }
.giant [data-fit] { line-height: .9; }
.giant__line--b { align-self: flex-end; }

/* Information */
.scene--info { padding: var(--space-8) var(--space-7); }
.info { width: calc(62vw - var(--space-7)); }
.scene--info-right .info { margin-left: 38vw; width: calc(62vw - var(--space-7) * 2 - 48px); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--space-3); }
.card p { margin: var(--space-1) 0 0; }
.card__age { color: var(--color-neutral-200); }
/* Proximity: title → its content 32 px; items of one list 16 px apart; lists 48 px below the intro */
.info__title { line-height: 1; margin-bottom: var(--space-5); }
.info__title + .lead { margin-top: 0; }
.sensei { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-6); align-items: center; }
.sensei__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.places, .steps { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.info__title + .places, .info__title + .steps { margin-top: 0; }
.places .icon, .steps .icon { margin-top: var(--space-1); } /* optical: icon centred on the first line (34 px) */
/* Ochre points of colour: icons are graphics, so they need 3:1 (light #906B2E 4,51:1; dark #B8893B 6,07:1) */
.places .icon, .steps .icon { background: #906B2E; }
.on-dark .icon, .on-indigo .icon { background: #B8893B; }
.places li, .steps li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-lead-size); line-height: var(--text-lead-line); }

/* Closing */
.scene--closing { display: flex; flex-direction: column; justify-content: flex-end; text-align: center; padding-bottom: var(--space-8); }
.closing__title { margin: 0; padding: 0 var(--space-7); }
.site-footer {
  text-align: center; color: var(--color-neutral-400); padding: var(--space-6) var(--space-7);
  background: color-mix(in srgb, var(--color-neutral-1000) 80%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.site-footer p { margin: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .dots { right: 0; }
  .dots a { width: 32px; height: 28px; }
  .scene--hero { padding: 0 var(--space-6) var(--space-7); } /* room for the dot rail on both sides of the centred title */
  .hero__since { font-size: var(--text-h2-size); line-height: var(--text-h2-line); }
  .display, .horns__text { font-size: var(--text-h1-size); line-height: var(--text-h1-line); }
  .horns__text { margin-top: 0; width: 72vw; }
  .h1 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); }
  .h2 { font-size: 22.6px; line-height: 32px; }
  .lead, .hero__lead, .places li, .steps li { font-size: var(--text-body-size); line-height: var(--text-body-line); }
  .panel .lead { font-size: var(--text-lead-size); line-height: var(--text-lead-line); }
  .panel { top: auto; bottom: 0; width: 100%; height: 50vh; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-3); }
  .giant { padding: 0 var(--space-3); }
  .scene--info { padding: var(--space-8) var(--space-6) var(--space-8) var(--space-3); }
  .info, .scene--info-right .info { width: 100%; margin-left: 0; }
  .cards, .sensei { grid-template-columns: 1fr; }
  .closing__title { padding: 0 var(--space-6) 0 var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .panel { position: relative; transform: none; height: auto; min-height: 100vh; }
  .mask__layer--color [class^="p-"] { animation: none !important; opacity: 1; }
  .mask .sg { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}