/* Motion in the style of Figma Smart Animate: its spring presets (mass 1; stiffness / damping
   Gentle 100/15, Quick 300/20, Bouncy 600/15, Slow 80/20), simulated and sampled into linear(). */
:root {
  --spring-gentle: cubic-bezier(.2, .8, .2, 1);
  --spring-quick: cubic-bezier(.3, 1.3, .5, 1);
  --spring-bouncy: cubic-bezier(.3, 1.6, .5, 1);
  --spring-slow: cubic-bezier(.25, .8, .25, 1);
  --spring-gentle-ms: 905ms;
  --spring-quick-ms: 785ms;
  --spring-bouncy-ms: 952ms;
  --spring-slow-ms: 1372ms;
  interpolate-size: allow-keywords;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring-gentle: linear(0, 0.025, 0.083, 0.166, 0.262, 0.359, 0.459, 0.55, 0.637, 0.716, 0.781, 0.839, 0.887, 0.925, 0.956, 0.979, 0.997, 1.01, 1.019, 1.024, 1.027, 1.028, 1.027, 1.025, 1.023, 1.02, 1.018, 1.015, 1.012, 1.01, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1.001, 1, 1, 0.999, 1);
    --spring-quick: linear(0, 0.055, 0.178, 0.344, 0.519, 0.676, 0.819, 0.927, 1.011, 1.066, 1.095, 1.106, 1.103, 1.092, 1.075, 1.057, 1.039, 1.023, 1.011, 1.001, 0.994, 0.991, 0.989, 0.989, 0.99, 0.991, 0.993, 0.995, 0.997, 0.998, 1, 1, 1.001, 1.001, 1.001, 1.001, 1.001, 1.001, 1.001, 1, 1);
    --spring-bouncy: linear(0, 0.156, 0.504, 0.872, 1.176, 1.337, 1.354, 1.265, 1.134, 1.001, 0.909, 0.87, 0.88, 0.919, 0.97, 1.014, 1.041, 1.048, 1.04, 1.023, 1.005, 0.991, 0.984, 0.983, 0.988, 0.994, 1, 1.005, 1.006, 1.006, 1.004, 1.001, 0.999, 0.998, 0.998, 0.998, 0.999, 1, 1, 1.001, 1);
    --spring-slow: linear(0, 0.038, 0.125, 0.226, 0.329, 0.426, 0.515, 0.591, 0.657, 0.715, 0.762, 0.802, 0.836, 0.864, 0.887, 0.906, 0.922, 0.935, 0.946, 0.956, 0.963, 0.97, 0.975, 0.979, 0.983, 0.986, 0.988, 0.99, 0.992, 0.993, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
  }
}

/* Screen changes: the new screen settles on a Gentle spring; shared layers morph between screens. */
::view-transition-new(root) { animation-duration: var(--spring-gentle-ms); animation-timing-function: var(--spring-gentle); }
::view-transition-old(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
.dock { view-transition-name: dock; }
#hero-avatar, #profile-avatar { view-transition-name: me-avatar; }
::view-transition-group(dock) { animation: none; }

/* Cards rise in on a Gentle spring. */
.card.reveal { transition: opacity .5s ease var(--d, 0ms), transform var(--spring-gentle-ms) var(--spring-gentle) var(--d, 0ms); }

/* Presses: in fast, out on a Quick spring. */
.btn, .home-play, .dock a, .dock button, .cp-option, .cp-motions button, .see-all, .map-3d-toggle, .glass-circle, .mini-fab, .fab, .coach-chip, .quick button {
  transition: transform var(--spring-quick-ms) var(--spring-quick), background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:active, .home-play:active, .dock a:active, .dock button:active, .cp-option:active, .cp-motions button:active, .see-all:active,
.map-3d-toggle:active, .glass-circle:active, .mini-fab:active, .fab:active, .coach-chip:active, .quick button:active {
  transform: scale(.93); transition-duration: 90ms; transition-timing-function: ease-out;
}
.cp-option.on { animation: m-select var(--spring-bouncy-ms) var(--spring-bouncy); }
@keyframes m-select { from { transform: scale(.9); } }

/* Sheets and dialogs. */
.sheet { transition: height var(--spring-gentle-ms) var(--spring-gentle); }
.coach { animation: coach-up var(--spring-gentle-ms) var(--spring-gentle); }
.dialog:not(.hidden), dialog[open] { animation: m-pop var(--spring-quick-ms) var(--spring-quick); }
@keyframes m-pop { from { transform: translateY(28px) scale(.96); opacity: 0; } }
.toast { animation: m-toast var(--spring-bouncy-ms) var(--spring-bouncy); }
@keyframes m-toast { from { transform: translateY(24px) scale(.9); opacity: 0; } }

@keyframes m-hop {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  18% { transform: translateY(-22px) scale(.97, 1.03); animation-timing-function: var(--spring-bouncy); }
  100% { transform: none; }
}
@keyframes m-jolt { from { transform: translateY(8px) scale(1.1, .86) rotate(4deg); } }
@keyframes m-pop-in { from { transform: scale(.45); opacity: 0; } }
.home-play .sp-icon { transition: transform var(--spring-bouncy-ms) var(--spring-bouncy); }
.home-play.stop .sp-icon { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root), ::view-transition-old(root), ::view-transition-group(*) { animation: none !important; }
  .cp-option.on, .dialog:not(.hidden), dialog[open], .toast, .coach { animation: none !important; }
  .sheet, .home-play .sp-icon, .card.reveal { transition: none !important; }
}

/* Opening sequence on the home screen (Smart Animate style: each layer settles on a spring, in order). */
body.home-intro .now-card .photo-hero { animation: i-hero var(--spring-slow-ms) var(--spring-slow) both; }
body.home-intro .now-card .ph-stage { animation: i-zoom 2.2s cubic-bezier(.2, .7, .2, 1) both; }
body.home-intro .hero-top { animation: i-drop var(--spring-gentle-ms) var(--spring-gentle) .25s both; }
body.home-intro .hero-hello span { animation: i-rise var(--spring-gentle-ms) var(--spring-gentle) .35s both; }
body.home-intro .hero-hello b { animation: i-rise var(--spring-gentle-ms) var(--spring-gentle) .47s both; }
body.home-intro .home-play-wrap { animation: i-pop var(--spring-bouncy-ms) var(--spring-bouncy) .9s both; }
body.home-intro .home-ride { animation: i-rise var(--spring-gentle-ms) var(--spring-gentle) 1s both; }
body.home-intro .hr-stats > div { animation: i-rise var(--spring-gentle-ms) var(--spring-gentle) calc(1.15s + var(--n, 0) * 60ms) both; }
body.home-intro .hr-stats > div:nth-child(2) { --n: 1; }
body.home-intro .hr-stats > div:nth-child(3) { --n: 2; }
body.home-intro .hr-stats > div:nth-child(4) { --n: 3; }
body.home-intro .dock { animation: i-dock var(--spring-quick-ms) var(--spring-quick) 1.1s both; }
@keyframes i-hero { from { clip-path: inset(0 0 100% 0 round 0 0 34px 34px); } to { clip-path: inset(0 0 0 0 round 0 0 34px 34px); } }
@keyframes i-zoom { from { scale: 1.18; } to { scale: 1; } }
@keyframes i-drop { from { translate: 0 -24px; opacity: 0; } }
@keyframes i-rise { from { translate: 0 36px; opacity: 0; filter: blur(6px); } }
@keyframes i-pop { from { scale: .55; opacity: 0; } }
@keyframes i-fall { from { translate: 0 -90px; opacity: 0; } 30% { opacity: 1; } }
@keyframes i-dock { from { translate: 0 140%; opacity: 0; } }

/* Lists and pickers: items rise in one after another. */
.stagger-in { animation: i-rise var(--spring-gentle-ms) var(--spring-gentle) calc(var(--i, 0) * var(--step, 40ms)) both; }

@media (prefers-reduced-motion: reduce) {
  body.home-intro *, .stagger-in { animation: none !important; }
}

/* Riding pace follows the scooter's real speed. */