/* ============================================================================
   PAGE: IT SUPPORT (it-support.html)
   Loaded only on this page, after style.css. Uses the same cascade layers
   and design tokens, so theming (light/dark) works automatically.
   Sections: signal hero · keycaps · exclusive accordion · diagonal split ·
             editorial · stacking cards · ticket checklist · orbit CTA
   ============================================================================ */

@layer sections {

  /* ===================== SIGNAL HERO ===================== */
  .sup-hero {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    min-height: min(100svh, 62rem);
    display: grid;
    align-items: center;
    padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 6vw, 5rem);
  }
  .sup-hero__grid { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
  @media (min-width: 960px) { .sup-hero__grid { grid-template-columns: 1.25fr .75fr; } }

  .sup-hero__title {
    font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.6rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .98;
    margin-bottom: 2rem;
  }
  .sup-hero__title em { color: var(--accent); font-weight: inherit; }
  .sup-hero__lead { font-size: var(--fs-lg); line-height: 1.4; letter-spacing: -.01em; max-inline-size: 40ch; margin-bottom: 1rem; }
  .sup-hero__text { color: var(--ink-soft); max-inline-size: 56ch; }

  /* Pulsing rings around a glass orb */
  .signal {
    position: relative;
    justify-self: center;
    inline-size: min(78vw, 26rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }
  .signal__ring {
    position: absolute;
    inset: 0;
    border-radius: var(--blob);
    border: 2px solid var(--accent);
    opacity: 0;
  }
  .signal__orb {
    position: relative;
    inline-size: 42%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
    background: var(--grad-k);
    color: #f5eee4;
    border: 2px solid var(--line);
    box-shadow: 10px 10px 0 var(--k-amber), var(--shadow-soft);
  }
  .signal__orb svg { inline-size: 48%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  /* ===================== KEYCAPS ===================== */
  .keys__head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  @media (min-width: 960px) { .keys__head { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
  .keys__title { font-size: var(--fs-xl); letter-spacing: -.035em; }
  .keys__intro { display: grid; gap: 1rem; color: var(--ink-soft); }
  .keys__lead { color: var(--ink); font-weight: 600; }

  /* Keycaps + simulator. Wide screens: keycaps left, simulator right (Z-pattern).
     Narrower: simulator first (it reacts to the keycaps below it). */
  .keys__body { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .keys__body .sim { order: -1; }
  @media (min-width: 1100px) {
    .keys__body { grid-template-columns: 1.1fr .9fr; }
    .keys__body .sim { order: 0; }
    .keys__body .keys__grid { grid-template-columns: repeat(2, 1fr); }
  }

  .keys__grid { display: grid; gap: clamp(.9rem, 1.6vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

  /* A keyboard key: thick bottom "side", presses down on hover/active */
  .keycap {
    border-radius: 18px;
    background: var(--surface-solid);
    border: 2px solid var(--line);
    border-bottom-width: 9px;
    font-weight: 600;
    font-size: var(--fs-md);
    line-height: 1.3;
    transition: translate .25s var(--ease-out), border-bottom-width .25s var(--ease-out), background-color .3s;
  }
  /* The whole key is a button: pressing it simulates that issue in the simulator */
  .keycap__btn {
    display: grid;
    align-content: start;
    gap: 1rem;
    inline-size: 100%;
    min-block-size: 0;
    padding: 1.4rem;
    border-radius: 16px;
    text-align: start;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .keycap__btn:focus-visible { outline-offset: 6px; }

  /* Flash card: front (icon + issue) turns over to the back (how we help).
     Both faces share one grid cell, so the key is as tall as the longer face. */
  .keycap__btn { perspective: 900px; }
  .keycap__face {
    grid-area: 1 / 1;
    display: grid;
    align-content: start;
    gap: 1rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: rotate .6s var(--ease-out);
  }
  .keycap__face--back { rotate: y -180deg; gap: .5rem; font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; }
  .keycap__how { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .keycap__btn[aria-pressed="true"] .keycap__face--front { rotate: y 180deg; }
  .keycap__btn[aria-pressed="true"] .keycap__face--back  { rotate: y 0deg; }
  .keycap:has([aria-pressed="true"]) { background: color-mix(in oklab, var(--k-amber) 16%, var(--surface-solid)); }
  @media (prefers-reduced-motion: reduce) { .keycap__face { transition: none; } }
  .keys__hint { font-size: var(--fs-sm); color: var(--ink-soft); }
  .keycap svg { inline-size: 2.2rem; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
  .keycap:hover,
  .keycap:has(.keycap__btn:active),
  .keycap.is-active { translate: 0 5px; border-bottom-width: 4px; background: color-mix(in oklab, var(--k-amber) 22%, var(--surface-solid)); }
  /* The key whose issue is being simulated stays pressed, icon in "alert" red */
  .keycap.is-active { border-color: var(--sim-down); }
  .keycap.is-active svg { stroke: var(--sim-down); }
  .keycap:nth-child(3n + 2) { background: color-mix(in oklab, var(--k-magenta) 8%, var(--surface-solid)); }

  /* ===================== INCIDENT SIMULATOR ===================== */
  .keys { --sim-ok: #5bd39b; --sim-down: #ff5d4d; --sim-fix: var(--k-amber); }

  .sim { margin: 0; display: grid; justify-items: center; gap: clamp(1.5rem, 3vw, 2rem); }

  /* Dark organic stage in both themes (the status colours need a night sky),
     with the page's neo-brutalist outline + amber offset — like the hero orb */
  .sim__stage {
    position: relative;
    inline-size: min(100%, 30rem);
    padding: 1.25rem 1.25rem 2.6rem;      /* room for the status pill where the blob narrows */
    border-radius: var(--blob);
    border: 2px solid var(--line);
    background:
      radial-gradient(55% 50% at 28% 22%, rgb(242 107 42 / .32), transparent 70%),
      radial-gradient(60% 55% at 85% 90%, rgb(156 10 94 / .3), transparent 70%),
      linear-gradient(160deg, #1d1440, #0b0a22 75%);
    box-shadow: 12px 12px 0 var(--k-amber), var(--shadow-soft);
    color: #f5eee4;
  }
  .sim__map { display: block; inline-size: 100%; overflow: visible; }

  .sim__orbit { fill: none; stroke: rgb(245 238 228 / .14); stroke-width: 1.5; stroke-dasharray: 2 7; }
  .sim__path  { stroke: rgb(245 238 228 / .2); stroke-width: 1.5; stroke-dasharray: 3 6; }
  /* Repair line: drawn from the hub to the affected node */
  .sim__link {
    stroke: var(--k-orange);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .9s var(--ease-out), opacity .4s;
  }
  .sim__link.is-on { stroke-dashoffset: 0; }

  /* Nodes: colour comes from data-state (ok / down / fix) */
  .sim__node { --c: var(--sim-ok); }
  .sim__node[data-state="down"] { --c: var(--sim-down); }
  .sim__node[data-state="fix"]  { --c: var(--sim-fix); }
  .sim__dot  { fill: var(--c); transition: fill .4s; }
  .sim__halo { fill: color-mix(in oklab, var(--c) 18%, transparent); stroke: color-mix(in oklab, var(--c) 55%, transparent); stroke-width: 1.5; transition: fill .4s, stroke .4s; transform-box: fill-box; transform-origin: center; }
  .sim__node text {
    fill: #f5eee4;
    font: 600 15px var(--font-sans);
    letter-spacing: .01em;
    text-anchor: middle;
  }

  .sim__hub-halo { fill: rgb(242 107 42 / .1); stroke: rgb(242 107 42 / .55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
  .sim__hub-core { fill: var(--k-indigo); stroke: var(--k-orange); stroke-width: 2; }
  .sim__k { fill: #fff; }

  /* Status pill: live text + LED in the current state colour */
  .sim__status {
    display: flex;
    align-items: center;
    gap: .6rem;
    inline-size: fit-content;
    max-inline-size: 78%;                 /* stays inside the blob's curved bottom */
    min-block-size: 2.4rem;
    margin: .25rem auto 0;
    padding: .5rem 1rem;
    text-align: center;
    line-height: 1.25;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / .06);
    border: 1px solid rgb(255 255 255 / .14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .sim__led { flex: none; inline-size: .6rem; aspect-ratio: 1; border-radius: 50%; background: var(--led, var(--sim-ok)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--led, var(--sim-ok)) 25%, transparent); transition: background-color .4s, box-shadow .4s; }
  .sim[data-phase="down"] { --led: var(--sim-down); }
  .sim[data-phase="fix"]  { --led: var(--sim-fix); }

  .sim__trigger svg { inline-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
  .sim__trigger[aria-disabled="true"] { opacity: .55; cursor: progress; }

  @media (prefers-reduced-motion: no-preference) {
    .sim__stage { animation: morph 16s ease-in-out infinite alternate; }
    .sim__node[data-state="down"] .sim__halo { animation: sim-pulse 1s ease-out infinite; }
    .sim__node[data-state="fix"]  .sim__halo { animation: sim-pulse 1.6s ease-out infinite; }
    .sim[data-phase] .sim__hub-halo { animation: sim-pulse 1.4s ease-out infinite; }
    @keyframes sim-pulse { 0% { scale: 1; opacity: 1; } 70% { scale: 1.45; opacity: .25; } 100% { scale: 1.5; opacity: 0; } }
  }

  .keys__note {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: 1.4rem 1.6rem;
    border-radius: var(--radius);
    max-inline-size: 60rem;
    margin-inline: auto;
  }
  .keys__note svg { flex: none; inline-size: 1.6rem; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }

  /* ===================== EXCLUSIVE ACCORDION ===================== */
  .helpdesk__grid { display: grid; gap: 2.5rem; }
  @media (min-width: 960px) { .helpdesk__grid { grid-template-columns: .8fr 1.2fr; gap: 6rem; align-items: start; } }
  .helpdesk__title { font-size: var(--fs-xl); letter-spacing: -.04em; line-height: 1; }
  .helpdesk__title em { color: var(--accent); font-weight: inherit; }

  .helpdesk__list { display: grid; border-top: 2px solid var(--line); }
  .fold { border-bottom: 2px solid var(--line); }
  .fold summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.6rem;
    cursor: pointer;
    font-size: var(--fs-lg);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.015em;
    transition: color .3s;
  }
  .fold summary::-webkit-details-marker { display: none; }
  .fold summary:hover { color: var(--accent); }
  /* Plus that turns into a minus */
  .fold__icon {
    flex: none;
    position: relative;
    inline-size: 2.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid currentColor;
    transition: rotate .5s var(--ease-spring), background-color .3s;
  }
  .fold__icon::before, .fold__icon::after {
    content: "";
    position: absolute;
    inset: 50% 28% auto;
    block-size: 2px;
    background: currentColor;
    translate: 0 -50%;
  }
  .fold__icon::after { rotate: 90deg; transition: rotate .4s var(--ease-out); }
  .fold[open] .fold__icon { rotate: 180deg; background: var(--k-amber); color: var(--k-indigo); }
  .fold[open] .fold__icon::after { rotate: 0deg; }
  .fold p { padding-bottom: 1.8rem; color: var(--ink-soft); max-inline-size: 60ch; }

  /* ===================== DIAGONAL SPLIT ===================== */
  .fit {
    position: relative;
    isolation: isolate;
    padding-block: clamp(4.5rem, 9vw, 8rem);
    margin-block: clamp(2rem, 4vw, 3rem);
  }
  .fit__panel {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grad-k);
    /* Mobile: slanted band behind the heading only */
    inset: 0 0 auto 0;
    block-size: clamp(17rem, 70vw, 22rem);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
  }
  @media (min-width: 900px) {
    /* Desktop: slanted panel on the left, ending well before the copy column */
    .fit__panel { inset: 0; block-size: auto; clip-path: polygon(0 0, 50% 0, 36% 100%, 0 100%); }
  }
  .fit__grid { display: grid; gap: 4rem; align-items: center; }
  @media (min-width: 900px) { .fit__grid { grid-template-columns: 1fr 1fr; gap: 8rem; } .fit__copy { padding-left: 2rem; } }
  .fit__title {
    color: #f5eee4;
    font-size: var(--fs-xl);
    letter-spacing: -.04em;
    line-height: 1;
  }
  .fit__title em { color: var(--k-amber); font-weight: inherit; }
  .fit__copy { display: grid; gap: 1.2rem; color: var(--ink-soft); }
  .fit__copy p:first-child { color: var(--ink); font-size: var(--fs-lg); line-height: 1.4; }
  /* Phones/tablets: the slanted band is drawn on the title itself, so it always wraps
     exactly around the heading (whatever its height) and the copy starts below it */
  @media (max-width: 899px) {
    .fit { padding-top: 0; }
    .fit__panel { display: none; }
    .fit__grid { gap: 1.5rem; }
    .fit__title {
      margin-inline: calc(var(--gutter) * -1);
      padding: clamp(3.5rem, 12vw, 5rem) var(--gutter) clamp(4.5rem, 16vw, 6.5rem);
      background: var(--grad-k);
      clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
    }
  }

  /* ===================== EDITORIAL ===================== */
  .editorial__title {
    font-size: clamp(3rem, 1.4rem + 8vw, 9.5rem);
    letter-spacing: -.055em;
    line-height: .88;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }
  .editorial__title em { color: var(--accent); font-weight: inherit; }
  .editorial__body { position: relative; display: grid; gap: 2rem; }
  @media (min-width: 900px) { .editorial__body { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; padding-bottom: 3rem; } }
  .editorial__lead { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
  /* Plain first letter (no drop cap); the whole paragraph carries the accent colour */
  .editorial__col { color: var(--accent); padding-left: 1.5rem; border-left: 3px solid var(--k-orange); }
  .editorial__seal {
    position: absolute;
    inline-size: clamp(6rem, 12vw, 9rem);
    right: 0;
    bottom: clamp(-7rem, -8vw, -4rem);
    fill: var(--k-amber);
    stroke: var(--line);
    stroke-width: 2;
  }
  .editorial__tick { fill: none; stroke: var(--k-indigo); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

  /* ===================== STACKING CARDS ===================== */
  .stack__title { font-size: var(--fs-xl); letter-spacing: -.035em; margin-bottom: clamp(2rem, 4vw, 3rem); max-inline-size: 18ch; }
  .stack__cards { display: grid; gap: 1.5rem; }
  .stack__card {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem + var(--n, 0) * 1.25rem);   /* each card pins slightly lower */
    min-block-size: clamp(16rem, 42svh, 22rem);
    display: grid;
    place-items: center;                         /* text centred both ways, room on every side */
    text-align: center;
    padding: clamp(1.75rem, 4vw, 3.5rem);
    border-radius: var(--radius);
    border: 2px solid var(--line);
    transform-origin: 50% 0;
    rotate: calc((var(--n, 0) - 1.5) * .7deg);   /* slight fan so the pile reads as a stack */
    box-shadow: 0 -18px 40px -24px rgb(20 8 50 / .35);
  }
  .stack__card:nth-child(1) { --n: 0; }
  .stack__card:nth-child(2) { --n: 1; }
  .stack__card:nth-child(3) { --n: 2; }
  .stack__card:nth-child(4) { --n: 3; }
  .stack__card p { font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); line-height: 1.45; max-inline-size: 62ch; }
  .stack__card--k     { background: var(--grad-k); color: #f5eee4; }
  .stack__card--paper { background: var(--surface-solid); }
  .stack__card--fire  { background: var(--grad-fire); color: var(--k-indigo); }
  .stack__card--ink   { background: var(--k-indigo); color: #f5eee4; }

  /* ===================== TICKET CHECKLIST ===================== */
  .share__grid { display: grid; gap: 3rem; align-items: center; }
  @media (min-width: 960px) { .share__grid { grid-template-columns: .8fr 1.2fr; gap: 5rem; } }
  .share__title { font-size: var(--fs-xl); letter-spacing: -.035em; margin-bottom: 1.25rem; }
  .share__title em { color: var(--accent); font-weight: inherit; }
  .share__head p { color: var(--ink-soft); font-size: var(--fs-lg); }

  /* Ticket: perforated notches on both sides via radial-gradient masks */
  /* Shadow lives on the wrapper because a mask would clip its own shadow */
  .ticket { filter: drop-shadow(8px 8px 0 var(--k-magenta)); }
  .ticket__paper {
    --notch: 18px;
    position: relative;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--surface-solid);
    border-radius: var(--radius);
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 70%, #0000 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 70%, #0000 98%, #000) right / 51% 100% no-repeat;
            mask:
      radial-gradient(circle var(--notch) at 0 70%, #0000 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 70%, #0000 98%, #000) right / 51% 100% no-repeat;
  }
  :root[data-theme="dark"] .ticket { filter: drop-shadow(8px 8px 0 var(--k-orange)); }
  .ticket__list { display: grid; gap: .4rem; }
  .ticket__list button {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem .75rem;
    border-radius: 14px;
    text-align: start;
    font-weight: 500;
    transition: background-color .3s, color .3s;
  }
  .ticket__list button:hover { background: var(--ink-mute); }
  .ticket__box {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.9rem;
    aspect-ratio: 1;
    border-radius: 9px;
    border: 2px solid var(--line);
    transition: background-color .3s, rotate .4s var(--ease-spring);
  }
  .ticket__box svg { inline-size: 1.15rem; fill: none; stroke: var(--k-indigo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s var(--ease-out); }
  .ticket__list button[aria-pressed="true"] .ticket__box { background: var(--k-amber); rotate: -8deg; }
  .ticket__list button[aria-pressed="true"] .ticket__box svg { stroke-dashoffset: 0; }
  .ticket__list button[aria-pressed="true"] { color: var(--ink-soft); }
  .ticket__foot {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px dashed var(--ink-mute);
    color: var(--ink-soft);
  }

  /* ===================== ORBIT CTA ===================== */
  .orbit-cta { position: relative; isolation: isolate; overflow-x: clip; }
  .orbit-cta__blob {
    position: absolute;
    z-index: -1;
    inline-size: clamp(22rem, 55vw, 48rem);
    aspect-ratio: 1;
    right: -10%;
    top: 50%;
    translate: 0 -50%;
    border-radius: var(--blob);
    background: var(--grad-brand);
    opacity: .16;
    filter: blur(10px);
  }
  .orbit-cta__grid { display: grid; gap: 3rem; align-items: center; }
  @media (min-width: 900px) { .orbit-cta__grid { grid-template-columns: 1.3fr .7fr; } }
  .orbit-cta__grid > div { display: grid; gap: 1.2rem; }
  .orbit-cta__title { font-size: var(--fs-xl); letter-spacing: -.035em; }
  .orbit-cta__title em { color: var(--accent); font-weight: inherit; }
  .orbit-cta__grid p { color: var(--ink-soft); max-inline-size: 56ch; }
  .orbit-cta__grid .orbit-cta__strong { color: var(--ink); }

  /* Big round CTA with a spinning conic-gradient border */
  @property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .orbit-cta__btn {
    position: relative;
    isolation: isolate;
    justify-self: center;
    inline-size: clamp(11rem, 20vw, 15rem);
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .5rem;
    border-radius: 50%;
    color: #f5eee4;
    font-weight: 600;
    font-size: var(--fs-md);
    transition: transform .4s var(--ease-out);
  }
  /* Button face: a later z-index:-1 layer paints above the ring (also z-index:-1) */
  .orbit-cta__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--k-indigo);
    transition: background-color .4s;
  }
  .orbit-cta__btn svg { inline-size: 1.6rem; fill: none; stroke: var(--k-amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .5s var(--ease-spring); }
  .orbit-cta__btn:hover svg { rotate: 45deg; }
  .orbit-cta__btn:hover::after { background: var(--k-magenta); }
  .orbit-cta__ring {
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from var(--spin), var(--k-amber), var(--k-orange), var(--k-magenta), var(--k-indigo), var(--k-amber));
  }
}

@layer motion {
  @keyframes ping   { 0% { opacity: .8; scale: .45; } 100% { opacity: 0; scale: 1.05; } }
  @keyframes spin   { to { --spin: 360deg; } }
  @keyframes rotate { to { rotate: 360deg; } }
  @keyframes char-wave {
    0%   { translate: 0 .6em; opacity: 0; }
    60%  { translate: 0 -.08em; opacity: 1; }
    100% { translate: 0 0; opacity: 1; }
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Letter-by-letter wave on the hero title (chars split by it-support.js) */
    .sup-hero__title.is-split .char { display: inline-block; animation: char-wave .8s var(--ease-out) both; animation-delay: calc(var(--c) * 28ms + 200ms); }
    .sup-hero__title .char:hover { color: var(--k-orange); transition: color .2s; }

    .signal__ring { animation: ping 3.6s cubic-bezier(.2, .7, .3, 1) infinite; }
    .signal__ring:nth-child(2) { animation-delay: 1.2s; }
    .signal__ring:nth-child(3) { animation-delay: 2.4s; }
    .signal__orb { animation: morph 12s ease-in-out infinite alternate, float 6s ease-in-out infinite; }

    .orbit-cta__ring { animation: spin 5s linear infinite; }
    .orbit-cta__blob { animation: morph 18s ease-in-out infinite alternate; }
    .editorial__seal path:first-child { transform-box: fill-box; transform-origin: center; animation: rotate 24s linear infinite; }

    /* Smooth height animation for the native accordion (progressive) */
    .fold { interpolate-size: allow-keywords; }
    .fold::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
    .fold[open]::details-content { block-size: auto; }

    @supports (animation-timeline: view()) {
      /* Diagonal panel "opens" as the section enters */
      .fit__panel {
        animation: fit-open linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
      }
      @keyframes fit-open { from { opacity: .3; translate: -12% 0; } to { opacity: 1; translate: 0 0; } }
    }
  }
}