/* A round sun rises behind the wide product card; keep its lower half concealed. */
html[data-surface="aura"] .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 56px;
  left: 50%;
  width: clamp(760px, 68vw, 1040px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #fff;
  filter: blur(3px);
  box-shadow: 0 0 48px 12px #ffffff70;
}

@keyframes aura-sun-rise {
  from { transform: translate(-50%, 280px); opacity: .12; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes aura-dawn-light {
  from { opacity: .78; }
  to { opacity: .48; }
}
@keyframes aura-copy-appear {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Keep the product crisp throughout the reveal; only its position changes. */
html[data-concept="stoic"][data-surface="aura"] .hero .day-card {
  --aura-card-travel: 64px;
  background: #fff;
  opacity: 1;
  box-shadow: 0 32px 72px -24px #50377859, 0 8px 22px -10px #35204838, 0 0 0 1px #eeebf2;
}
@media (max-width: 760px) {
  html[data-surface="aura"] .hero::after {
    top: 64px;
  }
  html[data-concept="stoic"][data-surface="aura"] .hero .day-card {
    --aura-card-travel: 48px;
  }
}

/* Avoid stacking the original panel entrance with the new individual reveals. */
html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion] .hero-right-panel,
html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion] .hero-right-panel :is(h1, .hero-lead, .hero-foot),
html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion] .day-card {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-surface="aura"] .hero::before {
    animation: aura-dawn-light 3.2s cubic-bezier(.22,.61,.36,1) both;
  }
  html[data-surface="aura"] .hero::after {
    animation: aura-sun-rise 3.2s cubic-bezier(.22,.61,.36,1) both;
  }
  html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion][data-aura-copy="in"] .hero-right-panel h1 span {
    animation: aura-copy-appear 1.15s .06s cubic-bezier(.25,.89,.58,1) both;
  }
  html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion][data-aura-copy="in"] .hero-right-panel h1 span:last-child {
    animation-delay: .20s;
  }
  html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion][data-aura-copy="in"] .hero-right-panel .lead-group {
    animation: aura-copy-appear 1.1s .36s cubic-bezier(.25,.89,.58,1) both;
  }
  html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion][data-aura-copy="in"] .hero-right-panel .lead-value {
    animation-delay: .50s;
  }
  html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion][data-aura-copy="in"] .hero-right-panel .hero-foot {
    animation: aura-copy-appear 1.1s .64s cubic-bezier(.25,.89,.58,1) both;
  }
  html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion] .day-card {
    translate: 0 calc(var(--aura-card-offset, 0) * var(--aura-card-travel));
  }
}
html[data-concept="stoic"][data-surface="aura"] .hero[data-aura-motion] .hero-right-panel .hero-foot:focus-within {
  animation: none;
}
html[data-surface="aura"] .hero[data-aura-paused]::before,
html[data-surface="aura"] .hero[data-aura-paused]::after {
  animation-play-state: paused;
}