/* ==========================================================================
   SoftPhonez — scroll-driven phone showcase + shared motion primitives
   Loaded after style.css. Scoped to #sp-showcase and [data-sp-reveal] so it
   cannot leak into existing sections.
   ========================================================================== */

:root {
  --sp-navy:       #003275;
  --sp-navy-deep:  #001947;
  --sp-gold:       #F0C36D;
  --sp-canvas:     #F4F7FB;
  --sp-line:       #E5ECF5;
  --sp-muted:      #5B6A82;
  --sp-ease:       cubic-bezier(.22,.61,.36,1);   /* one easing everywhere */
}

/* ---------- reveal-on-scroll primitive ---------- */
[data-sp-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .7s var(--sp-ease), transform .7s var(--sp-ease);
  will-change: opacity, transform;
}
[data-sp-reveal].is-revealed { opacity: 1; transform: none; }

/* ==========================================================================
   HERO PHONE — cinematic entrance
   Layer separation so nothing overwrites anything else's transform:
     .sp-phone-wrap  → ENTRANCE   (transition, class flipped by JS)
     .sp-phone       → POINTER + SCROLL (reads --sp-px/--sp-py/--sp-scroll)
     .sp-phone-body  → IDLE FLOAT (CSS keyframes only)
   ========================================================================== */
.sp-phone-wrap {
  --sp-px: 0; --sp-py: 0; --sp-scroll: 0; --sp-glare: 50%;
  perspective: 1200px;
}

/* FAIL-SAFE: only hide the phone for its entrance when JS is confirmed
   running (html.sp-js is set synchronously by sp-motion.js). If the script
   is blocked, errors, or is throttled in a background tab, the phone simply
   renders in its resting state instead of staying invisible at opacity:0. */
html.sp-js .sp-phone-wrap {
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(.88) rotateY(-18deg) rotateX(8deg) rotateZ(2deg);
  transition: opacity .7s var(--sp-ease), transform 1.15s var(--sp-ease);
  will-change: opacity, transform;
}
.sp-phone-wrap.is-in {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1) rotateY(-6deg) rotateX(2deg) rotateZ(0deg);
}
/* drop the layer hint once the entrance has finished */
.sp-phone-wrap.is-in { will-change: auto; }

/* pointer tilt + scroll drift — own element so it never collides with the
   idle-float keyframes running on .sp-phone inside it */
.sp-phone-stage {
  transform-style: preserve-3d;
  /* Two independent inputs composed in one transform:
       --sp-px / --sp-py  → pointer tilt   (subtle, screen stays readable)
       --sp-scroll 0..1   → scroll flip    (bold — the hero is leaving anyway)
     Tune the scroll feel with the three vars below.                        */
  --sp-flip-y: -34deg;   /* Y rotation at full scroll */
  --sp-flip-x:  16deg;   /* X rotation at full scroll */
  --sp-lift:   -70px;    /* upward drift at full scroll */
  transform:
    translate3d(0, calc(var(--sp-scroll) * var(--sp-lift)), 0)
    scale(calc(1 - (var(--sp-scroll) * 0.10)))
    rotateY(calc((var(--sp-px) * 6deg)  + (var(--sp-scroll) * var(--sp-flip-y))))
    rotateX(calc((var(--sp-py) * -4deg) + (var(--sp-scroll) * var(--sp-flip-x))))
    rotateZ(calc(var(--sp-scroll) * -3deg));
  transition: transform .18s linear;
}

/* deepen the perspective as it flips so the rotation reads as real depth
   rather than a flat skew */
.sp-phone-wrap { perspective: calc(1200px - (var(--sp-scroll) * 380px)); }

/* cards peel away at different rates — reinforces the layered depth */
.sp-phone-wrap.is-in .sp-chip-sms { opacity: calc(1 - var(--sp-scroll) * 1.6); }
.sp-phone-wrap.is-in .sp-chip-rec { opacity: calc(1 - var(--sp-scroll) * 1.2); }
.sp-phone-wrap.is-in .sp-chip-vm  { opacity: calc(1 - var(--sp-scroll) * 2.0); }

/* chips drift with the pointer too, scaled by their own depth */
.sp-phone-wrap .sp-float-chip {
  --chip-drift: calc(var(--sp-px) * 14px);
}

/* rim-light + reflection fade in during the entrance */
.sp-phone-wrap .sp-phone::after,
.sp-phone-wrap > .sp-glow { opacity: 0; transition: opacity .8s var(--sp-ease) .35s; }
.sp-phone-wrap.is-in .sp-phone::after,
.sp-phone-wrap.is-in > .sp-glow { opacity: 1; }

/* floating cards reveal after the phone settles, staggered 140ms apart */
.sp-phone-wrap .sp-float-chip {
  opacity: 0;
  transform: translate3d(0, 14px, var(--chip-z, 50px));
  transition: opacity .55s var(--sp-ease), transform .55s var(--sp-ease);
}
.sp-phone-wrap.is-in .sp-float-chip { opacity: 1; transform: translate3d(0,0,var(--chip-z, 50px)); }

/* Entrance stagger applies ONLY until the sequence finishes. JS adds
   .is-settled at ~1.5s; after that the delay is dropped and the transition
   becomes snappy, so the scroll-driven fade tracks the scrollbar instead of
   lagging a second behind it. */
.sp-phone-wrap.is-in:not(.is-settled) .sp-chip-sms { transition-delay: .90s; }
.sp-phone-wrap.is-in:not(.is-settled) .sp-chip-rec { transition-delay: 1.04s; }
.sp-phone-wrap.is-in:not(.is-settled) .sp-chip-vm  { transition-delay: 1.18s; }
.sp-phone-wrap.is-settled .sp-float-chip {
  transition: opacity .2s linear, transform .3s var(--sp-ease);
  transition-delay: 0s;
}

/* pause every idle loop when the hero is off-screen or the tab is hidden */
#hero.sp-hero-idle-off * { animation-play-state: paused !important; }

/* ==========================================================================
   HERO PHONE — real CSS 3D
   Separation of concerns so nothing fights:
     .sp-phone-wrap  → pointer parallax  (inline transform written by JS)
     .sp-phone       → idle 3D float     (CSS keyframes, never touched by JS)
   Both compose because they are nested, not applied to the same node.
   ========================================================================== */
.sp-phone-wrap { transform-style: preserve-3d; }

.sp-phone {
  position: relative;
  transform-style: preserve-3d;
  animation: sp-phone-idle 9s ease-in-out infinite;
  /* gold rim-light + layered contact shadow reads as a machined edge */
  box-shadow:
    0 0 0 1px rgba(240,195,109,.22),
    0 2px 0 rgba(255,255,255,.20) inset,
    0 -2px 0 rgba(0,0,0,.35) inset,
    0 46px 80px -26px rgba(0,10,35,.75),
    0 18px 34px -18px rgba(0,10,35,.55);
}

/* body thickness — a darker slab pushed back in Z. Only visible once the
   phone rotates, which is exactly what sells the 3D. */
.sp-phone::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(150deg, #1b2a41 0%, #0a121e 55%, #05090f 100%);
  transform: translateZ(-16px);
  box-shadow: 0 0 22px rgba(0,0,0,.55);
}

/* specular sweep across the glass */
.sp-phone::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
              transparent 30%,
              rgba(255,255,255,.16) 44%,
              rgba(255,255,255,.05) 52%,
              transparent 62%);
  transform: translateZ(1px);
  pointer-events: none;
  animation: sp-phone-sheen 7s ease-in-out infinite;
}

/* screen sits forward of the body so it catches the perspective correctly */
.sp-phone-screen { transform: translateZ(2px); }
.sp-phone-notch  { transform: translateX(-50%) translateZ(3px); }

/* floating chips live at different depths → they parallax at different
   rates for free, because the parent is preserve-3d. */
.sp-float-chip { transform-style: preserve-3d; }
.sp-chip-sms { transform: translateZ(58px); }
.sp-chip-rec { transform: translateZ(86px); }
.sp-chip-vm  { transform: translateZ(42px); }

/* ---- physical side buttons ---- */
.sp-btn-power, .sp-btn-vol {
  position: absolute; right: -3px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #2c3b52, #131f30 60%, #0a1220);
  box-shadow: 1px 0 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateZ(-4px);
}
.sp-btn-power { top: 148px; height: 56px; }
.sp-btn-vol   { top: 92px;  height: 38px; left: -3px; right: auto;
                border-radius: 3px 0 0 3px; box-shadow: -1px 0 2px rgba(0,0,0,.5); }

/* ---- soft radial light + illuminated platform under the device ---- */
/* scoped to the hero — `.sp-glow` is ALSO used as a background glow in the
   counts/testimonials sections, which must not be affected */
.sp-phone-wrap > .sp-glow {
  position: absolute; left: 50%; top: 46%; width: 460px; height: 460px;
  transform: translate(-50%,-50%) translateZ(-60px);
  background: radial-gradient(circle, rgba(240,195,109,.20) 0%, rgba(240,195,109,0) 68%);
  pointer-events: none;
}
.sp-platform {
  position: absolute; left: 50%; bottom: -34px;
  width: 300px; height: 40px;
  transform: translateX(-50%) translateZ(-70px) rotateX(74deg);
  background: radial-gradient(ellipse, rgba(0,8,26,.55) 0%, rgba(0,8,26,0) 70%);
  filter: blur(9px); pointer-events: none;
  animation: sp-shadow-breathe 6s ease-in-out infinite;
}

/* ---- on-screen incoming-call motion (no content changed) ---- */
.sp-call-btn.accept  { animation: sp-accept-pulse 1.9s ease-in-out infinite; }
.sp-call-btn.decline { animation: sp-decline-glow 3.2s ease-in-out infinite; }
.sp-call-via         { animation: sp-via-hint 5s ease-in-out infinite; }

@keyframes sp-accept-pulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(14,159,110,.45); }
  50%     { transform: scale(1.07); box-shadow: 0 0 0 9px rgba(14,159,110,0); }
}
@keyframes sp-decline-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,16,46,.30); }
  50%     { box-shadow: 0 0 14px 2px rgba(200,16,46,.28); }
}
@keyframes sp-via-hint {
  0%,88%,100% { background: #FDF4E3; }
  94%         { background: #F7E4BE; }
}
/* shadow breathes opposite to the float, which reinforces the depth read */
@keyframes sp-shadow-breathe {
  0%,100% { opacity: .95; transform: translateX(-50%) translateZ(-70px) rotateX(74deg) scale(1); }
  50%     { opacity: .68; transform: translateX(-50%) translateZ(-70px) rotateX(74deg) scale(.9); }
}

@keyframes sp-phone-idle {
  0%,100% { transform: rotateY(-7deg) rotateX(2deg) translateY(0); }
  50%     { transform: rotateY(-3deg) rotateX(-1deg) translateY(-14px); }
}
@keyframes sp-phone-sheen {
  0%, 68%, 100% { transform: translateZ(1px) translateX(-120%); opacity: 0; }
  72%           { opacity: 1; }
  92%           { transform: translateZ(1px) translateX(120%); opacity: 0; }
}

/* ==========================================================================
   SHOWCASE
   ========================================================================== */
#sp-showcase {
  background: linear-gradient(180deg, #fff 0%, var(--sp-canvas) 100%);
  position: relative;
  /* CRITICAL: template style.css sets `section { overflow: hidden }`, and any
     overflow!=visible ancestor silently disables position:sticky. Must stay
     visible or the sticky stage scrolls away and leaves an empty track. */
  overflow: visible !important;
}
/* same reason — keep the sticky chain clean all the way up */
#sp-showcase .sp-sc-track,
#sp-showcase .sp-sc-stage { overflow: visible; }
#sp-showcase .sp-sc-head { text-align: center; padding: 78px 0 8px; }
#sp-showcase .sp-sc-eyebrow {
  display: inline-block; letter-spacing: 4px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; color: var(--sp-navy); background: #EAF0F8;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
#sp-showcase .sp-sc-head h2 {
  color: var(--sp-navy-deep); font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 12px;
}
#sp-showcase .sp-sc-head p {
  color: var(--sp-muted); max-width: 620px; margin: 0 auto; line-height: 1.7;
}

/* ---------- desktop sticky stage ----------
   The track MUST be taller than the sticky stage, or there is no scroll
   distance for sp-motion.js to map onto the 8 steps. Height =
   one sticky viewport + one "step" of travel per screen.               */
.sp-sc-track {
  position: relative;
  --sp-steps:  8;      /* keep in sync with $spScreens in homepage.php */
  --sp-step-h: 72vh;   /* scroll distance per screen — lower = snappier */
  height: calc(100vh + (var(--sp-steps) * var(--sp-step-h)));
}
.sp-sc-stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center;
}
.sp-sc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center; width: 100%;
}

/* phone frame — CSS 3D, no images, screenshots composite inside */
.sp-sc-phone-col { display: flex; justify-content: center; perspective: 1500px; }
.sp-sc-phone {
  position: relative; width: 300px; height: 620px;
  border-radius: 42px; padding: 12px;
  background: linear-gradient(158deg, #22324a 0%, #0d1726 46%, #060c15 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.16) inset,          /* top edge highlight */
    0 -1px 0 rgba(255,255,255,.05) inset,
    0 34px 70px -18px rgba(0,25,71,.55),          /* contact shadow */
    0 12px 26px -12px rgba(0,25,71,.35);
  transform-style: preserve-3d;
  transition: transform .85s var(--sp-ease);
  will-change: transform;
}
.sp-sc-phone::after {                              /* glass sheen */
  content: ''; position: absolute; inset: 0; border-radius: 42px;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%,
              rgba(255,255,255,.05) 26%, transparent 52%);
  pointer-events: none;
}
.sp-sc-notch {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 20px; background: #05090f;
  border-radius: 0 0 14px 14px; z-index: 4;
}
.sp-sc-viewport {
  position: relative; width: 100%; height: 100%;
  border-radius: 32px; overflow: hidden; background: #fff;
}

/* stacked screens — crossfade, never a layout change */
.sp-sc-screen {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.015);
  transition: opacity .6s var(--sp-ease), transform .6s var(--sp-ease);
  will-change: opacity, transform;
}
.sp-sc-screen.is-active { opacity: 1; transform: none; }
.sp-sc-screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}

/* ---------- copy column ---------- */
.sp-sc-panels { position: relative; min-height: 340px; }
.sp-sc-panel {
  position: absolute; inset: 0;
  opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(3px);
  transition: opacity .55s var(--sp-ease), transform .55s var(--sp-ease),
              filter .55s var(--sp-ease);
  pointer-events: none;
}
.sp-sc-panel.is-active {
  opacity: 1; transform: none; filter: none; pointer-events: auto;
}
.sp-sc-step {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; letter-spacing: 1px; color: var(--sp-navy);
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.sp-sc-step .sp-sc-counter-now { font-size: 30px; font-weight: 700; color: var(--sp-gold); }
.sp-sc-ico {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--sp-navy-deep), var(--sp-navy));
  display: flex; align-items: center; justify-content: center;
}
.sp-sc-ico i { color: var(--sp-gold); font-size: 22px; }
.sp-sc-panel h3 {
  color: var(--sp-navy-deep); font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 12px; line-height: 1.25;
}
.sp-sc-panel p { color: var(--sp-muted); font-size: 16.5px; line-height: 1.75; margin: 0; }

/* progress rail */
.sp-sc-progress {
  margin-top: 26px; height: 3px; border-radius: 3px;
  background: var(--sp-line); overflow: hidden;
}
.sp-sc-progress span {
  display: block; height: 100%; background: var(--sp-gold);
  transition: width .5s var(--sp-ease);
}

/* ---------- thumbnail strip ---------- */
.sp-sc-thumbs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  padding: 34px 0 78px;
}
.sp-sc-thumb {
  width: 54px; height: 96px; padding: 0; border-radius: 10px; cursor: pointer;
  background: #fff; border: 2px solid var(--sp-line); overflow: hidden;
  transition: border-color .25s var(--sp-ease), transform .25s var(--sp-ease);
}
.sp-sc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.sp-sc-thumb:hover  { transform: translateY(-3px); border-color: #B9CBE4; }
.sp-sc-thumb.is-active { border-color: var(--sp-gold); transform: translateY(-3px); }
.sp-sc-thumb:focus-visible {
  outline: 3px solid var(--sp-navy); outline-offset: 3px; border-color: var(--sp-navy);
}

/* ---------- mobile rail (no scroll hijacking) ---------- */
.sp-sc-rail { display: none; }

@media (max-width: 991.98px) {
  /* no sticky scroll here — collapse the tall track or it leaves a huge gap */
  .sp-sc-track { height: auto; }
  .sp-sc-stage { position: static; height: auto; display: block; padding: 8px 0 0; }
  .sp-sc-grid  { grid-template-columns: 1fr; gap: 28px; }
  .sp-sc-phone-col { display: none; }          /* replaced by the rail */
  .sp-sc-panels { position: static; min-height: 0; }
  .sp-sc-panel {
    position: static; opacity: 1; transform: none; filter: none;
    display: none; text-align: center;
  }
  .sp-sc-panel.is-active { display: block; }

  .sp-sc-rail {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding: 4px 0 18px;
    scrollbar-width: none;
  }
  .sp-sc-rail::-webkit-scrollbar { display: none; }
  .sp-sc-rail > * {
    flex: 0 0 min(255px, 68vw); scroll-snap-align: center;
    border-radius: 30px; overflow: hidden; background: #0d1726;
    padding: 9px; box-shadow: 0 16px 34px -14px rgba(0,25,71,.45);
  }
  .sp-sc-rail img {
    width: 100%; display: block; border-radius: 22px; background: #fff;
  }
  .sp-sc-thumbs { padding: 20px 0 60px; }
  .sp-sc-thumb { width: 44px; height: 78px; }
}

@media (max-width: 575.98px) {
  #sp-showcase .sp-sc-head { padding: 56px 0 4px; }
  .sp-sc-thumb { width: 38px; height: 68px; }
}

/* ==========================================================================
   REDUCED MOTION — strip parallax, floats, rotation, scroll-bound motion.
   Content stays fully available; transitions become instant or minimal.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-sp-reveal],
  [data-sp-reveal].is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; }

  .sp-phone-wrap,
  .sp-phone-wrap.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* hero 3D: keep an attractive static resting pose, kill all motion */
  .sp-phone-wrap {
    transform: rotateY(-6deg) rotateX(2deg) !important;
    transition: opacity .3s linear !important;
  }
  .sp-phone-stage { transform: none !important; transition: none !important; }
  .sp-phone-wrap .sp-float-chip {
    opacity: 1 !important; transform: none !important;
    transition: none !important; transition-delay: 0s !important;
  }
  .sp-platform, .sp-glow { animation: none !important; }
  .sp-call-btn.accept, .sp-call-btn.decline, .sp-call-via,
  .sp-ring { animation: none !important; }

  .sp-phone { animation: none !important; transform: none !important; }
  .sp-phone::after { animation: none !important; opacity: 0 !important; }
  .sp-phone::before { transform: none !important; }
  .sp-chip-sms, .sp-chip-rec, .sp-chip-vm { transform: none !important; }

  /* scroll-binding is off in JS, so collapse the tall track and unstick */
  .sp-sc-track { height: auto !important; }
  .sp-sc-stage { position: static !important; height: auto !important; }

  .sp-sc-phone { transition: none !important; transform: none !important; }
  .sp-sc-screen { transition: opacity .01ms linear !important; transform: none !important; }
  .sp-sc-panel  { filter: none !important; transform: none !important; transition: none !important; }

  /* neutralise the decorative keyframe loops already in style.css */
  .sp-anim-float, .sp-anim-float-2, .sp-anim-float-3,
  .sp-anim-spin, .sp-anim-pulse, .sp-anim-eq,
  .sp-orb { animation: none !important; transform: none !important; }

  .sp-sc-thumb, .sp-sc-thumb:hover { transition: none !important; transform: none !important; }
  html { scroll-behavior: auto !important; }
}