/* ============================================================
   components.css  -  REUSABLE INTERFACE PIECES

   Nikita: this file styles the things that appear on every page
   or are reused in multiple places. Nav at the top. Footer at
   the bottom. The cookie banner. The contact form. The marquee
   (the strip of brand names that scrolls horizontally). The
   custom mouse cursor on the case study section.

   Each section below is labelled. Use Ctrl+F to find one.

   Things you may want to change:
   - Nav padding (search "NAV")
   - Footer columns (search "FOOTER")
   - Form field underline colour on focus (search "FORM")
   - Cookie banner copy (the HTML is in each .html file)
============================================================ */


/* ============================================================
   NAV (top of every page)
   Fixed to the top with a frosted-glass background. Logo on
   the left, links on the right. On mobile the links collapse
   into a hamburger menu that toggles on tap.
============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px var(--side-pad);
  background: var(--paper-tint); /* near-opaque paper. Blur removed: backdrop-filter on a
                                    fixed nav re-blurs the page every scroll frame and was
                                    the main cause of laggy scrolling. */
  border-block-end: 1px solid var(--rule);
  transition: padding var(--dur-base) var(--ease-out);
}

/* The Nyasha Productions logo lockup in the top-left: emblem + wordmark. */
.nav-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nav-logo-mark { width: 48px; height: 48px; display: block; flex: none; }
.nav-logo-text { white-space: nowrap; }
.nav-logo .accent { color: var(--gold-text); } /* gold tint on the "Productions" word */
@media (max-width: 380px) { .nav-logo-text { display: none; } } /* tiny screens: emblem only */

/* Right-hand nav link list. */
.nav-links {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

/* Each individual nav link (About, Services, Results, Contact). */
.nav-link {
  font-size: var(--type-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding-block: 4px;
  /* Make tap targets at least 44px tall on touch devices (Apple guideline). */
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* The thin gold line that grows from left to right under a link
   on hover, and stays full-width on the currently-active page. */
.nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }

/* The hamburger toggle. Hidden on desktop, shown on mobile.
   Holds two inline SVGs (menu + close) and swaps them when open. */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;            /* full 44px tap target (Apple guideline) */
  height: 44px;
  margin-inline-end: -10px;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-hamburger svg { width: 24px; height: 24px; display: block; }
.nav-hamburger .icon-close { display: none; }
.nav-hamburger.is-open .icon-menu { display: none; }
.nav-hamburger.is-open .icon-close { display: block; }

/* Section icons next to mobile menu links. Hidden on desktop. */
.nav-link-icon { display: none; }

/* Condensed nav once the user scrolls past the hero edge. */
.nav.is-scrolled { padding-block: 9px; }

/* Freeze the page behind the open mobile menu so it cannot scroll. */
body.nav-open { overflow: hidden; }

/* MOBILE NAV (screens 900px and narrower)
   Hide the horizontal links, show the hamburger. When the user
   taps the hamburger, JS adds .is-open to .nav-links and the
   list drops down full-width. */
@media (max-width: 900px) {
  .nav { padding: 11px var(--side-pad); }
  .nav.is-scrolled { padding-block: 9px; }
  .nav-links {
    display: none;
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg) var(--side-pad);
    background: var(--paper);
    border-block-end: 1px solid var(--rule);
    gap: 4px;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; animation: navDrop var(--dur-base) var(--ease-out); }
  .nav-link {
    font-size: 18px;
    padding-block: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-transform: none;
    letter-spacing: 0;
  }
  .nav-link-icon { display: inline-block; width: 20px; height: 20px; opacity: 0.6; flex: none; }
  .nav-hamburger { display: inline-flex; }
}
@keyframes navDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   FOOTER (bottom of every page)
   Dark, on the brand-black ink colour. Three columns on desktop:
   logo + legal blurb on the left, Navigate column, Legal column.
   Stacks on mobile.
============================================================ */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2xl) var(--side-pad) var(--space-xl);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.footer-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 28px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-logo-mark { width: 52px; height: 52px; display: block; flex: none; }
.footer-logo .accent { color: var(--gold); }
.footer-blurb {
  font-size: var(--type-small);
  line-height: 1.7;
  color: rgba(250, 247, 241, 0.6); /* dim paper colour for legal-style copy on the dark footer */
  margin-block-start: var(--space-md);
  max-width: 460px;
  text-transform: none;
  letter-spacing: 0;
}
/* Social icon row in the footer. Outlined squares that fill gold on hover. */
.footer-socials {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(250, 247, 241, 0.22);
  color: rgba(250, 247, 241, 0.75);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.footer-social svg { width: 18px; height: 18px; }
.footer-social:hover,
.footer-social:focus-visible { color: var(--ink); background: var(--gold); border-color: var(--gold); }
/* Each "Navigate" / "Legal" column header. */
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: var(--space-md);
}
.footer-col a {
  display: block;
  font-size: var(--type-small);
  color: rgba(250, 247, 241, 0.7);
  padding-block: 6px; /* generous tap area on touch */
  transition: color var(--dur-fast);
}
.footer-col a:hover { color: var(--gold); }

/* The strip at the very bottom: copyright, domain, made-with credit. */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-block-start: var(--space-xl);
  margin-block-start: var(--space-xl);
  border-block-start: 1px solid rgba(250, 247, 241, 0.18);
  font-size: var(--type-micro);
  color: rgba(250, 247, 241, 0.7);  /* readable, was 0.5 */
}
.footer-credit {
  color: rgba(250, 247, 241, 0.7);  /* readable, was 0.4 */
  letter-spacing: 0.04em;
}
.footer-credit .heart {
  color: var(--gold);
  display: inline-block;
  padding-inline: 4px;
  transform: translateY(1px);
}
.footer-credit a {
  color: rgba(250, 247, 241, 0.85);  /* readable link colour */
  border-block-end: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.footer-credit a:hover { color: var(--gold); border-block-end-color: var(--gold); }

/* Screen-reader-only utility: visually hidden, still announced to
   assistive tech. Used for the "love" word next to the heart. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Mobile footer: stack columns, centre the bottom strip. */
@media (max-width: 900px) {
  .footer { padding: var(--space-xl) var(--side-pad) var(--space-lg); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
}


/* ============================================================
   LINKS AND CALLS-TO-ACTION
   .link-underline: gold underline that stays full width.
   .link-arrow: adds a right-arrow that nudges on hover.
============================================================ */
.link-underline {
  display: inline-block;
  font-size: var(--type-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding-block-end: 4px;
  min-height: 32px; /* generous tap target */
  line-height: 1.3;
}
.link-underline::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
}
.link-underline:hover { color: var(--gold); }

/* Adds a right-pointing arrow that slides on hover. */
.link-arrow::after {
  content: " \2192"; /* this is the arrow character */
  display: inline;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(4px); }


/* The scrolling brand marquee was retired in favour of the bento
   logo wall on the home page (see home.css .bento). */


/* ============================================================
   MUDCLOTH DIVIDER  -  thin full-bleed gold band between sections
   The motifs are painted onto the <canvas> by js/divider.js.
   Place <div class="nyasha-divider"><canvas class="mudcloth-canvas">
   </canvas></div> between any two sections.
============================================================ */
.nyasha-divider {
  width: 100%;
  height: 22px;
  position: relative;
  overflow: hidden;
}
.nyasha-divider canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* ============================================================
   PHOTO POSTER (placeholder until real photos arrive)
   When real .jpg/.webp photos of Daniel, Ingrid-Rose, Joshua
   are available, replace each <div class="poster"> with an
   <img> in the HTML. The poster styling will fall away.
============================================================ */
.poster {
  aspect-ratio: 3 / 4;
  background: var(--cream);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cream) 0%, var(--paper) 100%);
}
.poster-name {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 7vw, 72px);
  color: var(--ink);
  text-align: center;
  line-height: 0.95;
  padding: var(--space-md);
}
.poster-role {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-start: var(--space-md);
  font-size: var(--type-micro);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
}

/* Real photo variant: image fills the 3:4 frame, optional caption
   scrim at the bottom for the founders portrait. */
.poster--photo { padding: 0; }
.poster--photo::before { content: none; }
.poster--photo img,
.poster--photo picture { display: block; width: 100%; height: 100%; }
.poster--photo img {
  position: relative;
  z-index: 1;
  object-fit: cover;
  object-position: center 22%;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .team-card:hover .poster--photo img,
  .poster--founders:hover img { transform: scale(1.04); }
}
.poster-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2xl) var(--space-md) var(--space-md);
  background: linear-gradient(to top, rgba(20, 18, 14, 0.72), rgba(20, 18, 14, 0));
}
.poster-caption .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--paper);
  line-height: 1;
}
.poster-caption .name em { font-style: italic; }
.poster-caption .role {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}


/* ============================================================
   CONTACT FORM
   Each .form-field is a label above an input with a gold
   underline that activates when the field is focused.
   font-size on inputs is intentionally 17px to stop iOS Safari
   from zooming in when a field is tapped.
============================================================ */
.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-field {
  position: relative;
  border-block-end: 1px solid var(--rule);
  padding-block-end: 4px;
}
.form-field label {
  display: block;
  font-size: var(--type-micro);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  margin-block-end: 8px;
}
.form-input, .form-textarea {
  width: 100%;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 17px; /* 16px+ prevents iOS zoom on focus */
  color: var(--ink);
  padding-block: 8px;
  min-height: 44px; /* finger-friendly tap target */
  outline: none;
  resize: vertical;
}
.form-input:focus-visible, .form-textarea:focus-visible {
  outline: none; /* we use the gold underline below instead */
}
.form-field:focus-within { border-block-end-color: var(--gold); }
.form-textarea { min-height: 140px; }
.form-consent {
  font-size: var(--type-small);
  color: var(--ash);
  text-transform: none;
  letter-spacing: 0;
}
.form-consent a { color: var(--gold-text); border-block-end: 1px solid var(--gold-text); }
.form-submit {
  align-self: flex-start;
  font-size: var(--type-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 12px 4px 8px; /* extra top/bottom padding for tap area */
  position: relative;
  cursor: pointer;
  min-height: 44px;
}
.form-submit::after {
  content: "";
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition: background var(--dur-fast);
}
.form-submit:hover { color: var(--gold); }
.form-submit:hover::after { background: var(--gold); }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.form-status {
  font-size: var(--type-small);
  color: var(--ash);
  text-transform: none;
  letter-spacing: 0;
  min-height: 1.5em;
}
.form-status[data-state="success"] { color: var(--gold-deep); }
.form-status[data-state="error"]   { color: #c0392b; }


/* ============================================================
   COOKIE BANNER
   Sits fixed at the bottom of the page. Slides up after 1.5s.
   Disappears once the user clicks Accept (state remembered in
   localStorage so it does not show again).
============================================================ */
.cookies {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline: var(--space-md);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  z-index: var(--z-cookie);
  border: 1px solid var(--gold);
  max-width: 720px;
  margin-inline: auto;
  transform: translateY(calc(100% + var(--space-md)));
  transition: transform var(--dur-slow) var(--ease-out);
}
.cookies.is-visible { transform: translateY(0); }
.cookies p {
  font-size: var(--type-small);
  text-transform: none;
  letter-spacing: 0;
  color: rgba(250, 247, 241, 0.9);  /* paper at 90% for readable contrast on ink */
  line-height: 1.5;
}
.cookies a { color: var(--gold); border-block-end: 1px solid var(--gold); }
.cookies button {
  font-size: var(--type-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);  /* visible on dark background */
  background: transparent;
  padding: 12px 24px;
  min-height: 44px;
  border: 1px solid var(--gold);
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
  cursor: pointer;
}
.cookies button:hover { background: var(--gold); color: var(--ink); }
@media (max-width: 640px) {
  .cookies {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md);
    inset-inline: var(--space-sm);
    inset-block-end: var(--space-sm);
  }
  .cookies button { width: 100%; }
}


/* ============================================================
   CUSTOM CURSOR (results page case study only)
   A gold dot follows the mouse. Expands to a circle when
   hovering interactive elements. Disabled on touch screens
   and for users who prefer reduced motion.
============================================================ */
.cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out),
              background var(--dur-base);
  mix-blend-mode: difference;
  display: none;
}
.cursor.is-active { display: block; }
.cursor.is-hover { width: 48px; height: 48px; background: transparent; border: 1px solid var(--gold); }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
}


/* ============================================================
   LEGAL PAGES (privacy.html, disclaimer.html)
   Long-form text pages. Reading width capped at --reading-max-w
   for comfortable line length.
============================================================ */
.legal { padding-block: clamp(100px, 18vw, 160px) clamp(60px, 12vw, 120px); }
.legal h1 { margin-block-end: var(--space-xs); }
.legal-updated { color: var(--ash); margin-block-end: var(--space-2xl); }
.legal-body { max-width: var(--reading-max-w); }
.legal-body h2 { margin-block-start: var(--space-xl); margin-block-end: var(--space-sm); color: var(--ink); }
.legal-body p { margin-block-end: var(--space-md); color: var(--ash); }


/* ============================================================
   404 PAGE
   Full-screen, centred. Shown only when a URL does not match
   any page on the site.
============================================================ */
.not-found {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-xl);
}
.not-found em { color: var(--gold); }


/* ============================================================
   HERO BADGE  -  the small pill above the home hero headline
============================================================ */
.hero-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--coral-soft);
  color: var(--coral);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  transform: rotate(-1.5deg);
  margin-block-end: var(--space-md);
}


/* ============================================================
   PSST LINK  -  the easter-egg footer link
============================================================ */
.footer-psst {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-small);
  color: var(--gold);
  letter-spacing: 0;
  text-transform: none;
  border-block-end: 1px dashed rgba(201, 168, 76, 0.5);
  padding-block-end: 1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  cursor: pointer;
}
.footer-psst:hover { color: var(--coral); border-block-end-color: var(--coral); }


/* ============================================================
   MODAL  -  small centred overlay used by the psst link
============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.modal.is-open { pointer-events: auto; opacity: 1; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(31, 27, 22, 0.6);
  cursor: pointer;
}
.modal-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--gold);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  max-width: 480px;
  width: 100%;
  transform: translateY(20px);
  transition: transform var(--dur-base) var(--ease-out);
}
.modal.is-open .modal-card { transform: translateY(0); }
.modal-card h2 { margin-block-end: var(--space-md); font-size: clamp(28px, 4vw, 40px); }
.modal-card p { color: var(--ash); margin-block-end: var(--space-lg); }
.modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px; height: 36px;
  font-size: 24px;
  line-height: 1;
  color: var(--ash);
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.modal-close:hover { color: var(--ink); background: var(--cream); }


/* ============================================================
   TOOLTIP  -  quirky hand-written tips on key elements
   Triggered by hover/focus on desktop or tap on mobile.
============================================================ */
.tooltip {
  position: absolute;
  z-index: 600;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--gold);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  max-width: 280px;
  box-shadow: 0 6px 24px rgba(31, 27, 22, 0.12);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none;
}
.tooltip.is-visible { opacity: 1; transform: scale(1); }
.tooltip[data-accent="coral"] { border-color: var(--coral); }

[data-tip] {
  cursor: help;
  position: relative;
}
[data-tip]:focus-visible { outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tooltip { transition: opacity 50ms ease; transform: none !important; }
}

/* ============================================================
   DOODLES  -  hand-drawn marker accents in gold SVG
============================================================ */
.doodle {
  display: inline-block;
  color: var(--gold);
  pointer-events: none;
  flex-shrink: 0;
}
.doodle path { vector-effect: non-scaling-stroke; }

/* hosts the marker SVGs that need absolute positioning */
.doodle-host {
  position: relative;
  display: inline-block;
}

/* SQUIGGLE under hero italic */
.doodle-squiggle {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  width: 100%;
  height: 0.18em;
  margin-block-start: -0.05em;
}

/* CIRCLE around case study stat */
.doodle-host-circle {
  display: inline-block;
  position: relative;
  padding: 0.3em 0.4em;
}
.doodle-host-circle .doodle-circle {
  position: absolute;
  inset-block-start: -10%;
  inset-inline-start: -10%;
  width: 120%;
  height: 120%;
}

/* BRACKETS around numbers */
.doodle-host-brackets {
  display: inline-grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 8px;
}
.doodle-brackets {
  width: 24px;
  height: 1.2em;
  color: var(--gold);
}
.doodle-brackets-right { transform: scaleX(-1); }

/* ARROW doodle next to CTA */
.doodle-arrow {
  width: 36px;
  height: 16px;
  margin-inline-start: 8px;
  vertical-align: middle;
  color: var(--gold);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base);
}
a:hover .doodle-arrow,
.link-arrow:hover .doodle-arrow {
  transform: translateX(6px);
  color: var(--coral);
}

/* STAR in footer credit */
.doodle-star {
  width: 14px;
  height: 14px;
  margin-inline-end: 4px;
  vertical-align: middle;
  color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .doodle-arrow { transition: none; }
}


/* ============================================================
   PAGE LOADER
   Full-screen overlay shown on every page while assets load,
   and briefly re-shown when navigating to another page.
   Visible by default (no is-hidden); JS adds is-hidden once
   window.load fires. z-index 9999 sits above nav, modal,
   tooltip, and the cursor layer.
============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Rolling-ball animation */
.loader {
  height: 60px;
  aspect-ratio: 2;
  position: relative;
}
.loader:before {
  content: "";
  position: absolute;
  inset: 100% 75% -3px 0;
  background: #524656;
  animation: l4-0 1s linear infinite alternate;
}
.loader:after {
  content: "";
  position: absolute;
  inset: auto 42.5% 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #CF4647;
  animation:
    l4-1 1s cubic-bezier(0,700,1,700) infinite alternate,
    l4-2 1s linear infinite alternate;
}
@keyframes l4-0 {
  0%,30% { translate: 0%   -2px; rotate:  20deg; }
  70%,to { translate: 300% -2px; rotate: -20deg; }
}
@keyframes l4-1 {
  0%,2%  { bottom: 0%; }
  98%,to { bottom: .1%; }
}
@keyframes l4-2 {
  0% { translate: -220%; }
  to { translate:  220%; }
}

@media (prefers-reduced-motion: reduce) {
  .loader:before,
  .loader:after { animation: none; }
}