/* ============================================================
   chrome.css — the persistent studio console: HUD frame, header,
   wire ticker, mobile sheet, footer, Cold Boot, mascot sprite.
   ============================================================ */

@layer components {

  /* ===============================================================
     THE FRAME — title-safe HUD

     One fixed element, pointer-events:none, aria-hidden. Corners are
     border-top/border-left on pseudo-elements: no SVG, no clip-path.
     Anything interactive (the recruit tab) lives OUTSIDE this element,
     because a focusable descendant of an aria-hidden container is an
     axe-core violation and a real keyboard failure.
     =============================================================== */

  .pg-hud {
    position: fixed;
    inset: max(var(--frame-inset), env(safe-area-inset-top))
      max(var(--frame-inset), env(safe-area-inset-right))
      max(var(--frame-inset), env(safe-area-inset-bottom))
      max(var(--frame-inset), env(safe-area-inset-left));
    z-index: var(--z-hud);
    pointer-events: none;
  }

  .pg-hud__corner {
    position: absolute;
    inline-size: 28px;
    block-size: 28px;
  }

  .pg-hud__corner::before,
  .pg-hud__corner::after {
    content: "";
    position: absolute;
    background: var(--hair-strong);
  }

  /* Horizontal arm */
  .pg-hud__corner::before {
    inline-size: 100%;
    block-size: 1px;
    transform: scaleX(1);
  }

  /* Vertical arm */
  .pg-hud__corner::after {
    inline-size: 1px;
    block-size: 100%;
    transform: scaleY(1);
  }

  .pg-hud__corner--tl {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .pg-hud__corner--tl::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    transform-origin: left;
  }

  .pg-hud__corner--tl::after {
    inset-block-start: 0;
    inset-inline-start: 0;
    transform-origin: top;
  }

  .pg-hud__corner--tr {
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .pg-hud__corner--tr::before {
    inset-block-start: 0;
    inset-inline-end: 0;
    transform-origin: right;
  }

  .pg-hud__corner--tr::after {
    inset-block-start: 0;
    inset-inline-end: 0;
    transform-origin: top;
  }

  .pg-hud__corner--bl {
    inset-block-end: 0;
    inset-inline-start: 0;
  }

  .pg-hud__corner--bl::before {
    inset-block-end: 0;
    inset-inline-start: 0;
    transform-origin: left;
  }

  .pg-hud__corner--bl::after {
    inset-block-end: 0;
    inset-inline-start: 0;
    transform-origin: bottom;
  }

  .pg-hud__corner--br {
    inset-block-end: 0;
    inset-inline-end: 0;
  }

  .pg-hud__corner--br::before {
    inset-block-end: 0;
    inset-inline-end: 0;
    transform-origin: right;
  }

  .pg-hud__corner--br::after {
    inset-block-end: 0;
    inset-inline-end: 0;
    transform-origin: bottom;
  }

  /* Edge registration ticks — same language as the sticker sheet's trim
     marks, which is why THE SHEET lands inside this system rather than
     next to it. */
  .pg-hud__tick {
    position: absolute;
    background: var(--hair-strong);
  }

  .pg-hud__tick--t,
  .pg-hud__tick--b {
    inline-size: 1px;
    block-size: 6px;
    inset-inline-start: 50%;
  }

  .pg-hud__tick--t {
    inset-block-start: 0;
  }

  .pg-hud__tick--b {
    inset-block-end: 0;
  }

  .pg-hud__tick--l,
  .pg-hud__tick--r {
    inline-size: 6px;
    block-size: 1px;
    inset-block-start: 50%;
  }

  .pg-hud__tick--l {
    inset-inline-start: 0;
  }

  .pg-hud__tick--r {
    inset-inline-end: 0;
  }

  .pg-hud__rail {
    position: absolute;
    inset-block: 0;
    display: none;
    align-items: center;
  }

  .pg-hud__rail--r {
    inset-inline-end: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-3);
  }

  .pg-hud__dot {
    inline-size: 6px;
    block-size: 6px;
    background: var(--hair-hot);
    transition: block-size var(--dur-2) var(--ease-out-quick),
      inline-size var(--dur-2) var(--ease-out-quick),
      background-color var(--dur-2) var(--ease-out-quick);
  }

  .pg-hud__dot[data-active="true"] {
    block-size: 12px;
    inline-size: 2px;
    background: var(--accent);
  }

  .pg-hud__progress {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    inline-size: 1px;
    block-size: 100%;
    transform-origin: top;
    transform: scaleY(var(--progress, 0));
    background: var(--hair-accent);
  }

  /* HUD in the 404 / alert regime */
  .pg-hud--active .pg-hud__corner::before,
  .pg-hud--active .pg-hud__corner::after,
  .pg-hud--active .pg-hud__tick {
    background: var(--hair-accent);
  }

  /* Responsive collapse, decided up front. Ornament density is exactly
     where designs like this die on a 390px screen. */
  .pg-hud__tick {
    display: none;
  }

  @media (min-width: 768px) {

    .pg-hud__tick {
      display: block;
    }
  }

  @media (min-width: 1280px) {

    .pg-hud__rail {
      display: flex;
    }
  }

  /* ===============================================================
     RECRUIT TAB — outside the HUD, because it is a real link.

     The left rail does double duty: when a role is open this replaces the
     page-name label. One element, two jobs, and no competing furniture on
     an already ornament-dense edge.
     =============================================================== */

  /* The positioned box stays in horizontal-tb and only the inner span
     rotates.

     This is not a style preference. Logical inset properties resolve against
     the ELEMENT'S OWN writing mode, so putting writing-mode: vertical-rl on
     the positioned element itself remaps every one of them: inline-start
     becomes top, block-start becomes right, and border-inline-start strips
     the top border. The tab ends up floating near the top-right instead of
     pinned to the left edge. Keep the rotation on a child. */

  .pg-recruit {
    display: none;
  }

  @media (min-width: 1280px) {

    .pg-recruit {
      position: fixed;
      inset-inline-start: 0;
      inset-block-start: 50%;
      transform: translateY(-50%);
      z-index: var(--z-tray);
      display: block;
      padding: var(--s-5) var(--s-2);
      background: var(--bg-1);
      border: var(--bd);
      border-inline-start: 0;
      color: var(--fg-2);
      transition: color var(--dur-2) var(--ease-out-quick),
        border-color var(--dur-2) var(--ease-out-quick);
    }

    .pg-recruit__text {
      display: block;
      /* rotate(180deg) so it reads bottom-to-top, which is the convention
         for a left-edge tab. Without it the text runs top-to-bottom and
         reads as if it fell over. */
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-family: var(--font-mono);
      font-size: var(--t-micro);
      text-transform: uppercase;
      white-space: nowrap;
    }

    :lang(en) .pg-recruit__text {
      letter-spacing: var(--ls-micro);
    }
  }

  @media (hover: hover) and (pointer: fine) {

    .pg-recruit:hover {
      color: var(--fg);
      border-color: var(--hair-accent);
    }
  }

  /* ===============================================================
     SITE HEADER
     =============================================================== */

  .pg-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-header);
    block-size: var(--h-header);
    display: flex;
    align-items: center;
    gap: var(--s-5);
    padding-inline: var(--gutter);
    /* Background and border only. Height NEVER animates -- that is layout
       thrash and it jitters visibly on mid-range Android.
       No backdrop-filter: at 0.92 alpha the blur is invisible and it pins a
       compositor layer for the life of the page. */
    background: transparent;
    border-block-end: 1px solid transparent;
    transition: background var(--dur-2) var(--ease-out-quick),
      border-color var(--dur-2) var(--ease-out-quick);
  }

  .pg-header[data-solid="true"] {
    background: var(--scrim-header);
    border-block-end-color: var(--hair);
  }

  /* The solidify trigger is a 1px sentinel observed by IntersectionObserver,
     never a scroll listener. */
  .pg-sentinel {
    position: absolute;
    inset-block-start: 96px;
    block-size: 1px;
    inline-size: 1px;
    pointer-events: none;
  }

  /* align-items: center, not baseline.

     An SVG is a replaced element, so its baseline is its bottom margin edge.
     Under `baseline` the whole graphic was hung off the wordmark's baseline
     rather than sharing it, which is half of why the mark sat low. The other
     half was inside the SVG and is fixed there. */
  .pg-header__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-inline-end: auto;
  }

  /* Inline SVG lockup. The wordmark inside it is a live <text> element, so it
     depends on Archivo being loaded -- and Archivo is font-display: optional,
     which means a first-time visitor without it cached sees the logo set in
     Arial. textLength keeps that fallback the right SIZE; converting the
     wordmark to outlines is the real fix if it ever matters. */
  .pg-header__logo {
    /* Fluid rather than fixed: at 320px the lockup, a 44px hamburger and the
       two gutters all have to fit inside 320px, which caps the small end.
       30px x 5.65 aspect = 169px, which leaves the row at 245 of 320.

       The viewBox is 192x34 but the ink only spans y 7.8-30.8, so a 36px box
       renders ~24px of actual mark inside a 64px header. */
    block-size: clamp(30px, 3.2vw, 36px);
    inline-size: auto;
    color: var(--fg);
  }

  .pg-nav {
    display: none;
    gap: var(--s-6);
  }

  .pg-nav__link {
    position: relative;
    font-family: var(--font-ui);
    font-size: var(--t-label);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--fg-2);
    padding-block: var(--s-3);
    transition: color var(--dur-2) var(--ease-out-quick);
  }

  :lang(en) .pg-nav__link {
    letter-spacing: var(--ls-label);
  }

  .pg-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-2) var(--ease-out-quick);
  }

  @media (hover: hover) and (pointer: fine) {

    .pg-nav__link:hover {
      color: var(--fg);
    }

    .pg-nav__link:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  }

  /* aria-current is the one intentional per-page difference in the chrome
     block. It is also the accessible signal -- the underline alone would be
     colour-only state. */
  .pg-nav__link[aria-current="page"] {
    color: var(--fg);
  }

  .pg-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* The holding page's nav items: present for identity, inert by intent.
     They follow the same 900px breakpoint as the real nav -- forcing them
     visible on mobile overflows a 320px header, because the logo alone is
     147px and the three labels are another ~234px. Below 900px the holding
     page is simply a logo, which is correct: there is no menu to open. */
  .pg-nav__link--off,
  .pg-link--off {
    color: var(--fg-3);
    cursor: default;
    opacity: 0.55;
  }

  .pg-nav__link--off::after,
  .pg-link--off::after {
    content: none;
  }

  .pg-burger {
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    color: var(--fg);
  }

  .pg-burger__bars,
  .pg-burger__bars::before,
  .pg-burger__bars::after {
    display: block;
    inline-size: 20px;
    block-size: 1px;
    background: currentColor;
  }

  .pg-burger__bars::before,
  .pg-burger__bars::after {
    content: "";
    position: relative;
  }

  .pg-burger__bars::before {
    inset-block-start: -6px;
  }

  .pg-burger__bars::after {
    inset-block-start: 5px;
  }

  @media (min-width: 900px) {

    .pg-nav {
      display: flex;
    }

    .pg-burger {
      display: none;
    }
  }

  /* ===============================================================
     THE WIRE — telemetry ticker

     No build numbers and no commit counts. Nothing in a no-build static
     site can source them, and rule 3 is that no number ships unless we
     can stand behind it.
     =============================================================== */

  .pg-ticker {
    position: fixed;
    inset-block-start: var(--h-header);
    inset-inline: 0;
    z-index: var(--z-ticker);
    block-size: var(--h-ticker);
    display: flex;
    align-items: center;
    background: var(--bg-1);
    border-block: var(--bd);
    overflow: hidden;
  }

  .pg-ticker__viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    /* Gradient edge masks. mask-image is paint-only and static. */
    -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-solid) 40px, var(--mask-solid) calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, var(--mask-solid) 40px, var(--mask-solid) calc(100% - 40px), transparent);
  }

  .pg-ticker__track {
    display: flex;
    inline-size: max-content;
    animation: pg-wire 60s linear infinite;
  }

  .pg-ticker[data-paused="true"] .pg-ticker__track {
    animation-play-state: paused;
  }

  @keyframes pg-wire {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(-50%, 0, 0);
    }
  }

  .pg-ticker__list {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    padding-inline-end: var(--s-6);
  }

  .pg-ticker__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-variation-settings: "wdth" 87.5;
    text-transform: uppercase;
    color: var(--fg-2);
  }

  :lang(en) .pg-ticker__item {
    letter-spacing: var(--ls-micro);
  }

  .pg-ticker__glyph {
    inline-size: 12px;
    block-size: 12px;
    flex: none;
    opacity: 0.7;
  }

  /* A REAL persistent pause button, not hover-and-focus.
     WCAG 2.2.2 requires a mechanism for auto-moving content over 5s. Hover
     pause fails it twice over: every hover rule here is behind
     @media (hover:hover), so touch users get nothing, and evergreen entries
     have no href so :focus-within never fires either. */
  .pg-ticker__pause {
    flex: none;
    inline-size: 44px;
    block-size: var(--h-ticker);
    display: grid;
    place-items: center;
    color: var(--fg-3);
    border-inline-start: var(--bd);
    font-family: var(--font-mono);
    font-size: var(--t-code);
    transition: color var(--dur-1) var(--ease-out-quick);
  }

  @media (hover: hover) and (pointer: fine) {

    .pg-ticker__pause:hover {
      color: var(--fg);
    }
  }

  /* Below 768px the rail docks to the bottom, clear of the iOS home
     indicator and Safari's bottom toolbar. */
  @media (max-width: 767px) {

    .pg-ticker {
      inset-block-start: auto;
      inset-block-end: 0;
      block-size: calc(var(--h-ticker) + env(safe-area-inset-bottom));
      padding-block-end: env(safe-area-inset-bottom);
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .pg-ticker__track {
      animation: none;
      transform: none;
    }

    .pg-ticker__list:nth-child(2) {
      display: none;
    }
  }

  /* A page can opt out of the ticker entirely (the holding page does). Its
     28px was reserved in three places, so all three have to give it back. */
  .pg-no-ticker .pg-standalone,
  .pg-no-ticker main > .pg-sect:first-child:not(.pg-hero) {
    padding-block-start: calc(var(--h-header) + var(--s-4));
  }

  @media (max-width: 767px) {

    .pg-no-ticker .pg-footer {
      padding-block-end: calc(var(--s-6) + env(safe-area-inset-bottom));
    }
  }

  /* ===============================================================
     MOBILE SHEET

     transform, not clip-path -- clip-path would clip the focus ring of
     every link inside it.
     =============================================================== */

  .pg-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet);
    background: var(--bg);
    padding: calc(var(--h-header) + var(--s-6)) var(--gutter) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease-inout-mech),
      visibility 0s linear var(--dur-3);
  }

  .pg-sheet[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--dur-3) var(--ease-inout-mech),
      visibility 0s linear 0s;
  }

  .pg-sheet__nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }

  .pg-sheet__link {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-variation-settings: "wdth" 100, "wght" 600;
    text-transform: uppercase;
    color: var(--fg);
    padding-block: var(--s-2);
  }

  .pg-sheet__close {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-end: var(--gutter);
    inline-size: 44px;
    block-size: 44px;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: var(--t-meta);
  }

  @media (min-width: 900px) {

    .pg-sheet {
      display: none;
    }
  }

  /* ===============================================================
     FOOTER PLINTH

     Three columns, not eleven. An 11-category footer announces
     departments a five-person studio does not have, and every link in it
     is a future 404.
     =============================================================== */

  .pg-footer {
    background: var(--bg-1);
    border-block-start: var(--bd-strong);
    padding-block: var(--s-8) var(--s-6);
  }

  .pg-footer__cols {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1fr;
  }

  @media (min-width: 480px) {

    .pg-footer__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 768px) {

    .pg-footer__cols {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .pg-footer__head {
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    text-transform: uppercase;
    color: var(--fg-3);
    margin-block-end: var(--s-4);
  }

  :lang(en) .pg-footer__head {
    letter-spacing: var(--ls-meta);
  }

  .pg-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  .pg-footer__base {
    margin-block-start: var(--s-8);
    padding-block-start: var(--s-5);
    border-block-start: var(--bd);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) var(--s-6);
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    color: var(--fg-3);
  }

  :lang(en) .pg-footer__base {
    letter-spacing: var(--ls-micro);
  }

  .pg-footer__top {
    margin-inline-start: auto;
  }

  /* ===============================================================
     BOG — the sprite mascot

     One horizontal SVG strip: 10 frames of 256px on a 288px pitch. The
     32px gutters matter -- stepped background-position on a gutterless
     strip bleeds a sliver of the adjacent frame at fractional DPRs.

     aria-hidden AND pointer-events:none. He is deliberately not clickable:
     a click target would need a <button>, an accessible name and a live
     region, or it is an aria-hidden focusable control. Not worth it for
     one joke.
     =============================================================== */

  [data-mascot] {
    --bog-size: 64px;
    --bog-u: calc(var(--bog-size) / 256);
    --frame: 0;
    display: block;
    inline-size: var(--bog-size);
    block-size: var(--bog-size);
    background-image: url("../img/bog-sprite.svg");
    background-repeat: no-repeat;
    background-size: calc(2880 * var(--bog-u)) calc(256 * var(--bog-u));
    background-position: calc(-288 * var(--frame) * var(--bog-u)) 0;
    pointer-events: none;
  }

  [data-mascot][data-state="idle"] {
    --frame: 0;
  }

  [data-mascot][data-state="blink-a"] {
    --frame: 1;
  }

  [data-mascot][data-state="blink-b"] {
    --frame: 2;
  }

  [data-mascot][data-state="wave"] {
    --frame: 3;
  }

  [data-mascot][data-state="clap-a"] {
    --frame: 4;
  }

  [data-mascot][data-state="clap-b"] {
    --frame: 5;
  }

  [data-mascot][data-state="think"] {
    --frame: 6;
  }

  [data-mascot][data-state="sleep"] {
    --frame: 7;
  }

  [data-mascot][data-state="alarm"] {
    --frame: 8;
  }

  [data-mascot][data-state="sign"] {
    --frame: 9;
  }

  /* The only overshoot in the system. The UI never bounces; the frog
     always does. When the one springy thing in three screenfuls is a frog,
     it lands. */
  [data-mascot] {
    transition: transform var(--dur-frog) var(--ease-frog);
  }

  /* The tray layer stays inert; only the link inside it takes pointer events,
     so the frog is clickable without the surrounding chrome swallowing
     clicks meant for the page. */
  .pg-tray__link {
    display: block;
    pointer-events: auto;
  }

  .pg-tray {
    position: fixed;
    inset-block-end: max(var(--frame-inset), env(safe-area-inset-bottom));
    inset-inline-end: max(var(--frame-inset), env(safe-area-inset-right));
    z-index: var(--z-tray);
    display: none;
    pointer-events: none;
  }

  @media (min-width: 768px) {

    .pg-tray {
      display: block;
    }
  }

  /* Mobile is not a subtraction table. Below 768px the tray is gone but Bog
     moves inline into the hero panel at 96px, running the same state
     machine. Without this, the mobile identity is four corner brackets. */
  .pg-bog-inline {
    --bog-size: 96px;
    display: block;
  }

  @media (min-width: 768px) {

    .pg-bog-inline {
      display: none;
    }
  }

  /* ===============================================================
     COLD BOOT — the anti-preloader

     No gate, no curtain, no percentage counter. HTML paints immediately
     and LCP fires normally; then the chrome assembles ON TOP of already
     visible content over ~900ms.

     The .boot class is hardcoded in the HTML and removed by a 950ms
     timeout that cannot strand. The keyframes are wrapped in
     no-preference, so shipping the class is always safe -- a single static
     file is served to everyone and the branch cannot be decided at build
     time.
     =============================================================== */

  @media (prefers-reduced-motion: no-preference) {

    .boot .pg-hud__corner::before {
      animation: pg-draw-x var(--dur-3) var(--ease-out-hud) both;
    }

    .boot .pg-hud__corner::after {
      animation: pg-draw-y var(--dur-3) var(--ease-out-hud) 70ms both;
    }

    .boot .pg-hud__tick {
      animation: pg-fade-in var(--dur-3) var(--ease-out-hud) 280ms both;
    }

    .boot .pg-header::after {
      animation: pg-draw-x var(--dur-4) var(--ease-out-hud) 180ms both;
    }

    .boot .pg-ticker__track {
      animation:
        pg-wire 60s linear infinite,
        pg-spin-up var(--dur-5) var(--ease-out-hud) both;
    }

    .boot .pg-tray [data-mascot] {
      animation: pg-pop var(--dur-frog) var(--ease-frog) 620ms both;
    }
  }

  /* The header's boot sweep rule. Present at all times so the pseudo-element
     exists; only the animation above is gated. */
  .pg-header::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 1px;
    background: var(--hair);
    transform-origin: left;
  }

  @keyframes pg-draw-x {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }

  @keyframes pg-draw-y {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }

  @keyframes pg-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes pg-spin-up {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes pg-pop {
    from {
      opacity: 0;
      transform: scale(0.4);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* ===============================================================
     VIEW TRANSITIONS

     Real page loads, no router. The fixed chrome is excluded by name or it
     gets captured in both the outgoing and incoming snapshots and
     cross-fades against itself.
     =============================================================== */

  .pg-header,
  .pg-ticker,
  .pg-hud,
  .pg-tray,
  .pg-recruit {
    view-transition-name: none;
  }
}

/* @view-transition is a top-level at-rule and is deliberately outside the
   @layer block above. A hard no-op where unsupported. */
@view-transition {
  navigation: auto;
}