/* Pentestiverse — product page styles (plain CSS, no build step).
   Used by products/*.html. Tailwind v4 (local browser build) supplies the utilities; theme tokens
   (--color-plum-*, --color-ember-*, --font-*, --ease-*) come from the inline `@theme static` block
   in each page <head>. Purple leads, orange is the accent: it marks "real" data and live states. */

@layer theme, base, components, utilities;

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@layer base {
  :root {
    color-scheme: dark;

    /* RGB triplets so alpha can vary per use: rgb(var(--plum) / .4) */
    --plum: 142 36 170;
    --plum-deep: 74 20 140;
    --violet: 168 85 247;
    --plum-soft: 221 180 246;
    --ember: 237 91 46;
    --ember-soft: 255 138 92;

    --p: 0;
  }

  html { scroll-behavior: smooth; scroll-padding-top: 6rem; background: #050307; }
  body { overflow-x: clip; -webkit-tap-highlight-color: transparent; }
  ::selection { background: rgb(var(--violet) / 0.4); color: #fff; }
  [x-cloak] { display: none !important; }
}

@layer components {
  /* ── Ambient backdrop ─────────────────────────────────────── */

  .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

  .bd-glow { position: absolute; border-radius: 9999px; will-change: transform; }

  .bd-glow--a {
    top: -22%; right: -18%; width: 70vmax; height: 70vmax;
    background: radial-gradient(closest-side, rgb(var(--plum) / 0.34), rgb(var(--plum-deep) / 0.14) 55%, transparent);
    animation: drift 22s ease-in-out infinite alternate;
  }

  .bd-glow--b {
    bottom: -28%; left: -20%; width: 75vmax; height: 75vmax;
    background: radial-gradient(closest-side, rgb(var(--plum-deep) / 0.5), rgb(var(--plum) / 0.1) 55%, transparent);
    animation: drift 28s ease-in-out -9s infinite alternate-reverse;
  }

  .bd-glow--c {
    top: 38%; left: -12%; width: 34vmax; height: 34vmax;
    background: radial-gradient(closest-side, rgb(var(--ember) / 0.12), transparent 70%);
    animation: drift 19s ease-in-out -4s infinite alternate;
  }

  .bd-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: radial-gradient(ellipse 75% 60% at 50% 20%, #000 15%, transparent 80%);
  }

  .bd-noise {
    position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .progress {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2px;
    transform-origin: 0 50%;
    transform: scaleX(var(--p));
    background: linear-gradient(90deg, rgb(var(--plum)), rgb(var(--violet)), rgb(var(--ember-soft)));
    box-shadow: 0 0 12px rgb(var(--violet) / 0.8);
  }

  /* ── Surfaces ─────────────────────────────────────────────── */

  .glass {
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.08);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .glass-strong {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015)), rgb(14 8 26 / 0.62);
    border: 1px solid rgb(255 255 255 / 0.09);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  /* Rotating conic border. Put on an element with border-radius and position: relative. */
  .ring { position: relative; }
  .ring::before {
    content: "";
    position: absolute; inset: -1px; padding: 1px;
    border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--angle), transparent 0 50%, rgb(var(--plum-soft) / 0.9) 70%, rgb(var(--violet)) 82%, rgb(var(--ember-soft) / 0.9) 90%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: spin-angle 7s linear infinite;
  }

  /* Cursor spotlight: fill + 1px border, fed by x-spotlight (--mx / --my). */
  .spot { position: relative; isolation: isolate; }
  .spot::before,
  .spot::after {
    content: ""; position: absolute; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity 0.35s ease;
  }
  .spot::before {
    inset: 0; z-index: -1;
    background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--violet) / 0.2), transparent 65%);
  }
  .spot::after {
    inset: -1px; padding: 1px; z-index: 1;
    background: radial-gradient(12rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--plum-soft) / 0.9), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .spot:hover::before,
  .spot:hover::after { opacity: 1; }

  /* ── Type + buttons ───────────────────────────────────────── */

  .grad-text {
    background: linear-gradient(100deg, #f1d9ff 0%, #c27fe6 28%, #a855f7 55%, #ff8a5c 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: grad-shift 8s ease-in-out infinite alternate;
  }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1;
    letter-spacing: 0.3em; text-transform: uppercase; color: rgb(var(--plum-soft));
  }
  .eyebrow::before {
    content: ""; width: 0.4rem; height: 0.4rem; border-radius: 9999px;
    background: rgb(var(--ember-soft)); animation: ping 2.4s ease-out infinite;
  }

  .btn {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    font-weight: 600; white-space: nowrap; border-radius: 0.875rem;
    transition: translate 0.35s var(--ease-out-expo), box-shadow 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
    outline: none;
  }
  .btn:focus-visible { box-shadow: 0 0 0 2px #050307, 0 0 0 4px rgb(var(--plum-soft) / 0.9); }
  .btn svg { width: 1rem; height: 1rem; transition: translate 0.35s var(--ease-out-expo); }
  .btn:hover svg { translate: 0.25rem 0; }

  .btn-primary {
    color: #fff;
    background: linear-gradient(100deg, #6a1b9a, #8e24aa 45%, #a855f7);
    box-shadow: 0 10px 34px -10px rgb(var(--violet) / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.22);
  }
  .btn-primary::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
    translate: -120% 0; transition: translate 0.8s var(--ease-out-expo);
  }
  .btn-primary:hover { translate: 0 -2px; box-shadow: 0 16px 44px -10px rgb(var(--violet) / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.3); }
  .btn-primary:hover::after { translate: 120% 0; }
  .btn-primary:active { translate: 0 0; }

  .btn-ghost {
    color: rgb(255 255 255 / 0.85);
    border: 1px solid rgb(255 255 255 / 0.16);
    background: rgb(255 255 255 / 0.03);
  }
  .btn-ghost:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(var(--plum-soft) / 0.5); translate: 0 -2px; }

  /* ── Scroll reveal (only hides content when JS is running) ── */

  .js .reveal {
    opacity: 0; translate: 0 1.5rem; filter: blur(6px);
    transition: opacity 0.9s var(--ease-out-expo), translate 0.9s var(--ease-out-expo), filter 0.9s var(--ease-out-expo);
    transition-delay: var(--d, 0ms);
  }
  .js .reveal.is-in { opacity: 1; translate: 0 0; filter: none; }

  /* ── Nav ──────────────────────────────────────────────────── */

  .nav-link { position: relative; padding-block: 0.25rem; color: rgb(255 255 255 / 0.6); transition: color 0.25s ease; }
  .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.15rem; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgb(var(--violet)), rgb(var(--ember-soft)));
    scale: 0 1; transform-origin: left; transition: scale 0.4s var(--ease-out-expo);
  }
  .nav-link:hover, .nav-link[aria-current="true"] { color: #fff; }
  .nav-link:hover::after, .nav-link[aria-current="true"]::after { scale: 1 1; }

  /* ── Hero device ──────────────────────────────────────────── */

  .device { perspective: 1400px; }

  .device__tilt {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--ry, 0) * -7deg)) rotateY(calc(var(--rx, 0) * 9deg));
    transition: transform 0.5s var(--ease-out-expo);
  }

  .device__float {
    position: relative; aspect-ratio: 1024 / 863;
    animation: float 7s ease-in-out infinite;
    /* melt the cropped wrist into the page */
    mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
  }

  .device__img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 28px 40px rgb(0 0 0 / 0.65)) drop-shadow(0 0 40px rgb(var(--violet) / 0.25)); }

  /* A light sweep that only shows where the PNG is opaque. */
  .device__scan {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(105deg, transparent 38%, rgb(var(--plum-soft) / 0.7) 49%, rgb(255 255 255 / 0.85) 50%, rgb(var(--plum-soft) / 0.7) 51%, transparent 62%);
    background-size: 300% 100%;
    -webkit-mask: url("../img/minipc.png") center / 100% 100% no-repeat;
    mask: url("../img/minipc.png") center / 100% 100% no-repeat;
    animation: scan 5.5s cubic-bezier(0.45, 0, 0.55, 1) 1.2s infinite;
  }

  .device__aura {
    position: absolute; left: 50%; top: 34%; width: 120%; aspect-ratio: 1; translate: -50% -50%;
    border-radius: 9999px; pointer-events: none;
    background: radial-gradient(closest-side, rgb(var(--violet) / 0.42), rgb(var(--plum) / 0.16) 55%, transparent 72%);
    animation: breathe 5s ease-in-out infinite alternate;
  }

  .device__orbit {
    position: absolute; left: 50%; top: 34%; aspect-ratio: 1; translate: -50% -50%;
    border-radius: 9999px; pointer-events: none;
    border: 1px dashed rgb(var(--plum-soft) / 0.22);
    animation: spin 60s linear infinite;
  }
  .device__orbit--1 { width: 96%; }
  .device__orbit--2 { width: 122%; border-style: dotted; border-color: rgb(var(--ember-soft) / 0.18); animation-duration: 90s; animation-direction: reverse; }

  /* Orbit satellite */
  .device__orbit::after {
    content: ""; position: absolute; top: 0; left: 50%; width: 0.5rem; height: 0.5rem; translate: -50% -50%;
    border-radius: 9999px; background: #fff; box-shadow: 0 0 12px 3px rgb(var(--violet) / 0.9);
  }
  .device__orbit--2::after { background: rgb(var(--ember-soft)); box-shadow: 0 0 12px 3px rgb(var(--ember) / 0.9); }

  /* Floating "real → alias" tags around the device. */
  .htag {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border-radius: 0.75rem;
    font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; white-space: nowrap;
    animation: float 6s ease-in-out var(--fd, 0s) infinite;
  }
  .htag__dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: rgb(var(--ember-soft)); box-shadow: 0 0 8px rgb(var(--ember)); animation: blink 1.6s steps(1, end) infinite; }

  /* Two stacked values crossfading: real (orange) then alias (purple). */
  .swap { position: relative; display: inline-grid; }
  .swap > span { grid-area: 1 / 1; }
  .swap__real { color: rgb(var(--ember-soft)); animation: swap-real 6s var(--sd, 0s) infinite; }
  .swap__alias { color: rgb(var(--plum-soft)); animation: swap-alias 6s var(--sd, 0s) infinite; }

  /* Intercept · Replace · Send · Replace back · Repeat */
  .pipe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.5rem; }
  .pipe__step {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border-radius: 9999px;
    font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgb(255 255 255 / 0.32); animation: pipe-on 6s linear var(--pd, 0s) infinite;
  }
  .pipe__step::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: currentColor; }
  .pipe__sep { width: 1rem; height: 1rem; color: rgb(255 255 255 / 0.15); }

  /* Particles drifting upward in the hero. */
  .mote {
    position: absolute; left: var(--x); bottom: -1rem; width: var(--s); height: var(--s); border-radius: 9999px; opacity: 0;
    background: rgb(var(--plum-soft)); box-shadow: 0 0 6px 1px rgb(var(--violet) / 0.9);
    animation: rise var(--d) linear var(--delay) infinite;
  }
  .mote:nth-child(3n) { background: rgb(var(--ember-soft)); box-shadow: 0 0 6px 1px rgb(var(--ember) / 0.8); }

  /* ── Plugins ──────────────────────────────────────────────── */

  .tile {
    display: flex; height: 100%; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center;
    padding: 2rem 1rem; border-radius: 1.5rem;
    transition: translate 0.5s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .tile:hover { translate: 0 -6px; border-color: rgb(var(--violet) / 0.4); box-shadow: 0 24px 50px -24px rgb(var(--violet) / 0.65); }
  .tile__logo { transition: transform 0.6s var(--ease-spring), box-shadow 0.3s ease; }
  .tile:hover .tile__logo { transform: rotate(-8deg) scale(1.1); box-shadow: 0 0 28px rgb(var(--violet) / 0.55); }
  .tile__status { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.5); }
  .tile__status::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #5eead4; box-shadow: 0 0 8px #2dd4bf; animation: blink 2.4s steps(1, end) infinite; }

  /* ── Live demo ────────────────────────────────────────────── */

  .step { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border-radius: 9999px; cursor: pointer;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: rgb(255 255 255 / 0.35);
    overflow: hidden; transition: color 0.3s ease, background-color 0.3s ease; }
  .step:hover { color: rgb(255 255 255 / 0.7); }
  .step[aria-current="true"] { color: #fff; background: rgb(255 255 255 / 0.06); }
  .step__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: rgb(255 255 255 / 0.18); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
  .step[aria-current="true"] .step__dot { background: rgb(var(--ember-soft)); box-shadow: 0 0 10px rgb(var(--ember)); }
  .step__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; scale: 0 1; background: linear-gradient(90deg, rgb(var(--violet)), rgb(var(--ember-soft))); }
  .step[aria-current="true"] .step__bar { animation: fill var(--dur, 4.5s) linear forwards; }
  .is-paused .step__bar { animation-play-state: paused; }

  .dcard { opacity: 0.4; transition: opacity 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, translate 0.5s var(--ease-out-expo); }
  .dcard[data-on="true"] { opacity: 1; translate: 0 -4px; }
  .dcard[data-tone="orange"][data-on="true"] { border-color: rgb(var(--ember) / 0.5); box-shadow: 0 24px 60px -28px rgb(var(--ember) / 0.7); }
  .dcard[data-tone="violet"][data-on="true"] { border-color: rgb(var(--violet) / 0.55); box-shadow: 0 24px 60px -24px rgb(var(--violet) / 0.8); }

  .stack { display: grid; }
  .stack > * { grid-area: 1 / 1; }

  .tok { border-radius: 0.375rem; padding: 0.05rem 0.4rem; animation: mark 0.7s var(--ease-out-expo) both; }
  .tok--real { color: #ffd3bd; background: linear-gradient(rgb(var(--ember) / 0.3), rgb(var(--ember) / 0.3)) no-repeat left / 0% 100%, rgb(var(--ember) / 0.12); }
  .tok--alias { font-family: var(--font-mono); font-size: 0.875em; color: #ebd3fa; background: linear-gradient(rgb(var(--violet) / 0.34), rgb(var(--violet) / 0.34)) no-repeat left / 0% 100%, rgb(var(--violet) / 0.14); }

  /* Connector between demo cards, with a packet travelling the line. */
  .link { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 3rem; }
  .link__line { position: relative; width: 2px; height: 100%; border-radius: 2px; background: rgb(255 255 255 / 0.1); overflow: visible; }
  .link__dot {
    position: absolute; left: 50%; top: 0; width: 0.5rem; height: 0.5rem; translate: -50% -50%; border-radius: 9999px; opacity: 0;
    background: #fff; box-shadow: 0 0 12px 3px rgb(var(--ember) / 0.9);
  }
  .link[data-flow="fwd"] .link__line { background: linear-gradient(180deg, rgb(var(--ember) / 0.6), rgb(var(--ember) / 0.2)); }
  .link[data-flow="back"] .link__line { background: linear-gradient(0deg, rgb(var(--violet) / 0.7), rgb(var(--violet) / 0.2)); }
  .link[data-flow="fwd"] .link__dot { animation: link-y 1.1s ease-in-out infinite; }
  .link[data-flow="back"] .link__dot { animation: link-y 1.1s ease-in-out infinite reverse; box-shadow: 0 0 12px 3px rgb(var(--violet) / 0.95); }

  @media (width >= 48rem) {
    .link { width: 3.5rem; height: 100%; min-height: 2rem; }
    .link__line { width: 100%; height: 2px; }
    .link__dot { left: 0; top: 50%; }
    .link[data-flow="fwd"] .link__line { background: linear-gradient(90deg, rgb(var(--ember) / 0.6), rgb(var(--ember) / 0.2)); }
    .link[data-flow="back"] .link__line { background: linear-gradient(270deg, rgb(var(--violet) / 0.7), rgb(var(--violet) / 0.2)); }
    .link[data-flow="fwd"] .link__dot { animation-name: link-x; }
    .link[data-flow="back"] .link__dot { animation-name: link-x; }
  }

  /* ── Pricing ──────────────────────────────────────────────── */

  .opt {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; text-align: left;
    padding: 0.8rem 1rem; border-radius: 0.875rem; border: 1px solid rgb(255 255 255 / 0.1);
    color: rgb(255 255 255 / 0.45); font-weight: 500; font-size: 0.875rem; outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, translate 0.3s var(--ease-out-expo);
  }
  .opt:hover { border-color: rgb(var(--plum-soft) / 0.35); translate: 0.15rem 0; }
  .opt:focus-visible { box-shadow: 0 0 0 2px rgb(var(--plum-soft) / 0.8); }
  .opt[aria-pressed="true"] { color: #fff; border-color: rgb(var(--violet) / 0.55); background: rgb(var(--violet) / 0.1); }
  .opt__box { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 0.4rem; background: rgb(255 255 255 / 0.1); transition: background-color 0.3s ease, scale 0.4s var(--ease-spring); }
  .opt[aria-pressed="true"] .opt__box { background: linear-gradient(135deg, #8e24aa, #a855f7); scale: 1.1; }
  .opt__box svg { width: 0.75rem; height: 0.75rem; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.4s ease 0.05s; }
  .opt[aria-pressed="true"] .opt__box svg { stroke-dashoffset: 0; }

  /* Segmented control: a thumb slides between "Just software" and "With CorePC". */
  .seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 0.25rem; border-radius: 1rem; border: 1px solid rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.03); }
  .seg__thumb {
    position: absolute; inset: 0.25rem auto 0.25rem 0.25rem; width: calc(50% - 0.25rem); border-radius: 0.75rem;
    background: linear-gradient(135deg, rgb(var(--plum) / 0.55), rgb(var(--violet) / 0.35));
    box-shadow: inset 0 0 0 1px rgb(var(--plum-soft) / 0.35), 0 8px 24px -10px rgb(var(--violet) / 0.8);
    transition: translate 0.5s var(--ease-spring);
  }
  .seg[data-on="hw"] .seg__thumb { translate: 100% 0; }
  .seg__btn {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.7rem 0.5rem; border-radius: 0.75rem;
    font-size: 0.875rem; font-weight: 600; color: rgb(255 255 255 / 0.5); outline: none; transition: color 0.3s ease;
  }
  .seg__btn:hover { color: rgb(255 255 255 / 0.8); }
  .seg__btn:focus-visible { box-shadow: 0 0 0 2px rgb(var(--plum-soft) / 0.8); }
  .seg__btn[aria-pressed="true"] { color: #fff; }
  .seg__sub { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.04em; color: rgb(255 255 255 / 0.4); }
  .seg__btn[aria-pressed="true"] .seg__sub { color: rgb(var(--plum-soft) / 0.85); }

  /* Height-animating reveal: grid row goes 0fr -> 1fr. */
  .fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s var(--ease-out-expo), opacity 0.4s ease; }
  .fold[data-open="true"] { grid-template-rows: 1fr; opacity: 1; }

  .meter { height: 4px; border-radius: 9999px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
  .meter__fill {
    height: 100%; width: var(--w, 0%); border-radius: inherit; transform-origin: left;
    background: linear-gradient(90deg, #8e24aa, #a855f7, rgb(var(--ember-soft)));
  }
  .js .reveal:not(.is-in) .meter__fill { scale: 0 1; }
  .meter__fill { transition: scale 1.4s var(--ease-out-expo) 0.4s; }

  .price { font-variant-numeric: tabular-nums; }

  /* ── Footer ───────────────────────────────────────────────── */

  .foot-link { color: rgb(255 255 255 / 0.45); transition: color 0.25s ease; }
  .foot-link:hover { color: rgb(255 255 255 / 0.9); }
}

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes drift { from { transform: translate3d(-3%, -3%, 0); } to { transform: translate3d(4%, 3%, 0); } }
@keyframes float { 50% { transform: translate3d(0, -0.6rem, 0); } }
@keyframes breathe { from { opacity: 0.65; scale: 0.94; } to { opacity: 1; scale: 1.04; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes spin-angle { to { --angle: 360deg; } }
@keyframes grad-shift { to { background-position: 100% 0; } }
@keyframes scan { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes fill { to { scale: 1 1; } }
@keyframes mark { to { background-size: 100% 100%, auto; } }
@keyframes link-x { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes link-y { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(var(--ember) / 0.6); } 70%, 100% { box-shadow: 0 0 0 0.5rem rgb(var(--ember) / 0); } }

@keyframes swap-real { 0%, 38% { opacity: 1; filter: none; } 46%, 92% { opacity: 0; filter: blur(4px); } 100% { opacity: 1; filter: none; } }
@keyframes swap-alias { 0%, 38% { opacity: 0; filter: blur(4px); } 46%, 92% { opacity: 1; filter: none; } 100% { opacity: 0; filter: blur(4px); } }

@keyframes pipe-on {
  0% { color: #fff; background: rgb(var(--violet) / 0.2); box-shadow: 0 0 0 1px rgb(var(--violet) / 0.5), 0 0 24px -4px rgb(var(--violet) / 0.8); }
  16% { color: #fff; background: rgb(var(--violet) / 0.2); box-shadow: 0 0 0 1px rgb(var(--violet) / 0.5), 0 0 24px -4px rgb(var(--violet) / 0.8); }
  20%, 100% { color: rgb(255 255 255 / 0.32); background: transparent; box-shadow: 0 0 0 1px transparent; }
}

@keyframes rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10% { opacity: 0.9; }
  80% { opacity: 0.4; }
  100% { opacity: 0; transform: translate3d(var(--drift), -90vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .mote, .device__orbit, .device__scan { display: none; }
}