/* ==========================================================================
   INTERFACE POLISH — one interaction language for every control on the page (loaded last: it adds states,
   it doesn't restyle). A press answers every tap or click at once; arrows lean the way they go (back up the
   hierarchy, they lean back); the choice cards rise in and lift when pointed at; the work's own marks carry
   the one warm accent; on touch screens every control is a finger's size and its words can be read.
   Motion is short and quiet — and under prefers-reduced-motion, base.css stills all of it.
   ========================================================================== */

:root {
  --accent-warm: #d9a04b;      /* the one warm accent: the work (a film, a photograph), and the shortcut to it */
}

/* ---------- A press: every control answers at once (scale: its own property, so it never fights a
   control's own transform or position) ---------- */

.site-nav a, .hero__scroll, .world__start, .world__go, .world__enter, .world__back, .world__region, .world__watch,
.rj__back, .rj__next, .rj__to-choice, .rj__exit, .rj__watch, .rj__way-pick, .rj__way-go, .rj__where,
.lightbox__close, .text-link, .doc__player, .jx__cta, .jx__node, .jx__toggle, .contact-email, .socials a, .site-footer a { -webkit-tap-highlight-color: transparent; }

.world__start:active, .world__go:active, .world__enter:not(.is-soon):active, .rj__next:active, .rj__way-go:active,
.doc__player:active { scale: 0.97; }
/* (a region's name is placed by its transform, which a scale of its own would pull toward the corner — away from the
   finger, mid-tap — so what it holds answers instead) */
.world__region:active > * { scale: 0.97; }
.rj__way-pick:active { scale: 0.985; }
.rj__back:active, .rj__to-choice:active, .rj__exit:active, .rj__watch:active, .world__back:active, .site-nav a:active,
.hero__scroll:active, .jx__cta:active, .text-link:active, .lightbox__close:active, .contact-email:active, .socials a:active,
.site-footer a:active { opacity: 0.6; }

/* ---------- Arrows lean the way they go ---------- */

.rj__next > span[aria-hidden], .rj__back > span[aria-hidden], .rj__to-choice > span[aria-hidden], .rj__way-line > span[aria-hidden],
.rj__way-go > span[aria-hidden], .world__go span[aria-hidden], .world__enter span[aria-hidden], .world__back span[aria-hidden],
.world__region-cta span[aria-hidden], .rj__exit > span[aria-hidden] {
  display: inline-block;
  transition: translate 0.35s var(--ease-out), rotate 0.45s var(--ease-out);
}
@media (hover: hover) {
  .rj__next:hover > span[aria-hidden], .rj__way-pick:hover .rj__way-line > span[aria-hidden], .rj__way-go:hover > span[aria-hidden],
  .world__go:hover span[aria-hidden], .world__enter:not(.is-soon):hover span[aria-hidden], .world__region:hover .world__region-cta span[aria-hidden] { translate: 4px 0; }
  .rj__back:hover > span[aria-hidden], .world__back:hover span[aria-hidden] { translate: -4px 0; }
  .rj__to-choice:hover > span[aria-hidden] { rotate: -70deg; }
  .rj__exit:hover > span[aria-hidden] { rotate: 90deg; }
}

/* the quieter ways back: a touch more present (they're how nobody gets trapped) */
.rj__back, .rj__to-choice { color: rgba(235, 233, 228, 0.78); }

/* ---------- The choice cards: they rise in, lift when pointed at, and read as choosable ---------- */

.rj__way-pick { transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.rj[data-layout="choice"] .rj__way:not(.is-away) .rj__way-pick { animation: rj-way-in 0.8s var(--ease-out) 0.9s backwards; }
.rj[data-layout="choice"] .rj__way--scotland:not(.is-away) .rj__way-pick,
.rj[data-layout="choice"] .rj__way--highlands:not(.is-away) .rj__way-pick,
.rj[data-layout="choice"] .rj__way--mallorca:not(.is-away) .rj__way-pick,
.rj[data-layout="choice"] .rj__way--barcelona:not(.is-away) .rj__way-pick { animation-delay: 1.02s; }
.rj[data-layout="choice"] .rj__way--gibraltar:not(.is-away) .rj__way-pick,
.rj[data-layout="choice"] .rj__way--madrid:not(.is-away) .rj__way-pick { animation-delay: 1.14s; }
@keyframes rj-way-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rj__way-pick { animation: none !important; } }   /* (still: the cards are simply there) */
@media (hover: hover) {
  .rj__way.is-hot .rj__way-pick { translate: 0 -2px; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.9); }
}
.rj__way-pick:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

/* ---------- The work's own marks: ▶ a film, ● a photograph — in the warm accent ---------- */

.rj-media__kind::before { content: "●"; display: inline-block; margin-right: 7px; font-size: 0.85em; color: var(--accent-warm); }
.rj-media--film .rj-media__kind::before, .rj-media--hero .rj-media__kind::before, .rj-media--full .rj-media__kind::before { content: "▶"; font-size: 0.8em; }

/* ---------- No sideways drift: the arrow travelling near the edge never widens the page (clip, not hidden — the
   pinned stages inside keep the page as their scroller) ---------- */

.journey { overflow-x: clip; }

/* ---------- Touch screens: a finger's size for every control, words that can be read ---------- */

@media (pointer: coarse), (max-width: 760px) {
  .site-nav a { padding: 14px 6px; margin: -14px -6px; }
  .site-nav a::after { left: 6px; right: calc(6px + 0.28em); bottom: 8px; }   /* (the underline stays under the word) */
  .rj__to-choice, .rj__exit, .rj__watch { min-height: 44px; }
  .world__region { min-height: 44px; }
  .stage__credit a, .rj__credit a { padding-block: 14px; }
  .socials a, .site-footer a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}
@media (max-width: 480px) {
  .site-nav a { font-size: 0.6875rem; letter-spacing: 0.18em; }
}
/* (the docked name and the three links share one line: tighter spacing, never smaller words — until the narrowest) */
@media (max-width: 420px) {
  .site-nav { gap: 12px; }
  .site-nav a { letter-spacing: 0.1em; }
  .site-nav a::after { right: calc(6px + 0.1em); }
}
@media (max-width: 359px) {
  .site-nav { gap: 9px; }
  .site-nav a { font-size: 0.625rem; letter-spacing: 0.06em; padding-inline: 4px; margin-inline: -4px; }
  .site-nav a::after { left: 4px; right: calc(4px + 0.06em); }
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .world__region-name { font-size: 0.6875rem; }
  .rj__to-choice, .rj__exit, .rj__watch { font-size: 0.6875rem; }
  .rj-media__cap, .rj__step { font-size: 0.6875rem; }
  .dest__context { font-size: 0.6875rem; }
  .doc__roles, .kyiv-place__sub, .rj__id { font-size: 0.6875rem; }
  .rj__way-line, .rj.is-many .rj__way-line, .rj--ukraine .rj__way-line { font-size: 0.6875rem; }
  .rj__way-pick { min-height: 44px; align-content: center; }   /* (the compact chips too: a finger's size — Malta, Andorra) */
  /* (the map credit, short: the attribution stays, the room goes to the work — and above the chapter pill) */
  .credit__long { display: none; }
  .stage__credit { bottom: calc(14px + 44px + 16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- The films, whole: every film shows its entire frame at its own shape — 16:9, 9:16 or any (its ratio,
   --video-ratio, and shape, data-shape: lib/page/video-shape.ts) — never cropped or stretched. On a phone a chapter's
   opening film (Cyprus's, Forest City's) takes the room between the chapter's title and its words, its words beneath
   it; a region's films stand at the top of the screen, the map below (region-journey.css); a stage's other films and
   Asia's show whole in their frames; the hero's showreel runs whole across the middle of the screen, the name over it
   as on a wide screen. A film standing up shows whole wherever its frame is shaped otherwise. Per film: focus
   (object-position, for a frame shaped otherwise). ---------- */

.rj-media img, .rj-media video, .stage-video video { object-position: var(--focus, 50% 50%); }
video[data-shape="portrait"]:not(.hero__video):not(.doc__loop) { object-fit: contain; }
.rj-media:has(> video[data-shape="portrait"]) { background: var(--bg); }
/* (a wide screen: a chapter's opening film standing up stands whole to the right of the chapter's words, below the
   site's header, on the page's tone) */
@media (min-width: 761px) and (min-aspect-ratio: 801/1000) {
  .js .stage:not(.is-static) .stage-video--fill[data-shape="portrait"] { background: var(--bg); }
  .js .stage:not(.is-static) .stage-video--fill[data-shape="portrait"] video { top: var(--header-h); left: 36%; width: 64%; height: calc(100% - var(--header-h)); background: none; }
}

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .rj-film .rj-media:not(.is-missing) { background: none; }
  /* a chapter's opening film: as large as the screen allows between the chapter's title and its words — the width of
     the screen if it's wide, the height it has if it stands up — centred, its words beneath it, the map hidden until
     it gives way */
  .js .stage:not(.is-static) .stage-video--fill {
    --film-max-h: max(170px, calc(100svh - var(--header-h) - 350px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(var(--header-h) + 118px) 0 calc(78px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
  }
  .js .stage:not(.is-static) .stage-video--fill video {
    position: relative;
    inset: auto;
    flex: none;
    width: min(100%, calc(var(--film-max-h) * var(--video-ratio, 1.7778)));
    height: auto;
    aspect-ratio: var(--video-ratio, 16 / 9);
    object-fit: contain;
  }
  .js .stage:not(.is-static) .stage-video--fill::after { display: none; }
  .js .stage:not(.is-static) .stage-video--fill .stage-video__caption { position: relative; left: auto; right: auto; bottom: auto; align-self: stretch; margin: 20px var(--gutter) 0; }
  /* a stage's other films, and Asia's: the whole frame in the frame the moment gives it */
  .stage-work__frame video, .cities__panel video, .cities__video video { object-fit: contain; }
  /* the showreel: whole, at its own shape, centred, where the name and the roles stand over it (its shade, as on a
     wide screen) — the 16:9 cut the width of the screen across its middle; on a phone held upright its 9:16 cut
     (components/sections/Hero.tsx), as tall as the screen lets it be; around it the page's tone — the placeholder's
     drifting light only until it plays */
  .hero__video { inset: 50% 0 auto; height: auto; aspect-ratio: var(--video-ratio, 16 / 9); translate: 0 -50%; object-fit: contain; }
  .hero__video[data-shape="portrait"] { right: auto; left: 50%; width: min(100%, calc(100svh * var(--video-ratio))); translate: -50% -50%; }
  /* (its poster, the first frame: the same frame in the same place — the upright cut's on an upright phone, as the
     sources choose in Hero.tsx) */
  .hero__poster img { inset: 50% 0 auto; height: auto; aspect-ratio: 16 / 9; translate: 0 -50%; object-fit: contain; }
  .hero__placeholder { transition: opacity 2s var(--ease-out); }
  .hero.has-video .hero__placeholder { opacity: 0; }
}
@media (orientation: portrait) and (max-width: 599px) {
  .hero__poster img { right: auto; left: 50%; width: min(100%, calc(100svh * 9 / 16)); aspect-ratio: 9 / 16; translate: -50% -50%; }
}

/* ---------- A film waiting to play: a fox with a camera over its poster (lib/page/film-wait.ts) — only after a
   moment, gone as it plays; still, with reduced motion ---------- */
.film-wait {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.is-film-waiting > .film-wait { opacity: 1; }
/* (the hero's: below the name, not over it) */
.hero__media > .film-wait { place-items: end center; padding-bottom: 24vh; }
.film-wait__fox {
  width: clamp(54px, 4.6vw, 68px);
  height: auto;
  aspect-ratio: 1;
  padding: 9px;
  border-radius: 50%;
  background: rgba(28, 29, 31, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--fg);
  overflow: visible;
}
.film-wait__fur { fill: rgba(217, 160, 75, 0.22); }
.film-wait__camera { fill: rgba(28, 29, 31, 0.9); }
.film-wait__rec { fill: #d9a04b; }
.is-film-waiting .film-wait__tail { transform-origin: 26px 49px; animation: fox-tail 1.6s var(--ease-in-out) infinite alternate; }
.is-film-waiting .film-wait__body { animation: fox-bob 1.6s var(--ease-in-out) infinite alternate; }
.is-film-waiting .film-wait__rec { animation: fox-rec 1.1s steps(1) infinite; }
@keyframes fox-tail { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@keyframes fox-bob { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
@keyframes fox-rec { 0% { opacity: 1; } 55% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) {
  .film-wait { transition: none; }
  .is-film-waiting .film-wait__tail, .is-film-waiting .film-wait__body, .is-film-waiting .film-wait__rec { animation: none; }
}