/* =====================================================================
   CoreTech: motion & FX layer (pairs with assets/fx.js and hero-3d.js)
   html.fx-on / html.fx-off is set by fx.js. "Effects: Off" in the footer,
   or prefers-reduced-motion by default, turns the heavy parts off.
   ===================================================================== */
main, footer { position: relative; z-index: 2; }
.ct-fx-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100vw; height: 100vh; }
.ct-fx-burst { position: fixed; inset: 0; z-index: 95; pointer-events: none; width: 100vw; height: 100vh; }
.fx-off .ct-fx-canvas { display: none; }

/* ---------- Cross-page transitions (Chrome/Edge 126+, Safari 18.2+) ----------
   The header stays put; the clicked product image morphs into the gallery. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-group(ct-product) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.ct-header { view-transition-name: ct-header; }
#ct-gallery-main { view-transition-name: ct-product; }

/* ---------- Hero entrance: fade + rise + slight scale + blur-in, staggered ---------- */
.ct-stagger > * { animation-name: ctRiseIn; animation-duration: .9s; }
@keyframes ctRiseIn { from { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Scroll reveals: cards tilt up into place, section titles wipe in ---------- */
.ct-card[data-reveal]:not(.in), .ct-cat[data-reveal]:not(.in) { transform: translateY(34px) rotate(-1.2deg) scale(.97); }
[data-reveal].in { transition: opacity .7s ease, transform .75s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .3s; }
.ct-card.in:hover { transform: translateY(-6px); }
.ct-cat.in:hover { transform: translateY(-3px); }
[data-reveal] .ct-h2, [data-reveal] .ct-eyebrow { clip-path: inset(-20% 100% -20% 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) .12s; }
[data-reveal].in .ct-h2, [data-reveal].in .ct-eyebrow { clip-path: inset(-20% -2% -20% 0); }

/* ---------- Progressive row reveals: specs, reviews, comparison rows ---------- */
.ct-spec-row, .ct-cmp tbody tr, #reviews article { animation: ctRow .55s cubic-bezier(.2, .7, .2, 1) both; }
.ct-spec-row:nth-child(2), .ct-cmp tbody tr:nth-child(2), #reviews article:nth-child(2) { animation-delay: .05s; }
.ct-spec-row:nth-child(3), .ct-cmp tbody tr:nth-child(3), #reviews article:nth-child(3) { animation-delay: .1s; }
.ct-spec-row:nth-child(4), .ct-cmp tbody tr:nth-child(4), #reviews article:nth-child(4) { animation-delay: .15s; }
.ct-spec-row:nth-child(5), .ct-cmp tbody tr:nth-child(5), #reviews article:nth-child(5) { animation-delay: .2s; }
.ct-spec-row:nth-child(n+6), .ct-cmp tbody tr:nth-child(n+6), #reviews article:nth-child(n+6) { animation-delay: .25s; }
@keyframes ctRow { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ---------- Sticky nav: glow line strengthens with scroll + reading-progress hairline ---------- */
.ct-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(142, 197, 255, .9), var(--volt), rgba(142, 197, 255, .9), transparent);
  opacity: calc(var(--sp, 0) * .85);
  box-shadow: 0 0 22px 1px rgba(47, 134, 255, calc(var(--sp, 0) * .55));
}
.ct-header::before {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; z-index: 1; pointer-events: none;
  transform-origin: left; transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, #1653bd, #2f86ff, #6fe2ff);
}

/* ---------- Cards: pointer-following glow (fx.js sets --mx / --my) ---------- */
.ct-card, .ct-cat { --mx: 50%; --my: -40%; }
.ct-card::after, .ct-cat::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; z-index: 1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(47, 134, 255, .16), transparent 42%);
}
.fx-on .ct-card:hover::after, .fx-on .ct-cat:hover::after { opacity: 1; }
.ct-card:hover .ct-card-media .ct-art { filter: saturate(1.12) brightness(1.05); }
.ct-card:hover { box-shadow: 0 26px 60px -24px rgba(47, 134, 255, .6), 0 0 0 1px rgba(47, 134, 255, .18); }

/* ---------- Buttons: ripple, neon pulse, success morph, magnetic easing ---------- */
.ct-btn, .ct-icon-btn, .ct-option, .ct-thumb { position: relative; overflow: hidden; isolation: isolate; }
.ct-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; transform: scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, .45), rgba(142, 197, 255, .15) 45%, transparent 70%);
  animation: ctRipple .65s ease-out forwards;
}
@keyframes ctRipple { to { transform: scale(1); opacity: 0; } }
.fx-on .ct-btn:not(.ct-btn-ghost):hover { animation: ctNeon 1.6s ease-in-out infinite; }
@keyframes ctNeon {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 30px -8px rgba(47, 134, 255, 1), 0 0 0 0 rgba(142, 197, 255, 0); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 34px -6px rgba(47, 134, 255, 1), 0 0 0 3px rgba(142, 197, 255, .28); }
}
.ct-btn-lg, .ct-help { transition: transform .25s cubic-bezier(.2, .7, .2, 1), filter .2s, box-shadow .2s; }
.ct-added::after {
  content: '\2713  ' attr(data-done); position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: inherit;
  font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(180deg, #34d399, #059669);
  animation: ctDone 1.3s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes ctDone { 0% { clip-path: circle(0% at 50% 50%); } 18% { clip-path: circle(75% at 50% 50%); } 82% { opacity: 1; } 100% { opacity: 0; clip-path: circle(75% at 50% 50%); } }

/* Floating help button bob (`translate` composes with the magnetic `transform`) */
.fx-on .ct-help { animation: ctBob 4s ease-in-out infinite; }
@keyframes ctBob { 50% { translate: 0 -6px; } }

/* ---------- 3D hero ---------- */
.ct-hero-3d { background: radial-gradient(ellipse at 50% 42%, #152440, #0a0f1a 55%, #05070b); }
.ct-hero-3d canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

/* ---------- Builder: energy flowing down the parts list, flash on change ---------- */
.ct-flow { position: relative; padding-left: 12px; }
.ct-flow::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: rgba(47, 134, 255, .12); }
.ct-flow::after {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, #8ec5ff 50%, transparent 100%) no-repeat; background-size: 100% 22%;
  animation: ctFlow 2.6s linear infinite; filter: drop-shadow(0 0 4px #2f86ff);
}
@keyframes ctFlow { from { background-position: 0 -30%; } to { background-position: 0 130%; } }
.ct-flash { animation: ctFlash .95s ease-out; border-radius: 8px; }
@keyframes ctFlash { 0% { background: rgba(47, 134, 255, .32); box-shadow: -12px 0 18px -6px rgba(47, 134, 255, .9); } 100% { background: transparent; box-shadow: none; } }

/* ---------- Effects off / reduced motion: static and fully readable ---------- */
.fx-off [data-reveal] .ct-h2, .fx-off [data-reveal] .ct-eyebrow { clip-path: none; }
.fx-off .ct-stagger > *, .fx-off .ct-spec-row, .fx-off .ct-cmp tbody tr, .fx-off #reviews article { animation: none; opacity: 1; transform: none; filter: none; }
.fx-off .ct-scan, .fx-off .ct-help-pulse, .fx-off .ct-flow::after, .fx-off .ct-header::before { display: none; }