/* =========================================================
   ABBA Creators — extra graphics & animations
   (loaded after styles.css on every page)
   ========================================================= */

/* ---------- page transitions (Chrome / Edge / Safari 18+) ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(18px); } }

/* ---------- scroll progress bar ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: linear-gradient(90deg, var(--green), var(--yellow));
  transform-origin: left; transform: scaleX(var(--p, 0));
}

/* ---------- cursor ring (mouse only) ---------- */
.cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 2px solid var(--green); border-radius: 50%;
  transition: width .25s, height .25s, margin .25s, background .25s, opacity .3s;
  opacity: 0;
}
.cursor-ring.on { opacity: 1; }
.cursor-ring.hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(34,180,58,.12); }
.cursor-ring.down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

/* ---------- moving dot grid ---------- */
.hero::before, .page-hero::before { animation: drift 30s linear infinite; }
@keyframes drift { to { background-position: 260px 130px; } }

/* ---------- floating decor shapes ---------- */
.decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fl {
  position: absolute;
  transform: translate(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.shape { display: block; animation: float var(--t, 7s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
@keyframes float {
  from { transform: translateY(-10px) rotate(-8deg); }
  to   { transform: translateY(12px) rotate(10deg); }
}
.shape.ring { width: 46px; height: 46px; border-radius: 50%; border: 6px solid var(--green); opacity: .55; }
.shape.plus { width: 26px; height: 26px; position: relative; opacity: .7; }
.shape.plus::before, .shape.plus::after { content: ""; position: absolute; inset: 10px 0; background: var(--navy); border-radius: 3px; }
.shape.plus::after { rotate: 90deg; }
.shape.bolt svg { width: 40px; fill: var(--yellow); stroke: var(--navy); stroke-width: 1.4; stroke-linejoin: round; }
.shape.brk { font-family: var(--mono); font-weight: 500; font-size: 1.6rem; color: var(--green-dk); opacity: .6; }
.shape.dots {
  width: 70px; height: 70px; opacity: .6;
  background-image: radial-gradient(circle, var(--yellow) 3px, transparent 3.5px);
  background-size: 14px 14px;
}
.shape.squig svg { width: 70px; fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; }

.blob {
  position: absolute; width: clamp(260px, 34vw, 480px); aspect-ratio: 1;
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  opacity: .5;
  animation: morph 14s ease-in-out infinite alternate;
}
.blob.g { background: radial-gradient(closest-side, rgba(34,180,58,.55), rgba(34,180,58,0)); }
.blob.y { background: radial-gradient(closest-side, rgba(246,198,35,.6), rgba(246,198,35,0)); animation-duration: 18s; animation-direction: alternate-reverse; }
@keyframes morph {
  0%   { border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; transform: translate(0,0) rotate(0); }
  50%  { border-radius: 60% 40% 35% 65% / 55% 65% 35% 45%; transform: translate(30px,-20px) rotate(40deg); }
  100% { border-radius: 38% 62% 50% 50% / 60% 35% 65% 40%; transform: translate(-20px,25px) rotate(80deg); }
}

/* ---------- hero: 3D tilt + floating chips ---------- */
.hero-visual {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  transform-style: preserve-3d;
}
.chip {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; color: var(--navy);
  font-weight: 600; font-size: .85rem; white-space: nowrap;
  padding: .55rem .9rem .55rem .6rem; border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(14,31,61,.35), 0 0 0 1px var(--line);
  animation: bob 4.5s ease-in-out infinite alternate;
}
.chip i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green-lt); }
.chip i svg { width: 15px; fill: none; stroke: var(--green-dk); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chip.c1 { top: 16%; right: -14px; }
.chip.c2 { bottom: 4%; left: 8%; animation-delay: -1.5s; }
.chip.c3 { top: 50%; right: -28px; animation-delay: -3s; }
.chip.c3 i { background: #fff5d1; }
.chip.c3 i svg { stroke: #b38a00; }
@keyframes bob { from { translate: 0 -8px; } to { translate: 0 8px; } }

/* ---------- word-by-word headline reveal ---------- */
.split .w {
  display: inline-block;
  opacity: 0; transform: translateY(.55em) rotate(3deg); filter: blur(6px);
  transition: opacity .7s, transform .8s cubic-bezier(.2,.8,.2,1), filter .7s;
  transition-delay: calc(var(--i) * 70ms);
}
.split.in-view .w { opacity: 1; transform: none; filter: none; }

/* ---------- hand-drawn squiggle under highlighted words ---------- */
.hl { position: relative; display: inline-block; }
.squiggle {
  position: absolute; left: -2%; width: 104%; bottom: -.12em; height: .3em;
  overflow: visible; pointer-events: none;
}
.squiggle path {
  fill: none; stroke: var(--yellow); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s cubic-bezier(.6,0,.2,1) .6s;
  vector-effect: non-scaling-stroke;
}
.in-view .squiggle path, .squiggle.in-view path { stroke-dashoffset: 0; }

/* ---------- cards: 3D tilt + spotlight ---------- */
.card, .price-tag { position: relative; }
.card::after, .price-tag::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(34,180,58,.14), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
.price-tag.featured::after { background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(246,198,35,.18), transparent 65%); }
.card:hover::after, .price-tag:hover::after { opacity: 1; }
.card.tilting { transition: transform .08s linear, box-shadow .25s, border-color .25s; }

/* ---------- magnetic buttons ---------- */
.btn { transition: transform .15s ease, box-shadow .15s ease, background .15s, color .15s, translate .3s cubic-bezier(.2,.7,.2,1); }
.btn .shine {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.btn { position: relative; }
.btn:not(.btn-ghost) .shine::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* ---------- logo wiggle ---------- */

/* ---------- marquee: second row going the other way ---------- */
.marquee-track.rev { animation-direction: reverse; animation-duration: 38s; margin-top: .4rem; opacity: .45; font-size: 1.1rem; }

/* ---------- green band: animated waves top & bottom ---------- */
.band { position: relative; }
.band::before, .band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 28px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14C40 0 80 0 120 14s80 14 120 0v14z' fill='%2322b43a'/%3E%3C/svg%3E") 0 0 / 240px 28px repeat-x;
  animation: wave 9s linear infinite;
}
.band::before { top: -27px; }
.band::after { bottom: -27px; transform: scaleY(-1); animation-direction: reverse; }
@keyframes wave { to { background-position: 240px 0; } }

/* ---------- process: line draws itself ---------- */
.steps::after {
  content: ""; position: absolute; top: 25px; left: 26px; right: 10%; height: 3px; z-index: -1;
  background: linear-gradient(90deg, var(--green), var(--yellow));
  border-radius: 3px; transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s cubic-bezier(.6,0,.2,1) .3s;
}
.steps.in-view::after { transform: scaleX(1); }
.steps .num { transition: background .3s, transform .3s; }
.steps li:hover .num { background: var(--green); color: #fff; transform: scale(1.12) rotate(-8deg); }

/* ---------- founder: orbiting icons ---------- */
.orbit {
  position: absolute; inset: -30px; border-radius: 50%;
  border: 2px dashed #c4ccc0;
  animation: spin 26s linear infinite;
}
.orbit i {
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  display: grid; place-items: center;
  box-shadow: 0 8px 18px -8px rgba(14,31,61,.35);
  animation: spin 26s linear infinite reverse;
}
.orbit i svg { width: 18px; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.orbit i:nth-child(1) { top: -19px; left: calc(50% - 19px); }
.orbit i:nth-child(2) { bottom: 6%; right: 0; }
.orbit i:nth-child(3) { bottom: 6%; left: 0; }
.orbit i:nth-child(2) svg { fill: var(--yellow); stroke: var(--navy); stroke-width: 1.4; }
@keyframes spin { to { rotate: 360deg; } }
.founder-avatar span { animation: pop 3s ease-in-out infinite; }
@keyframes pop { 50% { transform: scale(1.06); } }

/* ---------- CTA box: glowing orbs ---------- */
.cta .blob { opacity: .6; }
.cta .blob.g { left: -8%; bottom: -60%; }
.cta .blob.y { right: -6%; top: -70%; opacity: .3; }
.cta > *:not(.blob) { position: relative; }
.cta .btn { box-shadow: 0 4px 0 var(--green-dk), 0 0 0 0 rgba(34,180,58,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 4px 0 var(--green-dk), 0 0 0 18px rgba(34,180,58,0); } 100% { box-shadow: 0 4px 0 var(--green-dk), 0 0 0 0 rgba(34,180,58,0); } }

/* ---------- contact: floating shapes on dark ---------- */
.contact .decor { z-index: 0; }
.contact .shape.plus::before, .contact .shape.plus::after { background: #fff; }
.contact .shape.brk { color: var(--yellow); }
.contact-inner { z-index: 1; }

/* ---------- responsive / accessibility ---------- */
@media (max-width: 960px) {
  .steps::after { display: none; }
  .chip.c3 { display: none; }
}
@media (max-width: 640px) {
  .chip { font-size: .75rem; padding: .4rem .7rem .4rem .45rem; }
  .chip i { width: 22px; height: 22px; }
  .chip.c1 { right: 0; top: 4%; }
  .decor .fl:nth-child(n+5) { display: none; }
  .orbit { inset: -22px; }
  .orbit i { width: 32px; height: 32px; }
}
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .split .w { opacity: 1; transform: none; filter: none; }
  .squiggle path { stroke-dashoffset: 0; }
  .steps::after { transform: scaleX(1); }
  .cursor-ring { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}