/* ==========================================================================
   COMPONENT: Modal (native <dialog>), cookie bar, page-transition curtain,
   custom cursor.
   Native <dialog> gives focus trapping, Esc, and inertness for free; modal.js
   adds only what the platform does not.
   ========================================================================== */

.c-modal {
  width: min(34rem, calc(100vw - var(--gutter) * 2));
  max-height: min(88svh, 46rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background-color: var(--c-paper);
  color: var(--c-ink);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.c-modal::backdrop {
  background-color: rgb(14 19 48 / 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.c-modal[open] { animation: modal-in var(--d-base) var(--e-out); }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .c-modal[open] { animation: none; }
}

.c-modal__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

.c-modal__title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  line-height: 1.15;
}

.c-modal__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  color: var(--c-text-muted);
  flex: none;
}

.c-modal__close:hover { background-color: var(--surface-sunken); color: var(--c-ink); }
.c-modal__close svg { width: 18px; height: 18px; }

.c-modal__body {
  padding: 0 var(--sp-5) var(--sp-5);
  overflow-y: auto;
  max-height: calc(88svh - 6rem);
}

.c-modal__foot {
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
  background-color: var(--surface-page);
}

/* Gallery lightbox variant. */
.c-modal--wide { width: min(64rem, calc(100vw - var(--gutter) * 2)); }
.c-modal--wide .c-modal__body { padding: 0; }

/* --------------------------------------------------------------------------
   COOKIE BAR — three tiers (Reject / Manage / Accept), per DPDP expectations.
   The UK site's two-button bar is not sufficient here.
   -------------------------------------------------------------------------- */

.c-cookie-bar {
  position: fixed;
  inset-inline: var(--sp-4);
  inset-block-end: var(--sp-4);
  z-index: var(--z-cookiebar);
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--sp-5);
  background-color: var(--c-ink);
  color: var(--c-text-muted-inv);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  display: grid;
  gap: var(--sp-4);
  transform: translateY(calc(100% + var(--sp-6)));
  transition: transform var(--d-slow) var(--e-out);
}

.c-cookie-bar.is-visible { transform: translateY(0); }
.c-cookie-bar[hidden] { display: none; }

.c-cookie-bar__text { font-size: var(--fs-sm); line-height: 1.5; }
.c-cookie-bar__text a { color: var(--c-verdigris-lt); }

.c-cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.c-cookie-bar__actions .c-btn { flex: 1 1 auto; }

.c-cookie-bar__prefs { display: grid; gap: var(--sp-3); }

.c-cookie-bar__pref {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background-color: rgb(255 255 255 / 0.06);
  border-radius: var(--r-md);
  font-size: var(--fs-2xs);
}

/* --------------------------------------------------------------------------
   PAGE-TRANSITION CURTAIN — GSAP fallback where View Transitions is absent
   -------------------------------------------------------------------------- */

.c-curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  background-color: var(--c-ink);
  display: grid;
  place-items: center;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
}

.c-curtain__mark {
  width: 88px;
  height: 88px;
  color: var(--c-verdigris-lt);
  opacity: 0;
}

.c-curtain__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* View Transitions, where supported. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out var(--d-base) var(--e-wipe) both; }
  ::view-transition-new(root) { animation: vt-in  var(--d-base) var(--e-wipe) both; }
}

@keyframes vt-out { to   { opacity: 0; transform: translateY(-1.5%); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(1.5%);  } }

/* --------------------------------------------------------------------------
   CUSTOM CURSOR — desktop pointer-fine only, disabled on touch and under
   reduced motion. cursor.js does not initialise otherwise.
   -------------------------------------------------------------------------- */

/* One element, one composited transform.
   NO mix-blend-mode and NO filter — either forces a full-screen re-blend on
   every frame, and together they were what made the old cursor feel slow.
   Position is written directly from the pointer event with no easing, so the
   ring sits exactly under the pointer. The only animation is the hover scale,
   which is a CSS transition and never touches JS per frame. */
.c-cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-cursor);
  width: var(--cursor-size, 26px);
  height: var(--cursor-size, 26px);
  border: 1.5px solid var(--c-ink);
  border-radius: var(--r-full);
  pointer-events: none;
  display: none;
  opacity: 0;
  will-change: transform;

  /* transform is set by JS every frame, so it must NOT be transitioned —
     transitioning it would reintroduce exactly the lag we removed. */
  transition:
    width var(--d-fast) var(--e-out),
    height var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    opacity var(--d-instant) linear;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .c-cursor { display: block; }
  /* Hide the native cursor only on the page surface. Text inputs keep their
     I-beam, because losing it makes a form feel broken. */
  .has-custom-cursor,
  .has-custom-cursor a,
  .has-custom-cursor button { cursor: none; }
  .has-custom-cursor input,
  .has-custom-cursor textarea,
  .has-custom-cursor select { cursor: auto; }
}

.c-cursor.is-active { opacity: 1; }

/* Ring only, no fill. A tinted disc floating over a photograph reads as a
   smudge on the lens, not as a cursor. Growth alone is enough signal. */
.c-cursor.is-hover {
  --cursor-size: 38px;
  border-color: var(--c-verdigris);
}

/* Pressed: a small, immediate acknowledgement. */
.c-cursor.is-down { --cursor-size: 20px; }

/* Over an ink section the dark ring would vanish, so cursor.js flips it.
   This cannot be done with a CSS combinator — the cursor is not a sibling of
   the section it happens to be floating above. */
.c-cursor.is-inverted { border-color: var(--c-plaster); }
.c-cursor.is-inverted.is-hover { border-color: var(--c-verdigris-lt); }