:root {
    --void: #05060a;
    --void-2: #0b0d18;
    --plasma: #ff7a18;
    --plasma-2: #ffb547;
    --accretion: #ff4d2e;
    --halo: #7db4ff;
    --ink: #e9ecf5;
    --muted: #8a90a8;
    --bs-body-bg: var(--void);
    --bs-body-color: var(--ink);
    --bs-body-font-family: 'Sora', sans-serif;
    --bs-emphasis-color: #fff;
  }
  html { scroll-behavior: auto; }
  body {
    background:
      radial-gradient(1200px 700px at 75% -5%, rgba(255,122,24,.10), transparent 60%),
      radial-gradient(900px 600px at 10% 20%, rgba(125,180,255,.07), transparent 55%),
      var(--void);
    overflow-x: hidden;
  }
  ::selection { background: var(--plasma); color: #000; }

  /* starfield */
  .stars { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
  .stars::before, .stars::after {
    content:""; position:absolute; inset:-50%;
    background-image:
      radial-gradient(1px 1px at 20% 30%, #fff, transparent),
      radial-gradient(1px 1px at 70% 60%, #cdd6ff, transparent),
      radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent),
      radial-gradient(1px 1px at 85% 15%, #fff, transparent),
      radial-gradient(1px 1px at 55% 45%, #ffe9c7, transparent);
    background-size: 320px 320px, 280px 280px, 400px 400px, 250px 250px, 360px 360px;
    opacity:.5; animation: drift 140s linear infinite;
  }
  .stars::after { background-size: 500px 500px; opacity:.3; animation-duration: 220s; }
  @keyframes drift { to { transform: translateY(-160px); } }

  .display-font { font-family:'Fraunces', serif; font-weight:900; letter-spacing:-.02em; line-height:.95; }
  .mono { font-family:'Space Mono', monospace; }
  .text-plasma { color: var(--plasma-2) !important; }
  .text-muted2 { color: var(--muted) !important; }

  .navbar { backdrop-filter: blur(14px); background: rgba(5,6,10,.6) !important; border-bottom:1px solid transparent;
            padding-top:1.05rem; padding-bottom:1.05rem;
            transition: background-color .35s ease, box-shadow .35s ease, border-bottom-color .35s ease; }
  .navbar.shrink { background: rgba(5,6,10,.82) !important; box-shadow:0 12px 30px -14px rgba(0,0,0,.75); }
  /* grey hairline under the bar — desktop menu only, and only once the bar passes the hero */
  @media (min-width:1200px){
    .navbar.past-hero { border-bottom-color:#444; }
  }
  .navbar-brand { font-family:'Fraunces',serif; font-weight:900; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
  /* reserve the bus icon's advance width so the brand doesn't shift when the async icon font lands */
  .navbar-brand i { display:inline-block; width:1em; }

  /* animated underline for top-menu links */
  .navbar-nav .nav-link { position:relative; }
  .navbar-nav .nav-link::after {
    content:""; position:absolute; left:0; bottom:.15rem; height:2px; width:100%;
    background:var(--plasma-2); transform:scaleX(0); transform-origin:center;
    transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .navbar-nav .nav-link:hover::after,
  .navbar-nav .nav-link:focus::after,
  .navbar-nav .nav-link.active::after { transform:scaleX(1); }
  .navbar-nav .nav-link.active { color:var(--plasma-2); }

  /* ---- Lavalamp — fully self-contained, pure CSS, ZERO Bootstrap dependency
         (identical technique to the CodePen: :hover ~ sibling) ---- */
  .navbar > .container { display:flex; align-items:center; justify-content:space-between; }
  .lava-nav {
    position:relative; display:flex; flex-wrap:nowrap;
    background:transparent;
    border:1px solid transparent;   /* invisible, but keeps geometry identical */
    border-radius:.7rem;
  }
  .lava-item {
    position:relative; z-index:1; display:block;
    height:40px; line-height:40px; text-align:center;
    font-family:'Space Mono',monospace; font-size:15px; letter-spacing:.02em;
    text-transform:uppercase; text-decoration:none;
    color:var(--ink); white-space:nowrap; transition:color .35s ease;
  }
  .lava-item:hover, .lava-nav:not(:hover) .lava-item.active { color:#05060a; }
  .lava-item:nth-child(1){ width:130px; }
  .lava-item:nth-child(2){ width:100px; }
  .lava-item:nth-child(3){ width:105px; }
  .lava-item:nth-child(4){ width:130px; }
  .lava-item:nth-child(5){ width:130px; }
  .lava-item:nth-child(6){ width:130px; }
  .lava-item:nth-child(7){ width:140px; }
  .lava-item:nth-child(8){ width:90px; }
  .lava-blob {
    position:absolute; z-index:0; top:0; height:100%;
    border-radius:.6rem; pointer-events:none;
    transition:all .5s ease 0s;                        /* identical timing to the pen */
  }
  .lava-blob.rest-1, .lava-item:nth-child(1):hover ~ .lava-blob { left:0px;   width:130px; background:var(--plasma-2); }
  .lava-blob.rest-2, .lava-item:nth-child(2):hover ~ .lava-blob { left:130px; width:100px; background:var(--plasma-2); }
  .lava-blob.rest-3, .lava-item:nth-child(3):hover ~ .lava-blob { left:230px; width:105px; background:var(--plasma-2); }
  .lava-blob.rest-4, .lava-item:nth-child(4):hover ~ .lava-blob { left:335px; width:130px; background:var(--plasma-2); }
  .lava-blob.rest-5, .lava-item:nth-child(5):hover ~ .lava-blob { left:465px; width:130px; background:var(--plasma-2); }
  .lava-blob.rest-6, .lava-item:nth-child(6):hover ~ .lava-blob { left:595px; width:130px; background:var(--plasma-2); }
  .lava-blob.rest-7, .lava-item:nth-child(7):hover ~ .lava-blob { left:725px; width:140px; background:var(--plasma-2); }
  .lava-blob.rest-8, .lava-item:nth-child(8):hover ~ .lava-blob { left:865px; width:90px;  background:var(--plasma-2); }

  /* ---- Mobile nav: animated burger + right-side flyout (replaces the lavalamp below 1200px) ---- */
  .burger { display:none; width:44px; height:44px; border:0; background:transparent; padding:10px; cursor:pointer; }
  .burger span { display:block; width:24px; height:2px; margin:5px auto; background:var(--ink); border-radius:2px;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease, background-color .25s ease; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--plasma-2); }
  .burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--plasma-2); }

  .mobile-menu { position:fixed; top:0; right:0; bottom:0; width:min(78vw,320px); z-index:1029;
    background:rgba(5,6,10,.92); backdrop-filter:blur(18px); border-left:1px solid rgba(255,255,255,.08);
    padding:6rem 1.6rem 2rem; display:flex; flex-direction:column; gap:.35rem;
    transform:translateX(100%); visibility:hidden;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s; }
  .mobile-menu.open { transform:none; visibility:visible; }
  .mobile-menu a { font-family:'Space Mono',monospace; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink); text-decoration:none; padding:.7rem .9rem; border-radius:.5rem;
    transition: color .25s ease, background-color .25s ease; }
  .mobile-menu a:hover { background:rgba(255,255,255,.05); }
  .mobile-menu a.active { color:var(--plasma-2); background:rgba(255,122,24,.08); }

  @media (max-width:1199.98px){
    .lava-nav { display:none; }
    .burger { display:block; }
  }
  @media (min-width:1200px){
    .mobile-menu { display:none; }
  }

  /* hero */
  .hero { position:relative; min-height: 100vh; display:flex; align-items:center; overflow:hidden; isolation:isolate; }
  /* full-bleed hero background image */
  .hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
  /* dark scrim so the heading + text stay readable over the image */
  .hero::after { content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(rgba(5,6,10,.18), rgba(5,6,10,.18)),
               linear-gradient(90deg, rgba(5,6,10,.82) 0%, rgba(5,6,10,.6) 38%, rgba(5,6,10,.28) 66%, rgba(5,6,10,.08) 100%),
               linear-gradient(0deg, rgba(5,6,10,.6) 0%, rgba(5,6,10,.1) 42%, transparent 70%); }
  .singularity {
    position:absolute; right:-6%; top:50%; transform:translateY(-50%);
    width:min(58vw,760px); aspect-ratio:1; border-radius:50%;
    background: #000;
    box-shadow:
      0 0 0 2px rgba(255,181,71,.25),
      0 0 60px 12px rgba(255,122,24,.35),
      inset 0 0 80px 30px rgba(0,0,0,1);
    z-index:-1;
  }
  .singularity::before {
    content:""; position:absolute; inset:-22%; border-radius:50%;
    background: conic-gradient(from 0deg, var(--accretion), var(--plasma-2), #fff6e0, var(--plasma), var(--accretion));
    -webkit-mask: radial-gradient(circle, transparent 47%, #000 49%, #000 58%, transparent 62%);
            mask: radial-gradient(circle, transparent 47%, #000 49%, #000 58%, transparent 62%);
    filter: blur(2px) saturate(1.3);
    animation: spin 18s linear infinite;
  }
  .singularity::after {
    content:""; position:absolute; inset:8%; border-radius:50%;
    box-shadow: 0 0 50px 8px rgba(125,180,255,.25);
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* the old circular hero graphics are replaced by the full-bleed .hero::before nebula */
  .singularity, .nebula { display:none !important; }

  .section { padding: clamp(4rem, 9vw, 9rem) 0 calc(clamp(2.4rem, 5.4vw, 5.4rem) + 22px); position:relative; }
  /* below sm the container is full-bleed and .section zeroes its x-padding, so the
     g-5 row's negative margins land content flush at the screen edge — restore a margin */
  @media (max-width: 575.98px){
    .container.section { padding-left: 1.5rem; padding-right: 1.5rem; }
  }
  .eyebrow { font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.35em; font-size:1rem; color:var(--plasma-2); }

  .glass { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18); border-radius: 1.25rem; backdrop-filter: blur(6px); }
  /* card rows: the gap above is the collapsed paragraph/row margin (1.5rem) plus the row's
     internal gutter padding (1.5rem) — the bottom margin must total the same 3rem */
  article .row.g-4.my-4:not(.align-items-center) { margin-bottom: 3rem !important; }
  /* image rows: same equalization — bottom margin matches collapsed top margin + gutter padding */
  article .row.g-4.align-items-center.my-3 { margin-bottom: 2.5rem !important; }
  article .row.g-4.align-items-center.my-4 { margin-bottom: 3rem !important; }
  article .row.g-4.align-items-center.mb-3 { margin-top: 0 !important; margin-bottom: 3rem !important; }
  article .row.g-4.align-items-center.mt-5 { margin-top: 1.5rem !important; }
  /* standalone full-width banner frames (they all carry the legacy .reveal class): symmetric 3rem gaps */
  article .img-frame.reveal { margin-top: 3rem; margin-bottom: 3rem !important; }
  /* #6ea8fe-tinted variant, used only by the closing panel above the footer */
  .glass-accent { background: rgba(110,168,254,.05); border-color: rgba(110,168,254,.3); }
  .card-tilt { transition: transform .4s ease, box-shadow .4s ease; }
  .card-tilt:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(255,122,24,.25); }

  /* image card — framed image with a SEPARATE caption bar beneath it (not overlaid) */
  .img-frame { border-radius:1.25rem; overflow:hidden; border:2px solid rgba(255,255,255,.12);
    position:relative; display:flex; flex-direction:column; background:rgba(255,255,255,.02);
    aspect-ratio:auto !important; transition: box-shadow .5s ease, border-color .5s ease; }
  .img-frame img { display:block; width:100%; height:clamp(220px, 32vw, 420px); object-fit:cover;
    background:#eef0f5; transition: filter .5s ease; }
  .img-frame:hover { border-color:rgba(255,181,71,.45); box-shadow:0 0 45px -12px rgba(255,122,24,.4); }
  .img-frame:hover img { filter:brightness(1.04) saturate(1.05); }
  /* caption sits BELOW the image as its own bar */
  .img-credit { position:static; font-size:.72rem; line-height:1.45; padding:.6rem .85rem;
    background:rgba(255,255,255,.035); border-top:1px solid rgba(255,255,255,.07);
    color:var(--muted); font-family:'Space Mono',monospace;
    align-self:stretch; }  /* .full/.diagram frames center their children — the caption bar must still span the frame */
  /* diagrams (transparent background / dark text): show in full on a light padded panel */
  .img-frame.diagram { align-items:center; }
  .img-frame.diagram img { width:auto; max-width:100%; height:auto; max-height:420px; object-fit:contain;
    background:#f5f6fa; padding:1.1rem; box-sizing:border-box; filter:none; }
  .img-frame.diagram:hover img { filter:none; }
  /* full: opaque infographics with embedded labels — show the WHOLE image, dark letterbox (no crop) */
  .img-frame.full { align-items:center; }
  .img-frame.full img { width:auto; max-width:100%; height:auto; max-height:560px; object-fit:contain; }

  .stat-num { font-family:'Fraunces',serif; font-weight:900; font-size: clamp(2.4rem,5vw,3.6rem); line-height:1; background:linear-gradient(120deg,#fff,var(--plasma-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

  .timeline { position:relative; padding-left:0; list-style:none; }
  .timeline::before { content:""; position:absolute; left:18px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--plasma),transparent); }
  .timeline li { position:relative; padding:0 0 2.4rem 3.4rem; }
  .timeline li::before { content:""; position:absolute; left:11px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--void); border:2px solid var(--plasma-2); box-shadow:0 0 14px var(--plasma); }

  .accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--ink); --bs-accordion-border-color: rgba(255,255,255,.08); --bs-accordion-active-bg: rgba(110,168,254,.08); --bs-accordion-active-color: #6ea8fe; --bs-accordion-btn-color: var(--ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(110,168,254,.2); }
  .accordion-button { font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; }
  /* no highlighted border under the open item's header */
  .accordion-button:not(.collapsed) { box-shadow:none; }
  /* no focus ring on mouse click (kept for keyboard focus via :focus-visible) */
  .accordion-button:focus:not(:focus-visible) { box-shadow:none; }

  .progress { background: rgba(255,255,255,.06); height:.5rem; }
  .lead-drop::first-letter { font-family:'Fraunces',serif; font-weight:900; font-size:3.4em; float:left; line-height:.8; padding:.05em .12em 0 0; color:var(--plasma-2); }

  footer { border-top:1px solid rgba(255,255,255,.07); }
  .hr-glow { height:1px; border:0; background:linear-gradient(90deg,transparent,var(--plasma),transparent); opacity:.5; }
  .badge-soft { background:rgba(255,122,24,.12); color:var(--plasma-2); border:1px solid rgba(255,122,24,.2); }
  a.link-plasma { color:var(--plasma-2); text-decoration:none; } a.link-plasma:hover { text-decoration:underline; }
  .toc-link {
    position:relative; color:var(--muted); text-decoration:none;
    padding:.4rem 0 .4rem 1.1rem; display:block; font-size:.9rem;
    border-radius:.35rem;
    transition: color .35s ease, background-color .35s ease,
                padding-left .35s ease, text-shadow .35s ease;
  }
  /* growing indicator bar on the left */
  .toc-link::before {
    content:""; position:absolute; left:0; top:50%; width:2px; height:70%;
    background:var(--plasma-2); border-radius:2px;
    transform:translateY(-50%) scaleY(0); transform-origin:center;
    box-shadow:0 0 10px var(--plasma);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
    opacity:0;
  }
  .toc-link:hover {
    color:var(--ink); background:rgba(255,255,255,.03); padding-left:1.3rem;
  }
  .toc-link:hover::before { transform:translateY(-50%) scaleY(.55); opacity:.6; }
  .toc-link.active {
    color:var(--plasma-2); background:rgba(255,122,24,.06);
    padding-left:1.4rem; text-shadow:0 0 18px rgba(255,181,71,.35);
  }
  .toc-link.active::before { transform:translateY(-50%) scaleY(1); opacity:1; }
  .blockquote-cosmos { border-left:3px solid var(--plasma); padding-left:1.4rem; font-family:'Fraunces',serif; font-style:italic; font-size:1.35rem; color:#f3ead8; }

  /* back-to-top button: fade + rise in */
  #toTop {
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(12px) scale(.85);
    background:var(--plasma-2); color:#05060a; border:3px solid var(--plasma-2);
    transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), visibility .4s ease,
               background-color .3s ease, color .3s ease;
  }
  #toTop.show { opacity:1; visibility:visible; transform:none; }
  #toTop:hover { background:transparent; color:var(--plasma-2); }
  /* hop up while the bouncing ball passes underneath */
  #toTop.hop { transform:translateY(-1.5rem); }

  /* smooth active-state change for the pill tab switchers */
  .nav-pills .nav-link { transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
  /* breathing room between the intro text and the pill row */
  article .nav-pills { margin-top: 2.5rem; }

  /* footer social icons spin a full turn on hover */
  footer .link-plasma i { display:inline-block; transition: transform 1s ease; }
  footer .link-plasma:hover i { transform: rotateY(360deg); }

  /* ============================================================
     RESPONSIVE REFINEMENTS — cover the edge cases the base grid misses
     ============================================================ */

  /* Never let anything force a horizontal scrollbar */
  img, svg, .img-frame { max-width:100%; }

  /* --- Ultra-wide / 4K: cap the reading measure and hero art --- */
  @media (min-width:1600px){
    .container { max-width:1480px; }
    .singularity { width:min(46vw,820px); right:2%; }
    article p { max-width:78ch; }
  }

  /* --- Tablet band (Bootstrap md/lg gap): the hero art competes with text --- */
  @media (min-width:768px) and (max-width:991.98px){
    .singularity { width:min(52vw,520px); right:-10%; opacity:.85; }
  }

  /* --- Below lg: sidebar hides (handled by Bootstrap), tighten hero art --- */
  @media (max-width:767.98px){
    .singularity {
      width:min(90vw,440px); right:50%; top:auto; bottom:2%;
      transform:translateX(50%); opacity:.5;
    }
    .hero { min-height:auto; padding-top:6rem; padding-bottom:4rem; }
    .blockquote-cosmos { font-size:1.15rem; padding-left:1rem; }
    .lead-drop::first-letter { font-size:2.8em; }
  }

  /* --- Small phones (iPhone SE / 360–400px) --- */
  @media (max-width:400px){
    .timeline li { padding-left:2.8rem; padding-bottom:2rem; }
    .timeline::before { left:14px; }
    .timeline li::before { left:7px; }
    .glass { border-radius:1rem; }
    .stat-num { font-size:2.1rem; }
    .display-font { line-height:1; }
    .accordion-button { font-size:1rem; }
  }

  /* --- Landscape phones (short viewports) --- */
  @media (max-height:500px) and (orientation:landscape){
    .hero { min-height:auto; padding:5rem 0 3rem; }
    .singularity { display:none; }
  }

  /* --- Touch devices: hover effects shouldn't stick --- */
  @media (hover:none){
    .card-tilt:hover { transform:none; box-shadow:none; }
    .img-frame img { filter:none; }
    .img-frame:hover { box-shadow:none; border-color:rgba(255,255,255,.08); }
    .img-frame:hover img { transform:none; }
  }

  /* ---- bottom-of-page easter egg: a white ball bounces across the foot of the screen ---- */
  .ball-runner { position:fixed; left:0; bottom:0; z-index:2000; pointer-events:none; visibility:hidden; }
  .ball-runner.go { visibility:visible; animation: ballAcross 6.1s linear forwards; }
  .ball-runner.go .ball-bounce { animation: ballBounce 6.1s forwards; }
  .ball-runner.go .ball { animation: ballSpin 6.1s linear forwards; }
  .ball { width:1.5rem; height:1.5rem; border-radius:50%;
    background: radial-gradient(circle at 32% 30%, #fff 0 55%, #cfd4e6 70%, #9aa1bb 100%);
    box-shadow: 0 0 14px rgba(255,255,255,.35); }
  @keyframes ballAcross { from { transform:translateX(-40px); } to { transform:translateX(calc(100vw + 40px)); } }
  @keyframes ballSpin { to { transform:rotate(1080deg); } }
  /* each rebound is ~57% of the previous height, and each arc's duration scales
     with the square root of its height, matching real bounce physics */
  @keyframes ballBounce {
    0%    { transform:translateY(-420px); animation-timing-function:ease-in; }
    12%   { transform:translateY(0);      animation-timing-function:ease-out; }
    21.5% { transform:translateY(-240px); animation-timing-function:ease-in; }
    30.5% { transform:translateY(0);      animation-timing-function:ease-out; }
    37.5% { transform:translateY(-135px); animation-timing-function:ease-in; }
    44.5% { transform:translateY(0);      animation-timing-function:ease-out; }
    50%   { transform:translateY(-78px);  animation-timing-function:ease-in; }
    55%   { transform:translateY(0);      animation-timing-function:ease-out; }
    59%   { transform:translateY(-45px);  animation-timing-function:ease-in; }
    63%   { transform:translateY(0);      animation-timing-function:ease-out; }
    66%   { transform:translateY(-26px);  animation-timing-function:ease-in; }
    69%   { transform:translateY(0);      animation-timing-function:ease-out; }
    71.5% { transform:translateY(-15px);  animation-timing-function:ease-in; }
    74%   { transform:translateY(0);      animation-timing-function:ease-out; }
    75.5% { transform:translateY(-8px);   animation-timing-function:ease-in; }
    77.5% { transform:translateY(0);      animation-timing-function:ease-out; }
    78.5% { transform:translateY(-4px);   animation-timing-function:ease-in; }
    80%, 100% { transform:translateY(0); }
  }

  /* --- Respect users who prefer less motion --- */
  @media (prefers-reduced-motion:reduce){
    *, *::before, *::after {
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
    /* keep the lavalamp menu glide — it's an explicit, low-motion effect the user asked for */
    .lava-blob { transition:all .5s ease 0s !important; }
    .lava-item { transition:color .35s ease !important; }
    /* keep the back-to-top button's fade-in */
    #toTop { transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), visibility .4s ease, background-color .3s ease, color .3s ease !important; }
    /* keep the card hover lift smooth */
    .card-tilt { transition: transform .4s ease, box-shadow .4s ease !important; }
    /* keep the image-frame hover border + glow fade smooth */
    .img-frame { transition: box-shadow .5s ease, border-color .5s ease !important; }
    /* keep the TOC active/hover state changes smooth */
    .toc-link { transition: color .35s ease, background-color .35s ease, padding-left .35s ease, text-shadow .35s ease !important; }
    .toc-link::before { transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease !important; }
    /* keep the mobile burger + flyout animated */
    .burger span { transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease, background-color .25s ease !important; }
    .mobile-menu { transition: transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s !important; }
    /* keep the bouncing-ball easter egg alive */
    .ball-runner.go, .ball-runner.go .ball-bounce, .ball-runner.go .ball { animation-duration:6.1s !important; }
    /* keep the footer icon spin */
    footer .link-plasma i { transition: transform 1s ease !important; }
    /* keep accordion expansion + chevron rotation smooth (bootstrap disables both under reduced motion) */
    .collapsing { transition: height .35s ease !important; }
    .accordion-button::after { transition: transform .2s ease-in-out !important; }
    /* keep pill-tab switches + tab-pane fades smooth */
    .nav-pills .nav-link { transition: color .3s ease, background-color .3s ease, border-color .3s ease !important; }
    .fade { transition: opacity .3s linear !important; }
    /* keep the wow.js/animate.css entrance animations: restore the durations that both
       the universal rule above and animate.css's own reduced-motion rule flatten to ~1ms */
    .animate__animated {
      animation-duration: var(--animate-duration, 1s) !important;
      animation-iteration-count: var(--animate-repeat, 1) !important;
    }
  }

/* ---- B5: animate.css subset (only the four effects the site uses; wow-test.html
   still loads the full css/animate.min.css) ---- */
:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}
.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}
.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}
.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}

/* ---- E1: bootstrap-icons ships without font-display; redeclaring the face (later
   in document order, so it wins) adds swap ---- */
@font-face{font-family:"bootstrap-icons";font-display:swap;src:url("fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),url("fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff")}