/* Homepage motion: a small instrument coming to life. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-surface {
  position: relative;
  overflow: clip;
  background-image: radial-gradient(ellipse at 77% 40%, oklch(97% .023 294 / .9), transparent 58%);
}

.hero-copy { position: relative; z-index: 2; }
.hero-line { display: block; overflow: clip; padding-bottom: .2em; margin-bottom: -.2em; }
.hero-line > span { display: block; }
.underlined { position: relative; display: inline-block; text-decoration: none; }
.underlined::after {
  content: '';
  position: absolute;
  inset: auto 0 -.08em;
  height: .055em;
  background: oklch(69% .15 294);
  border-radius: 2px;
  transform-origin: left center;
  transform: rotate(-2deg);
}

.product-stage { padding-top: 0; isolation: isolate; }
.stage-scene { position: relative; padding-top: 54px; z-index: 1; }
.hero-rings {
  position: absolute;
  width: calc(100% + 180px);
  max-width: none;
  height: auto;
  left: -90px;
  top: 50%;
  transform: translateY(-55%);
  pointer-events: none;
  z-index: -1;
}
.ring-guide { stroke: var(--violet); stroke-opacity: .12; stroke-width: 1; }
.ring-ticks { stroke-width: 5; stroke-dasharray: 1 14; stroke-opacity: .16; }
.ring-signal { stroke: oklch(66% .16 290); stroke-width: 3; stroke-linecap: round; }
.ring-signal-green { stroke: oklch(66% .13 149); }
.ring-dot { fill: var(--violet); stroke: var(--lilac); stroke-width: 4; }
.ring-dot-green { fill: var(--good); }
.signal-orbit { transform-box: view-box; transform-origin: 50% 50%; }
.signal-orbit-inner { transform: rotate(135deg); }

.desktop-strip { border-radius: 9px 9px 0 0; border: 1px solid oklch(82% .055 294); }
.menu-status { font-variant-numeric: tabular-nums; }
.mini-ring { transition: transform 600ms var(--motion-ease); }
.demo-panel { position: relative; box-shadow: 0 25px 65px -28px oklch(30% .08 284 / .4); }
.demo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid oklch(69% .15 294);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.demo-panel.is-refreshing::after { animation: panel-confirm 750ms var(--motion-ease) both; }
.is-refreshing .icon-button { animation: refresh-turn 600ms var(--motion-ease); }
.quota-fill { width: 100%; transform-origin: left center; transition: none; }
.motion-ready:not(.motion-paused) .quota-fill { transition: transform 950ms var(--motion-ease), background-color 300ms; }
.provider-value { white-space: nowrap; }
.provider-toggle { transition: background-color 250ms, transform 250ms var(--motion-ease); }
.provider-toggle img { transition: transform 300ms var(--motion-ease); }
.provider-toggle:hover img, .provider-toggle:focus-visible img { transform: rotate(-7deg) scale(1.09); }
.provider.is-updating { animation: provider-confirm 1300ms var(--motion-ease); }
.provider-details:not([hidden]) { animation: detail-in 250ms var(--motion-ease) both; }
.demo-static { padding: 4px 20px; }
.demo-static p { display: flex; justify-content: space-between; padding-block: 14px; margin: 0; font-size: 12px; }
.demo-static strong { color: var(--good); font-variant-numeric: tabular-nums; }

.stage-notice {
  position: absolute;
  right: -12px;
  bottom: -12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 17px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid oklch(36% .055 284);
  border-radius: 11px;
  box-shadow: 0 12px 25px -12px oklch(25% .055 284 / .4);
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(.96);
  transform-origin: 85% 100%;
  transition: opacity 250ms, transform 450ms var(--motion-ease);
  pointer-events: none;
}
.stage-notice.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.stage-scene:focus-within .stage-notice { opacity: 0; }
.notice-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--ink); background: var(--green); font-weight: 800; }
.stage-notice strong { display: block; font-size: 12px; font-weight: 750; }
#notice-detail { display: block; font-size: 10px; color: oklch(84% .018 284); margin-top: 2px; }
.stage-caption { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 15px 0; padding-bottom: 15px; font-size: 11px; }
.stage-caption > div { display: flex; align-items: center; gap: 8px; }
.scene-dot { width: 6px; height: 6px; background: var(--violet); border-radius: 50%; flex: none; }
#motion-toggle { padding: 5px 0 5px 10px; background: transparent; color: var(--muted); border: 0; font-size: 10px; font-weight: 650; white-space: nowrap; }
#motion-toggle:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-cycle-track { position: absolute; inset: auto 0 0; height: 2px; background: oklch(82% .05 294 / .45); overflow: hidden; }
#demo-cycle { display: block; height: 100%; width: 100%; background: var(--violet); transform: scaleX(0); transform-origin: left center; }

.button { transition: background-color 200ms, transform 250ms var(--motion-ease), box-shadow 250ms; }
.button > span, .text-link > span, .nav-account > span { display: inline-block; transition: transform 250ms var(--motion-ease); }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(1px) scale(.985); }
.button:hover > span { transform: translateY(3px); }
.text-link:hover > span, .nav-account:hover > span { transform: translate(2px, -2px); }
.primary:hover { box-shadow: 0 5px 0 oklch(76% .14 124), 0 10px 22px -13px oklch(30% .05 124 / .5); }
.provider-strip li img { transition: transform 350ms var(--motion-ease); }
.provider-strip li:hover img { transform: translateY(-4px) rotate(-9deg); }
.step-number { position: relative; }
.step-number::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--violet); transform: scaleX(0); transform-origin: left; transition: transform 650ms var(--motion-ease); }
.steps li:hover .step-number::before { transform: scaleX(1); }
.plan { transition: transform 350ms var(--motion-ease), border-color 250ms; }
.plan:hover { transform: translateY(-5px); border-color: var(--violet); }
.download-option a { transition: transform 250ms var(--motion-ease), background-color 200ms; }
.download-option a:hover { transform: translateY(-2px); background: oklch(95% .15 124); }
.faq details[open] p { animation: detail-in 300ms var(--motion-ease); }

/* Motion is progressive: base content stays visible without JavaScript. */
.motion-ready .hero-copy > :not(h1) { animation: rise-in 800ms var(--motion-ease) both; }
.motion-ready .hero-copy .availability { animation-delay: 40ms; }
.motion-ready .hero-line > span { animation: headline-in 1000ms var(--motion-ease) both; }
.motion-ready .hero-line:nth-child(2) > span { animation-delay: 110ms; }
.motion-ready .underlined::after { animation: underline-in 850ms 420ms var(--motion-ease) both; }
.motion-ready .hero-copy .lede { animation-delay: 220ms; }
.motion-ready .hero-copy .actions { animation-delay: 310ms; }
.motion-ready .hero-copy .fine { animation-delay: 390ms; }
.motion-ready .stage-scene { animation: stage-in 1200ms 160ms var(--motion-ease) both; }
.motion-ready .stage-caption { animation: rise-in 750ms 600ms var(--motion-ease) both; }
.motion-ready .signal-orbit-outer { animation: signal-turn 26s linear infinite; }
.motion-ready .signal-orbit-inner { animation: signal-turn 19s linear infinite reverse; }
.motion-ready .hero-rings { animation: rings-in 1400ms 200ms var(--motion-ease) both; }
.motion-ready .availability .status-dot { animation: status-pulse 2.6s ease-out infinite; }
.motion-ready [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 800ms var(--motion-ease), transform 800ms var(--motion-ease); }
.motion-ready [data-reveal].is-visible, .motion-ready [data-reveal]:focus-within { opacity: 1; transform: none; }
.motion-ready .plan.is-visible:hover { transform: translateY(-5px); }
.motion-ready .steps li:nth-child(2) { transition-delay: 100ms; }
.motion-ready .steps li:nth-child(3) { transition-delay: 200ms; }
.motion-ready .pricing-grid > :nth-child(2) { transition-delay: 100ms; }
.motion-ready .privacy-art.is-visible .orbit-two { animation: signal-turn 1.5s var(--motion-ease) both; }
.motion-ready .privacy-art.is-visible img { animation: icon-in 900ms 150ms var(--motion-ease) both; }
.motion-paused .signal-orbit, .motion-offscreen .signal-orbit,
.motion-paused .availability .status-dot, .motion-offscreen .availability .status-dot,
.motion-paused #demo-cycle, .motion-offscreen #demo-cycle { animation-play-state: paused !important; }
.motion-paused .quota-fill, .motion-paused .stage-notice { transition: none; }

@keyframes headline-in { from { opacity: 0; transform: translate3d(0, 110%, 0) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes underline-in { from { transform: rotate(-2deg) scaleX(0); } to { transform: rotate(-2deg) scaleX(1); } }
@keyframes stage-in { from { opacity: 0; transform: perspective(1100px) translate3d(35px, 45px, 0) rotateY(-12deg) rotateZ(4deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes rings-in { from { opacity: 0; transform: translateY(-55%) scale(.82); } to { opacity: 1; transform: translateY(-55%) scale(1); } }
@keyframes signal-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes panel-confirm { 0% { opacity: 0; } 20% { opacity: .5; } 100% { opacity: 0; } }
@keyframes provider-confirm { 0%, 100% { background-color: transparent; } 20% { background-color: oklch(92% .04 294); } }
@keyframes refresh-turn { to { transform: rotate(360deg); } }
@keyframes detail-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes icon-in { from { opacity: 0; transform: scale(.8) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes status-pulse { 0%, 100% { box-shadow: 0 0 0 0 oklch(44% .11 151 / 0); } 30% { box-shadow: 0 0 0 5px oklch(44% .11 151 / .12); } 65% { box-shadow: 0 0 0 9px oklch(44% .11 151 / 0); } }

@media (max-width: 1000px) {
  .stage-notice { right: 0; }
  .stage-caption { font-size: 10px; margin-inline: 14px; }
}
@media (max-width: 760px) {
  .hero-rings { width: calc(100% + 90px); left: -45px; }
  .stage-notice { right: 3px; bottom: -10px; padding: 10px 13px; }
  .stage-caption { margin-top: 21px; }
  .step-number::before { display: none; }
  .motion-ready .steps li { transition-delay: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
  .button:hover, .button:active, .plan:hover, .download-option a:hover,
  .motion-ready .plan.is-visible:hover,
  .provider-toggle:hover img, .provider-toggle:focus-visible img,
  .provider-strip li:hover img, .button:hover > span,
  .text-link:hover > span, .nav-account:hover > span { transform: none; }
  .stage-notice { transition: none; }
  .demo-cycle-track { display: none; }
}