:root {
  color-scheme: dark;
  --black: #020305;
  --blue: #2fe7ff;
  --blue-hot: #b8fbff;
  --red: #b20f13;
  --ember: #ff5a1c;
  --white: #f4f0ec;
  --font-garage: "Segoe UI Variable", "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  --heart-size: clamp(270px, 38dvh, 410px);
  --piece-size: clamp(104px, 10.5dvh, 150px);
  --plate-width: clamp(180px, 24dvh, 280px);
  --stage-size: min(92vw, calc(100dvh - 168px), 900px);
  --stage-scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #020305;
  color: var(--white);
  font-family: var(--font-garage);
}

a,
button {
  color: inherit;
  font: inherit;
}

.garage-solar-bg,
#garage-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.garage-solar-bg {
  z-index: 0;
  object-fit: cover;
  opacity: 0.72;
  filter: saturate(1.06) contrast(1.18) brightness(0.66);
  transform: scale(1.04);
  animation: solarBackgroundDrift 42s ease-in-out infinite alternate;
}

#garage-particles {
  z-index: 2;
}

.garage-page::before,
.garage-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.garage-page::before {
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, transparent, rgba(47, 231, 255, 0.05), transparent);
  opacity: 0.48;
  mix-blend-mode: screen;
}

.garage-page::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02) 0 23%, rgba(0, 0, 0, 0.42) 66%, rgba(0, 0, 0, 0.88)),
    radial-gradient(circle at 50% 52%, rgba(47, 231, 255, 0.18), transparent 30%),
    linear-gradient(118deg, rgba(178, 15, 19, 0.08), transparent 36%, rgba(47, 231, 255, 0.1) 72%, transparent);
}

.garage-header {
  position: fixed;
  z-index: 8;
}

.garage-header {
  top: 26px;
  left: 30px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.garage-brand-stack {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.garage-mark {
  display: block;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(47, 231, 255, 0.22);
  border-radius: 10px;
  background: rgba(3, 9, 13, 0.62);
  box-shadow: 0 0 22px rgba(47, 231, 255, 0.15), 0 0 18px rgba(178, 15, 19, 0.18);
  object-fit: cover;
}

.garage-back-arrow {
  display: grid;
  width: 32px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(47, 231, 255, 0.22);
  border-radius: 999px;
  background: rgba(2, 6, 8, 0.48);
  color: rgba(191, 249, 255, 0.9);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(47, 231, 255, 0.8), 0 0 14px rgba(178, 15, 19, 0.46);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.garage-back-arrow:hover,
.garage-back-arrow:focus-visible {
  border-color: rgba(47, 231, 255, 0.72);
  box-shadow: 0 0 18px rgba(47, 231, 255, 0.28), 0 0 16px rgba(178, 15, 19, 0.24);
  outline: none;
  transform: translateX(-2px);
}

.garage-wordmark {
  display: block;
  width: clamp(160px, 18vw, 270px);
  height: auto;
  max-height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(47, 231, 255, 0.24)) drop-shadow(0 0 16px rgba(178, 15, 19, 0.18));
}

@keyframes solarBackgroundDrift {
  from {
    transform: scale(1.04) translate3d(-0.8%, -0.6%, 0);
  }
  to {
    transform: scale(1.09) translate3d(1.1%, 0.8%, 0);
  }
}

@keyframes orbitCurrent {
  to {
    stroke-dashoffset: -96;
  }
}

@keyframes circuitFlicker {
  0%, 52%, 55%, 100% {
    opacity: 0.62;
  }
  53%, 54% {
    opacity: 1;
    stroke-width: 1.8;
  }
}

@keyframes orbitTrackFlicker {
  0%, 58%, 62%, 100% {
    opacity: 0.54;
  }
  59%, 61% {
    opacity: 0.95;
    stroke-width: 2.2;
  }
}

@keyframes orbitSpark {
  0%, 68%, 74%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  69%, 73% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.18);
  }
}

.garage-interface {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 118px clamp(18px, 4vw, 56px) 42px;
  place-items: center;
  perspective: 1300px;
  transition: transform 760ms cubic-bezier(0.18, 0.82, 0.2, 1);
}

.garage-interface.is-expanded {
  transform: scale(0.96);
}

.garage-stage {
  position: relative;
  width: var(--stage-size);
  max-width: 100%;
  aspect-ratio: 1;
  transform: scale(var(--stage-scale));
  transform-style: preserve-3d;
}

.orbit-field,
.orbit-tracks,
.orbit-runner {
  position: absolute;
  left: 50%;
  top: 50%;
}

.orbit-field {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: none;
  transform-origin: center;
  transition: opacity 420ms ease;
}

.orbit-field-back {
  z-index: auto;
}

.orbit-field-front {
  z-index: auto;
}

.garage-interface.is-expanded .orbit-field {
  opacity: 0.22;
  transition: opacity 420ms ease;
}

.orbit-tracks {
  width: min(142vw, 1580px);
  height: min(82vw, 900px);
  overflow: visible;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.orbit-track {
  fill: none;
  stroke: rgba(73, 228, 255, 0.34);
  stroke-width: 1.35;
  stroke-dasharray: 28 28;
  filter: drop-shadow(0 0 8px rgba(47, 231, 255, 0.72)) drop-shadow(0 0 18px rgba(47, 231, 255, 0.22));
  animation: orbitCurrent 8s linear infinite, orbitTrackFlicker 4.6s steps(1, end) infinite;
}

.orbit-track-02 {
  stroke-dasharray: 9 24;
  animation-duration: 10s, 5.2s;
}

.orbit-track-03 {
  stroke-dasharray: 26 36;
  animation-duration: 12s, 6s;
}

.circuit-arc {
  fill: none;
  stroke: rgba(135, 244, 255, 0.38);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 7 18 44 20;
  filter:
    drop-shadow(0 0 6px rgba(47, 231, 255, 0.92))
    drop-shadow(0 0 14px rgba(47, 231, 255, 0.34));
  opacity: 0.75;
  animation: orbitCurrent 4.8s linear infinite, circuitFlicker 3.2s steps(1, end) infinite;
}

.circuit-arc-02 {
  stroke: rgba(255, 98, 28, 0.28);
  animation-duration: 5.6s, 4s;
}

.circuit-arc-03 {
  stroke-dasharray: 4 16 34 24;
  animation-duration: 6.2s, 4.4s;
}

.orbit-runner {
  --object-size: 120px;
  --object-opacity: 0.9;
  width: var(--object-size);
  aspect-ratio: 1;
  opacity: var(--object-opacity);
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter:
    drop-shadow(0 0 12px rgba(47, 231, 255, 0.38))
    drop-shadow(0 0 22px rgba(255, 89, 19, 0.18))
    contrast(1.08);
  will-change: transform, opacity, filter;
}

.orbit-runner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd2a0, rgba(255, 92, 18, 0.78) 44%, transparent 72%);
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 10px rgba(255, 92, 18, 0.9));
  animation: orbitSpark 5.8s steps(1, end) infinite;
}

.orbit-runner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(var(--object-tilt, 0deg));
  user-select: none;
}

.orbit-turbo { --object-size: clamp(90px, 10vw, 156px); --object-tilt: -8deg; }
.orbit-jet-engine { --object-size: clamp(96px, 11vw, 170px); --object-opacity: 0.88; --object-tilt: 5deg; }
.orbit-wing { --object-size: clamp(116px, 14vw, 218px); --object-opacity: 0.86; --object-tilt: -6deg; }
.orbit-engine-block { --object-size: clamp(102px, 12vw, 176px); --object-opacity: 0.9; --object-tilt: 4deg; }
.orbit-bike-wheel { --object-size: clamp(94px, 11vw, 160px); --object-opacity: 0.84; --object-tilt: 2deg; }
.orbit-small-asteroid-01 { --object-size: clamp(46px, 5vw, 78px); --object-opacity: 0.58; --object-tilt: 0deg; }
.orbit-small-asteroid-02 { --object-size: clamp(42px, 5vw, 74px); --object-opacity: 0.52; --object-tilt: 0deg; }
.orbit-small-asteroid-03 { --object-size: clamp(38px, 4.8vw, 68px); --object-opacity: 0.5; --object-tilt: 0deg; }
.orbit-anime-mask { --object-size: clamp(76px, 8vw, 132px); --object-opacity: 0.76; --object-tilt: -4deg; }

.orbit-fat-tyre { --object-size: clamp(128px, 15vw, 240px); --object-opacity: 0.88; --object-tilt: 4deg; }
.orbit-landing-gear { --object-size: clamp(112px, 13vw, 200px); --object-opacity: 0.78; --object-tilt: -8deg; }
.orbit-missile { --object-size: clamp(120px, 15vw, 230px); --object-opacity: 0.82; --object-tilt: -5deg; }

.heart-core,
.heart-piece-layer,
.electric-threads,
.heart-collapse {
  position: absolute;
  left: 50%;
  top: 50%;
}

.heart-core {
  z-index: 5;
  display: grid;
  width: var(--heart-size);
  aspect-ratio: 2 / 3;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  transform: translate(-50%, -50%) translateZ(20px);
  transition: opacity 460ms ease, transform 760ms cubic-bezier(0.18, 0.82, 0.2, 1), filter 220ms ease;
}

.heart-core:hover,
.heart-core:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 34px rgba(47, 231, 255, 0.52));
  transform: translate(-50%, -50%) translateZ(32px);
}

.garage-interface.is-opening .heart-core,
.garage-interface.is-closing .heart-core {
  animation: heartGlitch 560ms steps(2, end);
}

.garage-interface.is-expanded .heart-core {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
}

.heart-closed {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  filter:
    drop-shadow(0 0 34px rgba(47, 231, 255, 0.56))
    drop-shadow(0 0 70px rgba(47, 231, 255, 0.18));
  animation: heartEnter 900ms cubic-bezier(0.2, 0.78, 0.16, 1) both, mechanicalHeartbeat 1.92s ease-in-out 900ms infinite;
}

.heart-core:hover .heart-closed,
.heart-core:focus-visible .heart-closed {
  animation: mechanicalHeartbeatFast 1.08s ease-in-out infinite;
}

.heart-aura,
.heart-burst,
.heart-embers,
.heart-embers span {
  position: absolute;
  pointer-events: none;
}

.heart-aura {
  inset: -14%;
  z-index: 0;
  border-radius: 48%;
  background:
    radial-gradient(circle, rgba(188, 251, 255, 0.3), rgba(47, 231, 255, 0.18) 34%, transparent 70%),
    conic-gradient(from 0deg, transparent, rgba(47, 231, 255, 0.45), transparent 20%, rgba(47, 231, 255, 0.18), transparent 46%, rgba(47, 231, 255, 0.32), transparent);
  filter: blur(12px);
  opacity: 0.94;
  animation: electricFlicker 2.6s steps(1, end) infinite, heartbeatRing 1.92s ease-out infinite;
}

.heart-core::before,
.heart-core::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 13%;
  border-radius: 45%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.heart-core::before {
  background:
    linear-gradient(108deg, transparent 0 20%, rgba(47, 231, 255, 0.08) 25%, rgba(196, 252, 255, 0.62) 29%, rgba(47, 231, 255, 0.34) 32%, transparent 39% 100%),
    linear-gradient(24deg, transparent 0 34%, rgba(47, 231, 255, 0.08) 39%, rgba(123, 243, 255, 0.48) 43%, rgba(21, 92, 116, 0.22) 47%, transparent 53% 100%);
  opacity: 0.52;
  filter: drop-shadow(0 0 14px rgba(47, 231, 255, 0.58));
  animation: blueVeinSweep 3.4s ease-in-out infinite, blueVeinFlicker 1.9s steps(1, end) infinite;
}

.heart-core::after {
  background:
    linear-gradient(100deg, transparent 0 40%, rgba(223, 253, 255, 0.78) 42%, rgba(47, 231, 255, 0.38) 45%, transparent 49%),
    linear-gradient(18deg, transparent 0 52%, rgba(47, 231, 255, 0.5) 54%, transparent 58%);
  opacity: 0;
  filter: drop-shadow(0 0 16px var(--blue));
  animation: heartLightning 3.4s steps(1, end) infinite;
}

.heart-core:hover::before,
.heart-core:focus-visible::before,
.garage-interface.is-opening .heart-core::before {
  opacity: 0.88;
}

.heart-core:hover::after,
.heart-core:focus-visible::after {
  animation: heartLightning 1.2s steps(1, end) infinite;
}

.heart-core:hover .heart-aura,
.heart-core:focus-visible .heart-aura {
  animation: electricFlicker 1.15s steps(1, end) infinite, heartbeatRingFast 1.08s ease-out infinite;
}

.heart-burst {
  inset: -20%;
  z-index: 1;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, transparent 44%, rgba(188, 251, 255, 0.72) 49%, rgba(47, 231, 255, 0.34) 56%, transparent 69%),
    conic-gradient(from 0deg, transparent 0 8%, rgba(47, 231, 255, 0.62) 10%, transparent 18% 29%, rgba(115, 240, 255, 0.4) 31%, transparent 40% 54%, rgba(178, 15, 19, 0.22) 57%, transparent 66% 82%, rgba(47, 231, 255, 0.54) 84%, transparent 92%);
  filter: blur(3px) drop-shadow(0 0 22px rgba(47, 231, 255, 0.56));
}

.heart-core:hover .heart-burst,
.heart-core:focus-visible .heart-burst,
.garage-interface.is-opening .heart-burst,
.garage-interface.is-closing .heart-burst {
  animation: blueCorePulse 720ms ease-out;
}

.heart-embers {
  inset: 0;
  z-index: 4;
}

.heart-embers span {
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #f3feff, #2fe7ff 46%, rgba(178, 15, 19, 0.72) 62%, transparent 76%);
  filter: drop-shadow(0 0 8px rgba(47, 231, 255, 0.9));
  animation: emberDrift 4.8s linear infinite;
}

.heart-embers span:nth-child(1) { transform-origin: -88px -130px; animation-delay: -0.4s; }
.heart-embers span:nth-child(2) { transform-origin: 112px -80px; animation-delay: -1.2s; }
.heart-embers span:nth-child(3) { transform-origin: -128px 44px; animation-delay: -2.1s; }
.heart-embers span:nth-child(4) { transform-origin: 132px 80px; animation-delay: -2.8s; }
.heart-embers span:nth-child(5) { transform-origin: -64px 142px; animation-delay: -3.3s; }
.heart-embers span:nth-child(6) { transform-origin: 88px 140px; animation-delay: -4s; }

.heart-core:hover .heart-embers span,
.heart-core:focus-visible .heart-embers span {
  animation-duration: 2.4s;
}

.heart-piece-layer {
  z-index: 4;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.heart-center-plate,
.heart-piece {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  background: transparent;
  border: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 360ms ease,
    transform 960ms cubic-bezier(0.15, 0.86, 0.18, 1),
    filter 180ms ease;
}

.heart-center-plate {
  z-index: 4;
  width: var(--plate-width);
  height: auto;
  transform: translate(-50%, -50%) scale(0.42);
  filter: drop-shadow(0 0 24px rgba(47, 231, 255, 0.48));
}

.heart-piece {
  z-index: 3;
  width: var(--piece-size);
  min-height: var(--piece-size);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  transform: translate(-50%, -50%) scale(0.18) rotate(0deg);
  transition-delay: var(--delay);
}

.piece-01 {
  --open-x: clamp(-190px, -21dvh, -142px);
  --open-y: clamp(-270px, -30dvh, -205px);
}

.piece-02 {
  --open-x: 0px;
  --open-y: clamp(-330px, -36dvh, -245px);
}

.piece-03 {
  --open-x: clamp(142px, 21dvh, 190px);
  --open-y: clamp(-270px, -30dvh, -205px);
}

.piece-04 {
  --open-x: clamp(-285px, -31dvh, -218px);
  --open-y: clamp(-20px, -2dvh, -14px);
}

.piece-05 {
  --open-x: clamp(218px, 31dvh, 285px);
  --open-y: clamp(-20px, -2dvh, -14px);
}

.piece-06 {
  --open-x: clamp(-190px, -21dvh, -142px);
  --open-y: clamp(205px, 30dvh, 270px);
}

.piece-07 {
  --open-x: clamp(142px, 21dvh, 190px);
  --open-y: clamp(205px, 30dvh, 270px);
}

.piece-08 {
  --open-x: 0px;
  --open-y: clamp(245px, 36dvh, 330px);
}

.heart-piece img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  filter:
    drop-shadow(0 0 18px rgba(47, 231, 255, 0.34))
    drop-shadow(0 0 16px rgba(255, 72, 20, 0.1));
  pointer-events: none;
  user-select: none;
}

.piece-label {
  position: absolute;
  left: 50%;
  bottom: -12px;
  z-index: 5;
  width: max-content;
  max-width: 170px;
  color: rgba(235, 253, 255, 0.9);
  font-size: clamp(10px, 0.95vw, 14px);
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1.1;
  opacity: 0;
  text-transform: uppercase;
  transform: translate(-50%, 8px);
  text-shadow: 0 0 8px rgba(47, 231, 255, 0.92), 0 0 18px rgba(47, 231, 255, 0.38), 0 1px 0 #000;
  transition: opacity 260ms ease, transform 260ms ease, color 180ms ease;
  transition-delay: calc(var(--delay) + 720ms);
}

.garage-interface.is-expanded .heart-center-plate {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.garage-interface.is-expanded .heart-piece {
  opacity: 1;
  pointer-events: auto;
  transform: translate(calc(-50% + var(--open-x, var(--x))), calc(-50% + var(--open-y, var(--y)))) scale(1) rotate(var(--r));
}

.garage-interface.is-expanded .piece-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.garage-interface.is-expanded .heart-piece:hover,
.garage-interface.is-expanded .heart-piece:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 28px rgba(47, 231, 255, 0.5));
  transform: translate(calc(-50% + var(--open-x, var(--x))), calc(-50% + var(--open-y, var(--y)))) scale(1.055) rotate(var(--r));
}

.garage-interface.is-expanded .heart-piece:hover .piece-label,
.garage-interface.is-expanded .heart-piece:focus-visible .piece-label {
  color: #ffffff;
}

.electric-threads {
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  overflow: visible;
  transition: opacity 280ms ease;
}

.garage-interface.is-expanded .electric-threads {
  opacity: 1;
  transition-delay: 460ms;
}

.thread {
  stroke: rgba(107, 238, 255, 0.84);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 16 12;
  filter: drop-shadow(0 0 7px rgba(47, 231, 255, 0.95)) drop-shadow(0 0 16px rgba(47, 231, 255, 0.42));
  opacity: 0.72;
  animation: currentFlow 1.2s linear infinite, threadFlicker 2.4s steps(1, end) infinite;
}

.thread-02,
.thread-05,
.thread-07 { animation-duration: 0.92s, 2.1s; }

.thread-03,
.thread-06 { animation-duration: 1.34s, 2.7s; }

.heart-collapse {
  z-index: 6;
  width: 160px;
  height: 120px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 240ms ease, transform 240ms ease;
}

.garage-interface.is-expanded .heart-collapse {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 840ms;
}

.garage-hint {
  position: absolute;
  bottom: clamp(28px, 6vh, 66px);
  left: 50%;
  z-index: 7;
  margin: 0;
  color: rgba(174, 244, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity 300ms ease, transform 300ms ease;
}

.garage-interface.is-expanded .garage-hint,
.garage-interface.is-opening .garage-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

@keyframes heartEnter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.9);
    filter: blur(5px) drop-shadow(0 0 0 transparent);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mechanicalHeartbeat {
  0%, 16%, 44%, 100% { transform: scale(1); filter: brightness(1); }
  8% { transform: scale(1.034); filter: brightness(1.12) contrast(1.04); }
  22% { transform: scale(1.014); filter: brightness(1.06); }
}

@keyframes mechanicalHeartbeatFast {
  0%, 18%, 48%, 100% { transform: scale(1); filter: brightness(1.03); }
  9% { transform: scale(1.052); filter: brightness(1.22) contrast(1.1); }
  25% { transform: scale(1.024); filter: brightness(1.12); }
}

@keyframes heartGlitch {
  0% { transform: translate(-50%, -50%) translateZ(20px) scale(1); }
  24% { transform: translate(calc(-50% + 6px), calc(-50% - 3px)) translateZ(20px) scale(1.04); }
  48% { transform: translate(calc(-50% - 4px), calc(-50% + 3px)) translateZ(20px) scale(1.07); }
  100% { transform: translate(-50%, -50%) translateZ(20px) scale(1); }
}

@keyframes electricFlicker {
  0%, 72%, 76%, 100% { opacity: 0.82; }
  73%, 75% { opacity: 1; filter: blur(10px) brightness(1.35); }
}

@keyframes heartbeatRing {
  0% { transform: scale(0.84); opacity: 0.62; }
  18% { transform: scale(1.04); opacity: 0.92; }
  52%, 100% { transform: scale(1.22); opacity: 0.2; }
}

@keyframes heartbeatRingFast {
  0% { transform: scale(0.82); opacity: 0.74; }
  22% { transform: scale(1.08); opacity: 1; }
  60%, 100% { transform: scale(1.32); opacity: 0.24; }
}

@keyframes heartLightning {
  0%, 82%, 86%, 100% { opacity: 0; }
  83%, 85% { opacity: 0.86; }
}

@keyframes blueVeinSweep {
  0%, 100% { transform: rotate(-12deg) translateX(-4%) scale(0.98); }
  42% { transform: rotate(8deg) translateX(5%) scale(1.02); }
  68% { transform: rotate(-4deg) translateY(3%) scale(1.01); }
}

@keyframes blueVeinFlicker {
  0%, 64%, 68%, 100% { opacity: 0.52; }
  65%, 67% { opacity: 0.92; }
}

@keyframes blueCorePulse {
  0% { opacity: 0; transform: scale(0.6); }
  18% { opacity: 0.78; }
  100% { opacity: 0; transform: scale(1.34); }
}

@keyframes emberDrift {
  from { rotate: 0deg; opacity: 0.35; }
  45% { opacity: 1; }
  to { rotate: 360deg; opacity: 0.4; }
}

@keyframes currentFlow {
  to { stroke-dashoffset: -56; }
}

@keyframes threadFlicker {
  0%, 68%, 72%, 100% { opacity: 0.5; }
  69%, 71% { opacity: 1; stroke-width: 3; }
}

@media (max-width: 980px) {
  :root {
    --stage-scale: 0.88;
    --heart-size: min(48vw, 36dvh, 360px);
    --piece-size: min(16vw, 13dvh, 132px);
    --plate-width: min(32vw, 25dvh, 240px);
    --stage-size: min(92vw, calc(100dvh - 150px), 780px);
  }

  .orbit-field {
    width: min(136vw, 980px);
    height: min(136vw, 980px);
  }

  .orbit-small-asteroid-02,
  .orbit-small-asteroid-03 {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --stage-scale: 0.58;
    --heart-size: min(72vw, 340px);
    --piece-size: min(24vw, 122px);
    --plate-width: min(48vw, 220px);
  }

  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .garage-interface,
  .garage-interface.is-expanded {
    min-height: 100svh;
    padding: 112px 18px 38px;
    display: block;
    transform: none;
  }

  .garage-stage {
    width: min(100%, var(--stage-size));
    min-height: min(76svh, 620px);
    aspect-ratio: 1 / 1.18;
    margin: 0 auto;
  }

  .orbit-field {
    width: 136vw;
    height: 136vw;
    opacity: 0.56;
  }

  .orbit-field-front {
    opacity: 0.38;
  }

  .orbit-anime-mask,
  .orbit-small-asteroid-01 {
    display: none;
  }

  .heart-core,
  .heart-core:hover,
  .heart-core:focus-visible,
  .garage-interface.is-expanded .heart-core {
    left: 50%;
    top: 42%;
  }

  .heart-piece-layer,
  .electric-threads,
  .heart-collapse {
    top: 42%;
  }

  .piece-label {
    font-size: 9px;
    letter-spacing: 0.07em;
  }

  .garage-hint {
    bottom: 22px;
    width: min(90vw, 480px);
  }
}

@media (max-width: 560px) {
  :root {
    --stage-scale: 0.44;
    --piece-size: min(25vw, 104px);
  }

  .garage-header {
    top: 18px;
    left: 18px;
    gap: 10px;
  }

  .garage-mark {
    width: 34px;
    height: 34px;
  }

  .garage-back-arrow {
    width: 30px;
    height: 22px;
  }

  .garage-wordmark {
    width: min(48vw, 190px);
    max-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 120ms !important;
  }
}