/* Required 12 magnetic CTAs, 13 liquid format buttons, 15 navigation underline.
   Existing pointer enhancements remain available without changing actions. */

/* 08 — the navigation line draws from left to right. */
.desktop-nav > a, .mobile-nav > a { position: relative; }
.desktop-nav > a::after, .mobile-nav > a::after {
  content: ''; position: absolute; pointer-events: none;
  inset: auto 0 -7px; height: 2px; border-radius: 2px;
  background: var(--gradient-button); transform: scaleX(0); transform-origin: left;
  transition: transform 280ms cubic-bezier(.22,.68,.25,1);
}
.mobile-nav > a::after { bottom: 4px; right: auto; width: min(180px, 100%); }
.desktop-nav > a:focus-visible::after, .mobile-nav > a:focus-visible::after,
.mobile-nav > a:active::after { transform: scaleX(1); }

/* 11 — small real perspective rotations, with an equivalent keyboard lift. */
.format-card:not(.format-carousel-ready .format-card) {
  --tilt-x: 0deg; --tilt-y: 0deg;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: transform 350ms cubic-bezier(.2,.7,.2,1), box-shadow 350ms;
}
.format-card:not(.format-carousel-ready .format-card):hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg); }
.format-card:not(.format-carousel-ready .format-card):has(:focus-visible), .format-card:not(.format-carousel-ready .format-card).is-touch-active {
  transform: perspective(1000px) rotateX(-2deg) rotateY(2deg) translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.format-card:not(.format-carousel-ready .format-card).is-pointer-tilting {
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-4px);
  box-shadow: var(--shadow-lift); transition-duration: 120ms;
}

/* 12 — a subtle light follows the pointer beneath the readable card content. */
.principle { position: relative; isolation: isolate; overflow: hidden; }
.principle > * { position: relative; z-index: 1; }
.principle::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(180px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    color-mix(in srgb, var(--color-lilac) 72%, transparent),
    color-mix(in srgb, var(--color-pink) 30%, transparent) 45%, transparent 78%);
  opacity: 0; transition: opacity 240ms ease;
}
.principle.is-pointer-lit::before, .principle.is-touch-active::before,
.principle:focus-within::before { opacity: 1; }

/* 12 — the whole visible button follows the pointer; its native hit area is fixed.
   The surface also accepts clicks, including its small translated overhang. */
.button.magnetic-button, .button.magnetic-button:hover, .button.magnetic-button:active {
  background: transparent; border-color: transparent; box-shadow: none; transform: none;
}
.button.magnetic-button.has-ripple { overflow: visible; }
.magnetic-button > .magnetic-surface {
  position: absolute; inset: -1px; border: 1px solid transparent; border-radius: inherit;
  background: var(--gradient-button); background-size: 150% 150%; box-shadow: var(--shadow-button);
  overflow: hidden; pointer-events: auto; font-size: 0; line-height: 0;
  transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px));
  transition: transform 350ms cubic-bezier(.2,.8,.25,1), box-shadow 300ms, background-position 500ms;
}
.button-outline.magnetic-button > .magnetic-surface {
  background: var(--surface-glass-strong); border-color: var(--color-line);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--color-purple) 7%, transparent);
}
.magnetic-button:hover > .magnetic-surface { box-shadow: var(--shadow-lift); background-position: 100% 100%; }
.button-outline.magnetic-button:hover > .magnetic-surface { background: var(--surface-lilac); }
.button.magnetic-button > .magnetic-content {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  font: inherit; line-height: inherit; pointer-events: none; position: relative; z-index: 1;
  transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px));
  transition: transform 350ms cubic-bezier(.2,.8,.25,1);
}
.magnetic-button.is-pointer-magnetic > .magnetic-content,
.magnetic-button.is-pointer-magnetic > .magnetic-surface { transition-duration: 150ms; }
.magnetic-button > .magnetic-content > span { font-size: 23px; line-height: 1; }

/* 13 — an organic wave fills format controls on hover or keyboard focus. */
.round-button.liquid-button {
  position: relative; isolation: isolate; overflow: hidden; background: var(--surface-lilac);
  border-color: var(--color-primary); color: var(--color-purple);
  transition: color 260ms, box-shadow 300ms;
}
.round-button.liquid-button:hover { transform: none; }
.liquid-button > .liquid-label { position: relative; z-index: 1; pointer-events: none; }
.liquid-button > .liquid-wave {
  display: block; position: absolute; left: -60%; top: -10%; width: 220%; height: 230%;
  border-radius: 42% 46% 40% 48%; background: var(--gradient-button); pointer-events: none;
  transform: translateY(60%) rotate(-18deg);
  transition: transform 650ms cubic-bezier(.22,.68,.25,1);
}
.liquid-button:focus-visible, .liquid-button.is-liquid-touch { color: var(--color-white); }
.liquid-button:focus-visible > .liquid-wave,
.liquid-button.is-liquid-touch > .liquid-wave { transform: translateY(-22%) rotate(28deg); }

/* 14 — transient, non-interactive click rings; clipped to each actual button. */
.button.has-ripple, .round-button.has-ripple { position: relative; overflow: hidden; isolation: isolate; }
.button > .pointer-ripple, .magnetic-surface > .pointer-ripple, .round-button > .pointer-ripple {
  position: absolute; display: block; pointer-events: none; user-select: none;
  border-radius: 50%; margin: 0; padding: 0; z-index: 2;
  background: color-mix(in srgb, var(--color-white) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-white) 70%, transparent);
  transform: translate(-50%, -50%) scale(0); opacity: .8;
}
.button-outline > .pointer-ripple, .button-outline > .magnetic-surface > .pointer-ripple {
  background: color-mix(in srgb, var(--color-lilac) 42%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 48%, transparent);
}

/* 15 — the directional arrow leaves and returns once, without moving the link. */
.text-link > span[aria-hidden] { display: inline-block; }
.text-link:hover { gap: 14px; }
.text-link:focus-visible > span[aria-hidden], .text-link:active > span[aria-hidden] {
  animation: vera-15-arrow-flight 460ms cubic-bezier(.25,.6,.3,1);
}
.text-link.arrow-down:focus-visible > span[aria-hidden],
.text-link.arrow-down:active > span[aria-hidden] { animation-name: vera-15-arrow-down; }
@keyframes vera-15-arrow-flight {
  0%, 100% { transform: translate(0,0); opacity: 1; }
  45% { transform: translate(8px,-8px); opacity: 0; }
  46% { transform: translate(-8px,8px); opacity: 0; }
}
@keyframes vera-15-arrow-down {
  0%, 100% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(9px); opacity: 0; }
  46% { transform: translateY(-9px); opacity: 0; }
}

/* 16 — an optional glow follows the real cursor; the system cursor stays intact. */
.pointer-glow {
  position: fixed; inset: 0 auto auto 0; width: 0; height: 0; z-index: 10000;
  pointer-events: none; opacity: 0; transition: opacity 180ms;
}
.pointer-glow::before {
  content: ''; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-lilac) 22%, transparent), transparent 72%);
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 22%, transparent);
  transform: scale(1); transition: transform 220ms, background 220ms, border-color 220ms;
}
.pointer-glow.is-visible { opacity: 1; }
.pointer-glow.is-interactive::before {
  transform: scale(1.45); border-color: color-mix(in srgb, var(--color-purple) 60%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-pink) 28%, transparent), transparent 75%);
}

/* 18 — only the narrow frame animates; carousel card transforms stay untouched. */
@property --format-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.format-card { position: relative; isolation: isolate; }
.format-card::after {
  content: ''; position: absolute; inset: -2px; padding: 3px; border-radius: inherit;
  pointer-events: none; opacity: 0; z-index: 2;
  background: conic-gradient(from var(--format-border-angle), transparent 0deg,
    var(--color-primary) 75deg, var(--color-pink) 115deg, transparent 160deg,
    transparent 205deg, var(--color-purple) 275deg, var(--color-lilac) 310deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-primary) 65%, transparent));
  transition: opacity 200ms;
}
.format-card:focus-within::after, .format-card:active::after {
  opacity: 1; animation: vera-18-glowing-border 3200ms linear infinite;
}
@keyframes vera-18-glowing-border { to { --format-border-angle: 360deg; } }
@media (hover: hover) and (pointer: fine) {
  .format-card:hover::after { opacity: 1; animation: vera-18-glowing-border 3200ms linear infinite; }
  .liquid-button:hover { color: var(--color-white); }
  .liquid-button:hover > .liquid-wave { transform: translateY(-22%) rotate(28deg); }
  .desktop-nav > a:hover::after, .mobile-nav > a:hover::after { transform: scaleX(1); }
  .text-link:hover > span[aria-hidden] { animation: vera-15-arrow-flight 460ms cubic-bezier(.25,.6,.3,1); }
  .text-link.arrow-down:hover > span[aria-hidden] { animation-name: vera-15-arrow-down; }
}
@media (hover: none), (pointer: coarse) {
  .pointer-glow { display: none; }
  .format-card:not(.format-carousel-ready .format-card):hover, .principle:hover { transform: none; box-shadow: var(--shadow-card); }
  .format-card:not(.format-carousel-ready .format-card).is-touch-active { transform: perspective(1000px) rotateX(-2deg) rotateY(2deg) translateY(-3px); }
}
/* Stopped sessions and reduced motion must never leave a hover transform behind. */
html.reduce-motion .format-card:not(.format-carousel-ready .format-card), html.reduce-motion .principle,
html.reduce-motion .magnetic-button > .magnetic-content,
html.reduce-motion .magnetic-button > .magnetic-surface { transform: none !important; }
html.reduce-motion .principle::before { opacity: 0 !important; }
html.reduce-motion .text-link > span { animation: none !important; }
html.reduce-motion .pointer-ripple { display: none; }
html.reduce-motion .desktop-nav > a::after, html.reduce-motion .mobile-nav > a::after,
html.reduce-motion .format-card, html.reduce-motion .principle::before,
html.reduce-motion .magnetic-button > .magnetic-content,
html.reduce-motion .magnetic-button > .magnetic-surface,
html.reduce-motion .liquid-button,
html.reduce-motion .liquid-button > .liquid-wave { transition: none !important; }
html.pointer-motion-suspended .text-link > span { animation: none !important; }
html.pointer-motion-suspended .format-card::after { animation-play-state: paused !important; }
html.reduce-motion .pointer-glow, html.pointer-motion-suspended .pointer-glow { display: none; }
html.reduce-motion .format-card::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .format-card:not(.format-carousel-ready .format-card), .principle, .magnetic-button > .magnetic-content,
  .magnetic-button > .magnetic-surface { transform: none !important; }
  .principle::before { opacity: 0 !important; }
  .text-link > span { animation: none !important; }
  .pointer-ripple { display: none; }
  .desktop-nav > a::after, .mobile-nav > a::after, .format-card,
  .principle::before, .magnetic-button > .magnetic-content,
  .magnetic-button > .magnetic-surface, .liquid-button,
  .liquid-button > .liquid-wave { transition: none !important; }
  .pointer-glow { display: none; }
  .format-card::after { animation: none !important; transition: none !important; }
}