/* ══════════════════════════════════════════════════════════
   SimplyFast.AI homepage (approved 09.10.2026): wave colour fields,
   frameless sections, moving illustrations (home-scenes.js).
   Colours = the SimplyFast Academy palette, exact. Everything here is
   scoped to body.home / main.hp so the shared style.css pages
   (login, guides, workshops, customer zones) are untouched.
   ══════════════════════════════════════════════════════════ */
body.home {
  --hp-night:#0b0716; --hp-surface:#141026; --hp-surface2:#1c1634; --hp-surface3:#251d44; --hp-vsoft:#2a1d52;
  --hp-v0:#6b38d4; --hp-v:#7c4dff; --hp-v4:#8f5bff; --hp-vi:#c7b5ff; --hp-vl:#ede6ff;
  --hp-c:#4cd7f6; --hp-l:#c8f169;
  --hp-ink:#141026; --hp-muted:#3a2f63; --hp-ink2:#cbc3ea; --hp-ink3:#9a91bd;
  --hp-bg:#faf8ff; --hp-line:#e3daff;
  --hp-btn:linear-gradient(135deg,#6b38d4,#8f5bff);
  --hp-btn-glow:0 8px 28px -10px rgba(124,77,255,.9);
  --hp-deep:radial-gradient(60% 75% at 88% -12%,rgba(124,77,255,.58) 0%,transparent 62%),
            radial-gradient(50% 55% at 14% 28%,rgba(143,91,255,.30) 0%,transparent 60%),
            radial-gradient(45% 50% at -5% 108%,rgba(76,215,246,.16) 0%,transparent 60%),
            linear-gradient(200deg,#0b0716 0%,#141026 40%,#1c1634 72%,#2a1d52 100%);
  background:var(--hp-bg); color:var(--hp-ink);
}
.hp { position:relative; overflow-x:clip; container-type:inline-size; }
.hp h1, .hp h2, .hp h3 { text-wrap:balance; }
.hp .wrap { max-width:1160px; margin-inline:auto; padding-inline:clamp(16px,4cqi,44px); }
.hp .lat { font-family:var(--font-latin); }
.hp .h2 { font-weight:800; font-size:clamp(28px,4cqi,42px); letter-spacing:-.015em; line-height:1.14; color:var(--hp-ink); }
.hp .lead { color:var(--hp-muted); font-size:clamp(15.5px,1.9cqi,18px); line-height:1.7; margin-top:12px; max-width:54ch; }
.hp svg.scene { display:block; width:100%; height:auto; overflow:visible; }
.hp .tx { font-family:var(--font-he); direction:rtl; }
.hp .tx.ltr { font-family:var(--font-latin); direction:ltr; }
.hp .split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,4cqi,56px); align-items:center; }
.hp .split.flip > .art { order:-1; }
@container (max-width:760px) { .hp .split { grid-template-columns:minmax(0,1fr); } .hp .split.flip > .art { order:0; } }

/* buttons: the Academy's primary button */
.hp .btn { display:inline-flex; align-items:center; gap:9px; min-height:48px; border-radius:999px; padding:12px 24px;
  font-weight:700; font-size:15.5px; white-space:nowrap; color:#fff; background:var(--hp-btn);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, var(--hp-btn-glow), 0 18px 40px rgba(11,7,22,.3);
  transition:transform .25s var(--ease), filter .25s; }
.hp .btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.hp .btn svg { width:20px; height:20px; flex-shrink:0; }
.hp .tlink { display:inline-flex; gap:6px; align-items:center; font-weight:700; color:var(--hp-v); min-height:44px; }
.hp .tlink:hover { text-decoration:underline; text-underline-offset:4px; }

/* ── nav on the homepage: white over the night hero, night glass once scrolled ── */
body.home nav { color:#fff; }
body.home nav.scrolled { background:rgba(11,7,22,.8); border-bottom-color:rgba(199,181,255,.14); box-shadow:0 20px 50px rgba(11,7,22,.35); }
body.home .logo-word { background:none; -webkit-text-fill-color:#fff; color:#fff; }
body.home .nav-links a { color:rgba(255,255,255,.86); }
body.home .nav-links a:hover { color:var(--hp-vi); }
body.home .nav-links .nav-user { color:var(--hp-vi); }
body.home .lang { color:rgba(255,255,255,.8); }
body.home .lang:hover { color:#fff; }
body.home nav .pill { background:var(--hp-btn); box-shadow:var(--hp-btn-glow); color:#fff; }
body.home .menu-btn { color:#fff; }
body.home .menu { background:rgba(11,7,22,.96); border-bottom-color:rgba(199,181,255,.14); }
body.home .menu a { color:#f4f1ff; border-bottom-color:rgba(199,181,255,.12); }
body.home .menu a:hover, body.home .menu-user { color:var(--hp-vi); }
body.home .skip { background:var(--hp-v); }

/* ── opening ── */
.hp .hero { position:relative; overflow:hidden; color:#fff; background:var(--hp-deep); padding-top:calc(64px + env(safe-area-inset-top, 0px)); }
.hp .sheen { position:absolute; inset:-10% 0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.07) 54%,transparent 62%);
  animation:hpSheen 10s ease-in-out infinite; }
@keyframes hpSheen { 0%,50% { transform:translateX(-110%); } 85%,100% { transform:translateX(110%); } }
.hp .waves { position:absolute; inset-inline:0; bottom:0; width:100%; height:46%; pointer-events:none; }
.hp .hin { position:relative; z-index:2; max-width:1240px; margin-inline:auto; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:10px; align-items:end; padding:10px clamp(16px,3.4cqi,40px) 0; }
.hp .copy { padding-bottom:clamp(130px,17cqi,190px); display:grid; gap:18px; justify-items:start; }
.hp .copy h1 { font-weight:800; font-size:clamp(34px,5.4cqi,62px); line-height:1.08; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 30px rgba(11,7,22,.35); }
.hp .copy h1 span { text-shadow:none; background:linear-gradient(90deg,#4cd7f6 0%,#c7b5ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hp .copy p { font-size:clamp(16px,2cqi,19px); color:var(--hp-ink2); max-width:30ch; line-height:1.6; }
.hp .hart { align-self:end; margin-bottom:-6px; }
/* the paper plane's layer: placed over the opening drawing by home-scenes.js, above every section */
.hp svg.scene.fly { position:absolute; left:0; top:0; z-index:4; pointer-events:none; }
@container (max-width:720px) {
  .hp .hin { grid-template-columns:minmax(0,1fr); }
  .hp .copy { padding-bottom:6px; padding-top:18px; }
  .hp .waves { height:30%; }
}

/* ── services: five, frameless ── */
.hp .svc { padding-block:clamp(56px,8cqi,96px) clamp(40px,6cqi,70px); }
.hp .svc .h2 { text-align:center; }
.hp .grid5 { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:44px 34px; margin-top:40px; }
.hp .si { grid-column:span 2; display:grid; gap:8px; justify-items:center; text-align:center; align-content:start; }
.hp .si:nth-child(4) { grid-column:2 / span 2; }
.hp .si:nth-child(5) { grid-column:4 / span 2; }
.hp .si svg { max-width:290px; }
.hp .si h3 { font-size:19px; font-weight:800; margin-top:4px; }
.hp .si p { font-size:14.5px; color:var(--hp-muted); max-width:32ch; line-height:1.65; }
@container (max-width:820px) {
  .hp .grid5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp .si, .hp .si:nth-child(4) { grid-column:auto; }
  .hp .si:nth-child(5) { grid-column:1 / -1; }
  .hp .si:nth-child(5) svg { max-width:260px; }
}
@container (max-width:500px) { .hp .grid5 { grid-template-columns:minmax(0,1fr); } }

/* ── process ── */
.hp #how::before { content:none; }
.hp .how { position:relative; background:linear-gradient(180deg,rgba(76,215,246,.16) 0%,rgba(124,77,255,.12) 100%),var(--hp-bg); padding-block:clamp(80px,10cqi,116px); }
.hp .edge { position:absolute; inset-inline:0; width:100%; height:50px; display:block; }
.hp .edge.t { top:-1px; }
.hp .edge.b { bottom:-1px; }
.hp .hp-steps { list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.hp .hp-steps li { display:grid; gap:6px; align-content:start; }
.hp .hp-steps .num { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font:800 15px var(--font-latin);
  background:#fff; color:var(--hp-v); box-shadow:0 0 0 2px var(--hp-line); transition:background .3s, color .3s, box-shadow .3s; }
.hp .hp-steps li.on .num { background:var(--hp-btn); color:#fff; box-shadow:var(--hp-btn-glow); }
.hp .hp-steps h3 { font-size:18px; font-weight:800; }
.hp .hp-steps p { font-size:14.5px; color:var(--hp-muted); line-height:1.65; }
@container (max-width:600px) { .hp .hp-steps { grid-template-columns:minmax(0,1fr); } }

/* ── what we built ── */
.hp .built { position:relative; padding-block:clamp(56px,8cqi,96px) clamp(70px,9cqi,110px); overflow:hidden; }
.hp .built .blob { position:absolute; inset-inline:0; bottom:0; width:100%; height:72%; pointer-events:none; }
.hp .built .wrap { position:relative; }
.hp .slides { margin-top:30px; display:grid; }
/* all slides share one grid cell: the box keeps the tallest slide's height, so autoplay never shifts the page */
.hp .slide { grid-area:1 / 1; visibility:hidden; opacity:0; transition:opacity .35s var(--ease), visibility 0s .35s; }
.hp .slide.on { visibility:visible; opacity:1; transition:opacity .35s var(--ease); }
.hp .slide:not(.on) * { animation-play-state:paused; }
.hp .slide h3 { font-size:clamp(24px,3.2cqi,34px); font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.hp .slide .bd { color:var(--hp-muted); font-size:clamp(15.5px,1.9cqi,18px); line-height:1.7; margin-top:12px; max-width:36ch; }
.hp .slide .plats { margin-top:10px; font-weight:700; color:var(--hp-v); font-size:15px; }
.hp .slnav { grid-row:2; display:flex; align-items:center; gap:16px; margin-top:26px; }
.hp .arrow { width:46px; height:46px; border-radius:50%; border:0; background:var(--hp-btn); color:#fff; font-size:19px; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--hp-btn-glow); }
.hp .arrow.ghost { background:transparent; color:var(--hp-v); box-shadow:inset 0 0 0 2px var(--hp-line); }
.hp .arrow svg { width:20px; height:20px; }
html[dir="ltr"] .hp .arrow svg { transform:scaleX(-1); }
.hp .sldots { display:flex; gap:7px; }
.hp .sldots button { width:10px; height:10px; border-radius:10px; border:0; padding:0; background:var(--hp-line); cursor:pointer; transition:width .3s, background .3s; }
.hp .sldots button.on { background:var(--hp-v); width:26px; }
.hp .slcount { font:600 13px var(--font-latin); color:var(--hp-muted); }

/* ── workshops ── */
.hp .wk { padding-block:clamp(40px,6cqi,80px) clamp(70px,9cqi,110px); }
.hp .pts { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:16px; }
.hp .pts li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; align-items:start; }
.hp .pts li::before { content:""; width:12px; height:12px; border-radius:50%; margin-top:8px; background:var(--hp-c); box-shadow:0 0 0 4px rgba(76,215,246,.2); }
.hp .pts li:nth-child(2)::before { background:var(--hp-v); box-shadow:0 0 0 4px rgba(124,77,255,.16); }
.hp .pts li:nth-child(3)::before { background:var(--hp-l); box-shadow:0 0 0 4px rgba(200,241,105,.3); }
.hp .pts b { display:block; font-size:17px; font-weight:800; }
.hp .pts span { color:var(--hp-muted); font-size:15px; line-height:1.65; }
.hp .wk .tlink { margin-top:20px; }

/* ── the Academy: exactly the Academy's own night background ── */
.hp .acad { position:relative; color:#fff; padding-block:clamp(90px,11cqi,130px);
  background:radial-gradient(900px 500px at 100% -10%,rgba(124,77,255,.28),transparent 60%),radial-gradient(700px 500px at -10% 110%,rgba(76,215,246,.12),transparent 60%),var(--hp-night); }
.hp .acad .h2 { color:#fff; }
.hp .acad .lead { color:var(--hp-ink2); }
.hp .acad .hp-en { font:700 14px var(--font-latin); color:var(--hp-c); direction:ltr; text-align:end; margin-top:6px; }
html.en .hp .acad .hp-en { display:none; }
.hp .tracks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:28px; }
.hp .tracks h3 { font-size:19px; font-weight:800; display:flex; align-items:center; gap:10px; }
.hp .tracks h3 i { width:12px; height:12px; border-radius:50%; background:var(--hp-l); flex-shrink:0; }
.hp .tracks div:nth-child(2) h3 i { background:var(--hp-c); }
.hp .tracks p { color:var(--hp-ink2); font-size:15px; margin-top:6px; line-height:1.65; }
.hp .acad .row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:30px; }
.hp .acad .row .lat { font-weight:600; font-size:14px; color:var(--hp-ink3); direction:ltr; }
@container (max-width:520px) { .hp .tracks { grid-template-columns:minmax(0,1fr); } }
.hp .acart { position:relative; }
.hp .lumi { position:absolute; left:22.917%; top:2.941%; width:58.333%; height:72.941%; border-radius:14px; overflow:hidden; background:var(--hp-surface);
  box-shadow:inset 0 0 0 1px rgba(199,181,255,.25); }
/* Lumi leans out of the screen: the video's canvas is square and 1/0.7 of the screen's width; its screen area
   (15%-85% across, 33%-95% down) sits exactly on the drawn screen (110,10 280x248 in the 480x340 drawing) */
.hp .lumi-out { position:absolute; left:10.417%; top:-35.882%; width:83.333%; aspect-ratio:1; z-index:2; pointer-events:none; }
.hp .lumi-out canvas, .hp .lumi-out .lumi-poster, .hp .lumi-out video { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hp .lumi-out video { opacity:0; }
.hp .lumi-out canvas { opacity:0; }
.hp .lumi-out.live canvas { opacity:1; }
.hp .lumi-out.live .lumi-poster { visibility:hidden; }
/* stacked layout (phone): leave room above the drawing for Lumi's head when she leans out */
@container (max-width:760px) { .hp .acart { margin-top:10%; } }
.hp .lumi-out .ai { position:absolute; top:calc(33% + 8px); left:calc(15% + 9px); padding:1px 9px; border-radius:999px; background:var(--hp-c); color:var(--hp-night);
  font:800 11px var(--font-latin); letter-spacing:.02em; }

/* ── team ── */
.hp .team { padding-block:clamp(56px,8cqi,96px); }
.hp .team .h2, .hp .team .lead { text-align:center; margin-inline:auto; }
.hp .people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin:40px auto 0; max-width:860px; }
.hp .person { display:grid; justify-items:center; text-align:center; gap:6px; }
.hp .ph { position:relative; width:170px; height:186px; margin-bottom:10px; }
.hp .ph::before { content:""; position:absolute; inset:10px -10px -6px 10px; background:linear-gradient(135deg,#4cd7f6,#c8f169);
  border-radius:46% 54% 42% 58%/55% 45% 55% 45%; animation:hpBlob 9s ease-in-out infinite alternate-reverse; }
.hp .ph::after { content:""; position:absolute; inset:-8px 6px 14px -12px; background:linear-gradient(135deg,#8f5bff,#6b38d4); opacity:.22;
  border-radius:52% 48% 40% 60%/40% 60% 46% 54%; animation:hpBlob 13s ease-in-out infinite alternate; }
.hp .ph img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  border-radius:58% 42% 51% 49%/46% 55% 45% 54%; animation:hpBlob 11s ease-in-out infinite alternate; box-shadow:0 20px 44px rgba(107,56,212,.25); }
@keyframes hpBlob { 0% { border-radius:58% 42% 51% 49%/46% 55% 45% 54%; } 50% { border-radius:44% 56% 60% 40%/56% 42% 58% 44%; } 100% { border-radius:52% 48% 40% 60%/40% 60% 46% 54%; } }
.hp .person h3 { font-size:21px; font-weight:800; display:flex; align-items:center; gap:8px; }
.hp .person .li { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#0a66c2; color:#fff; }
.hp .person .li svg { width:14px; height:14px; }
.hp .person .role { font:700 13px var(--font-latin); color:var(--hp-v); direction:ltr; }
.hp .person p { font-size:14.5px; color:var(--hp-muted); max-width:36ch; margin-top:4px; line-height:1.65; }
@container (max-width:600px) { .hp .people { grid-template-columns:minmax(0,1fr); } }

/* ── contact ── */
.hp #band::before { content:none; }
.hp .cta { position:relative; color:#fff; background:var(--hp-deep); padding-block:clamp(90px,11cqi,124px) clamp(56px,7cqi,80px); overflow:hidden; }
.hp .cta .h2 { color:#fff; }
.hp .cta .lead { color:var(--hp-ink2); }
.hp .cta .btn { margin-top:24px; }
.hp .reach { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:18px; font:600 15px var(--font-latin); color:rgba(255,255,255,.9); }
.hp .reach a { direction:ltr; unicode-bidi:isolate; min-height:32px; display:inline-flex; align-items:center; }
.hp .reach a:hover { color:var(--hp-vi); }
.hp .cta .formwrap { position:relative; margin-top:clamp(40px,6cqi,64px); padding-top:clamp(28px,4cqi,40px); border-top:1px solid rgba(199,181,255,.18); }
.hp .cta .formwrap h3 { font-size:19px; font-weight:800; margin-bottom:20px; }
.hp .cform { padding:0; }
.hp .cform label { color:var(--hp-ink2); }
.hp .cform input, .hp .cform textarea { color:#fff; border-bottom-color:rgba(199,181,255,.35); }
.hp .cform input:hover, .hp .cform textarea:hover { border-bottom-color:rgba(199,181,255,.6); }
.hp .cform input:focus, .hp .cform textarea:focus { border-bottom-color:var(--hp-vi); box-shadow:0 1.5px 0 var(--hp-vi); }
.hp .cform .pill { background:var(--hp-btn); box-shadow:var(--hp-btn-glow); color:#fff; }
.hp .cform-ok { color:#fff; }
@media (min-width:900px) { .hp .cform { max-width:760px; } }

/* ── footer on the homepage: the Academy night ── */
body.home footer { background:var(--hp-night); border-top:1px solid #271f45; }
body.home footer .logo-word { background:none; -webkit-text-fill-color:#fff; color:#fff; }
body.home footer .state p, body.home .fcol a { color:var(--hp-ink2); }
body.home .fcol h5 { color:var(--hp-vi); }
body.home .fcol a:hover { color:var(--hp-c); }
body.home footer .bottom { border-top-color:#271f45; }
body.home footer .bottom .in { color:var(--hp-ink3); }

/* ══ motion kit for the drawings (scoped to the homepage) ══ */
.hp .j { transform-origin:0 0; }
.hp .sw { animation:hpSw var(--d,1s) ease-in-out infinite alternate; }
@keyframes hpSw { from { transform:rotate(var(--a,0deg)); } to { transform:rotate(var(--b,0deg)); } }
.hp .spin { animation:hpSpin var(--d,6s) linear infinite; }
.hp .rev { animation-direction:reverse; }
@keyframes hpSpin { to { transform:rotate(360deg); } }
.hp .gbar { transform-box:fill-box; transform-origin:50% 100%; animation:hpBar var(--d,2s) ease-in-out infinite alternate; }
@keyframes hpBar { from { transform:scaleY(.35); } to { transform:scaleY(1); } }
.hp .tw { transform-box:fill-box; transform-origin:center; animation:hpTw 2.6s ease-in-out infinite; }
@keyframes hpTw { 0%,100% { transform:scale(.3); opacity:.25; } 50% { transform:scale(1); opacity:1; } }
.hp .pp { transform-box:fill-box; }
.hp .dot { animation:hpDot .9s ease-in-out infinite; }
@keyframes hpDot { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.hp .drift { animation:hpDrift var(--d,10s) ease-in-out infinite alternate; }
@keyframes hpDrift { from { transform:translateX(-36px); } to { transform:translateX(36px); } }
.hp .float { animation:hpFloat var(--d,3s) ease-in-out infinite alternate; }
@keyframes hpFloat { from { transform:translateY(0); } to { transform:translateY(-6px); } }
.hp .sipU { animation:sipU 10s ease-in-out infinite; } .hp .sipL { animation:sipL 10s ease-in-out infinite; }
.hp .sipM { animation:sipM 10s ease-in-out infinite; } .hp .sipH { animation:sipH 10s ease-in-out infinite; }
@keyframes sipU { 0%,68%,90%,100% { transform:rotate(0); } 74%,86% { transform:rotate(-18deg); } }
@keyframes sipL { 0%,68%,90%,100% { transform:rotate(0); } 74%,86% { transform:rotate(-80deg); } }
@keyframes sipM { 0%,68%,90%,100% { transform:rotate(0); } 74%,86% { transform:rotate(73deg); } }
@keyframes sipH { 0%,68%,90%,100% { transform:rotate(0); } 74%,86% { transform:rotate(-9deg); } }
.hp .sent { transform-box:fill-box; transform-origin:50% 50%; }
.hp .lens { animation:hpLens 8s ease-in-out infinite; }
@keyframes hpLens { 0%,8% { transform:translate(40px,38px); } 25%,33% { transform:translate(112px,73px); } 50%,58% { transform:translate(184px,108px); } 75%,83% { transform:translate(184px,38px); } 100% { transform:translate(40px,38px); } }
.hp .glow { transform-box:fill-box; transform-origin:center; animation:hpGlow 8s ease-out infinite; }
@keyframes hpGlow { 0% { opacity:0; transform:scale(.4); } 5%,16% { opacity:1; transform:scale(1); } 24%,100% { opacity:0; transform:scale(.4); } }
.hp .belt { animation:hpBelt 6s linear infinite; }
@keyframes hpBelt { 0% { transform:translate(232px,106px); opacity:0; } 6%,90% { opacity:1; } 100% { transform:translate(40px,106px); opacity:0; } }
.hp .stamp { animation:hpStamp 2s ease-in-out infinite; }
@keyframes hpStamp { 0%,32% { transform:translateY(0); } 50% { transform:translateY(36px); } 68%,100% { transform:translateY(0); } }
.hp .stamped { animation:hpStamped 6s linear infinite; }
@keyframes hpStamped { 0%,49% { opacity:0; } 52%,100% { opacity:1; } }
.hp .sun { animation:hpSun 6s ease-in-out infinite; } .hp .moon { animation:hpMoon 6s ease-in-out infinite; }
@keyframes hpSun { 0%,40% { opacity:1; transform:translateY(0); } 50%,90% { opacity:0; transform:translateY(8px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes hpMoon { 0%,40% { opacity:0; transform:translateY(8px); } 50%,90% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(8px); } }
.hp .needle { animation:hpNeedle 4s ease-in-out infinite; }
@keyframes hpNeedle { 0%,18% { transform:rotate(-80deg); } 30% { transform:rotate(86deg); } 36%,88% { transform:rotate(74deg); } 100% { transform:rotate(-80deg); } }
.hp .lbar { transform-box:fill-box; transform-origin:100% 50%; animation:hpLbar 4s ease-out infinite; }
@keyframes hpLbar { 0%,4% { transform:scaleX(0); } 16%,90% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
.hp .dash { animation:hpDash .9s linear infinite; }
@keyframes hpDash { to { stroke-dashoffset:32; } }
.hp .dashR { animation:hpDashR 1.2s linear infinite; }
@keyframes hpDashR { to { stroke-dashoffset:-28; } }
.hp .jump { animation:hpJump 1.6s ease-in-out infinite; }
@keyframes hpJump { 0%,64%,92%,100% { transform:translateY(0); } 78% { transform:translateY(-34px); } }
.hp .crateL { animation:hpCrateL 1.6s linear infinite; }
@keyframes hpCrateL { from { transform:translateX(180px); } to { transform:translateX(-24px); } }
.hp .crateP { animation:hpCrateP 1.6s linear infinite; }
@keyframes hpCrateP { from { transform:translateX(80px); } to { transform:translateX(-4px); } }
.hp .coin { animation:hpCoin 1.6s linear infinite; }
@keyframes hpCoin { from { transform:translateX(0); } to { transform:translateX(-200px); } }
.hp .cloud { animation:hpCloud 9s linear infinite; }
@keyframes hpCloud { from { transform:translateX(0); } to { transform:translateX(-220px); } }
.hp .plane { animation:hpPlane 6s ease-in-out infinite; }
@keyframes hpPlane { 0% { transform:translate(0,0) rotate(0); opacity:0; } 10% { opacity:1; } 50% { transform:translate(-120px,-50px) rotate(-8deg); } 85% { opacity:1; } 100% { transform:translate(-260px,-10px) rotate(6deg); opacity:0; } }
.hp .rise { animation:hpRise 4.5s ease-out infinite; }
@keyframes hpRise { 0% { opacity:0; transform:translateY(16px) scale(.7); } 12% { opacity:1; transform:translateY(0) scale(1); } 70% { opacity:1; transform:translateY(-30px); } 100% { opacity:0; transform:translateY(-50px); } }
.hp .raiseU { animation:raiseU 5s ease-in-out infinite; } .hp .raiseL { animation:raiseL 5s ease-in-out infinite; }
@keyframes raiseU { 0%,40%,80%,100% { transform:rotate(0); } 48%,72% { transform:rotate(-135deg); } }
@keyframes raiseL { 0%,40%,80%,100% { transform:rotate(0); } 48%,72% { transform:rotate(50deg); } }
.hp .kan { animation:hpKan 6s ease-in-out infinite; }
@keyframes hpKan { 0%,6% { opacity:0; transform:translate(0,0); } 12%,28% { opacity:1; transform:translate(0,0); } 38%,56% { transform:translate(var(--k,-78px),0); } 66%,88% { opacity:1; transform:translate(calc(var(--k,-78px) * 2),0); } 95%,100% { opacity:0; transform:translate(calc(var(--k,-78px) * 2),0); } }
.hp .feed { animation:hpFeed 7.5s linear infinite; }
@keyframes hpFeed { from { transform:translateY(0); } to { transform:translateY(-174px); } }
.hp .pipe { animation:hpPipe 4.5s ease-in-out infinite; }
@keyframes hpPipe { 0% { opacity:0; transform:translate(330px,176px) scale(.6); } 8% { opacity:1; } 33% { transform:translate(293px,101px) scale(.9); } 66% { transform:translate(222px,81px) scale(.9); } 90% { opacity:1; transform:translate(150px,108px) scale(.75); } 100% { opacity:0; transform:translate(146px,110px) scale(.6); } }
.hp .walker:not(.go) * { animation-play-state:paused; }
.hp .off * { animation-play-state:paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hp *, .hp .sheen { animation:none !important; }
  .hp .rmh { display:none; }
  .hp .btn:hover { transform:none; }
}

/* ── visually hidden text + the pause-all-motion button (WCAG 2.2.2) ── */
.hp .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hp .mtoggle { position:absolute; z-index:3; top:calc(74px + env(safe-area-inset-top, 0px)); inset-inline-end:clamp(12px,2.4cqi,28px);
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(199,181,255,.35); background:rgba(255,255,255,.08);
  color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .25s; }
.hp .mtoggle:hover, .hp .mtoggle:focus-visible { background:rgba(255,255,255,.18); }
.hp .mtoggle svg { width:16px; height:16px; }
.hp .mtoggle .mt-play, .hp .mtoggle[aria-pressed="true"] .mt-pause { display:none; }
.hp .mtoggle[aria-pressed="true"] .mt-play { display:block; }
.hp.still *, .hp.still .sheen { animation-play-state:paused !important; }