/* ================= INTRO · two directions (live sketches) =================
   A · The character as an object: small, whole, alone in white space, its shadow on the paper. The languages sit quietly
       below it. The frost appears only for the passage into HOME.
   B · The character and the interface: the character above, whole, in the paper; below it, apart, a frosted plane (INFO's)
       that holds the two languages. The plane rises over everything for the passage into HOME.
   In both: the render is shown whole, at its own proportions; nothing crosses its face. Approaching it makes it lean a
   little toward you; clicking or touching it makes it blink and hold its breath for a moment. Choosing a language is a
   separate act, and is the only one that enters. */
html.has-lang .intro { display: none; }
.intro { position: fixed; inset: 0; z-index: 200; overflow: hidden; color: var(--ink); background: var(--surface); }
.in-paper { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 120% at 0% 0%, rgba(22, 28, 37, 0) 30%, rgba(22, 28, 37, .028) 70%, rgba(22, 28, 37, .05) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 32%, rgba(255, 255, 255, .88) 62%, #fff 86%), var(--paper);
  background-size: auto, auto, 128px 128px; }
.in-mast { position: absolute; z-index: 6; left: var(--gutter); top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); }

/* the character, whole: the render's own crop (1114 × 490 of 1296 × 729), never cut */
.intro { --ch: calc(var(--cw) / 2.273); }
.in-char { position: absolute; z-index: 2; left: 50%; top: var(--cy); width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; will-change: transform; outline: none; }
.in-char video { position: absolute; left: -12.21%; top: -35.92%; width: 116.34%; height: auto; pointer-events: none; }
.in-char canvas, .in-char img.poster { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.in-char:focus-visible::after { content: ""; position: absolute; inset: -14px; border: 1px dashed var(--ink-muted); border-radius: 2px; }
/* its shadow on the paper: the site's one key light, top left, so it falls down and to the right */
.in-shadow { position: absolute; z-index: 1; left: 50%; top: calc(var(--cy) + var(--ch) * .47); width: calc(var(--cw) * .74); height: calc(var(--ch) * .2);
  margin-left: calc(var(--cw) * -.37 + var(--cw) * .03); border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(22, 28, 37, .2), rgba(22, 28, 37, .07) 55%, rgba(22, 28, 37, 0)); filter: blur(8px); }

/* the languages */
.in-langs { position: absolute; z-index: 4; display: flex; justify-content: center; }
.in-lang { display: grid; gap: 10px; justify-items: center; padding: 10px clamp(24px, 4vw, 60px); color: var(--ink); font: inherit; background: none; border: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.in-lang + .in-lang { border-left: 1px solid var(--line); }
.in-lang .w { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; font-weight: 200; letter-spacing: -.03em; --w-on: 400; position: relative; }
.in-lang .w::before { content: ""; position: absolute; left: -15px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 9999px;
  background: var(--pulse); opacity: 0; transform: scale(.4); transition: opacity .3s cubic-bezier(.33, 1, .68, 1), transform .3s cubic-bezier(.33, 1, .68, 1); }
.in-lang:hover .w::before, .in-lang:focus-visible .w::before, .in-lang.on .w::before { opacity: 1; transform: none; }
.in-lang:hover .hw, .in-lang:focus-visible .hw, .in-lang.on .hw { font-weight: var(--w-on); }
.in-lang .label { color: var(--ink-muted); }
.in-lang:focus-visible { outline: 2px solid var(--pulse); outline-offset: 4px; }
.in-hint { position: absolute; z-index: 4; }

/* the frost: INFO's plane */
.in-plane { position: absolute; z-index: 3; left: 0; right: 0; will-change: transform;
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.63) 45%, rgba(255,255,255,.7));
  -webkit-backdrop-filter: blur(14px) saturate(.8); backdrop-filter: blur(14px) saturate(.8);
  border-top: 1px solid rgba(255,255,255,.95); box-shadow: 0 -1px 0 rgba(22,28,37,.07), 0 1px 0 rgba(22,28,37,.04) inset; }
.in-plane::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.95); }

/* ---------- A · the character as an object ---------- */
.v-a { --cw: clamp(300px, 34vw, 640px); --cy: 41vh; }
.v-a .in-langs { left: 0; right: 0; top: calc(var(--cy) + var(--ch) / 2 + max(64px, 10vh)); }
.v-a .in-hint { left: 0; right: 0; bottom: calc(var(--gutter) + 4px); text-align: center; }
.v-a .in-plane { top: 0; bottom: 0; transform: translateY(101%); visibility: hidden; }      /* only for the passage */

/* ---------- B · the character and the interface ---------- */
.v-b { --cw: clamp(280px, 31vw, 580px); --cy: 32vh; --pl: max(60vh, calc(var(--cy) + var(--ch) / 2 + 96px)); }
.v-b .in-plane { top: var(--pl); bottom: -100vh; }
.v-b .in-langs { left: 0; right: 0; top: calc(var(--pl) + max(48px, 8vh)); }
.v-b .in-hint { left: var(--gutter); top: calc(var(--pl) + 22px); }

/* phone */
@media (max-width: 720px) {
  .intro { --gutter: 16px; }
  .v-a { --cw: 74vw; --cy: 37vh; }
  .v-b { --cw: 76vw; --cy: 28vh; --pl: max(52vh, calc(var(--cy) + var(--ch) / 2 + 64px)); }
  .in-langs { flex-direction: column; left: 16px !important; right: 16px !important; top: auto !important; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .v-b .in-langs { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .in-lang { grid-template-columns: 1fr auto; justify-items: start; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
  .in-lang + .in-lang { border-left: 0; }
  .in-lang:last-child { border-bottom: 1px solid var(--line); }
  .in-lang .w { font-size: 36px; }
  .in-lang .w::before { left: auto; right: -14px; }
  .v-a .in-hint { bottom: auto; top: calc(var(--cy) + var(--ch) / 2 + 40px); }
}

/* study chrome: clearly not part of the design */
.studybar { position: fixed; z-index: 400; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 12px; align-items: center;
  font: 400 10px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: rgba(255,255,255,.92);
  border: 1px dashed var(--line); padding: 5px 10px; white-space: nowrap; }
.studybar button, .studybar a { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); text-decoration: none; }
.studybar button:hover, .studybar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.studybar .st { min-width: 14ch; }
@media (min-width: 721px) { .v-a ~ .studybar { bottom: auto; top: calc(10px + env(safe-area-inset-top, 0px)); } }
@media (max-width: 720px) { .studybar { bottom: auto; top: calc(52px + env(safe-area-inset-top, 0px)); gap: 8px; padding: 4px 8px; max-width: calc(100vw - 16px); overflow: hidden; } .studybar .st, .studybar > span:first-child, .studybar a[href='index.html'] { display: none; } }

/* the language, once chosen: a small ES / EN in the masthead (proposal) */
.lang-sw { display: inline-flex; gap: 6px; align-items: baseline; margin-left: 8px; padding-left: 20px; border-left: 1px solid var(--line); }
.lang-sw button { font: 500 13px/16px var(--sans); letter-spacing: .02em; color: var(--ink-muted); }
.lang-sw button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.lang-sw i { font-style: normal; color: var(--line); }
@media (prefers-reduced-motion: reduce) { .in-lang .w::before { transition: none; } }

/* ---------- A, refined: the character as an artwork ----------
   Smaller and placed on the optical centre (a little above the middle), on the paper, with two shadows from the site's
   key light: a tight contact shadow under its lowest edge and a wide, faint one falling down and to the right. The
   languages are set as a quiet caption beneath it. No hand cursor and no enlargement: it only notices you. */
.v-a2 { --cw: clamp(280px, 29vw, 540px); --cy: 40vh; }
.v-a2 .in-char { cursor: default; }
.v-a2 .in-shadow { background: none; filter: none; top: calc(var(--cy) + var(--ch) * .44); height: calc(var(--ch) * .16); width: calc(var(--cw) * .7); margin-left: calc(var(--cw) * -.35 + var(--cw) * .02); }
.v-a2 .in-shadow::before { content: ""; position: absolute; left: 14%; right: 14%; top: 22%; height: 40%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 28, 37, .28), rgba(22, 28, 37, .08) 60%, rgba(22, 28, 37, 0)); filter: blur(3px); }
.v-a2 .in-shadow::after { content: ""; position: absolute; left: 0; right: -14%; top: 10%; height: 150%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 28, 37, .10), rgba(22, 28, 37, 0)); filter: blur(12px); transform: translateX(4%); }
.v-a2 .in-langs { left: 0; right: 0; top: calc(var(--cy) + var(--ch) / 2 + max(72px, 11vh)); }
.v-a2 .in-lang { gap: 8px; padding: 8px clamp(22px, 3.2vw, 48px); }
.v-a2 .in-lang .w { font-size: clamp(24px, 2vw, 32px); font-weight: 300; letter-spacing: -.02em; --w-on: 450; }
.v-a2 .in-lang .w::before { left: -13px; width: 5px; height: 5px; margin-top: -2.5px; }
.v-a2 .in-lang .label { letter-spacing: .1em; }
.v-a2 .in-hint { left: 0; right: 0; top: auto; bottom: calc(var(--gutter) + 4px); text-align: center; }
@media (max-width: 720px) {
  .v-a2 { --cw: 66vw; --cy: 36vh; }
  .v-a2 .in-lang { padding: 16px 0; }
  .v-a2 .in-lang .w { font-size: 30px; }
  .v-a2 .in-hint { bottom: auto; top: calc(var(--cy) + var(--ch) / 2 + 44px); }
}
@media (min-width: 721px) { .v-a2 ~ .studybar { bottom: auto; top: calc(10px + env(safe-area-inset-top, 0px)); } }
.v-a2 .in-plane { top: 0; bottom: 0; transform: translateY(101%); visibility: hidden; }      /* only for the passage */

/* attention: the word it is turning to shows its dot, faintly, before the pointer reaches it */
.in-lang.near .w::before { opacity: .45; transform: none; }
/* preview chrome on the site: top centre on desktop, under the masthead on phone */
@media (min-width: 721px) { .studybar { bottom: auto; top: calc(10px + env(safe-area-inset-top, 0px)); } }
.lang-sw button { cursor: pointer; background: none; border: 0; padding: 0; }
/* inside a project: the same switch, in the project's own ink */
.p-bar .lang-sw { margin-left: auto; border-left-color: var(--p-line); }
.p-bar .lang-sw button { color: var(--p-muted); }
.p-bar .lang-sw button[aria-pressed="true"] { color: var(--p-ink); }
.p-bar .lang-sw i { color: var(--p-line); }

/* ---------- A · phone composition (the desktop composition is not touched above 720 px) ----------
   The character higher and larger in the width, alone in its white space; the two words side by side across the lower
   third, where the thumb is, each a whole half of the screen to touch; the hairline between them as on desktop, so the
   character has a side to turn to; the hint at the foot. Press a word: it attends; slide to the other: its attention
   follows; lift: it acknowledges and you enter. */
@media (max-width: 720px) {
  .v-a2 { --cw: 76vw; --cy: 42vh; }
  .v-a2 .in-langs { flex-direction: row; left: 0 !important; right: 0 !important; top: auto !important;
    bottom: calc(max(60px, 10vh) + env(safe-area-inset-bottom, 0px)); touch-action: none; }
  .v-a2 .in-lang { flex: 1 1 50%; grid-template-columns: none; justify-items: center; align-items: center; align-content: center; gap: 12px;
    min-height: 104px; padding: 0; border-top: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
  .v-a2 .in-lang + .in-lang { border-left: 1px solid var(--line); }
  .v-a2 .in-lang:last-child { border-bottom: 0; }
  .v-a2 .in-lang .w { font-size: 32px; }
  .v-a2 .in-lang .w::before { left: -13px; right: auto; }
  .v-a2 .in-hint { top: auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}