/* Four-beat trolley repair story: pull, impact, repair, happy return. */
.hero-story-scene { opacity: 0; }
.story-pull { animation: trolleyScenePull 14s ease-in-out infinite; }
.story-break { animation: trolleySceneBreak 14s ease-in-out infinite; }
.story-repair { animation: trolleySceneRepair 14s ease-in-out infinite; }
.story-happy { animation: trolleySceneHappy 14s ease-in-out infinite; }

.story-floor {
  fill: none;
  stroke: #86aeb1;
  stroke-width: 4;
  stroke-linecap: round;
}
.trolley-lead, .motion-dash, .to-shop-path, .to-shop-arrow {
  fill: none;
  stroke: #fff8ec;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.motion-dash { stroke: #f5ab2a; stroke-width: 4; stroke-dasharray: 7 8; }
.to-shop-path { stroke: #f5ab2a; stroke-width: 4; stroke-dasharray: 7 9; }
.to-shop-arrow { stroke: #ed5b33; stroke-width: 6; }
.wheel circle, circle.wheel, .new-wheel {
  fill: #092831;
  stroke: #fff8ec;
  stroke-width: 5;
}

.pulling-party {
  transform-box: fill-box;
  transform-origin: center;
  animation: pullingJourney 14s cubic-bezier(.22, 1, .36, 1) infinite;
}
.story-pull .walk-leg,
.story-pull .walk-arm,
.story-pull .pull-arm {
  transform-box: fill-box;
  transform-origin: 50% 8%;
  animation: characterWalk .55s ease-in-out infinite alternate;
}
.story-pull .leg-two, .story-pull .pull-arm { animation-direction: alternate-reverse; }
.story-pull .wheel, .story-happy .wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelSpin .72s linear infinite;
}
.dash-one { animation: motionDashOne 14s ease-in-out infinite; }
.dash-two { animation: motionDashTwo 14s ease-in-out infinite; }

.impact-trolley {
  transform-box: view-box;
  transform-origin: center;
  animation: trolleyHitsBump 14s cubic-bezier(.2, .9, .35, 1) infinite;
}
.broken-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelBreakAway 14s cubic-bezier(.2, .8, .35, 1) infinite;
}
.impact-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: impactFlash 14s ease-out infinite;
}
.alert-bubble {
  transform-box: fill-box;
  transform-origin: center;
  animation: alertPop 14s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

.to-shop-party {
  transform-box: fill-box;
  transform-origin: center;
  animation: travelToShop 14s cubic-bezier(.22, 1, .36, 1) infinite;
}
.alfa-shop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: shopReveal 14s cubic-bezier(.34, 1.3, .64, 1) infinite;
}
.new-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: repairedWheelPop 14s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.repair-tool {
  transform-box: fill-box;
  transform-origin: 30% 90%;
  animation: repairToolTurn 14s ease-in-out infinite;
}
.repair-sparks {
  transform-box: fill-box;
  transform-origin: center;
  animation: repairSparkPulse 14s ease-in-out infinite;
}

.happy-party {
  transform-box: fill-box;
  transform-origin: center;
  animation: happyRollAway 14s cubic-bezier(.22, 1, .36, 1) infinite;
}
.happy-wave {
  transform-box: fill-box;
  transform-origin: 12% 80%;
  animation: happyWave .7s ease-in-out infinite alternate;
}
.happy-sparkles {
  transform-box: fill-box;
  transform-origin: center;
  animation: happySparkle 14s ease-in-out infinite;
}
.repair-badge {
  transform-box: fill-box;
  transform-origin: center;
  animation: repairBadgePop 14s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

.caption-pull { animation: trolleyCaptionPull 14s ease-in-out infinite; }
.caption-break { animation: trolleyCaptionBreak 14s ease-in-out infinite; }
.caption-repair { animation: trolleyCaptionRepair 14s ease-in-out infinite; }
.caption-happy { animation: trolleyCaptionHappy 14s ease-in-out infinite; }
.hero-story-caption {
  background: rgba(9, 40, 49, .96);
  border-color: rgba(245, 171, 42, .36);
}
.story-caption b { color: #f5ab2a; }
.hero-story-caption i {
  background: linear-gradient(90deg, #04798c, #ed5b33, #f5ab2a);
  animation: trolleyStoryProgress 14s linear infinite;
}

@keyframes trolleyScenePull {
  0%, 21% { opacity: 1; }
  24%, 100% { opacity: 0; }
}
@keyframes trolleySceneBreak {
  0%, 21% { opacity: 0; }
  25%, 46% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@keyframes trolleySceneRepair {
  0%, 46% { opacity: 0; }
  50%, 72% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes trolleySceneHappy {
  0%, 72% { opacity: 0; }
  76%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pullingJourney {
  0% { transform: translateX(-74px); opacity: 0; }
  4% { opacity: 1; }
  18% { transform: translateX(38px); opacity: 1; }
  22% { transform: translateX(58px); opacity: 1; }
  24%, 100% { transform: translateX(70px); opacity: 0; }
}
@keyframes characterWalk {
  from { transform: rotate(-8deg); }
  to { transform: rotate(9deg); }
}
@keyframes wheelSpin { to { transform: rotate(360deg); } }
@keyframes motionDashOne {
  0%, 3% { transform: translateX(-28px); opacity: 0; }
  8%, 20% { transform: translateX(12px); opacity: 1; }
  24%, 100% { transform: translateX(38px); opacity: 0; }
}
@keyframes motionDashTwo {
  0%, 6% { transform: translateX(-38px); opacity: 0; }
  11%, 21% { transform: translateX(4px); opacity: 1; }
  24%, 100% { transform: translateX(32px); opacity: 0; }
}

@keyframes trolleyHitsBump {
  0%, 24% { transform: translate(174px, 218px) rotate(-3deg); opacity: 0; }
  27% { opacity: 1; }
  33% { transform: translate(202px, 218px) rotate(0deg); }
  36%, 46% { transform: translate(207px, 220px) rotate(12deg); opacity: 1; }
  49%, 100% { transform: translate(207px, 220px) rotate(12deg); opacity: 0; }
}
@keyframes wheelBreakAway {
  0%, 32% { transform: translate(-34px, 28px) rotate(0deg) scale(.35); opacity: 0; }
  36% { opacity: 1; }
  44%, 47% { transform: translate(17px, 22px) rotate(430deg) scale(1); opacity: 1; }
  49%, 100% { transform: translate(26px, 28px) rotate(500deg) scale(.8); opacity: 0; }
}
@keyframes impactFlash {
  0%, 32% { transform: scale(.25); opacity: 0; }
  35%, 40% { transform: scale(1); opacity: 1; }
  45%, 100% { transform: scale(1.2); opacity: 0; }
}
@keyframes alertPop {
  0%, 34% { transform: scale(0); opacity: 0; }
  39%, 46% { transform: scale(1); opacity: 1; }
  49%, 100% { transform: scale(.7); opacity: 0; }
}

@keyframes travelToShop {
  0%, 49% { transform: translateX(-70px); opacity: 0; }
  53% { opacity: 1; }
  59% { transform: translateX(8px); opacity: 1; }
  63%, 72% { transform: translateX(20px); opacity: .35; }
  75%, 100% { opacity: 0; }
}
@keyframes shopReveal {
  0%, 48% { transform: translateY(22px) scale(.92); opacity: 0; }
  53%, 72% { transform: translateY(0) scale(1); opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes repairedWheelPop {
  0%, 58% { transform: scale(0); opacity: 0; }
  64%, 71% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(.8); opacity: 0; }
}
@keyframes repairToolTurn {
  0%, 55% { transform: translate(-12px, -8px) rotate(-20deg); opacity: 0; }
  59% { opacity: 1; }
  62% { transform: translate(0, 0) rotate(18deg); }
  66% { transform: translate(-2px, 2px) rotate(-14deg); }
  70%, 72% { transform: translate(1px, 0) rotate(12deg); opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes repairSparkPulse {
  0%, 58% { transform: scale(.3); opacity: 0; }
  61%, 68% { transform: scale(1); opacity: 1; }
  72%, 100% { transform: scale(1.3); opacity: 0; }
}

@keyframes happyRollAway {
  0%, 74% { transform: translateX(-48px); opacity: 0; }
  78% { opacity: 1; }
  94% { transform: translateX(28px); opacity: 1; }
  98%, 100% { transform: translateX(45px); opacity: 0; }
}
@keyframes happyWave {
  from { transform: rotate(-7deg); }
  to { transform: rotate(12deg); }
}
@keyframes happySparkle {
  0%, 76% { transform: scale(.4) rotate(0); opacity: 0; }
  82%, 94% { transform: scale(1) rotate(16deg); opacity: 1; }
  98%, 100% { transform: scale(1.25) rotate(25deg); opacity: 0; }
}
@keyframes repairBadgePop {
  0%, 79% { transform: scale(0); opacity: 0; }
  84%, 95% { transform: scale(1); opacity: 1; }
  99%, 100% { transform: scale(.75); opacity: 0; }
}

@keyframes trolleyCaptionPull {
  0%, 20% { opacity: 1; transform: translateY(0); }
  24%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes trolleyCaptionBreak {
  0%, 22% { opacity: 0; transform: translateY(10px); }
  26%, 45% { opacity: 1; transform: translateY(0); }
  49%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes trolleyCaptionRepair {
  0%, 47% { opacity: 0; transform: translateY(10px); }
  51%, 71% { opacity: 1; transform: translateY(0); }
  75%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes trolleyCaptionHappy {
  0%, 73% { opacity: 0; transform: translateY(10px); }
  77%, 97% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
@keyframes trolleyStoryProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 720px) {
  .hero-video { width: min(88%, 360px); transform: translateY(-34px); }
  .hero-story-caption { bottom: 72px; }
}
@media (max-width: 430px) {
  .hero-story-caption { right: 4%; bottom: 72px; left: 4%; }
  .story-caption { letter-spacing: .015em; }
}

@media (prefers-reduced-motion: reduce) {
  .story-pull, .story-break, .story-repair,
  .caption-pull, .caption-break, .caption-repair { opacity: 0 !important; }
  .story-happy, .caption-happy { opacity: 1 !important; }
  .story-happy *, .caption-happy, .hero-story-caption i { animation: none !important; }
  .happy-party, .happy-sparkles, .repair-badge { transform: none !important; opacity: 1 !important; }
  .hero-story-caption i { transform: scaleX(1) !important; }
}