/* ==========================================================================
   AE Motion — base layer for elite websites (Sitios Web Premium Klix)
   Zero dependencies. Pairs with ae-motion.js (+ optional ae-shaders.js).
   Tokens are overridden per project in styles.css (:root { --bg: ... }).
   ========================================================================== */

/* ---------- 1. Tokens (defaults; every archetype overrides them) ---------- */
:root {
  --bg: #f4f1ea;
  --surface: #ebe6db;
  --ink: #141414;
  --muted: #6b665d;
  --accent: #e2462c;
  --accent-2: #1f3cff;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --on-accent: #fff;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 14px;
  --radius-lg: 28px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1440px;
  --header-h: 72px;

  /* Fluid type scale (min @360px → max @1600px) */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.86rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3.5rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.2vw, 5.5rem);
  --step-5: clamp(3.2rem, 2rem + 5.6vw, 9rem);
  --step-6: clamp(4rem, 2rem + 9vw, 14rem);

  --display-tracking: -0.035em;
  --display-leading: 0.92;
  --display-weight: 500;
  --display-case: none;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo-out: reveals */
  --ease-in-out: cubic-bezier(0.62, 0.02, 0.34, 1); /* Species-in-Pieces morph */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */
  --dur: 1.1s;
  --dur-fast: 0.45s;
  --stagger: 0.045s;
  --reveal-distance: 48px;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* author display rules (grid/flex) must never override hidden */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords; }
html.lenis, html.lenis body { height: auto; scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Guard against horizontal scroll from oversized display type / transforms.
   `clip` (unlike `hidden`) creates no scroll container, so position:sticky keeps working. */
body > main, body > footer, body > header, body > section { overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
.ae-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ae-skip { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.ae-skip:focus { top: 12px; }

/* ---------- 3. Layout primitives ---------- */
.ae-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.ae-section { position: relative; padding-block: clamp(80px, 12vw, 200px); }
.ae-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 2vw, 32px); }
.ae-full { width: 100%; }
.ae-bleed { margin-inline: calc(var(--gutter) * -1); }
.ae-stack > * + * { margin-top: var(--space, 1rem); }
.ae-rule { height: 1px; background: var(--line); border: 0; margin: 0; }
@media (max-width: 860px) { .ae-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 4. Typography ---------- */
.ae-display {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
  text-wrap: balance;
}
.ae-h1 { font-family: var(--font-display); font-size: var(--step-5); line-height: var(--display-leading); letter-spacing: var(--display-tracking); font-weight: var(--display-weight); text-transform: var(--display-case); text-wrap: balance; }
.ae-h2 { font-family: var(--font-display); font-size: var(--step-4); line-height: 0.98; letter-spacing: calc(var(--display-tracking) * 0.8); font-weight: var(--display-weight); text-wrap: balance; }
.ae-h3 { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.08; letter-spacing: -0.015em; font-weight: var(--display-weight); }
.ae-lead { font-size: var(--step-1); line-height: 1.4; max-width: 38ch; color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.ae-eyebrow, .ae-meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ae-eyebrow::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.6em; background: var(--accent); border-radius: 50%; vertical-align: 0.05em; }
.ae-italic { font-style: italic; }
.ae-outline { color: transparent; -webkit-text-stroke: 1px currentColor; }
.ae-accent { color: var(--accent); }
.ae-num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Buttons & links ---------- */
.ae-btn {
  --btn-bg: var(--ink); --btn-fg: var(--bg);
  position: relative; display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.5em; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 500; line-height: 1; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ae-btn::before { /* fill sweep */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: translateY(101%); border-radius: inherit; transition: transform 0.6s var(--ease-out);
}
.ae-btn:hover::before { transform: translateY(0); }
.ae-btn:hover { color: var(--on-accent); }
.ae-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ae-btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.ae-btn--accent::before { background: var(--ink); }
.ae-btn .ae-btn__arrow { transition: transform 0.5s var(--ease-out); }
.ae-btn:hover .ae-btn__arrow { transform: translateX(4px) rotate(-45deg); }
.ae-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease-out); padding-bottom: 2px; }
.ae-link:hover, .ae-link.is-active { background-size: 100% 1px; }
/* roll link: duplicate text slides up (needs data-roll) */
.ae-roll { display: inline-block; overflow: hidden; vertical-align: top; height: 1.25em; line-height: 1.25; }
.ae-roll > span { display: block; transition: transform 0.55s var(--ease-out); }
.ae-roll > span::after { content: attr(data-text); display: block; }
a:hover > .ae-roll > span, button:hover > .ae-roll > span, .ae-roll:hover > span { transform: translateY(-50%); }

/* ---------- 6. Reveal system (only hidden once JS is confirmed) ---------- */
.ae-js [data-reveal] { opacity: 0; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), clip-path var(--dur) var(--ease-out), filter var(--dur) var(--ease-out); transition-delay: calc(var(--d, 0s) + var(--i, 0) * var(--stagger)); }
.ae-js [data-reveal="up"]    { transform: translate3d(0, var(--reveal-distance), 0); }
.ae-js [data-reveal="down"]  { transform: translate3d(0, calc(var(--reveal-distance) * -1), 0); }
.ae-js [data-reveal="left"]  { transform: translate3d(var(--reveal-distance), 0, 0); }
.ae-js [data-reveal="right"] { transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0); }
.ae-js [data-reveal="scale"] { transform: scale(0.92); }
.ae-js [data-reveal="blur"]  { filter: blur(14px); transform: translateY(16px); }
.ae-js [data-reveal="clip-up"]   { opacity: 1; clip-path: inset(100% 0 0 0); }
.ae-js [data-reveal="clip-down"] { opacity: 1; clip-path: inset(0 0 100% 0); }
.ae-js [data-reveal="clip-left"] { opacity: 1; clip-path: inset(0 100% 0 0); }
.ae-js [data-reveal="curtain"]   { opacity: 1; clip-path: inset(12% 12% 12% 12% round var(--radius-lg)); transform: scale(1.08); }
.ae-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.ae-js [data-reveal^="clip-"].is-in { clip-path: inset(0 0 0 0); }
.ae-js [data-reveal="curtain"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
/* once a reveal has finished, nothing may stay clipped (badges, shadows, tilt, tooltips must overflow freely) */
.ae-js [data-reveal].is-done { clip-path: none !important; }
.ae-js [data-reveal="clip-up"] img, .ae-js [data-reveal="curtain"] img { transform: scale(1.18); transition: transform 1.8s var(--ease-out); transition-delay: inherit; }
.ae-js [data-reveal].is-in img { transform: none; }
/* defensive: split text is animated per-piece, never hide the container (legacy gotcha A.4.5) */
.ae-js [data-split][data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }

/* ---------- 7. Split text ---------- */
.ae-l, .ae-w { display: inline-block; vertical-align: top; }
.ae-l { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.04em; }
.ae-w { white-space: nowrap; }
.ae-wi, .ae-li, .ae-c { display: inline-block; will-change: transform; }
.ae-li { display: block; }
.ae-js [data-split] .ae-wi, .ae-js [data-split] .ae-li, .ae-js [data-split] .ae-c {
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * var(--stagger));
}
/* rise (default): pieces slide up from a mask */
.ae-js [data-split]:not(.is-in) .ae-li,
.ae-js [data-split][data-split-anim="rise"]:not(.is-in) .ae-wi { transform: translate3d(0, 110%, 0); }
.ae-js [data-split="chars"]:not(.is-in) .ae-c { transform: translate3d(0, 110%, 0); }
.ae-js [data-split="chars"] .ae-w { overflow: clip; overflow-clip-margin: 0.1em; }
.ae-js [data-split="words"][data-split-anim="rise"] .ae-w { overflow: clip; overflow-clip-margin: 0.1em; }
/* fade-up words */
.ae-js [data-split="words"]:not([data-split-anim]):not(.is-in) .ae-wi,
.ae-js [data-split-anim="fade"]:not(.is-in) .ae-wi,
.ae-js [data-split-anim="fade"]:not(.is-in) .ae-c { opacity: 0; transform: translate3d(0, 0.35em, 0); }
/* blur in */
.ae-js [data-split-anim="blur"]:not(.is-in) .ae-wi,
.ae-js [data-split-anim="blur"]:not(.is-in) .ae-c { opacity: 0; filter: blur(12px); transform: scale(1.04); }
/* 3D flip chars */
.ae-js [data-split-anim="flip"] { perspective: 900px; }
.ae-js [data-split-anim="flip"]:not(.is-in) .ae-c { opacity: 0; transform: rotateX(-90deg) translateY(0.3em); transform-origin: 50% 100%; }
.ae-js [data-split-anim="flip"] .ae-w { overflow: visible; }
/* wave (chars with spring) */
.ae-js [data-split-anim="wave"] .ae-c { transition-timing-function: var(--ease-spring); }

/* scroll fill text (words go from ghost to ink) */
[data-fill] .ae-wi { opacity: var(--o, 0.16); transition: opacity 0.2s linear; }

/* ---------- 8. Rotator (BTTR word ticker) ---------- */
.ae-rotator { display: inline-grid; vertical-align: bottom; overflow: clip; overflow-clip-margin: 0.1em; height: 1.08em; line-height: 1.08; }
.ae-rotator > span { grid-area: 1 / 1; transform: translateY(105%); transition: transform 0.9s var(--ease-out); white-space: nowrap; }
.ae-rotator > span.is-current { transform: translateY(0); }
.ae-rotator > span.is-leaving { transform: translateY(-105%); }

/* ---------- 9. Marquee ---------- */
.ae-marquee { --gap: clamp(24px, 4vw, 64px); display: flex; overflow: hidden; user-select: none; gap: var(--gap); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ae-marquee__track { flex-shrink: 0; display: flex; align-items: center; gap: var(--gap); min-width: 100%; animation: ae-marquee var(--marquee-dur, 30s) linear infinite; animation-direction: var(--marquee-dir, normal); }
.ae-marquee:hover .ae-marquee__track[data-pause] { animation-play-state: paused; }
@keyframes ae-marquee { to { transform: translateX(calc(-100% - var(--gap))); } }

/* ---------- 10. Grain / noise overlay (BTTR) ---------- */
.ae-grain { position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: var(--grain-opacity, 0.07); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: ae-grain 0.9s steps(6) infinite; }
@keyframes ae-grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-5%,-10%)} 40%{transform:translate(-15%,5%)} 60%{transform:translate(7%,-25%)} 80%{transform:translate(-5%,25%)} }

/* ---------- 11. Cursor ---------- */
.ae-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.ae-cursor.is-visible { opacity: 1; }
.ae-cursor__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cursor-color, var(--accent)); transition: width .5s var(--ease-out), height .5s var(--ease-out), margin .5s var(--ease-out), background .3s; display: grid; place-items: center; }
.ae-cursor--blend .ae-cursor__dot { background: #fff; mix-blend-mode: difference; }
.ae-cursor.is-hover .ae-cursor__dot { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.ae-cursor.has-label .ae-cursor__dot { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.ae-cursor__label { font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-accent); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.ae-cursor.has-label .ae-cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .ae-cursor { display: none; } }

/* ---------- 12. Image trail ---------- */
[data-trail] { position: relative; overflow: clip; }
[data-trail] .ae-trail-pool { display: none; }
.ae-trail-img { position: absolute; left: 0; top: 0; width: var(--trail-w, clamp(140px, 16vw, 260px)); aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; border-radius: 6px; will-change: transform, opacity; z-index: 1; }

/* ---------- 13. Sticky stack cards ---------- */
[data-stack] { display: grid; gap: clamp(16px, 3vw, 40px); }
[data-stack] > * { position: sticky; top: calc(var(--header-h) + var(--stack-offset, 24px) + var(--i, 0) * 14px); transform-origin: 50% 0; will-change: transform; }

/* ---------- 14. Horizontal scroll section ---------- */
[data-horizontal] { position: relative; }
[data-horizontal] > .ae-h-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
[data-horizontal] .ae-h-track { display: flex; gap: clamp(16px, 3vw, 48px); padding-inline: var(--gutter); will-change: transform; }
@media (max-width: 860px) {
  [data-horizontal] { height: auto !important; }
  [data-horizontal] > .ae-h-sticky { position: relative; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 8px; }
  [data-horizontal] .ae-h-track { transform: none !important; }
  [data-horizontal] .ae-h-track > * { scroll-snap-align: center; }
}

/* ---------- 15. Expanding media (Think Company) ---------- */
[data-expand] { will-change: clip-path; clip-path: inset(var(--ex-y, 10%) var(--ex-x, 14%) var(--ex-y, 10%) var(--ex-x, 14%) round var(--ex-r, 32px)); }

/* ---------- 16. Header behaviours ---------- */
[data-header] { position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--header-h); transition: transform .6s var(--ease-out), background-color .4s, backdrop-filter .4s; }
[data-header].is-hidden { transform: translateY(-100%); }
[data-header].is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
@supports not (backdrop-filter: blur(1px)) { [data-header].is-scrolled { background: var(--bg); } }
.ae-menu { position: fixed; inset: 0; z-index: 899; background: var(--ink); color: var(--bg); clip-path: circle(0% at calc(100% - 40px) 36px); transition: clip-path 0.9s var(--ease-in-out); visibility: hidden; }
.menu-open .ae-menu { clip-path: circle(150% at calc(100% - 40px) 36px); visibility: visible; }
.ae-burger { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.ae-burger span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease-out); }
.ae-burger span + span { margin-top: -14px; }
.ae-burger span:first-child { transform: translateY(-4px); } .ae-burger span:last-child { transform: translateY(4px); }
.menu-open .ae-burger span:first-child { transform: rotate(45deg); } .menu-open .ae-burger span:last-child { transform: rotate(-45deg); }

/* ---------- 17. Progress bar ---------- */
[data-progress] { position: fixed; left: 0; top: 0; z-index: 950; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- 18. Preloader ---------- */
[data-preloader] { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: var(--ink); color: var(--bg); transition: clip-path 1.1s var(--ease-in-out); clip-path: inset(0 0 0 0); }
.is-loaded [data-preloader] { clip-path: inset(0 0 100% 0); pointer-events: none; }
[data-preloader] .ae-pre-count { font: 400 var(--step-4)/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* ---------- 19. Compare (before/after) ---------- */
[data-compare] { position: relative; overflow: hidden; border-radius: var(--radius); --pos: 50%; touch-action: pan-y; }
[data-compare] > img { width: 100%; aspect-ratio: var(--ratio, 16/10); object-fit: cover; }
[data-compare] > img:last-of-type { position: absolute; inset: 0; height: 100%; clip-path: inset(0 0 0 var(--pos)); }
[data-compare] .ae-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
[data-compare] .ae-compare-handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #111; font-size: 18px; }
[data-compare] input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* ---------- 20. Accordion (native <details>) ---------- */
details.ae-acc { border-top: 1px solid var(--line); }
details.ae-acc:last-child { border-bottom: 1px solid var(--line); }
details.ae-acc > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; font-size: var(--step-1); }
details.ae-acc > summary::-webkit-details-marker { display: none; }
details.ae-acc > summary::after { content: "+"; font-family: var(--font-mono); transition: transform .5s var(--ease-out); }
details.ae-acc[open] > summary::after { transform: rotate(45deg); }
details.ae-acc::details-content { block-size: 0; overflow: clip; transition: block-size .6s var(--ease-out), content-visibility .6s allow-discrete; }
details.ae-acc[open]::details-content { block-size: auto; }
details.ae-acc .ae-acc__body { padding-bottom: 1.4rem; color: var(--muted); max-width: 62ch; }

/* ---------- 21. Filter grid + lightbox ---------- */
[data-filter-item] { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
[data-filter-item].is-filtered { opacity: 0; transform: scale(.96); pointer-events: none; position: absolute; visibility: hidden; }
.ae-lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.ae-lightbox::backdrop { background: color-mix(in srgb, #000 86%, transparent); backdrop-filter: blur(6px); }
.ae-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; }
.ae-lightbox button { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #111; font-size: 20px; }

/* ---------- 22. Polymorph (Species in Pieces) ---------- */
[data-polymorph] { position: relative; aspect-ratio: var(--pm-ratio, 1); width: 100%; }
.ae-shard { position: absolute; inset: 0; transition: clip-path var(--pm-dur, 1.3s) var(--ease-in-out), background-color 0.6s ease; will-change: clip-path; }
[data-polymorph]:hover .ae-shard { transition-duration: .9s; }

/* ---------- 23. Pixelate reveal ---------- */
.ae-pixel-wrap { position: relative; }
.ae-pixel-wrap > canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; transition: opacity .25s; }
.ae-pixel-wrap.is-done > canvas { opacity: 0; }
.ae-js .ae-pixel-wrap:not(.is-done) > img { opacity: 0; }

/* ---------- 24. Shader canvas ---------- */
canvas[data-shader] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ae-shader-fallback { background: radial-gradient(60% 80% at 20% 20%, var(--accent) 0%, transparent 60%), radial-gradient(60% 80% at 80% 70%, var(--accent-2) 0%, transparent 60%), var(--bg); }

/* ---------- 25. Tilt / magnetic helpers ---------- */
[data-tilt] { transform-style: preserve-3d; transition: transform .6s var(--ease-out); }
[data-magnetic] { transition: transform .6s var(--ease-out); }

/* ---------- 26. Cross-document page transitions (MPA, progressive) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.5s var(--ease-in-out) both ae-vt-out; }
::view-transition-new(root) { animation: 0.7s var(--ease-out) both ae-vt-in; }
@keyframes ae-vt-out { to { opacity: 0; transform: translateY(-2vh) scale(0.985); } }
@keyframes ae-vt-in { from { opacity: 0; transform: translateY(3vh); } }

/* Fallback page transition (browsers without cross-document View Transitions) */
.ae-pt body { animation: ae-pt-in .6s var(--ease-out) both; }
.ae-pt.ae-pt-leave body { animation: ae-pt-out .42s var(--ease-in-out) both; }
@keyframes ae-pt-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes ae-pt-out { to { opacity: 0; transform: translateY(-10px); } }
/* Shared elements morph slower than the page */
::view-transition-group(*) { animation-duration: .75s; animation-timing-function: var(--ease-in-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
/* Active nav link */
a[aria-current="page"] { color: var(--accent); }

/* ---------- 27. Reduced motion: only intrusive things stop (legacy A.2) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ae-grain { animation: none; }
  :root { --reveal-distance: 18px; --dur: 0.7s; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
}
@media print { .ae-js [data-reveal], .ae-js [data-split] * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; } .ae-grain, .ae-cursor, [data-preloader] { display: none !important; } }