/* All Sign Customizer — hero stage and site motion.
   Layout and look are unconditional; every animation sits behind
   `prefers-reduced-motion: no-preference` and the theme's `vpf-motion` switch,
   and only animates transform, opacity or filter. */

:root {
  --asc-ease-out: cubic-bezier(.16, 1, .3, 1);
  --asc-ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ================================================================ Hero stage */

@media (min-width: 1100px) {
  .vp-home-hero .vp-hero-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .asc-stage { margin-right: calc(-1 * clamp(0px, 3vw, 48px)); }
}

.asc-stage {
  position: relative;
  margin-block: 24px;
  perspective: 1800px;
  isolation: isolate;
}

/* The framework frames hero images with a glass plate and a float loop; the
   stage has its own depth, so both stay off. */
.vp-hero-figure.asc-stage::before { content: none; }
.vpf-motion .vp-hero-figure.asc-stage { animation: none; }

.asc-stage-glow {
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 48px;
  background: conic-gradient(from 0deg, #00B89C, #26D07C, #ff4fa3, #7c5cff, #00B89C);
  filter: blur(64px);
  opacity: .42;
}

.asc-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 18px;
  background: #0f172a;
  box-shadow:
    0 50px 120px -40px rgb(0 0 0 / .75),
    0 30px 60px -30px rgb(0 0 0 / .5),
    0 0 0 1px rgb(255 255 255 / .04) inset;
  transform: rotateY(var(--asc-ry, -9deg)) rotateX(var(--asc-rx, 4deg));
  transform-style: preserve-3d;
  transition: transform .9s var(--asc-ease-out);
}

.asc-window-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid #E5E7EB;
  background: #F3F5F7;
}

.asc-window-dots { display: flex; gap: 7px; }
.asc-window-dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.asc-window-dots i:nth-child(2) { background: #FEBC2E; }
.asc-window-dots i:nth-child(3) { background: #28C840; }

.asc-window-url {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 78%;
  height: 26px;
  margin-inline: auto;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  color: #6B7280;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.asc-window-url svg { flex: none; color: #16A34A; }
.asc-window-url b { min-width: 0; overflow: hidden; color: var(--asc-navy); font-weight: 600; text-overflow: ellipsis; }

.asc-window video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--asc-navy);
}

/* One segment per scene, filled as the video plays. */
.asc-window-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 6px;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgb(11 19 43 / .55), transparent);
  pointer-events: none;
}
.asc-window-progress span { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / .28); }
.asc-window-progress i { display: block; width: 100%; height: 100%; background: var(--asc-gradient); transform: scaleX(var(--asc-p, 0)); transform-origin: left; }

/* Floating chips around the window. */
.asc-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: 14px;
  background: rgb(255 255 255 / .94);
  color: var(--asc-navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 18px 40px -16px rgb(2 6 23 / .55);
  backdrop-filter: blur(8px);
}
.asc-chip small { display: block; color: #4B5563; font-size: 11px; font-weight: 500; }

.asc-chip-scene { top: -26px; left: -24px; }
.asc-chip-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #16A34A; }

.asc-chip-price { top: 30%; right: -26px; flex-direction: column; align-items: flex-start; gap: 0; }
.asc-chip-price strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.asc-chip-file { bottom: -22px; left: -36px; }
.asc-chip-file svg { flex: none; color: #00876F; }

@media (max-width: 1099px) {
  .asc-window { --asc-ry: 0deg; --asc-rx: 0deg; }
  .asc-chip-scene { left: 10px; top: 46px; }
  .asc-chip-price { right: 12px; top: auto; bottom: 24%; }
  .asc-chip-file { left: 12px; bottom: -14px; }
}
@media (max-width: 560px) {
  .asc-chip { padding: 8px 11px; font-size: 12px; }
  .asc-chip-price strong { font-size: 18px; }
  .asc-chip-file { display: none; }
  .asc-window-bar { height: 34px; }
  .asc-window-dots { display: none; }
}

/* ============================================================== Motion ==== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Hero entrance: copy rises line by line, the window swings in. */
  .vpf-motion .vp-home-hero .vp-hero-split > div:first-child > * {
    animation: asc-rise 1s var(--asc-ease-out) backwards;
  }
  .vpf-motion .vp-home-hero .vp-hero-split > div:first-child > :nth-child(2) { animation-delay: .08s; }
  .vpf-motion .vp-home-hero .vp-hero-split > div:first-child > :nth-child(3) { animation-delay: .18s; }
  .vpf-motion .vp-home-hero .vp-hero-split > div:first-child > :nth-child(4) { animation-delay: .28s; }
  .vpf-motion .vp-home-hero .vp-hero-split > div:first-child > :nth-child(5) { animation-delay: .38s; }

  .vpf-motion .asc-window { animation: asc-window-in 1.4s .15s var(--asc-ease-out) backwards; }
  .vpf-motion .asc-stage-glow { animation: asc-glow-in 1.6s .3s ease-out backwards, asc-spin 18s linear infinite; }

  .vpf-motion .asc-chip { animation: asc-pop .7s var(--asc-ease-out) backwards, asc-bob 6s ease-in-out infinite; }
  .vpf-motion .asc-chip-scene { animation-delay: .9s, 1.6s; }
  .vpf-motion .asc-chip-price { animation-delay: 1.1s, 2.4s; }
  .vpf-motion .asc-chip-file { animation-delay: 1.3s, 3.2s; }
  .vpf-motion .asc-chip-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #16A34A;
    opacity: .35;
    animation: asc-ping 1.8s ease-out infinite;
  }

  /* Scene change: label and address slide, the price bumps. */
  .asc-swap { animation: asc-swap .5s var(--asc-ease-out); }
  .asc-bump { animation: asc-bump .55s var(--asc-ease-out); }

  /* ---- Highlighted words: the gradient drifts slowly. */
  .vpf-motion .vpf-hl {
    background-size: 220% 100%;
    animation: asc-sheen 7s ease-in-out infinite alternate;
  }

  /* ---- Scroll reveals: deeper travel, a touch of blur, longer stagger. */
  .vpf-js-reveal .vpf-reveal,
  .vpf-js-reveal .vpf-stagger > *,
  .asc-reveal {
    transform: translateY(36px) scale(.98);
    filter: blur(6px);
    transition: opacity .9s var(--asc-ease-out), transform .9s var(--asc-ease-out), filter .9s var(--asc-ease-out), border-color .3s ease, box-shadow .3s ease;
  }
  .asc-reveal { opacity: 0; }
  .vpf-js-reveal .vpf-reveal.is-revealed,
  .vpf-js-reveal .vpf-stagger.is-revealed > *,
  .asc-reveal.is-in { opacity: 1; transform: none; filter: none; }

  .vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(2) { transition-delay: 90ms, 90ms, 90ms, 0s, 0s; }
  .vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(3) { transition-delay: 180ms, 180ms, 180ms, 0s, 0s; }
  .vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(4) { transition-delay: 270ms, 270ms, 270ms, 0s, 0s; }
  .vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(5) { transition-delay: 360ms, 360ms, 360ms, 0s, 0s; }
  .vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(n+6) { transition-delay: 440ms, 440ms, 440ms, 0s, 0s; }

  /* Pictures inside revealed blocks settle from a slight zoom. */
  .asc-reveal img,
  .vpf-js-reveal .vpf-stagger > * img { transform: scale(1.06); transition: transform 1.4s var(--asc-ease-out); }
  .asc-reveal.is-in img,
  .vpf-js-reveal .vpf-stagger.is-revealed > * img { transform: none; }

  /* ---- Steps: the rail draws itself, numbers light up in turn. */
  .vpf-js-reveal .vpf-home-steps-grid::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s .2s var(--asc-ease-in-out); }
  .vpf-js-reveal .vpf-home-steps-grid.is-revealed::before { transform: none; }
  .vpf-js-reveal .vpf-home-steps-grid.is-revealed .vpf-home-step-no { animation: asc-step-on .8s var(--asc-ease-out) backwards; }
  .vpf-js-reveal .vpf-home-steps-grid.is-revealed > :nth-child(2) .vpf-home-step-no { animation-delay: .3s; }
  .vpf-js-reveal .vpf-home-steps-grid.is-revealed > :nth-child(3) .vpf-home-step-no { animation-delay: .6s; }
  .vpf-js-reveal .vpf-home-steps-grid.is-revealed > :nth-child(4) .vpf-home-step-no { animation-delay: .9s; }
  .vpf-js-reveal .vpf-home-steps-grid.is-revealed > :nth-child(5) .vpf-home-step-no { animation-delay: 1.2s; }

  /* ---- Neon moment: highlighted words on dark sections flicker on once. */
  .vpf-home-final-cta .vpf-reveal.is-revealed .vpf-hl,
  .vpf-home-showcase .vpf-reveal.is-revealed .vpf-hl { animation: asc-neon-on 1.6s .3s steps(1) backwards, asc-sheen 7s 2s ease-in-out infinite alternate; }

  /* ---- Hover: cards lift with a teal edge, pictures push in, CTAs shine. */
  @media (hover: hover) {
    .vpf-feature-card, .vpf-home-page-demo-card, .vpf-home-band-card, .vpf-archive .vpf-card {
      transition: transform .5s var(--asc-ease-out), box-shadow .5s var(--asc-ease-out), border-color .3s ease;
    }
    .vpf-feature-card:hover, .vpf-home-page-demo-card:hover, .vpf-home-band-card:hover {
      border-color: rgb(0 184 156 / .45);
      box-shadow: 0 30px 60px -30px rgb(11 19 43 / .35), 0 0 0 1px rgb(0 184 156 / .2);
    }
    .vpf-feature-thumb img, .vpf-home-page-demo-card img { transition: transform .8s var(--asc-ease-out); }
    .vpf-feature-card:hover .vpf-feature-thumb img,
    .vpf-home-page-demo-card:hover img { transform: scale(1.05); }

    .vpf-btn-primary { position: relative; overflow: hidden; isolation: isolate; }
    .vpf-btn-primary::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .45) 50%, transparent 65%);
      transform: translateX(-120%);
      transition: transform .8s var(--asc-ease-out);
    }
    .vpf-btn-primary:hover::after { transform: translateX(120%); }
  }

  /* ---- Showcase render drifts with the scroll (set by motion.js). */
  .vpf-home-showcase-figure img { transform: translateY(var(--asc-drift, 0px)); will-change: transform; }
}

@keyframes asc-rise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } }
@keyframes asc-window-in { from { opacity: 0; transform: translateY(60px) rotateY(-26deg) rotateX(14deg) scale(.92); } }
@keyframes asc-glow-in { from { opacity: 0; transform: scale(.6); } }
@keyframes asc-spin { to { transform: rotate(1turn); } }
@keyframes asc-pop { from { opacity: 0; transform: translateY(14px) scale(.85); } }
@keyframes asc-bob { 50% { transform: translateY(-7px); } }
@keyframes asc-ping { to { transform: scale(2.6); opacity: 0; } }
@keyframes asc-swap { from { opacity: 0; transform: translateY(8px); } }
@keyframes asc-bump { 40% { transform: scale(1.12); color: #00876F; } }
@keyframes asc-sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes asc-step-on { from { transform: scale(.5); opacity: .2; } 60% { transform: scale(1.15); } }
@keyframes asc-neon-on {
  0% { opacity: .1; } 12% { opacity: 1; } 18% { opacity: .2; } 26% { opacity: 1; }
  34% { opacity: .35; } 40% { opacity: 1; } 100% { opacity: 1; }
}

/* Gradients that loop cleanly while the sheen drifts across them. */
.vpf-motion .vpf-hl { background-image: linear-gradient(90deg, #00876F, #178A4C, #0E7490, #00876F); }
.vpf-motion .vp-home-hero .vpf-hl,
.vpf-motion .vpf-home-showcase .vpf-hl,
.vpf-motion .vpf-home-final-cta .vpf-hl,
.vpf-motion .vpf-bg-navy .vpf-hl,
.vpf-motion .vpf-site-footer--dark .vpf-hl { background-image: linear-gradient(90deg, #00B89C, #26D07C, #5EEAD4, #00B89C); }