/* ==========================================================================
 Thirdslot — animated version (loaded on top of styles.css)
 Everything is scoped to html.anim and disabled for reduced-motion users.
 ========================================================================== */

/* Gated by html.anim, which animations.js only adds when the visitor has not asked for reduced motion. */

/* ---------- Keyframes ---------- */
@keyframes riseIn   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { 0% { opacity: 0; transform: scale(0.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cardIn   { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes beforeIn { from { opacity: 0; transform: translate(-90px, 70px) rotate(-16deg); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes afterIn  { from { opacity: 0; transform: translate(90px, 70px) rotate(15deg); } to { opacity: 1; transform: rotate(5deg); } }
@keyframes arrowIn  { from { opacity: 0; transform: translate(-16px, -10px); } to { opacity: 1; transform: none; } }
@keyframes drift    { from { transform: translate3d(-5%, -2%, 0) scale(1.08); } to { transform: translate3d(5%, 4%, 0) scale(1.22); } }
@keyframes tick     { 0%, 4% { transform: scale(0); opacity: 0; } 12% { transform: scale(1.35); opacity: 1; } 18%, 86% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(0); opacity: 0; } }
@keyframes rowGlow  { 0%, 100% { box-shadow: 0 4px 14px rgba(26, 26, 46, 0.05); } 50% { box-shadow: 0 8px 26px rgba(74, 70, 211, 0.22); } }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(237, 29, 29, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(237, 29, 29, 0); } }
@keyframes wiggle   { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
@keyframes fill     { 0% { width: 0; } 55% { width: 100%; } 85% { width: 100%; } 100% { width: 0; } }
@keyframes barLoop  { 0% { transform: scaleY(0); } 14% { transform: scaleY(1); } 82% { transform: scaleY(1); } 92%, 100% { transform: scaleY(0); } }
@keyframes badgePop { 0%, 20% { transform: scale(0); opacity: 0; } 30% { transform: scale(1.2); opacity: 1; } 36%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes rocketIn { from { opacity: 0; transform: translate(-220px, 200px) rotate(16deg) scale(0.7); } to { opacity: 1; transform: translate(0, 0) rotate(16deg) scale(1); } }
@keyframes rocketFloat { from { transform: translate(0, 0) rotate(16deg); } to { transform: translate(8px, -14px) rotate(19deg); } }
@keyframes floaty   { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes breathe  { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(74, 70, 211, 0)); } 50% { transform: scale(1.08); filter: drop-shadow(0 6px 18px rgba(74, 70, 211, 0.35)); } }
@keyframes shine    { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(220%) skewX(-20deg); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---------- Header ---------- */
.anim .nav { transition: height 0.3s ease; }
.anim .site-header.is-scrolled .nav { height: 72px; }
.anim .nav-links a { position: relative; }
.anim .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.anim .nav-links a:hover::after { transform: scaleX(1); }

/* ---------- Buttons: shine sweep on hover ---------- */
.anim .btn-primary { position: relative; overflow: hidden; }
.anim .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
.anim .btn-primary:hover::after { animation: shine 0.7s ease; }
.anim .btn .arrow { transition: transform 0.2s ease; }
.anim .btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero entrance (starts when body.is-loaded) ---------- */
.anim .hero-copy > *, .anim .audit-card, .anim .stats, .anim .bullets { opacity: 0; }
.anim .is-loaded .pill        { animation: riseIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both; }
.anim .is-loaded .hero-title  { animation: riseIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.anim .is-loaded .hero-sub    { animation: riseIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.anim .is-loaded .audit-card  { animation: cardIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; }
.anim .is-loaded .stats       { animation: riseIn 0.8s ease 1.1s both; }
.anim .is-loaded .bullets     { opacity: 1; }
.anim .hero-title .underline::after { animation-delay: 0.9s; }
.anim .hero-bg img { animation: drift 18s ease-in-out infinite alternate; will-change: transform; }

@media (min-width: 901px) {
  .anim .tilt-card, .anim .hero-arrow { opacity: 0; }
  .anim .is-loaded .before-card { animation: beforeIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both; }
  .anim .is-loaded .after-card  { animation: afterIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both; }
  .anim .is-loaded .hero-arrow.left  { animation: arrowIn 0.6s ease 1.5s both; }
  .anim .is-loaded .hero-arrow.right { animation: arrowIn 0.6s ease 1.65s both; }
}
@media (max-width: 900px) {
  .anim .tilt-card { opacity: 1; }
}

/* Before / After cards: living state */
.anim .after-card .check { transform-origin: center; animation: tick 7s ease-in-out infinite; }
.anim .after-card .row:nth-child(3) .check { animation-delay: 0.5s; }
.anim .after-card .row:nth-child(4) .check { animation-delay: 1s; }
.anim .after-card .row.is-you { animation: rowGlow 3.5s ease-in-out infinite; }
.anim .tag.is-top { animation: badgePop 7s ease-in-out 0.2s infinite; }
.anim .tag.is-red::before { animation: pulseDot 1.8s ease-out infinite; }
.anim .before-card .row.is-you { animation: rowGlow 3.5s ease-in-out 1.2s infinite; }

/* ---------- Feature mock cards ---------- */
.anim .mock { transition: transform 0.25s ease, box-shadow 0.25s ease; transform-style: preserve-3d; }
.anim .mock.is-tilting { transition: transform 0.08s linear; }
.anim .mock:hover { box-shadow: 0 30px 60px rgba(74, 70, 211, 0.16); }

.anim .mock-row { opacity: 0; transform: translateX(-24px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.anim .mock.in-view .mock-row { opacity: 1; transform: none; }
.anim .mock.in-view .mock-row.is-dim { opacity: 0.5; }
.anim .mock.in-view .mock-row:nth-child(2) { transition-delay: 0.15s; }
.anim .mock.in-view .mock-row:nth-child(3) { transition-delay: 0.3s; }
.anim .mock.in-view .mock-x svg { animation: wiggle 2.4s ease-in-out infinite; }
.anim .mock.in-view .mock-row:nth-child(2) .mock-x svg { animation-delay: 0.4s; }
.anim .mock.in-view .mock-row:nth-child(3) .mock-x svg { animation-delay: 0.8s; }

.anim .mock-plan { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.anim .mock.in-view .mock-plan { opacity: 1; transform: none; }
.anim .mock-todo li { opacity: 0; transform: translateX(-14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.anim .mock.in-view .mock-todo li { opacity: 1; transform: none; }
.anim .mock.in-view .mock-todo li:nth-child(1) { transition-delay: 0.35s; }
.anim .mock.in-view .mock-todo li:nth-child(2) { transition-delay: 0.5s; }
.anim .mock.in-view .mock-todo li:nth-child(3) { transition-delay: 0.65s; }
.anim .mock.in-view .mock-todo li:nth-child(4) { transition-delay: 0.8s; }
.anim .mock.in-view .mock-progress span { width: 0; animation: fill 4s ease-in-out 1s infinite; }
.anim .dot-alert { animation: pulseDot 1.8s ease-out infinite; }

.anim .mock.in-view .bars span { transform: scaleY(0); animation: barLoop 6s ease-in-out infinite; animation-delay: var(--d); }
.anim .mock.in-view .mock-score .up { animation: badgePop 6s ease-in-out infinite; }
.anim .mock-score { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; }
.anim .mock.in-view .mock-score { opacity: 1; transform: none; }

/* ---------- Journey: curve draws, a signal runs along it, nodes light up, rocket launches ---------- */
@keyframes cometPulse { 0%, 100% { r: 16; opacity: 0.35; } 50% { r: 24; opacity: 0.15; } }
@keyframes flow { to { stroke-dashoffset: -400; } }
@keyframes ripple { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(2.1); opacity: 0; } }
@keyframes nodeLight { 0% { opacity: 0; transform: scale(0.4); } 60% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rocketLaunch {
  0%   { opacity: 0; transform: translate(-60px, 60px) rotate(16deg) scale(0.35); }
  60%  { opacity: 1; transform: translate(4px, -6px) rotate(16deg) scale(1.06); }
  100% { opacity: 1; transform: translate(0, 0) rotate(16deg) scale(1); }
}
@keyframes rocketHover { from { transform: translate(0, 0) rotate(16deg); } to { transform: translate(10px, -16px) rotate(19deg); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes exhaust { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.35); } }

.anim .journey-track svg.curve { overflow: visible; }
.anim .journey-track svg.curve path.main { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; }
.anim .journey-track.in-view svg.curve path.main { stroke-dashoffset: 0; }
.anim .journey-track svg.curve path.flow {
  stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: none;
  stroke-dasharray: 10 90; opacity: 0; transition: opacity 0.3s ease 0.95s;
  animation: flow 3s linear infinite;
}
.anim .journey-track.in-view svg.curve path.flow { opacity: 0.55; }
.anim .comet { fill: #fff; stroke: var(--primary); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(74, 70, 211, 0.9)); opacity: 0; transition: opacity 0.35s ease; }
.anim .comet-glow { fill: var(--primary); opacity: 0; transition: opacity 0.35s ease; }
.anim svg.curve.is-running .comet { opacity: 1; }
.anim svg.curve.is-running .comet-glow { animation: cometPulse 1s ease-in-out infinite; }

.anim .step .node { position: relative; opacity: 0; transform: scale(0.4); }
.anim .step.is-lit .node { animation: nodeLight 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .step .node::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 3px solid var(--primary); opacity: 0; pointer-events: none;
}
.anim .step.is-pulse .node::after { animation: ripple 0.5s ease-out; }
.anim .step h3, .anim .step p { opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease 0.125s, transform 0.25s ease 0.125s; }
.anim .step.is-lit h3, .anim .step.is-lit p { opacity: 1; transform: none; }
.anim .step .node { transition: box-shadow 0.25s ease; }
.anim .step.is-lit .node:hover { box-shadow: 0 16px 36px rgba(74, 70, 211, 0.25); }

.anim .rocket { opacity: 0; transform-origin: 20% 80%; }
.anim .journey-track.is-arrived .rocket {
  animation: rocketLaunch 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both, rocketHover 3.2s ease-in-out 0.55s infinite alternate;
}
.anim .rocket-fx { position: absolute; z-index: 1; pointer-events: none; }
.anim .rocket-fx .exhaust {
  position: absolute; left: 0; top: 0; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 154, 58, 0.55) 0%, rgba(209, 134, 194, 0.35) 35%, rgba(74, 70, 211, 0) 70%);
  filter: blur(6px); opacity: 0;
}
.anim .journey-track.is-arrived .rocket-fx .exhaust { animation: exhaust 1.6s ease-in-out 0.5s infinite; }
.anim .spark {
  position: absolute; width: 10px; height: 10px; opacity: 0;
  background: #fff; border-radius: 2px;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.9), 0 0 16px rgba(74, 70, 211, 0.6);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.anim .journey-track.is-arrived .spark { animation: twinkle 2.2s ease-in-out infinite; animation-delay: var(--sd, 0s); }

/* ---------- Animated gradients (same colours, gentle motion) ---------- */
@keyframes gradDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(12%, -12%) scale(1.3); } }
@keyframes blobA { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(22%, 14%) scale(1.3); } 100% { transform: translate(-12%, 8%) scale(1.1); } }
@keyframes blobB { 0% { transform: translate(0, 0) scale(1.15); } 50% { transform: translate(-20%, -14%) scale(0.9); } 100% { transform: translate(14%, 10%) scale(1.35); } }
@keyframes blobC { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16%, 18%) scale(1.25); } 100% { transform: translate(18%, -10%) scale(0.95); } }
.anim .mock::before { inset: -22%; animation: gradDrift 8s ease-in-out infinite alternate; will-change: transform; }
.anim .feature:nth-child(2) .mock::before { animation-delay: -3s; }
.anim .feature:nth-child(3) .mock::before { animation-delay: -6s; }
.anim .blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(44px); will-change: transform;
}
.anim .blob-a { animation: blobA 11s ease-in-out infinite alternate; }
.anim .blob-b { animation: blobB 13s ease-in-out infinite alternate; }
.anim .blob-c { animation: blobC 15s ease-in-out infinite alternate; }
.anim .hero-bg img { animation: drift 14s ease-in-out infinite alternate; }
.anim .testimonials .bg img { animation: drift 16s ease-in-out infinite alternate; will-change: transform; }

/* ---------- Footer ---------- */
@keyframes wordDrift { from { transform: translateX(-50%) translateX(-12px); } to { transform: translateX(-50%) translateX(12px); } }
.anim .footer-top, .anim .footer-bottom { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.anim .footer.in-view .footer-top, .anim .footer.in-view .footer-bottom { opacity: 1; transform: none; }
.anim .footer.in-view .footer-bottom { transition-delay: 0.15s; }
.anim .closing .wordmark { opacity: 0; transition: opacity 1.2s ease 0.4s; }
.anim .closing.in-view .wordmark { opacity: var(--wordmark-opacity); animation: wordDrift 12s ease-in-out infinite alternate; }

/* ---------- Pricing ---------- */
.anim .plan { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease; }
.anim .plan:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(26, 26, 46, 0.1); }
.anim .plan.is-featured:hover { box-shadow: 0 36px 70px rgba(74, 70, 211, 0.22); }
.anim .plan.is-featured.in-view { animation: floaty 4s ease-in-out 1s infinite alternate; }
.anim .plan.is-featured.in-view:hover { animation-play-state: paused; }
.anim .plan ul li i { transform: scale(0); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.anim .plan.in-view ul li i { transform: scale(1); }
.anim .plan.in-view ul li:nth-child(1) i { transition-delay: 0.3s; }
.anim .plan.in-view ul li:nth-child(2) i { transition-delay: 0.45s; }
.anim .plan.in-view ul li:nth-child(3) i { transition-delay: 0.6s; }
.anim .plan .badge { transform-origin: top right; }
.anim .plan.in-view .badge { animation: popIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both; }
.anim .guarantee .shield img { transition: transform 0.3s ease; }
.anim .guarantee:hover .shield img { transform: rotate(-8deg) scale(1.1); }

/* ---------- Testimonials ---------- */
.anim .quote { transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.7s ease; }
.anim .quote:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(26, 26, 46, 0.08); }
.anim .avatar { transform: scale(0.4); opacity: 0; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s, opacity 0.4s ease 0.4s; }
.anim .quote.in-view .avatar { transform: scale(1); opacity: 1; }
.anim .quote blockquote { position: relative; }
.anim .quote blockquote::before {
  content: "“"; position: absolute; left: -6px; top: -34px;
  font-family: var(--font-head); font-size: 90px; line-height: 1; color: var(--primary); opacity: 0;
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s; transform: translateY(8px);
}
.anim .quote.in-view blockquote::before { opacity: 0.15; transform: none; }

/* ---------- FAQ ---------- */
.anim .acc-btn .ic { transition: border-color 0.2s ease, transform 0.3s ease, background-color 0.2s ease; }
.anim .acc-item.is-open .acc-btn .ic { transform: rotate(180deg); background: var(--lavender-3); }
.anim .acc-btn:hover .ic { background: var(--lavender-3); }

/* ---------- Closing ---------- */
.anim .cta .mark { animation: breathe 3.5s ease-in-out infinite; }
.anim .to-top svg { transition: transform 0.2s ease; }
.anim .to-top:hover svg { transform: translateY(-3px); }

/* ---------- Section titles: word-by-word reveal ---------- */
.anim .h-section .w { display: inline-block; opacity: 0; transform: translateY(0.4em) rotate(2deg); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.anim .in-view .h-section .w, .anim .h-section.in-view .w { opacity: 1; transform: none; }

/* Icon boxes */
.anim .icon-box img { transition: transform 0.3s ease; }
.anim .feature:hover .icon-box img, .anim .bullet:hover .icon-box img { transform: scale(1.15) rotate(-6deg); }