/* =================================
   Space Vanta Theme 1.0
   Motion: Find, Vision, floating screens
   Path: public/header/motion/motion.css

   Everything here is decoration on top of the static look. It is wrapped
   in prefers-reduced-motion: no-preference, so people who ask for less
   motion get the finished static state.

   Driven by (motion.js / find.js):
   - --lx / --ly   eye look (-1..1 scaled in CSS)
   - --px / --py   pointer depth on an open screen (-1..1)
   - .is-blink     eye blink on the header icon
   - data-find-state on the Find screen: idle | busy | results | empty
   Screens replay their entrance every time they open (display none ->
   block restarts the animations; also works through the URL anchor).
   ================================= */

/* with results on screen the decoration steps back so it never fights the products */
.sv-find[data-find-state="results"] .sv-frag__code,
.sv-find[data-find-state="empty"] .sv-frag__code { opacity: 0 !important; }
.sv-find[data-find-state="results"] .sv-frag__cluster--b,
.sv-find[data-find-state="empty"] .sv-frag__cluster--b { opacity: 0.18; }
.sv-frag__cluster, .sv-frag__code { transition: opacity 0.4s ease; }

/* static helpers (no motion) */
.sv-find-trigger > .sv-find-trigger__sheen {
  position: absolute;
  inset: 1px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sv-find-trigger__sheen::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -45%;
  width: 34%;
  background: linear-gradient(100deg, transparent 0%, rgba(77, 141, 255, 0.30) 50%, transparent 100%);
  transform: skewX(-20deg);
}
.sv-find-trigger__hint-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }

.sv-icon-find .sv-cube,
.sv-icon-find .sv-cube__core,
.sv-icon-find .sv-cube__float,
.sv-icon-vision .sv-eye__all,
.sv-icon-vision .sv-eye__pupil { transform-box: fill-box; transform-origin: center; }

.sv-eye__look {
  transform: translate(calc(var(--lx, 0) * 2.2px), calc(var(--ly, 0) * 1.4px));
  transition: transform 0.2s ease-out;
}
.sv-vision__look { transform: translate(calc(var(--lx, 0) * 2.6px), calc(var(--ly, 0) * 1.8px)); }

@media (prefers-reduced-motion: no-preference) {

  /* ============ header: Find trigger ============ */
  .sv-find-trigger__hint-text { transition: opacity 0.32s ease, transform 0.32s ease; }
  .sv-find-trigger__hint-text.is-out { opacity: 0; transform: translateY(-7px); }
  .sv-find-trigger__hint-text.is-in { opacity: 0; transform: translateY(7px); transition: none; }

  .sv-find-trigger .sv-cube--top-a,
  .sv-find-trigger .sv-cube--top-b,
  .sv-find-trigger .sv-cube--left-a,
  .sv-find-trigger .sv-cube--left-b,
  .sv-find-trigger .sv-cube--right-a,
  .sv-find-trigger .sv-cube--right-b,
  .sv-find-trigger .sv-cube__float { transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }

  /* the cube comes apart, light runs along the fracture */
  .sv-find-trigger:hover .sv-cube--top-a   { transform: translate(0.9px, -1.8px); }
  .sv-find-trigger:hover .sv-cube--top-b   { transform: translate(-2.2px, 2.4px); }
  .sv-find-trigger:hover .sv-cube--left-a  { transform: translate(-1.8px, -0.4px); }
  .sv-find-trigger:hover .sv-cube--left-b  { transform: translate(-1.4px, 2px); }
  .sv-find-trigger:hover .sv-cube--right-a { transform: translate(1.8px, -1.4px); }
  .sv-find-trigger:hover .sv-cube--right-b { transform: translate(2px, 2px); }
  .sv-find-trigger:hover .sv-cube__float   { transform: translate(1.8px, -1.8px) rotate(24deg); }
  .sv-find-trigger:hover .sv-cube__core    { animation: sv-core-pulse 0.9s ease-in-out infinite alternate; }
  .sv-find-trigger:hover .sv-cube__seam    { stroke-width: 1.6; }
  .sv-find-trigger:hover .sv-find-trigger__sheen::before { animation: sv-sheen 0.95s ease both; }

  /* press: the shards snap together, then Find opens */
  .sv-find-trigger:active .sv-cube { transform: translate(0, 0); transition-duration: 0.12s; }
  .sv-find-trigger:active .sv-cube__float { transform: translate(0, 0); transition-duration: 0.12s; }
  .sv-find-trigger:active { transform: scale(0.985); }
  .sv-find-trigger { transition: transform 0.15s ease; }

  /* ============ header: Vision ============ */
  .sv-eye__lid, .sv-eye__tip { transition: stroke 0.2s ease; }
  .sv-featured__vision:hover .sv-eye__pupil,
  .sv-strip__vision:hover .sv-eye__pupil { transform: scale(1.3); }
  .sv-featured__vision:hover .sv-eye__ray { animation: sv-ray-flicker 0.7s ease both; }
  .sv-featured__vision:hover .sv-eye__tip { stroke-width: 2.1; }
  .sv-featured__vision:active .sv-eye__all { transform: scaleY(0.18); transition: transform 0.12s ease; }
  .sv-icon-vision .sv-eye__all { transition: transform 0.2s ease; }
  .sv-icon-vision.is-blink .sv-eye__all { animation: sv-blink 0.3s ease; }

  /* ============ floating screens: entrance ============ */
  .sv-layer.is-open .sv-sheet,
  .sv-layer:target .sv-sheet { animation: sv-sheet-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

  .sv-layer.is-open .sv-sheet__seam,
  .sv-layer:target .sv-sheet__seam { animation: sv-seam-in 0.9s 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .sv-layer.is-open .sv-layer__close,
  .sv-layer:target .sv-layer__close { animation: sv-fade-in 0.4s 0.35s both; }
  .sv-layer__close span { transition: background 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sv-layer__close:hover span:first-child { transform: rotate(135deg); }
  .sv-layer__close:hover span:last-child { transform: rotate(45deg); }

  /* broken metal flies in, then drifts */
  .sv-layer.is-open .sv-frag__cluster--a,
  .sv-layer:target .sv-frag__cluster--a { animation: sv-frag-a 0.95s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both, sv-drift 9s 1.1s ease-in-out infinite alternate; }
  .sv-layer.is-open .sv-frag__cluster--b,
  .sv-layer:target .sv-frag__cluster--b { animation: sv-frag-b 0.95s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both, sv-drift 11s 1.2s ease-in-out infinite alternate-reverse; }
  .sv-layer.is-open .sv-frag__seam,
  .sv-layer:target .sv-frag__seam { stroke-dasharray: 120; animation: sv-draw-120 0.8s 0.55s ease both; }
  .sv-layer.is-open .sv-frag__mark,
  .sv-layer:target .sv-frag__mark { animation: sv-fade-in 0.5s 0.5s both; }
  .sv-layer.is-open .sv-frag__code,
  .sv-layer:target .sv-frag__code { animation: sv-fade-in 0.6s 0.7s both; }

  /* ============ Find screen ============ */
  .sv-find.is-open .sv-sheet__eyebrow,
  .sv-find:target .sv-sheet__eyebrow { animation: sv-rise-soft 0.5s 0.12s both; }

  .sv-find.is-open .sv-find__field,
  .sv-find:target .sv-find__field { animation: sv-rise-soft 0.55s 0.18s both; }

  /* the cube assembles from its pieces */
  .sv-find.is-open .sv-find__icon .sv-cube,
  .sv-find:target .sv-find__icon .sv-cube { animation: sv-assemble 0.7s calc(0.2s + var(--k, 0) * 55ms) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .sv-find__icon .sv-cube--top-a   { --k: 0; --fx: 5px;  --fy: -9px; --fr: 20deg; }
  .sv-find__icon .sv-cube--top-b   { --k: 1; --fx: -9px; --fy: -4px; --fr: -24deg; }
  .sv-find__icon .sv-cube--left-a  { --k: 2; --fx: -10px; --fy: 3px; --fr: 18deg; }
  .sv-find__icon .sv-cube--left-b  { --k: 3; --fx: -5px; --fy: 10px; --fr: -16deg; }
  .sv-find__icon .sv-cube--right-a { --k: 4; --fx: 10px; --fy: -4px; --fr: 22deg; }
  .sv-find__icon .sv-cube--right-b { --k: 5; --fx: 8px;  --fy: 10px; --fr: -20deg; }
  .sv-find.is-open .sv-find__icon .sv-cube__core,
  .sv-find:target .sv-find__icon .sv-cube__core { animation: sv-ignite 0.8s 0.7s both; }

  /* the travelling light: once on open, loops while Find thinks */
  .sv-find.is-open .sv-find__scan,
  .sv-find:target .sv-find__scan { animation: sv-scan-once 1.1s 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }
  .sv-find[data-find-state="busy"] .sv-find__scan { animation: sv-scan-loop 1.05s linear infinite; }
  .sv-find[data-find-state="results"] .sv-find__scan { animation: sv-scan-once 0.7s cubic-bezier(0.4, 0, 0.2, 1) both; }

  /* while thinking: the cube's shards breathe apart and the core pulses */
  .sv-find[data-find-state="busy"] .sv-find__icon .sv-cube { animation: sv-think 0.9s calc(var(--k, 0) * 70ms) ease-in-out infinite alternate; }
  .sv-find[data-find-state="busy"] .sv-find__icon .sv-cube__core { animation: sv-core-pulse 0.6s ease-in-out infinite alternate; }

  .sv-find__tag { animation: sv-tag-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .sv-find__understood-label { animation: sv-fade-in 0.4s both; }

  /* blocks and chips come in as a sequence */
  .sv-find.is-open .sv-find__block,
  .sv-find:target .sv-find__block { animation: sv-rise-soft 0.55s calc(0.3s + var(--b, 0) * 70ms) both; }
  .sv-find__block:nth-child(2) { --b: 1; }
  .sv-find__block:nth-child(3) { --b: 2; }
  .sv-find__block:nth-child(4) { --b: 3; }
  .sv-find__block:nth-child(5) { --b: 4; }

  .sv-find__chips button { transition: background 0.18s ease, color 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sv-find__chips button:hover { transform: translateY(-2px); }
  .sv-find__chips button:active { transform: translateY(0) scale(0.97); }

  /* product cards: staggered, only the new ones (find.js marks the rest .is-kept) */
  .sv-find__card:not(.is-kept) { animation: sv-card-in 0.5s calc(min(var(--i, 0), 9) * 45ms) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .sv-find__card:hover .sv-find__card-media img,
  .sv-find__card.is-active .sv-find__card-media img { transform: scale(1.05); }
  .sv-find__card-media img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

  .sv-find[data-find-state="busy"] .sv-find__results { opacity: 0.55; transition: opacity 0.2s ease; }
  .sv-find__results { transition: opacity 0.25s ease; }

  /* ============ Vision screen ============ */
  .sv-vision.is-open .sv-sheet__eyebrow,
  .sv-vision:target .sv-sheet__eyebrow { animation: sv-rise-soft 0.5s 0.15s both; }

  .sv-vision.is-open .sv-vision__word > span,
  .sv-vision:target .sv-vision__word > span { animation: sv-rise 0.75s calc(0.22s + var(--w, 0) * 90ms) cubic-bezier(0.2, 0.8, 0.2, 1) both; }

  .sv-vision.is-open .sv-vision__lead,
  .sv-vision:target .sv-vision__lead { animation: sv-rise-soft 0.7s 0.6s both; }

  /* art: orbits turn, the eye draws itself, the pupil ignites, the ray fires */
  .sv-vision__orbit--1 { animation: sv-spin 46s linear infinite; }
  .sv-vision__orbit--2 { animation: sv-spin 30s linear infinite reverse; }
  .sv-vision__orbit--3 { animation: sv-spin 20s linear infinite; }
  .sv-vision.is-open .sv-vision__orbit--1,
  .sv-vision:target .sv-vision__orbit--1 { animation: sv-orbit-in 0.9s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both, sv-spin 46s 1s linear infinite; }
  .sv-vision.is-open .sv-vision__orbit--2,
  .sv-vision:target .sv-vision__orbit--2 { animation: sv-orbit-in 0.9s 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both, sv-spin 30s 1.2s linear infinite reverse; }
  .sv-vision.is-open .sv-vision__orbit--3,
  .sv-vision:target .sv-vision__orbit--3 { animation: sv-orbit-in 0.9s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, sv-spin 20s 1.4s linear infinite; }

  .sv-vision.is-open .sv-vision__lid,
  .sv-vision:target .sv-vision__lid { animation: sv-draw-1 0.95s 0.45s cubic-bezier(0.5, 0, 0.2, 1) both; }
  .sv-vision.is-open .sv-vision__tip,
  .sv-vision:target .sv-vision__tip { animation: sv-fade-in 0.4s 1.2s both; }
  .sv-vision.is-open .sv-vision__iris,
  .sv-vision.is-open .sv-vision__facet,
  .sv-vision:target .sv-vision__iris,
  .sv-vision:target .sv-vision__facet { transform-box: fill-box; transform-origin: center; animation: sv-pop 0.6s 1s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  .sv-vision.is-open .sv-vision__pupil,
  .sv-vision:target .sv-vision__pupil { transform-box: fill-box; transform-origin: center; animation: sv-ignite 0.9s 1.25s both; }
  .sv-vision.is-open .sv-vision__ray,
  .sv-vision:target .sv-vision__ray { stroke-dasharray: 3.8; animation: sv-draw-ray 0.45s 1.55s ease-out both, sv-ray-breathe 3.6s 2.2s ease-in-out infinite; }
  .sv-vision.is-open .sv-vision__bit,
  .sv-vision:target .sv-vision__bit { animation: sv-fade-in 0.5s 0.9s both; }

  .sv-vision.is-open .sv-vision__pillars li,
  .sv-vision:target .sv-vision__pillars li { animation: sv-rise-soft 0.7s calc(0.75s + var(--n, 0) * 110ms) both; }
  .sv-vision.is-open .sv-vision__eco .sv-sheet__eyebrow,
  .sv-vision:target .sv-vision__eco .sv-sheet__eyebrow { animation: sv-rise-soft 0.6s 1.05s both; }
  .sv-vision.is-open .sv-vision__node,
  .sv-vision:target .sv-vision__node { animation: sv-rise-soft 0.7s calc(1.1s + var(--n, 0) * 100ms) both; }
  .sv-vision.is-open .sv-vision__nodes::after,
  .sv-vision:target .sv-vision__nodes::after { transform-origin: left; animation: sv-line-in 0.9s 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  /* a light keeps travelling toward what comes next */
  .sv-vision__node[data-state="live"] .sv-eco__core { transform-box: fill-box; transform-origin: center; animation: sv-core-pulse 2.6s ease-in-out infinite alternate; }
  .sv-vision__pillars li:hover .sv-pi__ring { animation: sv-dash 2.4s linear infinite; }
  .sv-vision__pillars li:hover .sv-pi__bit { animation: sv-core-pulse 0.7s ease-in-out infinite alternate; }

  /* ============ keyframes ============ */
  @keyframes sv-sheen { from { left: -45%; } to { left: 120%; } }
  @keyframes sv-core-pulse { from { transform: scale(0.85); } to { transform: scale(1.35); } }
  @keyframes sv-ray-flicker { 0% { opacity: 0.2; } 25% { opacity: 1; } 45% { opacity: 0.35; } 100% { opacity: 1; } }
  @keyframes sv-blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(0.1); } }
  @keyframes sv-sheet-in { from { opacity: 0; transform: translate(var(--ox, 0px), var(--oy, 30px)) scale(0.94); } }
  @keyframes sv-seam-in { from { opacity: 0; transform: translateX(-70px); } }
  @keyframes sv-fade-in { from { opacity: 0; } }
  @keyframes sv-rise-soft { from { opacity: 0; transform: translateY(14px); } }
  @keyframes sv-rise { from { transform: translateY(112%); } }
  @keyframes sv-frag-a { from { opacity: 0; transform: translate(60px, -40px) rotate(6deg); } }
  @keyframes sv-frag-b { from { opacity: 0; transform: translate(-60px, 40px) rotate(-6deg); } }
  @keyframes sv-drift { from { translate: 0 0; } to { translate: 6px -5px; } }
  @keyframes sv-draw-120 { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
  @keyframes sv-draw-1 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes sv-draw-ray { from { stroke-dashoffset: 3.8; } to { stroke-dashoffset: 0; } }
  @keyframes sv-ray-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  @keyframes sv-assemble { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)); } }
  @keyframes sv-think { from { transform: translate(0, 0); } to { transform: translate(calc(var(--fx, 0) * 0.14), calc(var(--fy, 0) * 0.14)); } }
  @keyframes sv-ignite { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.7); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes sv-pop { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes sv-scan-once { 0% { left: -96px; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  @keyframes sv-scan-loop { 0% { left: -96px; opacity: 1; } 100% { left: 100%; opacity: 1; } }
  @keyframes sv-tag-in { from { opacity: 0; transform: translateX(-10px); } }
  @keyframes sv-card-in { from { opacity: 0; transform: translateY(16px); } }
  @keyframes sv-orbit-in { from { opacity: 0; scale: 0.65; } }
  @keyframes sv-line-in { from { transform: scaleX(0); opacity: 0; } }
  @keyframes sv-spin { to { transform: rotate(360deg); } }
  @keyframes sv-dash { to { stroke-dashoffset: -65; } }
}

@media (max-width: 900px) {
  .sv-frag__code { display: none; }
}