/* ==========================================================================
   Sprosimo — motion
   Loaded after styles.css. Everything here degrades to "static but correct"
   under prefers-reduced-motion (bottom of file). Nothing in this file changes
   layout: only transforms, opacity, shadows and backgrounds, so no animation
   can push the page sideways or resize a container.
   ========================================================================== */

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

/* THE REAL FAILSAFE.
   Adding .in is not enough on its own. CSS transitions are driven by the
   rendering steps, so in a throttled, occluded or backgrounded tab the 0 -> 1
   opacity transition never advances: the element sits at opacity 0 with .in
   already applied, and the content is permanently invisible. Measured on this
   site -- 17 of 30 revealed elements, the whole hero among them.
   This kills the transition outright and forces the end state, so app.js's
   4-second failsafe can actually rescue the page. Also applied when printing,
   where no transition ever runs. */
html.reveal-off [data-reveal],
html.reveal-off [data-reveal].in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
[data-reveal-delay="1"] { transition-delay: .07s; }
[data-reveal-delay="2"] { transition-delay: .14s; }
[data-reveal-delay="3"] { transition-delay: .21s; }
[data-reveal-delay="4"] { transition-delay: .28s; }
[data-reveal-delay="5"] { transition-delay: .35s; }

/* ---------- header condenses on scroll ---------- */
header.site { transition: box-shadow .25s ease, background .25s ease; }
header.site .wrap { transition: height .2s ease; }
header.site.scrolled {
  background: #ffffffee;
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px #10121f66;
}
header.site.scrolled .wrap { height: 58px; }

/* ---------- animated gradient text ---------- */
.grad { animation: gradshift 10s ease-in-out infinite; }
@keyframes gradshift {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* ---------- drifting orbs behind the hero ---------- */
.orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(64px); }
.orb-1 { width: 420px; height: 420px; top: -130px; left: -90px;  background: #5b4bf533; animation: drift1 22s ease-in-out infinite; }
.orb-2 { width: 330px; height: 330px; top: 150px;  right: -70px; background: #00bfd82e; animation: drift2 27s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,60px) scale(.9); } }

/* ---------- cursor spotlight on cards ----------
   NOTE: no `overflow: hidden` on the card itself. The "Most chosen" badge sits
   at top:-13px, deliberately straddling the card's top edge, and hiding
   overflow sliced it in half. The spotlight is contained by giving the
   pseudo-element the card's own radius instead. */
.feature, .plan, .card.lift {
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature:before, .plan:before, .card.lift:before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: inherit; overflow: hidden;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), #5b4bf514, transparent 62%);
}
.feature:hover:before, .plan:hover:before, .card.lift:hover:before { opacity: 1; }
.feature > *, .plan > *, .card.lift > * { position: relative; z-index: 1; }
.feature:hover, .card.lift:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.plan.popular:hover { box-shadow: 0 0 0 1px #b9b0ff, var(--sh-4); }

/* ---------- icon flourishes ---------- */
.feature .ico, .plan .picon { transition: transform .3s cubic-bezier(.34,1.5,.64,1), box-shadow .3s ease; }
.feature:hover .ico { transform: scale(1.09) rotate(-5deg); }
.plan:hover .picon { transform: scale(1.07) rotate(-4deg); }
.step:before { transition: transform .3s cubic-bezier(.34,1.5,.64,1), box-shadow .3s ease; }
.step:hover:before { transform: scale(1.09); }

/* ---------- button shine ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary:after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, #ffffff55, transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover:after { left: 130%; }

/* ---------- logo marquee ---------- */
.marquee {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; gap: 54px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track div {
  font-weight: 640; font-size: 16.5px; letter-spacing: -.02em; color: var(--ink-3);
  white-space: nowrap; transition: color .2s ease; display: flex; align-items: center; gap: 9px;
}
.marquee-track div:hover { color: var(--ink-2); }
.marquee-track svg { width: 17px; height: 17px; fill: currentColor; opacity: .7; flex: 0 0 auto; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- demo panel ---------- */
.widget { transition: box-shadow .35s ease; }
.widget .msg { animation: msgin .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes msgin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.suggest button { transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.suggest button:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }

/* ---------- FAQ ---------- */
details.faq { transition: border-color .2s ease, box-shadow .2s ease; }
details.faq:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
details.faq summary:before { transition: transform .25s ease; }
details.faq[open] summary:before { transform: rotate(180deg); }
details.faq .body { animation: msgin .3s ease both; }

/* ---------- small hover life ---------- */
.app-nav a { transition: color .18s ease, border-color .18s ease; }
.table-wrap tbody tr { transition: background .15s ease; }
.stat { transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.stat:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
.logos div { transition: color .2s ease, transform .2s ease; }
.logos div:hover { color: var(--ink-2); transform: translateY(-2px); }
.plan li { transition: color .18s ease; }
.plan:hover li { color: var(--ink); }
.legal a, details.faq a { transition: text-decoration-color .2s ease; }
.legal a:hover, details.faq a:hover { text-decoration-color: var(--violet); }
.eyebrow:before { transition: width .5s ease; }

/* ---------- the highlighted plan breathes ---------- */
.plan.popular { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 1px #c9c2ff, var(--sh-2); }
  50%      { box-shadow: 0 0 0 1px #b9b0ff, var(--sh-3); }
}

/* ---------- ambient glow drift ---------- */
@keyframes glowpulse {
  0%, 100% { opacity: .13; transform: scale(1); }
  50%      { opacity: .21; transform: scale(1.1); }
}
.glow { animation: glowpulse 16s ease-in-out infinite; }
.glow-cyan { animation-duration: 21s; animation-delay: -6s; }
.glow-rose { animation-duration: 25s; animation-delay: -12s; }

/* ==========================================================================
   Colour variety
   Feature and step icons cycle through three accents so a grid of six cards
   does not read as one flat block of violet.
   ========================================================================== */
.feature:nth-child(3n+2) .ico { background: linear-gradient(135deg, #00bfd8, #0aa2e0); box-shadow: 0 5px 14px -3px #00bfd866; }
.feature:nth-child(3n+3) .ico { background: linear-gradient(135deg, #ff5c8a, #ff7a4d); box-shadow: 0 5px 14px -3px #ff5c8a66; }
.feature:nth-child(3n+2):before { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), #00bfd814, transparent 62%); }
.feature:nth-child(3n+3):before { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), #ff5c8a12, transparent 62%); }

.step:nth-child(2):before { background: linear-gradient(135deg, #00bfd8, #0aa2e0); box-shadow: 0 5px 14px -3px #00bfd866; }
.step:nth-child(3):before { background: linear-gradient(135deg, #ff5c8a, #ff7a4d); box-shadow: 0 5px 14px -3px #ff5c8a66; }

.plan:nth-child(2) .picon { background: linear-gradient(135deg, #00bfd8, #0aa2e0); box-shadow: 0 5px 14px -3px #00bfd866; }
.plan:nth-child(3) .picon { background: linear-gradient(135deg, #ff5c8a, #ff7a4d); box-shadow: 0 5px 14px -3px #ff5c8a66; }

.band > div:nth-child(2) .n { background: linear-gradient(135deg, #00bfd8, #0aa2e0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.band > div:nth-child(3) .n { background: linear-gradient(135deg, #ff5c8a, #ff7a4d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.band > div:nth-child(4) .n { background: linear-gradient(135deg, #ff9f43, #f97316); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee-track, .orb, .glow, .plan.popular { animation: none !important; }
}