/* Motion. Everything here is transform and opacity (cheap to draw), and all of it stands still for anyone who
   has asked their system for less motion. */

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

/* moving between pages: a short cross-fade instead of a white flash */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}
@keyframes up-blur {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    filter: blur(10px);
  }
}

/* ---------- the light behind the page drifts ---------- */
.sky::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -420px;
  height: 900px;
  background:
    radial-gradient(38% 46% at 30% 52%, rgba(182, 15, 70, 0.42), transparent 70%),
    radial-gradient(34% 44% at 68% 46%, rgba(213, 146, 255, 0.3), transparent 70%),
    radial-gradient(26% 36% at 50% 70%, rgba(224, 69, 123, 0.2), transparent 70%);
  filter: blur(60px);
  opacity: 0.75;
  animation: drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift {
  0% {
    transform: translate3d(-4%, 0, 0) rotate(-3deg) scale(1);
  }
  50% {
    transform: translate3d(3%, 30px, 0) rotate(2deg) scale(1.08);
  }
  100% {
    transform: translate3d(6%, -10px, 0) rotate(4deg) scale(1.02);
  }
}

/* ---------- the header settles once the page moves ---------- */
.site-head {
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}
.site-head:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- hero: each line arrives in turn ---------- */
.hero {
  position: relative;
}
.hero > .wrap {
  position: relative;
  z-index: 1;
}
.hero > .wrap > * {
  animation: up 0.9s var(--ease) backwards;
}
.hero > .wrap > :nth-child(1) { animation-delay: 0.05s; }
.hero > .wrap > :nth-child(2) { animation-duration: 1.1s; animation-delay: 0.14s; }
.hero > .wrap > :nth-child(3) { animation-delay: 0.3s; }
.hero > .wrap > :nth-child(4) { animation-delay: 0.4s; }
.hero > .wrap > :nth-child(5) { animation-delay: 0.5s; }
.strip {
  animation: up 1.1s var(--ease) 0.62s backwards;
}

/* a slow glint across the wordmark, over the gradient itself */
.hero h1 .grad {
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%),
    linear-gradient(100deg, #b60f46 0%, #d592ff 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  animation: glint 6.5s var(--ease) 1.6s infinite;
}
@keyframes glint {
  0% {
    background-position: 130% 0, 0 0;
  }
  38%,
  100% {
    background-position: -40% 0, 0 0;
  }
}

/* the server's sparkles, a few of them, coming and going */
.sparks {
  position: absolute;
  inset: 0 0 auto 0;
  height: 620px;
  pointer-events: none;
  overflow: hidden;
}
.sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 14px);
  height: var(--s, 14px);
  color: var(--c, #d592ff);
  opacity: 0;
  animation: twinkle var(--t, 5s) ease-in-out var(--d, 0s) infinite;
}
.sparks svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 0 8px currentColor);
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
  }
  50% {
    opacity: 0.95;
    transform: scale(1) rotate(25deg);
  }
}
.pill .i {
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    transform: scale(1.25) rotate(20deg);
    opacity: 0.75;
  }
}

/* ---------- buttons: a sheen crosses the main one, the arrow leans ---------- */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn--primary:hover::after {
  transform: translateX(120%);
  transition: transform 0.75s var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(1px) scale(0.985);
}
.btn .i {
  transition: transform 0.25s var(--ease);
}
.btn:hover .i:last-child {
  transform: translateX(3px);
}
.ip .i {
  transition: transform 0.2s var(--ease);
}
.ip:hover .i {
  transform: scale(1.15);
}

/* ---------- cards lean towards the pointer ---------- */
.card {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: border-color 0.25s var(--ease), transform 0.45s var(--ease), box-shadow 0.35s var(--ease);
  will-change: transform;
}
.card:hover {
  --lift: -4px;
  transition: border-color 0.25s var(--ease), transform 0.12s linear, box-shadow 0.35s var(--ease);
  box-shadow: 0 30px 70px -40px rgba(213, 146, 255, 0.5);
}

/* the best-value card: its border turns */
.card--glow {
  background:
    linear-gradient(180deg, #16101d, #0f0b15) padding-box,
    conic-gradient(from var(--spin), #b60f46, #d592ff, #b60f46, #d592ff, #b60f46) border-box;
  animation: spin 7s linear infinite;
}
.card--glow:hover {
  box-shadow: 0 34px 90px -36px rgba(213, 146, 255, 0.75);
}
@keyframes spin {
  to {
    --spin: 360deg;
  }
}
.badge {
  animation: breathe 2.8s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    box-shadow: 0 0 0 6px rgba(213, 146, 255, 0.16), 0 0 26px rgba(213, 146, 255, 0.55);
  }
}
.tile {
  transition: transform 0.35s var(--ease);
}
.card:hover .tile,
.row:hover .tile,
.points li:hover .tile {
  transform: scale(1.08) rotate(-4deg);
}

/* ---------- groups arrive one after another ---------- */
.js .stagger:not(.in) > * {
  opacity: 0;
}
.js .stagger.in > * {
  animation: up 0.8s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 85ms);
}
/* the best-value card keeps its turning border once it has arrived */
.js .stagger.in > .card--glow {
  animation: up 0.8s var(--ease) backwards, spin 7s linear infinite;
  animation-delay: calc(var(--i, 0) * 85ms), 0s;
}
.stagger > :nth-child(2) { --i: 1; }
.stagger > :nth-child(3) { --i: 2; }
.stagger > :nth-child(4) { --i: 3; }
.stagger > :nth-child(5) { --i: 4; }
.stagger > :nth-child(6) { --i: 5; }
.stagger > :nth-child(7) { --i: 6; }
.stagger > :nth-child(8) { --i: 7; }
.stagger > :nth-child(n + 9) { --i: 8; }

/* ---------- small things ---------- */
.pick,
.step,
.note,
.row {
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pick:hover,
.step:hover,
.row:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
}
.pick:hover {
  border-color: color-mix(in srgb, var(--tier) 45%, transparent);
  box-shadow: 0 26px 60px -40px var(--tier);
}
.clip__shot img {
  transition: transform 0.6s var(--ease);
}
.clip:hover .clip__shot img {
  transform: scale(1.05);
}
.bag__n.bump {
  animation: bump 0.45s var(--ease);
}
@keyframes bump {
  40% {
    transform: scale(1.5);
  }
}
.figure strong {
  font-variant-numeric: tabular-nums;
}
.nav a {
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* questions open smoothly where the browser can do it */
:root {
  interpolate-size: allow-keywords;
}
.faq details::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.35s var(--ease), content-visibility 0.35s allow-discrete;
}
.faq details[open]::details-content {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .sparks {
    display: none;
  }
  .js .stagger:not(.in) > * {
    opacity: 1;
  }
  .card {
    transform: none;
  }
}