/**
 * Motion base styles for the PHP Get Synced site.
 * Complements Framer Motion recreations in assets/js/app.js.
 */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-counter: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reveal / stagger ---------- */
.reveal,
.stagger__item,
[data-fade-x] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}

[data-fade-x] {
  transform: translateX(-20px);
}

.reveal.is-in,
.stagger.is-in .stagger__item,
[data-fade-x].is-in {
  opacity: 1;
  transform: none;
}

.stagger.is-in .stagger__item {
  transition-delay: calc(var(--stagger-i, 0) * 0.08s);
}

/* ---------- Hidden panels (SyncConsole / principles) ---------- */
.is-hidden,
[hidden].is-hidden {
  display: none !important;
}

.cw__pane {
  animation: pane-in 0.35s var(--ease-out) both;
}

.cw__pane.is-hidden {
  display: none !important;
  animation: none;
}

@keyframes pane-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.prin__pane {
  animation: pane-in 0.45s var(--ease-out) both;
}

.prin__pane.is-hidden {
  display: none !important;
  animation: none;
}

/* ---------- Platform mode visibility (JS also toggles .is-hidden) ---------- */
body.platform-mode-pinned .platform--pinned { display: block; }
body.platform-mode-stacked .platform--stacked { display: block; }
body.platform-mode-swipe .platform--swipe { display: block; }

.platform--pinned.is-hidden,
.platform--stacked.is-hidden,
.platform--swipe.is-hidden {
  display: none !important;
}

/* ---------- Nav hide / sheet ---------- */
.nav {
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}

.nav.is-hidden-nav {
  transform: translateY(-110%);
}

.nav__menu {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.22s var(--ease-out),
    transform 0.22s var(--ease-out);
}

.nav__group.is-open .nav__menu,
.nav__menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav__sheet {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.nav__sheet.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav__sheet.is-open .nav__acc,
.nav__sheet.is-open .nav__sheetcta {
  animation: sheet-item 0.4s var(--ease-out) both;
}

.nav__sheet.is-open .nav__acc:nth-child(1) { animation-delay: 0.05s; }
.nav__sheet.is-open .nav__acc:nth-child(2) { animation-delay: 0.1s; }
.nav__sheet.is-open .nav__acc:nth-child(3) { animation-delay: 0.15s; }
.nav__sheet.is-open .nav__sheetcta { animation-delay: 0.2s; }

@keyframes sheet-item {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Hero word / stage / chips ---------- */
.hero__word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
}

.hero.is-ready .hero__word > span,
.svc-hero.is-ready .hero__word > span {
  transform: translateY(0);
}

.svc-hero .svc-hero__award,
.svc-hero .svc-hero__body,
.svc-hero .svc-hero__actions,
.svc-hero .svc-hero__visual {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.svc-hero.is-ready .svc-hero__award {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}

.svc-hero.is-ready .svc-hero__body {
  opacity: 1;
  transform: none;
  transition-delay: 0.45s;
}

.svc-hero.is-ready .svc-hero__actions {
  opacity: 1;
  transform: none;
  transition-delay: 0.55s;
}

.svc-hero.is-ready .svc-hero__visual {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
  transition-duration: 1.1s;
}

.hero__award,
.hero__text,
.hero__actions,
.hero__stage {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.hero__award { transition-duration: 0.7s; transform: translateY(12px); }
.hero__stage { transform: translateY(60px); transition-duration: 1.2s; }

.hero.is-ready .hero__award,
.hero.is-ready .hero__text,
.hero.is-ready .hero__actions,
.hero.is-ready .hero__stage {
  opacity: 1;
  transform: none;
}

.hero.is-ready .hero__text { transition-delay: 0.5s; }
.hero.is-ready .hero__actions { transition-delay: 0.62s; }
.hero.is-ready .hero__stage { transition-delay: 0.55s; }

.hero__stage {
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform;
}

.hero__tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

.chip__inner.is-float {
  animation: chip-float 6s ease-in-out infinite;
}

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.chip__inner {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.hero.is-ready .chip__inner {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Trust marquee ---------- */
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.trust__track {
  animation: trust-marquee 70s linear infinite;
}

.trust__marquee:hover .trust__track {
  animation-play-state: paused;
}

/* ---------- Testimonials timer ---------- */
.tm__timer {
  transform-origin: left center;
  transform: scaleX(0);
}

.tm__timer.is-running {
  animation: tm-timer 9s linear forwards;
}

@keyframes tm-timer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.tm__feature > * {
  animation: pane-in 0.5s var(--ease-out) both;
}

/* ---------- Process sticky visual swap ---------- */
.process__stage-inner {
  animation: process-swap 0.5s var(--ease-out) both;
}

@keyframes process-swap {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.process__rail > i,
.process__rail i {
  transform-origin: top center;
  will-change: transform;
}

/* ---------- Mobile dock ---------- */
.dock {
  transform: translateY(120%);
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
}

.dock.is-visible {
  transform: translateY(0);
}

/* ---------- Chart / adopt bars ---------- */
.chart__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}

.chart__line.is-drawn {
  stroke-dashoffset: 0;
}

.chart__area {
  opacity: 0;
  transition: opacity 1s var(--ease-out) 0.8s;
}

.chart__area.is-drawn {
  opacity: 1;
}

.adopt__bar > span {
  display: block;
  width: 0;
  height: 100%;
  transition: width 1.1s var(--ease-out) 0.3s;
}

.adopt__bar > span.is-in {
  /* width set inline via data-width */
}

/* ---------- Convergence paths ---------- */
.conv__lines path {
  fill: none;
  stroke: url(#conv-g);
  stroke-width: 1.5;
  transition: stroke-dashoffset 0.05s linear;
}

.conv__src {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.conv__src.is-in {
  opacity: 1;
  transform: none;
}

.conv__record {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.9s var(--ease-out) 0.3s, transform 0.9s var(--ease-out) 0.3s;
}

.conv__record.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- SyncConsole tab pill ---------- */
.cw__tabs {
  position: relative;
}

.cw__tabpill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition:
    left 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
    width 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
    top 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
    height 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.cw__rafv,
.cw__rafbar > span {
  transition: width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ---------- Footer giant / FinalCTA portal ---------- */
.foot__giant > span,
.fcta__portal {
  will-change: transform;
}

/* ---------- Misc ---------- */
.mock__pill--violet {
  color: var(--accent-soft);
  background: rgba(34, 195, 230, 0.12);
}

.orbit__chip--violet {
  color: var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger__item,
  [data-fade-x],
  .hero__word > span,
  .hero__award,
  .hero__text,
  .hero__actions,
  .hero__stage,
  .chip__inner,
  .cw__pane,
  .prin__pane,
  .process__stage-inner,
  .tm__feature > *,
  .nav__menu,
  .nav__sheet,
  .dock,
  .chart__line,
  .chart__area,
  .adopt__bar > span,
  .conv__src,
  .conv__record,
  .cw__tabpill,
  .trust__track {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .stagger__item,
  [data-fade-x],
  .hero__award,
  .hero__text,
  .hero__actions,
  .hero__stage,
  .chip__inner,
  .conv__src,
  .conv__record,
  .hero__word > span {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero.is-ready .chip__inner.is-float {
    animation: none !important;
  }

  .trust__track {
    transform: none !important;
  }

  .dock.is-visible {
    transform: none;
  }
}