/* burntop.dev — motion, interaction and feedback. Loaded after site.css.
   Rule: animate only transform and opacity (height only for the FAQ and tab panels, on one element).
   Everything here is progressive: without JS (no .js class) nothing is hidden. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --nav-h: 64px;
}

/* ---------- anchors land below the sticky nav ---------- */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- nav: stronger surface after scroll, scroll-spy ---------- */
.nav { transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.nav.is-scrolled { background: rgba(10, 10, 10, 0.88); border-bottom-color: var(--border-strong); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9); }
.nav__links a { position: relative; padding-block: 4px; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--ember-500); transform: scaleX(0); opacity: 0; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.nav__links a.is-active { color: var(--text); }
.nav__links a.is-active::after { transform: scaleX(1); opacity: 1; }

/* ---------- buttons ---------- */
.btn { transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 107, 0, 0.7), 0 10px 30px -8px rgba(255, 107, 0, 0.75); }
.btn--ghost:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03); }
.btn:active { transform: scale(0.98); transition-duration: 80ms; }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } .btn:hover:active { transform: translateY(0) scale(0.98); } }

/* ---------- cards: lift, border glow, cursor spotlight ---------- */
.card, .step, .example { transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.card { isolation: isolate; }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 0, 0.1), transparent 60%); opacity: 0; transition: opacity var(--dur) var(--ease-out); pointer-events: none; }
@media (hover: hover) {
  .card:hover { box-shadow: 0 16px 40px -28px rgba(255, 107, 0, 0.35); }
  .card:hover::before { opacity: 1; }
  .step:hover, .example:not(.example--add):hover { border-color: var(--border-strong); }
  .example--add:hover { transform: translateY(-2px); }
}

/* ---------- hero: border light that follows the pointer ---------- */
/* .browser clips with overflow:hidden, which also hid the 1px gradient ring at inset:-1px. */
.hero__shot { overflow: clip; overflow-clip-margin: 1px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero__shot::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -400px), #ffb27a, rgba(255, 107, 0, 0.5) 35%, transparent 70%), linear-gradient(180deg, rgba(255, 107, 0, 0.55), rgba(255, 255, 255, 0.06) 40%); z-index: 1; }
}

/* ---------- feature tabs: sliding pill + panel cross-fade ---------- */
.tabs__list { position: relative; }
.tabs__list [role='tab'] { position: relative; z-index: 1; }
.tabs__indicator { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--border-strong); pointer-events: none; }
.tabs__list.has-indicator [role='tab'][aria-selected='true'] { background: transparent; box-shadow: none; }
.tabs__indicator.is-ready { transition: transform 280ms var(--ease-out), width 280ms var(--ease-out), height 280ms var(--ease-out); }
.js .tabs { position: relative; }
.js .tabs__panel { animation: none; }
.tabs.is-animating { overflow: clip; overflow-clip-margin: 8px; }
.tabs__panel.is-leaving { position: absolute; left: 0; right: 0; margin-top: 0; pointer-events: none; }

/* ---------- code windows: sliding top bar + stacked files (fixed height, no jump) ---------- */
.window__tabs { position: relative; }
.window__indicator { position: absolute; left: 0; top: 0; height: 2px; width: 1px; background: var(--ember-500); transform-origin: 0 0; pointer-events: none; }
.window__indicator.is-ready { transition: transform 280ms var(--ease-out); }
.window__tabs.has-indicator [role='tab'][aria-selected='true'] { box-shadow: none; }
.window.is-stacked { display: grid; grid-template-rows: auto 1fr; }
.window.is-stacked > .window__tabs { grid-row: 1; }
.window.is-stacked > .window__file { grid-row: 2; grid-column: 1; min-width: 0; transition: opacity var(--dur) var(--ease-out), visibility 0s linear 0s; }
.window.is-stacked > .window__file.is-off { opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }

/* ---------- copy buttons: icon morph + tooltip ---------- */
.cmd__copy { position: relative; }
.copy-ico { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.copy-ico--check { opacity: 0; transform: scale(0.5) rotate(-20deg); }
.cmd__copy.is-copied .copy-ico--copy { opacity: 0; transform: scale(0.5) rotate(20deg); }
.cmd__copy.is-copied .copy-ico--check { opacity: 1; transform: none; }
.cmd__copy::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; border-radius: 6px; background: #1c1c1c; border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font); font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.cmd__copy.is-copied::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- FAQ: height animation is driven by JS; these are its states ---------- */
.faq details.is-animating { overflow: hidden; }
.faq details.is-closing { border-color: var(--border); }
.faq details.is-closing summary::after { transform: none; color: var(--text-dim); }
.faq summary { transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .faq summary:hover { color: #fff; } .faq details:not([open]):hover { border-color: var(--border-strong); } }

/* ---------- scroll reveals (JS adds .reveal; never hidden without JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- reduced motion: no travel, no autoplay (JS), keep instant state changes ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .btn:hover:active, .card:hover, .example--add:hover { transform: none; }
  .tabs__indicator.is-ready, .window__indicator.is-ready { transition: none; }
  .copy-ico, .cmd__copy::after, .nav__links a::after { transition: none; }
  .copy-ico--check, .cmd__copy.is-copied .copy-ico--copy, .cmd__copy::after { transform: none; }
  .cmd__copy::after { transform: translateX(-50%); }
  .cmd__copy.is-copied::after { transform: translateX(-50%); }
}