/* ==========================================================================
   StaffiQ — Premium layer
   Cursor system, magnetic controls, split headline reveal, parallax, grain,
   scroll progress, spotlight cards and staged section entrances.

   Layered on top of styles.css and lens.css. Additive only, nothing here is
   required for the page to work. Reduced motion switches all of it off.
   ========================================================================== */

/* ── Film grain. Rendered once, costs nothing to animate because it does not
      animate. It just stops large flat greens from looking plastic. ──────── */
.sqp-grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Scroll progress ───────────────────────────────────────────────────── */
.sqp-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--evergreen-700, #004331), var(--emerald, #0E9F73), var(--lime, #C6F24E));
  box-shadow: 0 0 14px rgba(198, 242, 78, 0.5);
}

/* ── Cursor system: lead dot, easing ring, five point comet trail ───────── */
.sqp-dot, .sqp-ring, .sqp-trail i {
  position: fixed; top: 0; left: 0; z-index: 1300; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity 1.5s;
}
.sqp-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--lime, #C6F24E);
  box-shadow: 0 0 12px rgba(198, 242, 78, .9); }
.sqp-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1.5px solid rgba(198, 242, 78, .7);
  transition: width 1.5s cubic-bezier(.16,1,.3,1), height 1.5s cubic-bezier(.16,1,.3,1),
              margin 1.5s cubic-bezier(.16,1,.3,1), background 1.5s, border-color 1.5s, opacity 1.5s; }
.sqp-ring[data-mode="link"] { width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: rgba(198, 242, 78, .12); border-color: var(--lime, #C6F24E); }
.sqp-ring[data-mode="person"] { width: 74px; height: 74px; margin: -37px 0 0 -37px;
  background: rgba(198, 242, 78, .08); border-style: dashed; }
.sqp-trail i { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--emerald, #0E9F73); }
.sqp-trail i:nth-child(1) { opacity: .5 }
.sqp-trail i:nth-child(2) { opacity: .38; width: 5px; height: 5px }
.sqp-trail i:nth-child(3) { opacity: .26; width: 4px; height: 4px }
.sqp-trail i:nth-child(4) { opacity: .16; width: 4px; height: 4px }
.sqp-trail i:nth-child(5) { opacity: .09; width: 3px; height: 3px }
[data-sqp-cursor="on"] .sqp-dot, [data-sqp-cursor="on"] .sqp-ring { opacity: 1 }
[data-sqp-cursor="on"] body { cursor: none }
[data-sqp-cursor="on"] a, [data-sqp-cursor="on"] button { cursor: none }
@media (pointer: coarse) { .sqp-dot, .sqp-ring, .sqp-trail { display: none } }

/* Click ripple. */
.sqp-ripple {
  position: fixed; z-index: 1290; pointer-events: none; border-radius: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 1.5px solid var(--lime, #C6F24E);
  animation: sqpRipple 1.5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sqpRipple { to { transform: scale(7); opacity: 0 } }

/* ── Split headline reveal ─────────────────────────────────────────────── */
.sqp-split span {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(0.55em) rotateX(-45deg); transform-origin: 50% 100%;
  animation: sqpChar 1.5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sqpChar { to { opacity: 1; transform: none } }

/* ── Magnetic controls ─────────────────────────────────────────────────── */
.sqp-mag { transition: transform 1.5s cubic-bezier(.16,1,.3,1) }
.sqp-mag[data-pull="on"] { transition: transform 1.5s ease-out }

/* ── Spotlight on every card ───────────────────────────────────────────── */
.card, .lens-panel, .price-card, .sqp-spot {
  position: relative;
}
.card::after, .price-card::after, .sqp-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .6s;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(198, 242, 78, .13), transparent 62%);
}
/* The pointermove tracking that sets --sx/--sy is already fine gated in
   premium.js, but this visibility rule was a bare :hover with no matching
   gate, so a tap could still leave the glow lit, centred, with no cursor
   position ever having been set for it. */
@media (hover: hover) and (pointer: fine) {
  .card:hover::after, .price-card:hover::after, .sqp-spot:hover::after { opacity: 1 }
}
.card, .price-card {
  /* Pricing spec Part 14: same tilt maths JS already computes for .price-card
     (premium.js line 135) — this rule was missing, so the cards never moved. */
  transform: perspective(1000px) rotateX(var(--crx, 0deg)) rotateY(var(--cry, 0deg)) translateY(var(--clift, 0px));
  transform-style: preserve-3d;
  transition: transform 1.5s ease-out, box-shadow 1.5s, border-color 1.5s;
}

/* ── Floating name pills, upgraded ─────────────────────────────────────── */
.lens-node { transform-style: preserve-3d }
.lens-node[data-live="true"] .lens-node__avatar {
  box-shadow: 0 0 0 3px rgba(198, 242, 78, .18), 0 0 22px rgba(198, 242, 78, .55);
}
.lens-node::after {
  content: ""; position: absolute; inset: -1px; border-radius: 999px; pointer-events: none;
  opacity: 0; transition: opacity 1.5s;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, .35), transparent 75%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor; padding: 1px;
}
.lens-node[data-live="true"]::after { opacity: 1; animation: sqpSheen 1.6s ease-in-out infinite }
@keyframes sqpSheen { 0%, 100% { filter: hue-rotate(0deg) } 50% { filter: brightness(1.4) } }

/* ── Parallax layers ───────────────────────────────────────────────────── */
.sqp-par { will-change: transform }

/* ── Section entrances ─────────────────────────────────────────────────── */
/* 3 August 2026: shortened from 1.5s so .price-card and other candidates
   (which start fully transparent) finish their fade quickly rather than
   sitting part faded, which reads as a contrast fault, not a transition. */
[data-sqp-in] { opacity: 0; transform: translateY(34px); }
[data-sqp-in][data-shown="true"] {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}

/* ── Buttons: light sweep on hover ─────────────────────────────────────── */
.btn, .btn-lime, .btn-line { position: relative; overflow: hidden }
.btn::after, .btn-lime::after, .btn-line::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .38), transparent 80%);
  transform: translateX(-130%); transition: transform 1.5s cubic-bezier(.16,1,.3,1);
}
.btn:hover::after, .btn-lime:hover::after, .btn-line:hover::after { transform: translateX(130%) }

/* ── Header condenses as you scroll ────────────────────────────────────── */
.site-header { transition: padding 1.5s cubic-bezier(.16,1,.3,1), background 1.5s, box-shadow 1.5s }
[data-sqp-scrolled="on"] .site-header {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
[data-sqp-scrolled="on"] .site-header .mark { transform: scale(.9); transition: transform 1.5s }

@media (prefers-reduced-motion: reduce) {
  .sqp-grain, .sqp-dot, .sqp-ring, .sqp-trail, .sqp-progress, .sqp-ripple { display: none !important }
  .sqp-split span { opacity: 1; transform: none; animation: none }
  .lens-node[data-live="true"]::after { animation: none }
  [data-sqp-in] { opacity: 1; transform: none }
  .btn::after, .btn-lime::after, .btn-line::after { display: none }
  .card { transform: none }
}