/*!
 * Walyt Premium Animation System — animations.css
 * Layer: motion-only. Never overrides layout, color, or content.
 */

/* ============================================================
   STICKY HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: transparent;
  transition: background-color 0.38s ease,
              box-shadow 0.38s ease,
              backdrop-filter 0.38s ease;
}

.site-header.header-scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.07),
    0 8px 32px rgba(15, 23, 42, 0.05);
}

/* ============================================================
   LENIS SMOOTH SCROLL COMPATIBILITY
   ============================================================ */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ============================================================
   DEPTH RENDERING LAYERS
   ============================================================ */
.page-shell {
  perspective: 1600px;
  perspective-origin: 50% 18%;
  transform-style: preserve-3d;
}

main,
.hero-shell,
.contact-hero-shell,
.help-hero-shell,
.payments-hero-shell,
.app-download-section,
.walyt-footer,
.contact-soft-panel,
.contact-methods-grid,
.contact-help-grid,
.contact-form-wrap,
.contact-form-panel,
.contact-support-list,
.contact-bullet-list,
.contact-method-card,
.contact-help-card,
.contact-support-item,
.payment-feature-section,
.help-section,
.help-soft-panel,
.help-faq-panel,
.help-hero-stage,
.help-hero-grid,
.help-hero-visual,
.help-visual-frame,
.payments-section,
.payments-section-block,
.payments-section-subgrid,
.payments-hero-grid,
.payments-hero-stage,
.payments-security-panel,
.payments-diff-visual,
.payments-badge-row,
.workflow-section,
.testimonial-section {
  transform-style: preserve-3d;
}

.hero-shell,
.contact-hero-shell,
.app-download-section,
.walyt-footer {
  will-change: transform;
}

.phone-container,
.phone-main,
.phone-secondary,
.contact-hero-stage,
.contact-hero-grid,
.contact-hero-visual,
.contact-hero-card,
.contact-floating-chip,
.contact-method-card,
.contact-help-card,
.contact-support-item,
.contact-form-panel,
.contact-form-wrap,
.contact-bullet-list,
.contact-support-list,
.help-hero-stage,
.help-hero-grid,
.help-hero-copy,
.help-hero-visual,
.help-hero-card,
.help-floating-chip,
.help-topics-grid,
.help-faq-panel,
.help-soft-panel,
.help-split-grid,
.help-visual-frame,
.help-topic-card,
.help-check-item,
.help-action-card,
.payments-hero-stage,
.payments-hero-grid,
.payments-hero-copy,
.payments-hero-actions,
.payments-hero-chips,
.payments-visual,
.payments-collage,
.payments-collage-card,
.payments-collage-badge,
.payments-feature-card,
.payments-trust-card,
.payments-security-panel,
.payments-diff-visual,
.payments-badge-row,
.app-download-panel,
.app-download-visual,
.app-download-floating-card,
.contact-soft-panel,
.contact-method-card,
.contact-help-card,
.payment-feature-card,
.workflow-card,
.testimonial-card,
.footer-panel,
.footer-wrap,
.footer-grid,
.footer-column,
.footer-bottom-block {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* ============================================================
   HOVER MICRO-INTERACTIONS
   (Enhancing over what's in stylee.css — all additive)
   ============================================================ */

/* Payment feature cards — lift on hover */
.payment-feature-card {
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease;
  cursor: default;
}

.payment-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
}

/* Block hover during entrance stagger */
.payment-feature-card.anim-pending {
  pointer-events: none;
}

/* Workflow cards — lift on hover */
.workflow-card {
  transition:
    transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.26s ease;
}

.workflow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.09);
}

/* Icon boxes — enhanced lift */
.guten-icon-box-wrapper {
  transition:
    transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.26s ease !important;
}

.guten-icon-box-wrapper:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.09) !important;
}

/* Step icons — bounce on hover */
.smart-banking-step-icon {
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease;
}

.smart-banking-step:hover .smart-banking-step-icon {
  transform: translateY(-4px) scale(1.06);
}

/* Global solutions cards — smooth hover (builds on stylee.css) */
.global-solutions-card:not(.back) {
  transition:
    transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.4s ease !important;
}

/* Navigation links — subtle Y drift */
.site-header nav a {
  display: inline-block;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.site-header nav a:hover {
  transform: translateY(-1px);
}

/* Social icon hover */
.walyt-footer .footer-socials a {
  transition:
    transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease !important;
}

.walyt-footer .footer-socials a:hover {
  transform: translateY(-3px) scale(1.08) !important;
}

/* Footer links */
.walyt-footer .footer-list a {
  display: inline-block;
  transition:
    color 0.2s ease,
    transform 0.18s ease !important;
}

.walyt-footer .footer-list a:hover {
  color: #fff !important;
  transform: translateX(3px) !important;
}

/* App download floating cards — ambient float */
@keyframes walyt-float-card {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

.app-download-floating-card.card-left {
  animation: walyt-float-card 4.2s ease-in-out infinite;
  animation-delay: 0.4s;
}

.app-download-floating-card.card-right {
  animation: walyt-float-card 4.2s ease-in-out infinite;
  animation-delay: 2.1s;
}

/* Store buttons — hover lift */
.store-button {
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.store-button:hover {
  transform: translateY(-3px) !important;
}

/* Testimonial nav buttons */
.testimonial-nav {
  transition:
    transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease,
    border-color 0.2s ease !important;
}

.testimonial-nav:hover {
  transform: translateY(-2px) scale(1.06) !important;
}

/* Primary buttons — enhanced lift (additive) */
.btn-primary {
  transition:
    transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.26s ease !important;
}

.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 32px rgba(124, 39, 255, 0.38) !important;
}

.guten-button {
  transition:
    transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.26s ease !important;
}

.guten-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 38px rgba(124, 39, 255, 0.26) !important;
}

/* ============================================================
   SECTION REVEAL — INITIAL STATES
   (Set by JS via gsap.set; fallback if JS disabled = visible)
   ============================================================ */

/* ============================================================
   MOBILE OVERRIDES
   Disable non-essential transitions on touch devices
   ============================================================ */
@media (max-width: 767px) {
  .page-shell {
    perspective: none;
  }

  main,
  .hero-shell,
  .contact-hero-shell,
  .help-hero-shell,
  .payments-hero-shell,
  .app-download-section,
  .walyt-footer,
  .contact-soft-panel,
  .contact-methods-grid,
  .contact-help-grid,
  .contact-form-wrap,
  .contact-form-panel,
  .contact-support-list,
  .contact-bullet-list,
  .contact-method-card,
  .contact-help-card,
  .contact-support-item,
  .payment-feature-section,
  .help-section,
  .help-soft-panel,
  .help-faq-panel,
  .help-hero-stage,
  .help-hero-grid,
  .help-hero-visual,
  .help-visual-frame,
  .payments-section,
  .payments-section-block,
  .payments-section-subgrid,
  .payments-hero-grid,
  .payments-hero-stage,
  .payments-security-panel,
  .payments-diff-visual,
  .payments-badge-row,
  .workflow-section,
  .testimonial-section {
    transform-style: flat;
  }

  .payment-feature-card:hover,
  .payments-feature-card:hover,
  .payments-trust-card:hover,
  .contact-method-card:hover,
  .contact-help-card:hover,
  .contact-support-item:hover,
  .help-topic-card:hover,
  .help-action-card:hover,
  .workflow-card:hover,
  .guten-icon-box-wrapper:hover,
  .smart-banking-step:hover .smart-banking-step-icon {
    transform: none !important;
  }
}

/* ============================================================
   REDUCED MOTION — FULL KILL SWITCH
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .floating-icon,
  .app-download-floating-card {
    animation: none !important;
  }

  .payment-feature-card:hover,
  .payments-feature-card:hover,
  .payments-trust-card:hover,
  .contact-method-card:hover,
  .contact-help-card:hover,
  .contact-support-item:hover,
  .help-topic-card:hover,
  .help-action-card:hover,
  .workflow-card:hover,
  .guten-icon-box-wrapper:hover,
  .smart-banking-step:hover .smart-banking-step-icon,
  .btn-primary:hover,
  .guten-button:hover,
  .store-button:hover,
  .site-header nav a:hover,
  .walyt-footer .footer-socials a:hover,
  .walyt-footer .footer-list a:hover,
  .testimonial-nav:hover,
  .global-solutions-card:not(.back):hover {
    transform: none !important;
  }

  .site-header {
    position: sticky;
    background-color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.07) !important;
  }
}