/* 4AM Desk — motion layer
   Each page's <head> adds the "motion" class to <html> unless the visitor prefers
   reduced motion. Every hidden or animated starting state below is scoped to that
   class, so without it (or if assets/motion.js fails) the site is fully static.
   Looping effects run a few times and then rest; nothing loops forever except the
   small pulse that marks the live clock. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Keyframes ---------- */

@keyframes m-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } 60% { opacity: 1; } }
@keyframes m-rise-lcp { from { opacity: 0.01; transform: translate3d(0, 22px, 0); } 60% { opacity: 1; } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-dial { from { opacity: 0; transform: scale(0.94); } 55% { opacity: 1; } }
@keyframes m-word { from { transform: translate3d(0, 120%, 0); } }
@keyframes m-draw { from { transform: scaleX(0); } }
@keyframes m-sunrise { from { opacity: 0; transform: translate3d(0, 16%, 0) scale(0.94); } }
@keyframes m-breathe { to { transform: scale(1.045); opacity: 0.86; } }
@keyframes m-pulse { from { transform: scale(1); opacity: 0.55; } to { transform: scale(3); opacity: 0; } }
@keyframes m-ping { 0% { opacity: 0.75; transform: scale(0.94); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
@keyframes m-halo { to { transform: scale(1.35); opacity: 0.18; } }
@keyframes m-dot { 0%, 60%, 100% { transform: translate3d(0, 0, 0); opacity: 0.35; } 30% { transform: translate3d(0, -4px, 0); opacity: 1; } }
@keyframes m-swap { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes m-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes m-dial-draw { from { stroke-dashoffset: 942.48; } }

/* ---------- Scroll reveals ---------- */

/* Content waits (900ms at most) until the fonts are in and every element is tagged,
   so nothing flashes before its entrance. */
.motion:not(.m-ready) main, .motion:not(.m-ready) .site-foot { visibility: hidden; }
.motion [data-reveal]:not(.is-in) { opacity: 0; }
.motion [data-reveal].is-in { animation: m-rise 1.1s var(--ease-out) var(--d, 0ms) backwards; }
.motion [data-reveal="fade"].is-in { animation-name: m-fade; animation-duration: 0.9s; }
.motion [data-reveal="dial"].is-in { animation-name: m-dial; animation-duration: 1.4s; }
.motion [data-reveal]:focus-within { opacity: 1; animation: none; }

/* The hero paragraphs start at 1% rather than 0 so they still count as the page's
   largest paint straight away. */
.motion .hero-lead:not(.is-in),
.motion .page-hero p:not(.eyebrow):not(.is-in) { opacity: 0.01; }
.motion .hero-lead.is-in,
.motion .page-hero p:not(.eyebrow).is-in { animation-name: m-rise-lcp; }

/* Headlines rise word by word from behind a mask. */
[data-split] .w {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: 0.12em 0.05em; margin: -0.12em -0.05em;
}
[data-split] .wi { display: inline-block; }
[data-split] > .sr-only, .stat dt > .sr-only { -webkit-user-select: none; user-select: none; }
.motion [data-split]:not(.is-in) .wi { transform: translate3d(0, 120%, 0); }
.motion [data-split].is-in .wi { animation: m-word 1.05s var(--ease-out) calc(var(--d, 0ms) + var(--i, 0) * 32ms) backwards; }
.motion .hero h1:not([data-split]),
.motion .page-hero h1:not([data-split]) { opacity: 0; }

/* ---------- Sunrise glows ---------- */

.motion .hero::before,
.motion .page-hero::before,
.motion .cta::before { transform-origin: 50% 100%; }
.motion .hero::before,
.motion .page-hero::before { animation: m-sunrise 2.8s var(--ease-out) 0.1s backwards; }
.motion .cta:not(.is-in)::before { opacity: 0; }
.motion .cta.is-in::before { animation: m-sunrise 2.6s var(--ease-out) backwards; }
.motion .hero.is-risen::before,
.motion .page-hero.is-risen::before,
.motion .cta.is-in.is-risen::before { animation: m-breathe 10s ease-in-out 4 alternate; }

.motion .hero h1 em {
  background: linear-gradient(100deg, var(--dawn) 0 40%, #ffe1a6 50%, var(--dawn) 60% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motion .hero h1.is-in em { animation: m-shimmer 2.4s var(--ease-in-out) calc(var(--d, 0ms) + 1700ms) backwards; }

/* ---------- Hero stats ---------- */

.count { font-variant-numeric: tabular-nums; }
.motion .stats { position: relative; border-top-color: transparent; }
.motion .stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--line-strong); transform-origin: left;
}
.motion .stats:not(.is-in)::before { transform: scaleX(0); }
.motion .stats.is-in::before { animation: m-draw 1.6s var(--ease-out) var(--d, 0ms) backwards; }

/* ---------- Hero dial (live New York clock) ---------- */

.dial { position: relative; isolation: isolate; aspect-ratio: 1; width: 100%; }
.dial::before {
  content: ""; position: absolute; inset: -12%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(247, 179, 71, 0.16), rgba(224, 96, 126, 0.07) 55%, transparent 100%);
}
.dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dial-face { stroke: var(--line); stroke-width: 1; }
.dial-tick { stroke: rgba(239, 234, 224, 0.16); stroke-width: 1.5; stroke-linecap: round; }
.dial-tick.major { stroke: rgba(239, 234, 224, 0.4); stroke-width: 2; }
.dial-base { fill: none; stroke: rgba(239, 234, 224, 0.06); stroke-width: 12; }
.dial-arcs path { fill: none; stroke-width: 12; }
.dial-live { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.dial-label { font: 500 10.5px var(--font-mono); letter-spacing: 0.08em; fill: var(--faint); }
.dial-label.live { fill: var(--text); }
.dial-hand { transform: rotate(var(--a, 0deg)); transform-origin: 200px 200px; }
.dial-sun { fill: #fff6e2; }
.dial-halo { fill: var(--dawn); opacity: 0.4; transform-box: fill-box; transform-origin: center; }
.dial-glow { fill: var(--dawn); opacity: 0.12; }
.dial-city { font: 500 10.5px var(--font-mono); letter-spacing: 0.18em; fill: var(--faint); }
.dial-time { font: 600 50px var(--font-display); letter-spacing: -0.02em; fill: var(--text); }
.dial-ampm { font: 500 15px var(--font-mono); letter-spacing: 0.04em; fill: var(--muted); }
.dial-phase { font: 500 11px var(--font-mono); letter-spacing: 0.14em; fill: var(--dawn); }
.dial.is-night .dial-sun { fill: #e4e7ff; }
.dial.is-night .dial-halo, .dial.is-night .dial-glow { fill: var(--peri); }
.dial.is-night .dial-phase, .dial.is-closed .dial-phase { fill: var(--peri); }
.dial.is-closed .dial-arcs, .dial.is-closed .dial-live { opacity: 0.4; }
.dial-arcs, .dial-live { transition: opacity 0.6s ease; }
@media (max-width: 900px) {
  .dial-label, .dial-city { font-size: 12.5px; }
  .dial-phase { font-size: 12.5px; }
}

.motion .dial-hand { transition: transform 2.6s var(--ease-out), opacity 0.8s var(--ease-soft); }
.motion .hero-dial:not(.sun-up) .dial-hand { opacity: 0; }
.motion .hero-dial.sun-up .dial-halo { animation: m-halo 3.2s ease-in-out 6 alternate; }
.motion .hero-dial:not(.is-in) .dial-reveal { stroke-dashoffset: 942.48; }
.motion .hero-dial.is-in .dial-reveal { animation: m-dial-draw 2.2s var(--ease-in-out) calc(var(--d, 0ms) + 250ms) backwards; }
.motion .hero-dial:not(.is-in) .dial-late { opacity: 0; }
.motion .hero-dial.is-in .dial-late { animation: m-fade 0.9s ease calc(var(--d, 0ms) + 1700ms) backwards; }

/* ---------- Live clock chip + "now" marker on the session track ---------- */

.section-head .clock-chip {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 9px 15px 9px 13px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(239, 234, 224, 0.03);
  font: 400 13px/1.2 var(--font-mono); color: var(--muted);
}
.clock-chip b { color: var(--text); font-weight: 500; white-space: nowrap; }
.live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
.live-dot.is-off { background: var(--faint); }
.motion .clock-chip.is-in .live-dot:not(.is-off)::after { animation: m-pulse 2.2s var(--ease-out) calc(var(--d, 0ms) + 600ms) 4; }

.session-now { display: none; }
@media (min-width: 980px) {
  .session-now {
    display: block; position: absolute; z-index: 2; top: 50%; left: var(--now, 0%);
    width: 0; height: 54px; transform: translateY(-50%); pointer-events: none;
  }
  .session-now[hidden] { display: none; }
  .session-now::before {
    content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 22%, #fff 78%, rgba(255, 255, 255, 0));
  }
  .session-now::after, .session-now span {
    content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  }
  .session-now::after { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16), 0 0 12px rgba(247, 179, 71, 0.6); }
  .session-now span { opacity: 0; }
  .motion .session.is-in .session-now span { animation: m-pulse 2.2s var(--ease-out) calc(var(--d, 0ms) + var(--now-d, 0ms) + 600ms) 4; }
}

/* ---------- Trading-day timeline ---------- */

.motion .session .ev { opacity: 0; transform: translate3d(0, 16px, 0); }
.motion .session.is-in .ev {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-soft) calc(var(--d, 0ms) + var(--ev-dm, 0ms)),
              transform 0.9s var(--ease-out) calc(var(--d, 0ms) + var(--ev-dm, 0ms));
}
@media (min-width: 980px) {
  .motion .session .session-track { clip-path: inset(0 100% 0 0 round 999px); }
  .motion .session.is-in .session-track {
    clip-path: inset(0 0 0 0 round 999px);
    transition: clip-path 1.9s var(--ease-in-out) calc(var(--d, 0ms) + 150ms);
  }
  .motion .session .ev-above { transform: translate3d(0, 14px, 0); }
  .motion .session .ev-below { transform: translate3d(0, -14px, 0); }
  .motion .session.is-in .ev { transition-delay: calc(var(--d, 0ms) + var(--ev-d, 0ms)), calc(var(--d, 0ms) + var(--ev-d, 0ms)); }
  .motion .session .session-live { opacity: 0; scale: 0.82; }
  .motion .session.is-in .session-live {
    opacity: 1; scale: 1;
    transition: opacity 0.6s var(--ease-soft) calc(var(--d, 0ms) + var(--live-d, 0ms)),
                scale 0.9s var(--ease-out) calc(var(--d, 0ms) + var(--live-d, 0ms));
  }
  .session-live::after { content: ""; position: absolute; inset: -6px; border-radius: 12px; border: 1px solid rgba(239, 234, 224, 0.55); opacity: 0; }
  .motion .session.is-in .session-live::after { animation: m-ping 2.6s var(--ease-out) calc(var(--d, 0ms) + var(--live-d, 0ms) + 700ms) 3; }
  .motion .session .session-now { opacity: 0; }
  .motion .session.is-in .session-now { opacity: 1; transition: opacity 0.6s ease calc(var(--d, 0ms) + var(--now-d, 0ms)); }
}

/* ---------- Alert anatomy ---------- */

.ladder li { padding-right: 10px; border-radius: 0 6px 6px 0; }
.alert-text mark { transition: opacity 0.45s var(--ease-soft), box-shadow 0.45s ease; }
.alert-reply { transition: opacity 0.5s var(--ease-soft), transform 0.8s var(--ease-out), background-color 0.45s ease, color 0.45s ease; }
.ladder li { transition: opacity 0.5s var(--ease-soft) var(--ld, 0ms), transform 0.7s var(--ease-out) var(--ld, 0ms), background-color 0.45s ease; }
.anatomy-points li { transition: opacity 0.45s var(--ease-soft); }
.anatomy-points h3::before { transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease; }

/* Dimmed parts stay readable: the explanations never drop below AA contrast. */
.alert-card .is-dim { opacity: 0.6; }
.anatomy-points li.is-dim { opacity: 0.72; }
@media (max-width: 900px) { .anatomy-points li.is-dim { opacity: 1; } }
.alert-text mark.is-active { box-shadow: 0 0 0 1.5px currentColor, 0 0 24px -6px currentColor; }
.ladder li.is-active { background: rgba(239, 234, 224, 0.06); background: color-mix(in srgb, var(--c) 14%, transparent); }
.alert-reply.is-active { background: rgba(163, 173, 255, 0.12); color: var(--text); }
.anatomy-points li.is-active h3::before { transform: scale(1.5); box-shadow: 0 0 14px var(--c); }

.motion [data-alert] .alert-typing {
  display: flex; align-items: center; gap: 10px; position: absolute; left: 18px; top: 26px;
  font: 500 12.5px/1 var(--font-mono); color: var(--faint); opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.motion [data-alert].is-typing .alert-typing { opacity: 1; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: m-dot 1.1s ease-in-out infinite paused; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
.motion [data-alert].is-typing .dots i { animation-play-state: running; }
.motion [data-alert] .alert-text { transition: opacity 0.5s var(--ease-soft), transform 0.8s var(--ease-out); }
.motion [data-alert].is-pending .alert-text,
.motion [data-alert].is-pending .alert-reply { opacity: 0; transform: translate3d(0, 8px, 0); }
.motion [data-alert].is-posted .alert-reply { transition-delay: 0.35s, 0.35s, 0s, 0s; }
.motion [data-alert].is-pending .ladder li { opacity: 0; transform: translate3d(-12px, 0, 0); }

/* ---------- Plans: sliding billing toggle + price swap ---------- */

.bill-toggle { position: relative; }
.bill-thumb { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 999px; background: var(--text); pointer-events: none; }
.motion .bill-thumb.is-ready { transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out), height 0.55s var(--ease-out); }
.bill-toggle.has-thumb button { position: relative; z-index: 1; transition: color 0.35s ease; }
.bill-toggle.has-thumb button[aria-pressed="true"] { background: transparent; color: var(--night); }
.motion .price .is-swap b { animation: m-swap 0.6s var(--ease-out) backwards; }
.motion .price .is-swap small { animation: m-swap 0.6s var(--ease-out) 0.07s backwards; }
@media (forced-colors: active) {
  .bill-thumb { forced-color-adjust: none; background: Highlight; }
  .bill-toggle.has-thumb button[aria-pressed="true"] { forced-color-adjust: none; color: HighlightText; }
}

/* ---------- Hover details ---------- */

@media (hover: hover) {
  .plan, .roster li, .card { position: relative; isolation: isolate; }
  .plan::before, .roster li::before, .card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(247, 179, 71, 0.1), transparent 70%);
    opacity: 0; transition: opacity 0.4s ease;
  }
  .plan:hover::before, .roster li:hover::before, .card:hover::before { opacity: 1; }
  .plan, .roster li { transition: transform 0.5s var(--ease-out), border-color 0.4s ease; }
  .plan:hover, .roster li:hover { transform: translate3d(0, -4px, 0); }
  .plan:not(.plan-top):hover, .roster li:hover { border-color: var(--line-strong); }

  .btn:not(.btn-ghost) { position: relative; overflow: hidden; isolation: isolate; }
  .btn:not(.btn-ghost)::after {
    content: ""; position: absolute; inset: -2px; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
    transform: translate3d(-120%, 0, 0);
  }
  .btn:not(.btn-ghost):hover::after { transform: translate3d(120%, 0, 0); transition: transform 0.9s var(--ease-out); }
}

@media (hover: hover) and (min-width: 901px) {
  .nav a:not(.btn):not([aria-current]) { position: relative; }
  .nav a:not(.btn):not([aria-current])::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(247, 179, 71, 0.7);
    transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out);
  }
  .nav a:not(.btn):not([aria-current]):hover::after { transform: scaleX(1); transform-origin: left; }
}

/* ---------- Header: scrolled state + reading progress ---------- */

.site-head { transition: background-color 0.4s ease, box-shadow 0.4s ease; }
.site-head.is-scrolled { background: rgba(9, 12, 19, 0.92); box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.9); }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--indigo), var(--rose), var(--dawn));
  transform: scaleX(0); transform-origin: left;
}

/* ---------- FAQ: smooth open and close where supported ---------- */

@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  :root.motion { interpolate-size: allow-keywords; }
  .motion .faq details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size 0.5s var(--ease-out), content-visibility 0.5s allow-discrete;
  }
  .motion .faq details[open]::details-content { block-size: auto; }
}
.motion .faq details[open] .answer { animation: m-fade 0.6s ease 0.05s backwards; }

/* ---------- Reduced motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .session-now span, .dots i, .dial-halo { animation: none !important; }
  .btn::after { display: none; }
}

@media print {
  .motion [data-reveal], .motion [data-split] .wi, .motion .session .ev,
  .motion [data-alert] .alert-text, .motion [data-alert] .alert-reply, .motion [data-alert] .ladder li,
  .anatomy .is-dim, .motion .hero-dial .dial-late {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .motion .stats::before { transform: none !important; animation: none !important; }
  .motion .hero-dial .dial-reveal { stroke-dashoffset: 0 !important; animation: none !important; }
  .motion .hero-dial .dial-hand { opacity: 1 !important; }
  .scroll-progress, .alert-replay, .alert-typing, .stat .count, .session-now { display: none !important; }
  .stat dt > .sr-only { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}