/* Ranchu Japan home (案C, Earth palette). Compiled from the design artboard; see public/assets/js/earth/home.js. */
/* Ranchu Japan 案C: shared helmet CSS (SPEC.md section 1).
   Order in the final <style>: this file first, then group CSS g1..g5 (classes rk-g1- ... rk-g5- only).
   The reduced-motion block at the end uses !important, so it wins over any group rule that does not use !important.
   Group CSS must never put !important on animation, transition, opacity or clip-path. */

/* ---------- 1. Page basics ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F7F4EC;font-family:'Noto Sans JP',system-ui,sans-serif}
a{color:#0E3B5C;text-underline-offset:3px}
a:hover{color:#10202A}
h1,h2,h3,button,.rk-palt{font-feature-settings:"palt" 1}
::selection{background:#F2B544;color:#10202A}

/* ---------- 2. Utilities ---------- */
.rk-ph{display:inline-block}
.rk-num{font-family:'Space Grotesk',sans-serif;font-weight:500;font-variant-numeric:tabular-nums}
.rk-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 3. Keyframes (shared) ---------- */
@keyframes rk-spin{to{transform:rotate(360deg)}}
@keyframes rk-drift{from{transform:translateX(0)}to{transform:translateX(-600px)}}
@keyframes rk-wave{from{transform:translateX(0)}to{transform:translateX(-400px)}}
@keyframes rk-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes rk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes rk-twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes rk-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes rk-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes rk-sway-s{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes rk-steam{0%{opacity:0;transform:translateY(0)}40%{opacity:.8}100%{opacity:0;transform:translateY(-28px)}}
@keyframes rk-march{to{stroke-dashoffset:-120}}
@keyframes rk-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes rk-ripple{0%{transform:scale(.8);opacity:.5}100%{transform:scale(1.4);opacity:0}}
@keyframes rk-fall{0%{transform:translateY(0);opacity:0}12%{opacity:1}78%{opacity:1}100%{transform:translateY(42px);opacity:0}}
@keyframes rk-breathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes rk-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rk-in-scale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes rk-swap-a{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rk-swap-b{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rk-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes rk-fade{from{opacity:0}to{opacity:1}}

/* ---------- 4. Ambient animation classes ----------
   SVG notes: CSS px inside SVG = user units of the element's own coordinate system.
   fill-box  = the element's own bounding box (use for bob, pulse, self-spin, sway).
   view-box  = the element's local user space; transform-origin 0 0 is the local origin
               (rk-spin / rk-spin-r rely on a translated parent group, e.g. translate(500 300)).
   To pivot around a drawn point, add inline: style="transform-box: view-box; transform-origin: 875px 170px".
   Dash patterns used with rk-march must sum to a divisor of 120 (2 10, 2 6, 4 8, 14 10, 18 12). */
.rk-spin{animation:rk-spin 60s linear infinite;transform-box:view-box;transform-origin:0 0}
.rk-spin-r{animation:rk-spin 60s linear infinite reverse;transform-box:view-box;transform-origin:0 0}
.rk-drift{animation:rk-drift 40s linear infinite}
.rk-drift-fast{animation:rk-drift 26s linear infinite}
.rk-drift-slow{animation:rk-drift 64s linear infinite}
.rk-wave1{animation:rk-wave 7s linear infinite}
.rk-wave2{animation:rk-wave 11s linear infinite}
.rk-wave3{animation:rk-wave 17s linear infinite}
.rk-bob{animation:rk-bob 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.rk-float{animation:rk-float 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.rk-tw{animation:rk-twinkle 3.2s ease-in-out infinite}
.rk-pulse{animation:rk-pulse 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
.rk-sway{animation:rk-sway 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.rk-sway-s{animation:rk-sway-s 6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.rk-swing{animation:rk-sway 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
.rk-steam{animation:rk-steam 3.2s ease-out infinite}
.rk-march{animation:rk-march 6s linear infinite}
.rk-ripple{animation:rk-ripple 4s ease-out infinite;transform-box:fill-box;transform-origin:center}
.rk-fall{animation:rk-fall 2.8s ease-in infinite}
.rk-breathe{animation:rk-breathe 8s ease-in-out infinite}

/* ---------- 5. One-shot animation classes ---------- */
/* Hero load sequence: set animation-delay inline. Never put on an element that also has rk-btn or a hover transform (wrap it). */
.rk-in{animation:rk-in .9s cubic-bezier(.2,.8,.2,1) both}
.rk-in-scale{animation:rk-in-scale 1.2s cubic-bezier(.2,.8,.2,1) both}
/* Scroll cue: bounces three times after the hero settles, then rests. */
.rk-nudge{animation:rk-nudge 2s ease-in-out 1.6s 3 both}
/* Autoplay progress bar: set animation-duration and animation-play-state inline; remount to restart. */
/* Content swap: set animation-name inline to rk-swap-a / rk-swap-b and alternate it to replay. */
.rk-swap{animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-delay:.1s;animation-fill-mode:both}
/* Check mark that draws itself on mount (path length up to 24). */
.rk-draw{stroke-dasharray:24;animation:rk-draw .45s ease-out .1s both}
.rk-fade-in{animation:rk-fade .3s ease .15s both}

/* ---------- 6. Scroll reveal (driven by a section class from JS: 'rk-pre' until the section is first seen) ----------
   Put rk-rv / rk-rv-wipe on HTML wrappers only, never on an element with its own transform, transition or hover (wrap it). */
.rk-rv{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rk-rv-wipe{clip-path:inset(-25% -6% -30% -6%);transition:clip-path 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.rk-pre .rk-rv{opacity:0;transform:translateY(28px)}
.rk-pre .rk-rv-wipe{opacity:0;clip-path:inset(-25% -6% 100% -6%);transform:translateY(18px)}
.rk-d1{transition-delay:.12s}
.rk-d2{transition-delay:.24s}
.rk-d3{transition-delay:.36s}
.rk-d4{transition-delay:.48s}

/* ---------- 7. Offscreen pause (section class 'rk-off' while the section is out of view) ---------- */
.rk-off [class*="rk-"]{animation-play-state:paused !important}

/* ---------- 8. Controls: hover, press ---------- */
.rk-btn{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease}
.rk-btn svg{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.rk-chip{transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .12s ease}
.rk-press{transition:transform .1s ease}
@media (hover:hover){
  .rk-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,20,38,.18)}
  .rk-btn:hover .rk-ext{transform:translate(2px,-2px)}
  .rk-btn:hover .rk-fwd{transform:translateX(4px)}
  .rk-pill:hover{border-color:#7FC8E8 !important}
  .rk-nav:hover{color:#F7F4EC !important}
  .rk-foot:hover{color:#F7F4EC !important;text-decoration:underline !important;text-underline-offset:4px}
}
.rk-btn:active{transform:scale(.97);box-shadow:none;transition-duration:.08s}
.rk-chip:active{transform:scale(.95)}
.rk-press:active{transform:scale(.98)}

/* ---------- 9. Focus ---------- */
:where(a,button):focus-visible{outline:3px solid #0E3B5C;outline-offset:3px}
:where(#s1,#s2,#s7,footer,.rk-on-dark) :where(a,button):focus-visible{outline-color:#F2B544}

/* g1: header, hero (#s1) and scene rail */
@media (max-width: 760px){.rk-g1-navlink{display:none !important}}
@media (max-width: 640px){.rk-g1-globe{aspect-ratio:1/1 !important;max-width:400px !important}}
@media (max-width: 1279px){.rk-g1-rail{display:none !important}}
@media (max-width: 420px){.rk-g1-cta{padding:0 20px !important}}
.rk-g1-rail a:focus-visible{outline-color:currentColor;outline-offset:-2px}
.rk-g1-tip{opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.rk-g1-rail a:focus-visible .rk-g1-tip{opacity:1;transform:none}
.rk-g1-cue{transition:border-color .2s ease,background-color .2s ease}
.rk-g1-meteor{opacity:0;animation:rk-g1-meteor 12s linear 2.4s infinite}
@keyframes rk-g1-meteor{0%,72%{opacity:0;transform:translate(0,0)}74%{opacity:1}82%,100%{opacity:0;transform:translate(180px,72px)}}
@media (hover:hover){
  .rk-g1-rail a:hover .rk-g1-tip{opacity:1;transform:none}
  .rk-g1-globe:hover .rk-spin,.rk-g1-globe:hover .rk-spin-r{animation-play-state:paused}
  .rk-g1-gold:hover{box-shadow:0 10px 28px rgba(242,181,68,.28)}
  .rk-g1-cue:hover{background-color:rgba(127,200,232,.1)}
}
.rk-g1-gold:active{box-shadow:none}

/* g2: 01 ocean origin (#s2). The scroll lifts the sun out of the sea and slides the waves (--o-*). */
.rk-g2-cta{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .2s ease}
@media (hover:hover){.rk-g2-cta:hover{background-color:rgba(191,230,242,.1);box-shadow:0 10px 28px rgba(127,200,232,.2)}}
@media (max-width:640px){.rk-g2-scene{aspect-ratio:12/7 !important}.rk-g2-lotus{width:19.3% !important}}

/* g3: 02 the shop's day (#s3). Stage: timeline + scene on the left, the クチトル card overlapping on the right (one column below 1024px). */
/* Base layout is inline. Desktop: the card sits right of the scene, centred on it; one column below 1024px, where the card fills the reserved slot and shows the beat dots. */
@media (min-width:1024px){
  .rk-g3-stage{grid-template-columns:minmax(0,1fr) 380px !important;align-items:center !important;justify-items:stretch !important}
  .rk-g3-slot{width:auto !important;max-width:none !important;margin:0 0 0 -56px !important;justify-content:center !important}
  .rk-g3-card{flex:0 0 auto !important}
  .rk-g3-dots{display:none !important}
}
/* The slot reserves the tallest card (14:20 with its draft) at each width, so a beat change never moves the text below. */
@media (max-width:640px){.rk-g3-svg{aspect-ratio:3/2 !important}.rk-g3-slot{min-height:392px !important}.rk-g3-meta{margin-left:0 !important;flex-basis:100%}}
@media (max-width:359px){.rk-g3-slot{min-height:444px !important}}

/* Vignette details replay each time their beat starts: the beat's group gets rk-g3-on. */
.rk-g3-pop,.rk-g3-ring{transform-box:fill-box;transform-origin:center}
.rk-g3-on .rk-g3-pop{animation:rk-g3-pop .5s cubic-bezier(.34,1.56,.64,1) both}
.rk-g3-on .rk-g3-ring{animation:rk-g3-ring 1s ease-out both}
@keyframes rk-g3-pop{from{transform:scale(0)}to{transform:none}}
@keyframes rk-g3-ring{from{transform:scale(.6);opacity:.6}to{transform:scale(2.8);opacity:0}}
.rk-g3-idle{animation:rk-g3-idle 2.8s ease-in-out infinite}
@keyframes rk-g3-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.rk-g3-up{animation:rk-g3-up .6s cubic-bezier(.34,1.56,.64,1) .35s both}
@keyframes rk-g3-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* One-shot scene moves: JS sets these names only on their beat, so a name change replays them. */
@keyframes rk-g3-flash{0%{opacity:0}30%{opacity:.85}100%{opacity:0}}
@keyframes rk-g3-photo{0%{transform:translate(395px,318px) rotate(0deg) scale(.4);opacity:0}15%{transform:translate(445.6px,212px) rotate(-6.5deg) scale(.58);opacity:1}30%{transform:translate(510.5px,152.5px) rotate(-7.9deg) scale(.73)}45%{transform:translate(575.3px,122.6px) rotate(-6deg) scale(.84)}60%{transform:translate(629.8px,109.6px) rotate(-3.3deg) scale(.92)}75%{transform:translate(667.9px,105.2px) rotate(-1.2deg) scale(.97)}88%{transform:translate(685.5px,104.2px) rotate(1.5deg) scale(1.05)}100%{transform:translate(690px,104px) rotate(0deg) scale(1)}}
@keyframes rk-g3-plane{0%{transform:translate(500px,330px) rotate(15.9deg) scale(.55);opacity:0}10%{transform:translate(443.5px,303.5px) rotate(34deg) scale(.67);opacity:1}20%{transform:translate(401.5px,267px) rotate(47.4deg) scale(.78)}30%{transform:translate(371.1px,228.1px) rotate(56.3deg) scale(.87)}40%{transform:translate(349.3px,191.4px) rotate(62deg) scale(.95)}50%{transform:translate(333.4px,159px) rotate(65.6deg) scale(1)}60%{transform:translate(321.7px,131.8px) rotate(67.4deg) scale(1)}70%{transform:translate(312.9px,110.5px) rotate(67.5deg) scale(1)}80%{transform:translate(306.3px,95.4px) rotate(56deg) scale(1)}90%{transform:translate(301.8px,86.7px) rotate(38deg) scale(1)}100%{transform:translate(300px,84px) rotate(22deg) scale(1)}}
@keyframes rk-g3-trail{0%{stroke-dashoffset:331}10%{stroke-dashoffset:268.1}20%{stroke-dashoffset:211.8}30%{stroke-dashoffset:162.2}40%{stroke-dashoffset:119.2}50%{stroke-dashoffset:82.8}60%{stroke-dashoffset:53}70%{stroke-dashoffset:29.8}80%{stroke-dashoffset:13.2}90%{stroke-dashoffset:3.3}100%{stroke-dashoffset:0}}

/* g4: s4 growth, s5 journey. Cameras pan on phones only. */
@media (min-width:641px){.rk-g4-cam,.rk-g4-cam5{transform:none !important}}
@media (max-width:640px){
  .rk-g4-growsvg{height:240px !important}
  .rk-g4-pathsvg{height:220px !important}
  .rk-g4-steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .rk-g4-bleed{width:calc(100% + 48px) !important;max-width:none !important;margin-left:-24px !important;margin-right:-24px !important}
  .rk-g4-st4{min-height:150px !important}
  .rk-g4-st5{min-height:244px !important}
  /* s5 on phones: node buttons follow the camera, the callout sits centred under the selected node. */
  .rk-g4-pathwrap{overflow-x:clip !important}
  .rk-g4-nbd{display:none !important}
  .rk-g4-nbp{display:block !important}
  .rk-g4-tip{left:50% !important}
  .rk-g4-call{left:0 !important;width:100% !important}
}
@media (max-width:359px){.rk-g4-st5{min-height:316px !important}}
/* Sunbeam landing ring, replayed per step. */
.rk-g4-land{opacity:0;animation-duration:1.1s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-delay:.6s;animation-fill-mode:forwards;transform-box:fill-box;transform-origin:center}
@keyframes rk-g4-land-a{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(1.6)}}
@keyframes rk-g4-land-b{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(1.6)}}
.rk-g4-fruit{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.rk-g4-turn{animation:rk-g4-turn 16s linear infinite}
@keyframes rk-g4-turn{to{transform:translateX(-64px)}}
.rk-g4-cloud{animation:rk-g4-cloud 16s ease-in-out infinite alternate}
@keyframes rk-g4-cloud{from{transform:translateX(-10px)}to{transform:translateX(14px)}}
/* 2026: one satellite circles the ringed planet; it fades while it passes behind the core. */
.rk-g4-sat{animation:rk-g4-sat 8s linear infinite;transform-box:view-box;transform-origin:0 0}
@keyframes rk-g4-sat{0%{transform:translate(720px,120px)}8.333%{transform:translate(717.32px,123px)}16.667%{transform:translate(710px,125.2px)}25%{transform:translate(700px,126px)}33.333%{transform:translate(690px,125.2px)}41.667%{transform:translate(682.68px,123px)}50%{transform:translate(680px,120px)}58.333%{transform:translate(682.68px,117px)}66.667%{transform:translate(690px,114.8px);opacity:1}70.8%{opacity:0}75%{transform:translate(700px,114px)}79.2%{opacity:0}83.333%{transform:translate(710px,114.8px);opacity:1}91.667%{transform:translate(717.32px,117px)}100%{transform:translate(720px,120px)}}
/* Static frame: the marker rests as a gold ring. */
@media (prefers-reduced-motion:reduce){.rk-g4-mk{transform:scale(1.5);opacity:.7}}

/* g5: 05 principles (#s6), 06 dawn (#s7, the scroll raises the sun: --dw-*), footer. */
@media (max-width:1040px){.rk-g5-four{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
/* Cards: full-bleed vignettes whose horizons meet y 86 at both edges, so the row reads as one landscape. Titles break into two set lines from 561px. Phones stack the vignette above the text. */
@media (min-width:561px){.rk-g5-pr h3 .rk-ph{display:block}}
@media (max-width:560px){
  .rk-g5-four{grid-template-columns:minmax(0,1fr) !important}
  .rk-g5-vig{aspect-ratio:5/2 !important}
}
/* s6 vignettes come to life once the section is first seen: the seedling springs up, roots reach down, the leaf unfurls, the sun clears the hill. */
.rk-g5-grow{transition:transform .9s cubic-bezier(.34,1.56,.64,1) .55s}
.rk-pre .rk-g5-grow{transform:scale(.08)}
.rk-g5-root{transition:transform 1s cubic-bezier(.2,.8,.2,1) .8s}
.rk-pre .rk-g5-root{transform:scaleY(0)}
.rk-g5-unfurl{transition:transform 1.1s cubic-bezier(.34,1.56,.64,1) .85s}
.rk-pre .rk-g5-unfurl{transform:rotate(-34deg) scale(.4)}
.rk-g5-rise{transition:transform 1.4s cubic-bezier(.45,0,.25,1) .95s}
.rk-pre .rk-g5-rise{transform:translateY(40px)}
@media (hover:hover){
  .rk-g5-gold:hover{box-shadow:0 10px 28px rgba(242,181,68,.28)}
}
.rk-g5-gold:active{box-shadow:none}
@media (prefers-reduced-motion:reduce){.rk-pre .rk-g5-grow,.rk-pre .rk-g5-root,.rk-pre .rk-g5-unfurl,.rk-pre .rk-g5-rise{transform:none}}

/* ---------- 11. Scroll story ----------
   The script writes the scroll position of each scene into CSS custom properties on its section (--h-*, --o-*, --d-*, --gr-*, --jr-*, --dw-*).
   Pinned stages use position: sticky only when the page scrolls inside a real viewport (root class rk-sc). */
@media (max-width:640px){.rk-g1-globew{max-width:400px !important}.rk-tl-off .rk-tl-txt{visibility:hidden}}
/* Phones, pinned: the day stage gives up some padding and sky so the timeline, the scene and the whole card fit one screen. */
@media (max-width:640px){.rk-sc #rk-s3-stage{padding:12px 16px 36px !important}.rk-sc .rk-g3-svg{aspect-ratio:2/1 !important}}
.rk-hint{animation:rk-nudge 1.8s ease-in-out infinite}

/* ---------- 12. Site pieces outside the design ---------- */
/* Tokens the shared star map (stars.css) reads. */
:root{--wrap:1180px;--gutter:clamp(16px,4vw,40px);--font:'Noto Sans JP',system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rk-skip{position:absolute;left:16px;top:-80px;z-index:40;padding:12px 18px;border-radius:12px;background:#F2B544;color:#10202A;font-size:15px;font-weight:500;text-decoration:none}
.rk-skip:focus{top:16px;color:#10202A}
/* The footer star opens the star map, as on every page's footer link to /#stars. */
.rk-star{position:relative;display:inline-block;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.rk-star span{position:absolute;inset:19px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 6px 2px rgba(190,235,255,.55);animation:twinkle 3.6s ease-in-out infinite}
@media (hover:hover){.rk-star:hover span{box-shadow:0 0 10px 4px rgba(190,235,255,.8)}}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.rk-foot{transition:color .2s ease}
@media (hover:hover){.rk-foot:hover{color:#F7F4EC !important}}
@media (max-width:420px){.rk-footnav{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:0 20px !important}}

/* ---------- Mode: plain layout (rk-static) or pinned scenes (rk-sc). The root class decides; see home.js. ---------- */
.rk-static #s1{height:auto}
.rk-static #rk-s1-stage{position:relative;min-height:min(56.25vw, 880px)}
.rk-static #rk-s3-track{height:auto}
.rk-static #rk-s3-stage{position:relative;min-height:0px}
.rk-static #rk-s4-track{height:auto}
.rk-static #rk-s4-stage{position:relative;min-height:0px}
.rk-static #rk-s5-track{height:auto}
.rk-static #rk-s5-stage{position:relative;min-height:0px}
.rk-static #rk-orb{display:none}
.rk-sc #s1{height:calc(100svh * 2.4)}
.rk-sc #rk-s1-stage{position:sticky;min-height:100svh}
.rk-sc #rk-s3-track{height:calc(100svh * 5.2)}
.rk-sc #rk-s3-stage{position:sticky;min-height:100svh}
.rk-sc #rk-s4-track{height:calc(100svh * 3)}
.rk-sc #rk-s4-stage{position:sticky;min-height:100svh}
.rk-sc #rk-s5-track{height:calc(100svh * 3.2)}
.rk-sc #rk-s5-stage{position:sticky;min-height:100svh}
.rk-sc #rk-orb{display:block}

/* ---------- 10. Reduced motion (keep last in this file) ----------
   Stops every animation and transition on the page, including inline transitions on state-driven SVG,
   and forces all reveal-hidden content visible. JS also holds every scene on one fixed frame and leaves the travelling light off when this matches. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .rk-rv,.rk-rv-wipe,.rk-pre .rk-rv,.rk-pre .rk-rv-wipe{opacity:1 !important;transform:none !important;clip-path:none !important}
  .rk-in,.rk-in-scale,.rk-swap,.rk-fade-in{opacity:1 !important;transform:none !important}
  .rk-steam{opacity:.45}
  .rk-btn:hover,.rk-btn:active,.rk-chip:active,.rk-press:active{transform:none}
  .rk-orbwrap{display:none !important}
}