/* One 11-second story: analyses (0–3), doctor (3–6), box (6–9), overview (9–11).
   All animated layers share the same start and pause state. */
.hero-story {
  --story-cycle: 11000ms;
  --story-product-cycle: 44000ms;
  --story-gold: #dfc28c;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
}
.hero-story .care-composition {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1.22;
  margin: 0 auto;
  overflow: hidden;
}
.hero-story .care-layer { animation: none; will-change: auto; }
.hero-story .care-doctor {
  width: 46%;
  left: 28%;
  right: auto;
  top: 1%;
  height: auto;
  z-index: 1;
  transform: none !important;
  mask-image: linear-gradient(#000 0%, #000 79%, transparent 99%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 79%, transparent 99%);
  filter: drop-shadow(0 8px 16px #0007);
}
.hero-story .care-report {
  width: 31%;
  left: 7%;
  top: 30%;
  z-index: 4;
  transform: rotate(-8deg);
  transform-origin: 50% 55%;
  filter: drop-shadow(0 12px 18px #0008);
}
.hero-story .report-document { background: #f5f4ef; border-color: #dfdcd3; }
.hero-story .report-table, .hero-story .report-table th, .hero-story .report-table td { background: #f5f4ef; }
.hero-story .report-table thead th { background: #e9e7e0; }
.hero-story .care-product-rotator {
  width: 62%;
  left: 36%;
  top: 31%;
  transform: none;
  transform-origin: 50% 65%;
  filter: drop-shadow(0 12px 14px #0009);
}
.hero-story .care-product {
  opacity: 0;
  transform: none;
  transition: none;
  animation: none;
  will-change: auto;
}
.hero-story .care-product.is-active { opacity: 1; transform: none; }
.hero-story .care-product .product-open-athletic { width: 76%; left: 12%; top: 47%; }
.hero-story .care-glow {
  inset: auto 2% 2%;
  width: 96%;
  height: 49%;
  background: radial-gradient(ellipse, #d7b57013, transparent 70%);
  filter: none;
}
.hero-story .story-doctor-light, .hero-story .story-box-light {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .12;
}
.hero-story .story-doctor-light {
  width: 66%; height: 82%; left: 18%; top: -3%; z-index: 0;
  background: radial-gradient(ellipse, #efd6a147, #ddba7820 36%, transparent 70%);
}
.hero-story .story-box-light {
  width: 66%; height: 60%; left: 34%; top: 38%; z-index: 2;
  background: radial-gradient(ellipse, #d6b06a34, transparent 66%);
}
.hero-story .story-connections {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  overflow: visible; pointer-events: none;
}
.hero-story .story-route { stroke: #d8bd8538; stroke-width: 1; }
.hero-story .story-pulse {
  stroke: #f4dba5; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 8 104; stroke-dashoffset: 8; opacity: 0;
}
.hero-story .story-report-scan {
  position: absolute; inset: 0 0 auto; height: 30%; z-index: 2;
  background: linear-gradient(transparent, #d5b16845, transparent);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
}
.hero-story figcaption {
  position: relative; z-index: 6; background: none;
  margin: -1px 0 0; padding: 0;
}
.hero-story .care-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; padding: 0; margin: 0;
}
.hero-story .care-step {
  position: relative; isolation: isolate; min-width: 0; margin: 0; padding: 0;
  background: #101112; border: 1px solid #dfc28c30; border-radius: 12px;
  animation: none !important; transform: none !important;
  box-shadow: none; transition: none; will-change: auto;
}
.hero-story .care-step::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(155deg, #d9b97840, #d9b97808 85%);
  box-shadow: inset 0 1px 0 #efcf8b90;
  opacity: 0; pointer-events: none;
}
.hero-story .care-step-link {
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%; min-height: 113px; padding: 13px 14px;
  border-radius: inherit; color: #f0eadd; text-decoration: none;
}
.hero-story .care-step-link:hover { background: #dcc28e0b; }
.hero-story .care-step-link:focus-visible {
  outline: 2px solid #e8ce98; outline-offset: 3px; background: #dcc28e12;
}
.hero-story .care-step-number {
  display: block; margin: 0 0 7px; font-size: 12px; line-height: 1;
  letter-spacing: .08em; color: #d8bb83;
}
.hero-story .care-step b { font-size: 16px; line-height: 1.25; font-weight: 500; }
.hero-story .care-step small {
  display: block; margin: 5px 0 0; font-size: 13px; line-height: 1.4;
  color: #d2cec5; white-space: normal; overflow-wrap: normal;
}
.hero-story .story-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 44px; margin-top: 6px;
}
.hero-story .story-support {
  flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.45; color: #c5bdac;
}
.hero-story .story-support > span { color: #d8bb83; margin-right: 5px; }
.hero-story .story-motion-control {
  display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px;
  min-width: 84px; min-height: 44px; padding: 8px;
  border: 0; border-radius: 8px; background: transparent;
  color: #d9c9a8; font: inherit; font-size: 12px; line-height: 1.25; cursor: pointer;
  touch-action: manipulation;
}
.hero-story .story-motion-control[hidden] { display: none; }
.hero-story .story-motion-control:hover { background: #d8bb8312; }
.hero-story .story-motion-control:focus-visible { outline: 2px solid #e8ce98; outline-offset: 1px; }
.hero-story .story-control-icon { display: inline-block; width: 12px; text-align: center; }

/* Enable every effect together after the controller is ready. */
.hero-story.story-ready .care-report { animation: am-report-focus var(--story-cycle) ease-in-out infinite both paused; }
.hero-story.story-ready .story-report-scan { animation: am-report-scan var(--story-cycle) ease-in-out infinite both paused; }
.hero-story.story-ready .story-doctor-light { animation: am-doctor-focus var(--story-cycle) ease-in-out infinite both paused; }
.hero-story.story-ready .care-product-rotator { animation: am-box-focus var(--story-cycle) ease-in-out infinite both paused; }
.hero-story.story-ready .story-box-light { animation: am-box-light var(--story-cycle) ease-in-out infinite both paused; }
.hero-story.story-ready .story-pulse-doctor { animation: am-pulse-doctor var(--story-cycle) linear infinite both paused; }
.hero-story.story-ready .story-pulse-box { animation: am-pulse-box var(--story-cycle) linear infinite both paused; }
.hero-story.story-ready .care-step::before { animation: var(--story-step-animation) var(--story-cycle) ease-in-out infinite both paused; }
.hero-story .care-step:nth-child(1) { --story-step-animation: am-analyses-step; }
.hero-story .care-step:nth-child(2) { --story-step-animation: am-doctor-step; }
.hero-story .care-step:nth-child(3) { --story-step-animation: am-box-step; }
.hero-story.story-ready[data-products-ready="true"] .care-product {
  animation: am-product-cycle var(--story-product-cycle) linear infinite both paused;
}
.hero-story.story-ready[data-products-ready="true"] .care-product:nth-child(2) { animation-delay: -33000ms; }
.hero-story.story-ready[data-products-ready="true"] .care-product:nth-child(3) { animation-delay: -22000ms; }
.hero-story.story-ready[data-products-ready="true"] .care-product:nth-child(4) { animation-delay: -11000ms; }
.hero-story.story-ready.story-playing :is(.care-report, .story-report-scan, .story-doctor-light, .care-product-rotator, .story-box-light, .story-pulse, .care-product),
.hero-story.story-ready.story-playing .care-step::before { animation-play-state: running; }

@keyframes am-report-focus {
  0%, 27.27%, 100% { transform: rotate(-8deg) translateY(0) scale(1); }
  7%, 21% { transform: rotate(-4deg) translateY(-4px) scale(1.035); }
}
@keyframes am-report-scan {
  0%, 3% { opacity: 0; transform: translateY(-100%); }
  5% { opacity: 1; transform: translateY(-60%); }
  23% { opacity: 1; transform: translateY(330%); }
  26%, 100% { opacity: 0; transform: translateY(340%); }
}
@keyframes am-doctor-focus {
  0%, 24%, 57%, 100% { opacity: .12; transform: scale(.96); }
  31%, 48% { opacity: 1; transform: scale(1.04); }
}
@keyframes am-box-focus {
  0%, 54.55%, 86%, 100% { transform: translateY(0) scale(1); }
  62%, 77% { transform: translateY(-3px) scale(1.05); }
}
@keyframes am-box-light {
  0%, 53%, 86%, 100% { opacity: .12; transform: scale(.96); }
  61%, 77% { opacity: 1; transform: scale(1.06); }
}
@keyframes am-pulse-doctor {
  0%, 22% { opacity: 0; stroke-dashoffset: 8; }
  23% { opacity: 1; stroke-dashoffset: 8; }
  30% { opacity: 1; stroke-dashoffset: -100; }
  31%, 100% { opacity: 0; stroke-dashoffset: -100; }
}
@keyframes am-pulse-box {
  0%, 49% { opacity: 0; stroke-dashoffset: 8; }
  50% { opacity: 1; stroke-dashoffset: 8; }
  57% { opacity: 1; stroke-dashoffset: -100; }
  58%, 100% { opacity: 0; stroke-dashoffset: -100; }
}
@keyframes am-analyses-step { 0%, 27.27%, 100% { opacity: 0; } 5%, 22% { opacity: 1; } }
@keyframes am-doctor-step { 0%, 27.27%, 54.55%, 100% { opacity: 0; } 32%, 49% { opacity: 1; } }
@keyframes am-box-step { 0%, 54.55%, 86%, 100% { opacity: 0; } 60%, 79% { opacity: 1; } }
/* Crossfades occupy only the overview, never the medical decision stage. */
@keyframes am-product-cycle { 0%, 23% { opacity: 1; } 25%, 98% { opacity: 0; } 100% { opacity: 1; } }

@media (min-width: 761px) {
  #hero .hero-grid { row-gap: 22px; }
}
@media (max-width: 760px) {
  #hero { padding-top: 14px; }
  #hero .hero-intro { margin-bottom: 10px; }
  #hero .hero-intro .eyebrow { margin-bottom: 11px; }
  #hero .hero-visual.hero-story { width: 100%; max-width: 460px; margin: 0 auto 10px; padding: 0; }
  .hero-story .care-steps { gap: 7px; padding: 0; }
  .hero-story .care-step-link { min-height: 112px; padding: 11px 9px; }
  .hero-story .care-step b { font-size: 14px; line-height: 1.3; }
  .hero-story .care-step small { font-size: 12px; line-height: 1.4; }
  .hero-story .care-step-number { font-size: 11px; margin-bottom: 7px; }
  .hero-story .story-support { font-size: 12px; }
  .hero-story .story-footer { gap: 4px; margin-top: 4px; }
  #hero .hero-actions .button { white-space: normal; }
}
@media (max-width: 380px) {
  #hero > .hero-grid { width: calc(100% - 28px); }
  .hero-story .care-steps { gap: 5px; }
  .hero-story .care-step-link { padding-inline: 7px; }
  .hero-story .story-motion-control { min-width: 80px; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-story *, .hero-story *::before { animation: none !important; transition: none !important; }
  .hero-story .care-report { transform: rotate(-8deg); }
  .hero-story .care-product-rotator { transform: none; }
  .hero-story .care-product { opacity: 0; }
  .hero-story .care-product.is-active { opacity: 1; }
  .hero-story .story-motion-control { display: none; }
}