/* Group the white panel without changing the older concept layouts. */
.hero-right-panel { display: contents; }
html[data-concept="stoic"] .hero-right-panel {
  display: grid;
  grid-column: 2;
  grid-row: 1 / 3;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-width: 0;
  background: #fff;
  border-radius: 0 32px 32px 0;
}
html[data-concept="stoic"] .hero-right-panel > :is(.hero-copy, .hero-foot, .hero-watch-scene) { grid-column: 1; }
html[data-concept="stoic"] .hero .day-card { border-radius: 32px 0 0 32px; }
html[data-concept="stoic"] .hero .day-card::before { border-radius: inherit; }
html[data-concept="stoic"] .hero :is(.eyebrow, h1, .hero-lead, .readout, .chart svg, .chart-caption, .hero-foot) { animation: none; }

@media (max-width: 760px) {
  html[data-concept="stoic"] .hero > .wrap { grid-template-rows: auto auto; }
  html[data-concept="stoic"] .hero-right-panel { grid-column: 1; grid-row: 1; border-radius: 24px 24px 0 0; }
  html[data-concept="stoic"] .hero .day-card { grid-row: 2; border-radius: 0 0 24px 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-concept="stoic"] .hero[data-entering] { overflow: clip; }
  html[data-concept="stoic"] .hero[data-entering] > .wrap {
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  html[data-concept="stoic"] .hero[data-entering] .day-card {
    --join-from: translate(-84px, 12px) rotate(-2deg);
    --join-radius: 32px 0 0 32px;
    transform-origin: 100% 50%;
  }
  html[data-concept="stoic"] .hero[data-entering] .hero-right-panel {
    --join-from: translate(84px, 12px) rotate(2deg);
    --join-radius: 0 32px 32px 0;
    transform-origin: 0 50%;
  }
  html[data-concept="stoic"] .hero[data-entering] :is(.day-card, .hero-right-panel) {
    animation: zoomie-panel-join 1.2s cubic-bezier(.2,.7,.2,1) both;
  }
  html[data-concept="stoic"] .hero[data-entering] .eyebrow { animation: zoomie-copy-in .4s .12s both; }
  html[data-concept="stoic"] .hero[data-entering] h1 { animation: zoomie-copy-in .45s .18s both; }
  html[data-concept="stoic"] .hero[data-entering] .hero-lead { animation: zoomie-copy-in .45s .24s both; }
  html[data-concept="stoic"] .hero[data-entering] .hero-foot { animation: zoomie-copy-in .45s .3s both; }
  html[data-concept="stoic"] .hero[data-entering] .readout { animation: zoomie-copy-in .4s .15s both; }
  html[data-concept="stoic"] .hero[data-entering] .chart-caption { animation: zoomie-fade .4s .25s both; }
  html[data-concept="stoic"] .hero[data-entering] .hero-period-band { animation: zoomie-fade .5s .25s both; }
  html[data-concept="stoic"] .hero[data-entering] .hero-curve {
    transform-box: fill-box;
    animation: zoomie-curve-in .7s 1.05s cubic-bezier(.35,0,.35,1) both;
  }
  html[data-concept="stoic"] .hero[data-entering] :is(.hero-now-line, .hero-now-dot) { animation: zoomie-fade .25s 1.72s both; }
  html[data-concept="stoic"] .hero[data-entering] #hero-cat { animation: zoomie-cat-in .35s 1.72s cubic-bezier(.2,.7,.2,1) both; }
  html[data-concept="stoic"] .hero[data-entering] .cat-drag-gesture { visibility: hidden; }
  html[data-concept="stoic"] .hero[data-entering] .hero-watch-product { animation: zoomie-copy-in .5s .35s both; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html[data-concept="stoic"] .hero[data-entering] .hero-right-panel {
    --join-from: translateY(-36px);
    --join-radius: 24px 24px 0 0;
  }
  html[data-concept="stoic"] .hero[data-entering] .day-card {
    --join-from: translateY(36px);
    --join-radius: 0 0 24px 24px;
  }
}
@keyframes zoomie-panel-join {
  0% { opacity: 0; transform: var(--join-from); border-radius: 32px; box-shadow: 0 22px 48px -24px #48347440; }
  14% { opacity: 1; transform: var(--join-from); border-radius: 32px; }
  82%, 100% { opacity: 1; transform: none; border-radius: var(--join-radius); box-shadow: none; }
}
@keyframes zoomie-fade { from { opacity: 0; } }
@keyframes zoomie-copy-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes zoomie-curve-in {
  from { clip-path: inset(-6px 100% -6px -6px); }
  to { clip-path: inset(-6px -6px -6px -6px); }
}
@keyframes zoomie-cat-in {
  from { opacity: 0; translate: 0 -10px; }
  to { opacity: 1; translate: 0 0; }
}