/* ─────────────────────────────────────────────────────────────────────────────
   Layout regions — site header, mobile menu, footer. Shared by every page.
   ───────────────────────────────────────────────────────────────────────────── */

@layer layout {

  /* ── Header ───────────────────────────────────────────────────────────────
     A floating glass bar that is always present. JS adds:
       .is-scrolled — after the first 24px (the glass becomes denser)
       .is-compact  — once the page is under way (the bar narrows and slims)
     and writes --progress (0–1) for the reading-progress hairline. */
  .site-header {
    position: fixed;
    inset: var(--s-3) 0 auto;
    z-index: 50;
    pointer-events: none;
  }

  .site-header__bar {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    height: var(--header-h);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--s-5) var(--s-3);
    border-radius: var(--r-pill);
    background-color: var(--bar-surface);
    border: 1px solid var(--bar-edge);
    box-shadow: var(--bar-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition:
      height var(--dur-slow) var(--ease-out),
      max-width var(--dur-slow) var(--ease-out),
      background-color var(--dur-base) linear,
      box-shadow var(--dur-base) linear;
  }
  .site-header.is-scrolled .site-header__bar {
    background-color: var(--bar-surface-raised);
    box-shadow: var(--bar-shadow-raised);
  }
  .site-header.is-compact .site-header__bar { height: 62px; max-width: 1040px; }
  .site-header.is-compact .brand { font-size: 1.3rem; }
  .site-header.is-compact .brand__logo { width: 2.35rem; height: 2.35rem; }

  .site-header__progress {
    position: absolute;
    inset: auto var(--s-8) -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--pink);
    transform-origin: right;
    transform: scaleX(var(--progress, 0));
    opacity: 0;
    transition: opacity var(--dur-base) linear;
  }
  .site-header.is-scrolled .site-header__progress { opacity: 0.8; }

  /* The academy's mark (.brand): components.css — every interface's bar wears it. */

  /* Navigation with a soft pill that glides to the link being pointed at and
     settles back on the current page (JS sets --pill-*). Without JS the
     current link carries the pill colour itself. */
  .site-nav { position: relative; display: flex; align-items: center; gap: var(--s-1); }
  .site-nav__pill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pill-w, 0);
    height: var(--pill-h, 0);
    translate: var(--pill-x, 0) var(--pill-y, 0);
    border-radius: var(--r-pill);
    background: var(--bar-current);
    box-shadow: var(--bar-current-ring);
    opacity: var(--pill-o, 0);
    transition:
      translate var(--dur-base) var(--ease-out),
      width var(--dur-base) var(--ease-out),
      opacity var(--dur-fast) linear;
  }
  .site-nav__pill.is-instant { transition: none; }
  .site-nav a {
    position: relative;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    color: var(--ink-2);
    font-size: var(--fs-small);
    font-weight: 500;
    transition: color var(--dur-fast) linear;
  }
  .site-nav a:hover { color: var(--ink); }
  .site-nav a[aria-current="page"] { color: var(--pink-strong); }
  .site-nav:not(.has-pill) a[aria-current="page"] { background: var(--bar-current); box-shadow: var(--bar-current-ring); }

  .site-header__actions { display: flex; align-items: center; gap: var(--s-2); }

  .menu-toggle { display: none; }

  /* ── Mobile menu ──────────────────────────────────────────────────────── */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-content: start;
    gap: var(--s-8);
    padding: calc(var(--header-h) + var(--s-10)) var(--gutter) var(--s-10);
    background: rgb(252 248 249 / 0.86);
    backdrop-filter: saturate(150%) blur(24px);
    -webkit-backdrop-filter: saturate(150%) blur(24px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  html.menu-open { overflow: hidden; }
  .mobile-menu__links { display: grid; gap: var(--s-2); }
  .mobile-menu__links a {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    padding-block: var(--s-2);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
  .mobile-menu__close { position: absolute; top: calc(var(--s-3) + 14px); inset-inline-end: calc(var(--gutter) + var(--s-2)); }

  @media (max-width: 900px) {
    .site-nav { display: none; }
    .menu-toggle { display: grid; }
    .site-header__bar { padding-inline: var(--s-4) var(--s-2); height: 64px; }
    .site-header.is-compact .site-header__bar { height: 56px; }
    :root { --header-h: 64px; }
  }
  /* Phones: the bar keeps the brand and the menu; sign-in lives in the menu
     and in the hero's second action. */
  @media (max-width: 420px) {
    .site-header__actions .btn { display: none; }
    .brand { font-size: 1.3rem; gap: var(--s-2); }
    .brand__logo { width: 2.5rem; height: 2.5rem; }
  }

  /* ── Inner page hero ──────────────────────────────────────────────────────
     Breadcrumbs, title and lead on the start side; an illustration on the
     other. Sits under the floating header. */
  .page-hero {
    position: relative;
    isolation: isolate;
    padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem));
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  }
  .page-hero .ambient { --glow-a: 18% 45%; --glow-b: 86% 30%; }
  .page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-10);
  }
  .page-hero__copy { display: grid; gap: var(--s-4); max-width: 46rem; }
  .page-hero__title { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); line-height: var(--lh-tight); }
  .page-hero__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.85; max-width: 38rem; }
  .page-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
  .page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
  .page-hero__line { display: block; }
  .page-hero__line--accent { color: var(--pink); }
  .page-hero .highlight::before { animation: highlight-draw 0.8s var(--ease-out) 0.75s both; }
  .page-hero__art { width: clamp(9rem, 5rem + 12vw, 16rem); animation: sticker-float 7s ease-in-out infinite; }
  @media (max-width: 720px) {
    .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .page-hero__art { position: absolute; inset-inline-end: var(--gutter); top: calc(var(--header-h) + var(--s-6)); width: 6rem; opacity: 0.9; }
  }

  /* Photo variant: the picture runs from edge to edge and the copy sits on its
     open side. On wide screens the hero keeps close to the picture's
     proportion, so its open side stays where the copy is; the copy column is
     measured against the viewport, since the picture scales with it. The page
     names the picture's focus (--photo-focus), how far the column stands off
     the start edge (--photo-inset) and how wide it is (--photo-copy), and
     where the light veil behind the copy sits (--photo-veil-at). Narrower
     screens put the copy first and the picture under it. */
  .page-hero--photo {
    display: grid;
    align-items: center;
    min-height: clamp(34rem, 50vw, 88svh);
    padding-top: calc(var(--header-h) + var(--s-10));
    padding-bottom: var(--s-10);
    overflow: clip;
  }
  .page-hero__photo { position: absolute; inset: 0; z-index: -1; }
  .page-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-focus, 50% 50%); }
  .page-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(closest-side at var(--photo-veil-at, 80% 50%), rgb(252 248 249 / 0.55), transparent),
      linear-gradient(to bottom, transparent 80%, var(--bg));
  }
  .page-hero--photo .page-hero__grid {
    width: auto;
    margin: 0;
    padding-inline: clamp(var(--gutter), var(--photo-inset, 5.5vw), 12rem) 0;
    grid-template-columns: minmax(0, var(--photo-copy, 30vw));
    justify-content: start;
  }
  .page-hero--photo .page-hero__copy { gap: var(--s-5); }
  /* The title scales with the column, so its lines never break (see the page
     for the widest line's measure). */
  .page-hero--photo .page-hero__title { font-size: min(4.4rem, var(--photo-title, 3.5vw)); line-height: var(--lh-tight); }
  .page-hero--photo .page-hero__line { white-space: nowrap; }
  .page-hero--photo .page-hero__lead { font-size: clamp(var(--fs-lead), 0.5rem + 0.85vw, 1.35rem); }
  @media (max-width: 1199px) {
    .page-hero--photo { min-height: 0; align-items: start; padding-bottom: 0; }
    .page-hero__photo { position: relative; inset: auto; z-index: 0; grid-row: 2; aspect-ratio: 16 / 9; margin-top: var(--s-6); }
    .page-hero__photo::after { background: linear-gradient(to bottom, var(--bg), transparent 16%, transparent 78%, var(--bg)); }
    .page-hero--photo .page-hero__grid { grid-row: 1; padding-inline: var(--gutter); grid-template-columns: minmax(0, 40rem); }
    .page-hero--photo .page-hero__title { font-size: min(3.8rem, var(--photo-title-narrow, 9vw)); }
  }
  @media (max-width: 640px) {
    .page-hero__actions .btn { flex: 1 1 100%; }
    .page-hero__photo { aspect-ratio: 5 / 4; }
    .page-hero__photo img { object-position: var(--photo-focus-narrow, var(--photo-focus, 50% 50%)); }
  }

  /* ── Section variants ─────────────────────────────────────────────────── */
  .section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
  .section--deep { background: var(--bg-deep); }

  /* ── Ambient light (the only decorative colour on the page) ────────────────
     Two soft radial glows painted as a background. `closest-side` fades each
     glow out before the nearest edge, so a glow never meets a section
     boundary as a hard line, and no costly blur filter is needed.
     Sections place the glows with --glow-a (pink) and --glow-b (blush). */
  .ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(closest-side at var(--glow-a, 20% 40%), var(--glow-pink), transparent),
      radial-gradient(closest-side at var(--glow-b, 80% 60%), var(--glow-blush), transparent);
  }

  /* ── First-screen entrance ────────────────────────────────────────────────
     Pure CSS, so the hero never waits for JavaScript to become visible.
     `backwards` applies the start frame during the delay and holds nothing
     afterwards, leaving the elements' own transitions untouched. */
  @keyframes enter-rise { from { opacity: 0; translate: 0 22px; } }
  @keyframes enter-soft { from { opacity: 0; translate: 0 14px; filter: blur(8px); } }
  [data-enter] { animation: enter-rise 0.7s var(--ease-out) backwards; animation-delay: calc(40ms + var(--i, 0) * 70ms); }
  [data-enter="soft"] { animation-name: enter-soft; }

  /* ── Reveal on scroll ─────────────────────────────────────────────────────
     Hidden only when JS is running, so the page is fully readable without it. */
  .js [data-reveal] {
    opacity: 0;
    translate: 0 26px;
    transition:
      opacity 0.9s var(--ease-out),
      translate 1.1s var(--ease-out),
      filter 1.1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal="soft"] { filter: blur(8px); }
  .js [data-reveal].is-revealed { opacity: 1; translate: 0 0; filter: blur(0); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal] { opacity: 1; translate: none; filter: none; transition: none; }
    [data-enter], .page-hero__art, .page-hero .highlight::before { animation: none; }
  }

  /* ── Footer ───────────────────────────────────────────────────────────── */
  .site-footer {
    padding-block: var(--s-16) var(--s-8);
    background: var(--bg-deep);
    border-top: 1px solid var(--line);
  }
  .site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: var(--s-12);
  }
  .site-footer__about { display: grid; gap: var(--s-4); align-content: start; max-width: 26rem; }
  .site-footer__about p { color: var(--ink-2); }
  .site-footer__title { font-size: 1.1rem; margin-bottom: var(--s-4); }
  .site-footer__list { display: grid; gap: var(--s-2); }
  .site-footer__list a { color: var(--ink-2); transition: color var(--dur-fast) linear; }
  .site-footer__list a:hover { color: var(--pink-strong); }
  .site-footer__note { color: var(--ink-2); }

  .social { display: flex; gap: var(--s-2); }
  .social a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-2);
    border: 1px solid var(--line);
    transition: color var(--dur-fast) linear, transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) linear;
  }
  .social a:hover { color: var(--pink-strong); border-color: var(--pink-border); transform: translateY(-2px); }
  .social svg { width: 1.2rem; height: 1.2rem; }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-12);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--fs-small);
  }
  .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
  .site-footer__legal a:hover { color: var(--pink-strong); }

  @media (max-width: 900px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); }
    .site-footer__about { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
  }
}