/* KaddieIQ 2026 homepage theme.
 *
 * Deliberately separate from kiq-main.css, which every other page on the
 * site loads. Keeping this apart means the new design can change freely
 * without restyling ballfit, shotiq, the blog or the news posts.
 * Extracted from the inline <style> block of index.html.
 */

/* ================= THEME TOKENS ================= */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{
}

*,*::before,*::after{box-sizing:inherit}
html{background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px);transition:background-color .5s ease}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background-color .5s ease,color .5s ease}
img{max-width:100%;display:block}
a{color:inherit}
.g{color:var(--wm)} .v{color:var(--pro)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= BACKGROUND: blueprint of a famous hole ================= */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease}
.bg-blueprint{background-color:var(--bp-ink);-webkit-mask:var(--bp-land) center/cover no-repeat;mask:var(--bp-land) center/cover no-repeat}
@media (max-aspect-ratio:1/1){.bg-blueprint{-webkit-mask-image:var(--bp-port);mask-image:var(--bp-port)}}
.bg-blueprint{opacity:var(--bp-op)}

/* ================= HEADER ================= */
.top{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:5;padding:24px clamp(18px,4vw,44px);display:flex;align-items:center;justify-content:space-between;opacity:0;transition:opacity .8s ease .2s}
.revealed .top{opacity:1}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--mark);border-radius:6px;transition:color .5s ease}
.brand-name{font:var(--fw-display) 21px/1 var(--head);letter-spacing:-.01em;color:var(--ink)}
.mark{display:block;height:48px;width:auto}
.brand:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
.theme{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background-color .5s ease,border-color .5s ease}
.theme button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:color .25s ease,background-color .25s ease}
.theme button:hover{color:var(--ink)}
.theme button[aria-checked="true"]{color:var(--gold-hi);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--tile-edge)}
.theme button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.theme svg{width:17px;height:17px}

/* ================= STAGE + RING ================= */
main,footer{position:relative;z-index:1}
.stage{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 16px 40px}
.ring{--S:min(760px, calc(100svh - 210px), calc(100vw - 340px));position:relative;width:var(--S);height:var(--S);min-width:280px;min-height:280px}
.ring::before{content:"";position:absolute;inset:9%;border-radius:50%;border:1px solid var(--hair);opacity:0;transform:scale(.92);
  transition:opacity 1.2s ease .2s, transform 1.2s cubic-bezier(.2,.7,.2,1) .2s, border-color .5s ease}
.revealed .ring::before{opacity:1;transform:none}
.medal{position:absolute;width:18%;aspect-ratio:1;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;text-decoration:none;
  left:calc(50% + var(--cx) * 41% - 9%);top:calc(50% + var(--cy) * 41% - 9%);opacity:0;transform:scale(.55);filter:var(--dim);
  transition:opacity .6s ease var(--d), transform .7s cubic-bezier(.2,.8,.2,1.15) var(--d), filter .35s ease}
.revealed .medal{opacity:1;transform:scale(1)}
.revealed .medal.settled{transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease, opacity .35s ease}
.medal img{width:100%;height:100%;border-radius:50%;pointer-events:none;box-shadow:var(--medal-shadow)}
.medal:hover{filter:var(--dim-hover)}
.revealed .medal[aria-pressed="true"]{filter:none;transform:scale(1.12)}
.medal[aria-pressed="true"] img{box-shadow:0 0 0 1px var(--tile-edge),0 0 34px rgba(200,168,75,.35),var(--medal-shadow)}
.medal:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.label{position:absolute;white-space:nowrap;pointer-events:none;
  left:calc(50% + var(--cx) * 64%);top:calc(50% + var(--cy) * 64%);
  transform:translate(calc(-50% + var(--cx) * 50%), calc(-50% + var(--cy) * 50%));
  font:var(--fw-label) 15px/1.2 var(--head);letter-spacing:.01em;color:var(--muted);transition:color .3s ease}
.medal[aria-pressed="true"] .label{color:var(--ink)}
/* Orbit entrance: JS drives position and opacity for one second, then hands back */
.orbiting .medal{transition:none !important}
.orbiting .label, body:not(.revealed) .label{opacity:0;transition:none}
.label{transition:color .3s ease, opacity .5s ease}

.tile{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.9);border-radius:50%;
  container-type:inline-size;pointer-events:none;background:var(--bg-2);
  box-shadow:inset 0 0 0 1px var(--tile-edge), inset 0 0 0 7px var(--bg), inset 0 0 0 8px var(--tile-green), var(--tile-shadow);
  opacity:0;transition:opacity .8s ease .75s, transform 1s cubic-bezier(.2,.8,.2,1) .75s, box-shadow .5s ease, background-color .45s ease}
/* Opening a medallion settles the disc onto the page colour, so the panel reads
   as part of the background rather than as a lid sitting on top of it. The
   resting state stays one step deeper. Driven by a class rather than :has() so
   it does not depend on selector support, and set in the same place the panels
   are switched. */
.tile.product{background:var(--bg)}
.revealed .tile{opacity:1;transform:translate(-50%,-50%) scale(1)}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 13%}
.panel[hidden]{display:none}
.panel.in{animation:panelIn .45s ease both}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.status{font:var(--fw-label) clamp(11px,4.1cqi,14px)/1.2 var(--head);letter-spacing:.06em;color:var(--gold);margin:0 0 .6em}
.name{font:var(--fw-title) clamp(20px,9.5cqi,40px)/1.08 var(--head);letter-spacing:-.01em;margin:0 0 .45em;color:var(--ink)}
h1.name{font-size:clamp(24px,12cqi,50px);font-weight:var(--fw-display);letter-spacing:-.02em}
.more{pointer-events:auto;margin-top:.9em;font:500 clamp(11.5px,4.2cqi,14px)/1 var(--body);color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.more:hover{color:var(--gold-hi)}
.back{pointer-events:auto;margin-top:.8em;padding:0;border:0;background:none;cursor:pointer;font:500 clamp(11.5px,4.2cqi,14px)/1 var(--body);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.back:hover{color:var(--gold-hi)}
.back:focus-visible,.more:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.name sup{font-size:.4em;vertical-align:1.3em;margin-left:.08em;font-weight:500}
.desc{font:400 clamp(12.5px,5.2cqi,17px)/1.45 var(--body);color:var(--soft);margin:0 0 1.2em;max-width:26ch}
.cta{pointer-events:auto;display:inline-block;white-space:nowrap;font:var(--fw-title) clamp(12px,4.5cqi,15px)/1 var(--head);text-decoration:none;transition:background-color .25s ease, color .25s ease}
.cta:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.hint{margin:58px 0 0;font-size:14px;color:var(--muted);opacity:0;transition:opacity .8s ease 1.4s}
.revealed .hint{opacity:1}
.hint .touch{display:none}

/* ================= BUTTONS: hairline ================= */
.cta{border-radius:2px;background:transparent;color:var(--gold-hi);box-shadow:inset 0 0 0 1px var(--gold);letter-spacing:.06em;padding:1em 1.4em}
.cta .arr{display:inline-block;margin-left:.6em;transition:transform .25s ease}
.cta:hover{filter:none;transform:none;background:var(--gold-fill);color:var(--on-gold)}
.cta:hover .arr{transform:translateX(3px)}
.cta.ghost{box-shadow:inset 0 0 0 1px var(--rule);color:var(--soft)}
.cta.ghost:hover{background:rgba(200,168,75,.12);color:var(--gold-hi)}

/* ================= CHYRON (what's new across the site) ================= */
/* Same build as News's and Calendar's tickers — duplicated group for a
   seamless loop, copy hidden from assistive tech so nothing announces
   twice. Unlike those two, this one mixes four different sources (latest
   Intelligence article, latest News story, latest confirmed tour winner,
   plus a hand-set "New" entry), so each item carries its own tag rather
   than relying on one page-wide subject. Rendered client-side by
   kiq-home-chyron.js — see that file for why nothing here is baked at
   build time. */
.hp-chyron{position:relative;z-index:1;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--bg-2);overflow:hidden;--hp-speed:80s}
.hp-chyron-track{display:flex;width:max-content;animation:hp-scroll var(--hp-speed) linear infinite}
.hp-chyron:hover .hp-chyron-track,.hp-chyron:focus-within .hp-chyron-track{animation-play-state:paused}
.hp-chyron-group{display:flex;flex:0 0 auto}
.hp-chyron a{display:inline-flex;align-items:center;gap:.7em;padding:clamp(5px,.72vw,9px) clamp(16px,2vw,28px);
  text-decoration:none;color:var(--ink);white-space:nowrap;
  font:var(--fw-title) clamp(11px,1.5vw,20px)/1.15 var(--head);letter-spacing:-.01em}
.hp-chyron a::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.75}
.hp-chyron a:hover,.hp-chyron a:focus-visible{color:var(--gold-hi)}
.hp-chyron .hp-tag{font:var(--fw-label) 11px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);margin-right:.2em}
@keyframes hp-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.hp-chyron-track{animation:none;transform:none}}

/* ================= ABOUT (crawlable copy under the ring) ================= */
.about-kiq{position:relative;z-index:1;padding:clamp(56px,9vw,110px) clamp(20px,5vw,64px);border-top:1px solid var(--rule);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(2px)}
.about-wrap{max-width:1040px;margin:0 auto}
.about-kiq h2{font:var(--fw-display) clamp(26px,3.4vw,40px)/1.15 var(--head);letter-spacing:-.01em;margin:0 0 18px;color:var(--ink)}
.about-kiq .lede{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--soft);max-width:62ch;margin:0 0 44px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.pillars article{border-top:1px solid var(--tile-edge);padding-top:18px}
.pillars h3{font:var(--fw-title) 20px/1.2 var(--head);margin:0 0 10px;color:var(--ink)}
.pillars p{margin:0 0 14px;color:var(--soft);line-height:1.6}
.about-kiq a{color:var(--gold-hi);text-underline-offset:3px}
.about-kiq a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.about-kiq .also{margin:44px 0 0;color:var(--muted)}
@media (max-width:760px){ .pillars{grid-template-columns:1fr} }

/* ================= HOLE PLATE (blueprint title block) ================= */
.plate{position:absolute;right:clamp(18px,4vw,44px);bottom:28px;z-index:3;text-align:right;display:block;max-width:280px;
  opacity:0;transition:opacity .8s ease 1.2s}
.revealed .plate{opacity:1}
.plate-k{margin:0;font:var(--fw-label) 12px/1.4 var(--head);letter-spacing:.14em;color:var(--muted)}
.plate-n{margin:4px 0 0;font:var(--fw-title) 18px/1.2 var(--head);color:var(--ink)}
.plate-c{margin:2px 0 0;font:400 14px/1.3 var(--body);color:var(--soft)}
.plate-src{margin:8px 0 0;font:400 11.5px/1.4 var(--body);color:var(--muted)}
.plate-btn{margin-top:10px;font:500 13px/1 var(--body);color:var(--gold-hi);background:transparent;border:1px solid var(--rule);border-radius:999px;padding:9px 14px;cursor:pointer}
.plate-btn:hover{border-color:var(--gold)}
.plate-btn:focus-visible,.plate-menu button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.plate-menu{position:absolute;right:0;bottom:calc(100% + 10px);width:260px;text-align:left;background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:6px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.3)}
.plate-menu[hidden]{display:none}
.plate-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:9px;padding:9px 10px;cursor:pointer;color:var(--ink);font:500 14px/1.3 var(--body)}
.plate-menu button span{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.plate-menu button:hover{background:rgba(145,153,171,.12)}
.plate-menu button[aria-checked="true"]{box-shadow:inset 2px 0 0 var(--gold)}
.plate-menu hr{border:0;border-top:1px solid var(--rule);margin:6px 4px}

/* ================= FOOTER ================= */
footer{border-top:1px solid var(--rule);background:var(--bg-2);padding:52px clamp(20px,5vw,64px) 36px;color:var(--muted);font-size:14px;transition:background-color .5s ease}
.foot{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot h2{font:var(--fw-title) 15px/1.3 var(--head);color:var(--ink);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold-hi)}
.foot a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.foot .about p{margin:0 0 10px;max-width:34ch}
.legal{max-width:880px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--rule);font-size:13px;line-height:1.7;text-align:center;text-wrap:balance}
.legal p{margin:0}

/* ---- Tile fit: everything scales with the tile and stays inside the circle ---- */
.panel{padding:0 16%}
.status{font-size:clamp(9.5px,3.7cqi,14px);letter-spacing:.04em;margin-bottom:.5em}
.name{font-size:clamp(16px,8.6cqi,38px);margin-bottom:.35em}
h1.name{font-size:clamp(20px,11cqi,48px)}
.desc{font-size:clamp(10.5px,4.9cqi,17px);margin-bottom:1em}
.cta{font-size:clamp(10px,4.2cqi,15px);letter-spacing:.04em;padding:.85em 1.1em;max-width:100%}
.cta .arr{margin-left:.45em}
.cta .s{display:none}
.more{margin-top:.8em}
@container (max-width:380px){ .cta .l{display:none} .cta .s{display:inline} }
@container (max-width:270px){ .home .status{display:none} .desc{margin-bottom:.8em} }
@container (max-width:230px){ .panel{padding:0 14%} .status{display:none} .home .more{margin-top:.6em} }
@container (max-width:222px){ .desc{font-size:10px;line-height:1.35;margin-bottom:.7em} .cta{font-size:9.5px;padding:.75em .85em} .cta .arr{display:none} .name{font-size:15px;margin-bottom:.25em} h1.name{font-size:19px} .more{font-size:10.5px;margin-top:.5em} }

/* ================= MOBILE ================= */
@media (max-width:760px){
  .mark{height:36px}
  .brand{gap:9px}.brand-name{font-size:17px}
  .theme button{width:30px;height:30px}.theme svg{width:15px;height:15px}
  .top{padding:16px 18px}
  .stage{padding:84px 12px 32px}
  .ring{--S:min(94vw, calc(100svh - 190px))}
  .label{display:none}
  .medal{width:17%;left:calc(50% + var(--cx) * 41.5% - 8.5%);top:calc(50% + var(--cy) * 41.5% - 8.5%)}
  .tile{width:64%}
  .ring::before{inset:8.5%}
  .panel{padding:0 11%}
  .desc{max-width:none}
  .hint{margin-top:26px}
  .hint .point{display:none}.hint .touch{display:inline}
  .foot{grid-template-columns:1fr 1fr}
  .foot .about{grid-column:1 / -1}
  .plate{position:static;text-align:center;margin:22px auto 0;max-width:none}
  .plate-menu{right:50%;transform:translateX(50%)}
  .stage{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important}
}

/* ---------- Nav fly-out tab (homepage only) ----------
 * Every other 2026 page gets this from kiq-chrome.css; the homepage's own
 * header/footer are bespoke, not that shared system, so the tab and drawer
 * are duplicated here rather than pulling in the whole chrome stylesheet
 * (which carries its own bare `footer{}` etc. that would fight this page's
 * layout). Kept hidden until kiq-2026.js adds .nav-ready to <body>, once
 * the medal ring has finished settling — so it doesn't compete with the
 * opening animation for attention. */
.kiq-navtab{position:fixed;left:0;top:50%;z-index:50;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:40px;height:auto;padding:18px 9px;
  border:1px solid var(--hair);border-left:0;border-radius:0 12px 12px 0;
  background:var(--panel);color:var(--gold);cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:3px 0 16px -8px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;
  transition:width .2s ease,color .2s ease,border-color .2s ease,opacity .6s ease}
body.nav-ready .kiq-navtab{opacity:1;pointer-events:auto;animation:kiq-navtab-glow 2.2s ease-in-out infinite}
.kiq-navtab:hover{width:44px;color:var(--gold-hi);border-color:var(--gold);animation-play-state:paused}
@keyframes kiq-navtab-glow{
  0%,100%{box-shadow:3px 0 16px -8px rgba(0,0,0,.45),0 0 16px 4px color-mix(in srgb,var(--gold) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
  50%{box-shadow:3px 0 16px -8px rgba(0,0,0,.45),0 0 48px 16px color-mix(in srgb,var(--gold) 85%,transparent),0 0 0 1px color-mix(in srgb,var(--gold) 75%,transparent)}
}
.kiq-navtab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kiq-navtab svg{width:17px;height:17px;flex:none}
.kiq-navtab-label{writing-mode:vertical-rl;transform:rotate(180deg);
  font:var(--fw-title) 15px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap}
.kiq-navtab:hover .kiq-navtab-label{color:var(--gold-hi)}

/* Dead-centre (top:50%) collides with the medal ring on a phone, which
 * sits at the viewport's vertical midpoint too. Shrink the tab and anchor
 * it near the bottom instead, clear of the ring on any phone height. */
@media (max-width:640px){
  .kiq-navtab{top:auto;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:none;
    width:30px;padding:10px 5px;gap:6px}
  .kiq-navtab:hover{width:34px}
  .kiq-navtab-label{font-size:10.5px;letter-spacing:.1em}
  .kiq-navtab svg{width:13px;height:13px}
}

.kiq-navdrawer-backdrop{position:fixed;inset:0;z-index:58;display:none;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.kiq-navdrawer-backdrop.open{display:block}

.kiq-navdrawer{position:fixed;top:0;left:0;bottom:0;z-index:59;width:min(180px,80vw);
  background:var(--panel);border-right:1px solid var(--hair);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:28px 16px 32px;overflow-y:auto;
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.kiq-navdrawer.open{transform:translateX(0)}
.kiq-navdrawer-close{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;
  border:0;border-radius:50%;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;
  transition:background-color .2s ease,color .2s ease}
.kiq-navdrawer-close:hover{color:var(--ink);background:var(--surface)}
.kiq-navdrawer-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kiq-navdrawer-group{margin:0 0 30px}
.kiq-navdrawer-group h2{margin:0 0 14px;font:var(--fw-title) 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.kiq-navdrawer-group ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.kiq-navdrawer-group a{color:var(--ink);text-decoration:none;font:var(--fw-title) 15px/1.3 var(--head)}
.kiq-navdrawer-group a:hover{color:var(--gold-hi)}
.kiq-navdrawer-home{display:flex;align-items:center;gap:10px;margin:34px 0 22px;padding-bottom:18px;
  border-bottom:1px solid var(--hair);color:var(--gold);text-decoration:none;
  font:var(--fw-title) 17px/1 var(--head);letter-spacing:.02em}
.kiq-navdrawer-home svg{width:20px;height:20px;flex:none}
.kiq-navdrawer-home:hover{color:var(--gold-hi)}
.kiq-navdrawer-home:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}

/* ---------- Opening splash: gold K spins in, then fades to the ring ---------- */
.kiq-splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--bg);opacity:1;transition:opacity .5s ease}
.kiq-splash[hidden]{display:none}
.kiq-splash.fade-out{opacity:0;pointer-events:none}
.kiq-splash-mark{width:clamp(84px,16vw,150px)}
.kiq-splash-mark svg{display:block;width:100%;height:auto;color:var(--gold);
  animation:kiq-splash-spin 3s linear 1}
/* Counter-clockwise — the medal ring it hands off to orbits clockwise
   (see orbitIn() in kiq-2026.js), so the two read as opposing motions.
   Three full turns over three seconds (-1080deg, not -360deg) so the K
   actually reads as spinning for that whole span rather than one slow
   turn — and it still ends flush at its start orientation (-1080 mod
   360 = 0) before handing off to the ring's own orbit. */
@keyframes kiq-splash-spin{from{transform:rotate(0deg)}to{transform:rotate(-1080deg)}}
@media (prefers-reduced-motion:reduce){
  .kiq-splash{display:none}
}