/* ═══════════════════════════════════════
   TRANSITIONS — View Transitions API
   
   Animation design system:
   
   BETWEEN PAGES (SPA navigation):
   - Card:       morphs position & size, content crossfades
   - Mini card:  tucks under main card (leaving), emerges (arriving)
   - Left panel: slides as a unit — text rides with it, no separate fade
   - Below fold: fades as a block
   - Header/ftr: no animation (persistent)
   
   ON PAGE LOAD (initial visit):
   - Panel text:  gentle opacity reveal in place, no movement
   - Card:        gentle opacity reveal
   - Mini card:   slides up from behind main card
   - Below fold:  gentle opacity reveal
   
   PRINCIPLES:
   - Directional movement = purposeful (panel slides, mini tucks)
   - No "from bottom" fades on text — that's themeforest energy
   - Subtle over flashy. Boss-friendly.
   ═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   VIEW TRANSITION NAMES
   ═══════════════════════════════════════ */

#cfgCard {
  view-transition-name: cfg-card;
}

.h-left {
  view-transition-name: left-panel;
}

#belowFold {
  view-transition-name: below-fold;
}

.hdr {
  view-transition-name: header;
}

.ftr {
  view-transition-name: footer;
}


/* ═══════════════════════════════════════
   ROOT TRANSITION
   Keep this quick — it's the backdrop
   behind the named element animations
   ═══════════════════════════════════════ */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════
   CARD MORPH
   The group handles position/size.
   Old/new crossfade with overlap so the
   card surface never goes fully transparent.
   ═══════════════════════════════════════ */

::view-transition-group(cfg-card) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.15, 1);
}

::view-transition-old(cfg-card) {
  animation: vt-card-out 0.3s ease forwards;
}

::view-transition-new(cfg-card) {
  animation: vt-card-in 0.3s ease both;
}


/* ═══════════════════════════════════════
   LEFT PANEL
   Slides as a complete unit.
   Text rides inside — no separate animation.
   Slight dim (not full fade) on exit.
   ═══════════════════════════════════════ */

::view-transition-group(left-panel) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.15, 1);
}

::view-transition-old(left-panel) {
  animation: vt-panel-out 0.3s cubic-bezier(0.4, 0, 0.15, 1) forwards;
}

::view-transition-new(left-panel) {
  animation: vt-panel-in 0.35s cubic-bezier(0.4, 0, 0.15, 1) 0.05s both;
}


/* ═══════════════════════════════════════
   BELOW FOLD
   Simple opacity — no directional movement
   ═══════════════════════════════════════ */

::view-transition-group(below-fold) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
}

::view-transition-old(below-fold) {
  animation: vt-fade-out 0.2s ease forwards;
}

::view-transition-new(below-fold) {
  animation: vt-fade-in 0.35s ease 0.1s both;
}


/* ═══════════════════════════════════════
   HEADER + FOOTER (persistent, no animation)
   ═══════════════════════════════════════ */

::view-transition-group(header),
::view-transition-group(footer) {
  animation-duration: 0s;
}

::view-transition-old(header),
::view-transition-new(header),
::view-transition-old(footer),
::view-transition-new(footer) {
  animation: none;
  mix-blend-mode: normal;
}


/* ═══════════════════════════════════════
   KEYFRAMES — View Transitions
   ═══════════════════════════════════════ */

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card crossfade — overlapping so the surface never goes transparent.
   Old dims to near-zero while new starts from near-zero.
   The group's background color (captured from the element) provides
   the persistent surface. */
@keyframes vt-card-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes vt-card-in {
  0%   { opacity: 0; }
  40%  { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Panel slides out — dims but doesn't fully disappear */
@keyframes vt-panel-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-30px);
    opacity: 0.3;
  }
}

@keyframes vt-panel-in {
  from {
    transform: translateX(-30px);
    opacity: 0.3;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}


/* ═══════════════════════════════════════
   INITIAL PAGE LOAD ANIMATIONS
   Only on first visit — not on SPA nav
   (SPA transitions are handled by the
   View Transitions API above)
   ═══════════════════════════════════════ */

/* Panel content — gentle opacity reveal, no movement */
.h-left-inner {
  animation: load-reveal 0.5s ease both;
  animation-delay: 0.1s;
}

/* Card — gentle reveal */
.cfg-card {
  animation: load-reveal 0.45s ease both;
  animation-delay: 0.05s;
}

/* Mini card — no CSS load animation. Entrance timing
   is handled by JS based on navigation context. */

/* Below fold sections — gentle reveal */
.below-fold {
  animation: load-reveal 0.5s ease both;
  animation-delay: 0.15s;
}

/* CTA split — gentle reveal */
.cta-split {
  animation: load-reveal 0.5s ease both;
  animation-delay: 0.2s;
}

/* Contact sidebar trust items — staggered subtle reveal */
.ct-trust-item:nth-child(1) { animation: load-reveal 0.35s ease both; animation-delay: 0.2s; }
.ct-trust-item:nth-child(2) { animation: load-reveal 0.35s ease both; animation-delay: 0.28s; }
.ct-trust-item:nth-child(3) { animation: load-reveal 0.35s ease both; animation-delay: 0.36s; }


/* ── Load keyframes ── */

@keyframes load-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mini card emerges from behind — slides up slightly */
@keyframes load-mini-emerge {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ═══════════════════════════════════════
   DISABLE LOAD ANIMATIONS AFTER SPA NAV
   The router adds .spa-navigated after
   first navigation to prevent re-triggering
   load animations on SPA page swaps.
   ═══════════════════════════════════════ */

.spa-navigated .h-left-inner,
.spa-navigated .cfg-card,
.spa-navigated .below-fold,
.spa-navigated .cta-split,
.spa-navigated .ct-trust-item {
  animation: none;
}


/* ═══════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }

  .h-left-inner,
  .cfg-card,
  .mini,
  .below-fold,
  .cta-split,
  .ct-trust-item {
    animation: none !important;
  }
}