/* =============================================
   SMPL Group — Enhanced Animations Layer
   Scroll reveals, parallax, stagger, counters
   ============================================= */

/* ── Reveal variants ── */
.reveal-left  { opacity:0; transform:translateX(-40px); transition:opacity .8s ease,transform .8s ease; }
.reveal-right { opacity:0; transform:translateX(40px);  transition:opacity .8s ease,transform .8s ease; }
.reveal-scale { opacity:0; transform:scale(.88);         transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-fade  { opacity:0;                               transition:opacity 1s ease; }
.reveal-up    { opacity:0; transform:translateY(40px);   transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1); }

.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible,
.reveal-fade.visible,
.reveal-up.visible { opacity:1; transform:none; }

/* stagger children */
.stagger-children > * { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1); }
.stagger-children.visible > *:nth-child(1)  { transition-delay:.05s; opacity:1; transform:none; }
.stagger-children.visible > *:nth-child(2)  { transition-delay:.14s; opacity:1; transform:none; }
.stagger-children.visible > *:nth-child(3)  { transition-delay:.23s; opacity:1; transform:none; }
.stagger-children.visible > *:nth-child(4)  { transition-delay:.32s; opacity:1; transform:none; }
.stagger-children.visible > *:nth-child(5)  { transition-delay:.41s; opacity:1; transform:none; }
.stagger-children.visible > *:nth-child(6)  { transition-delay:.50s; opacity:1; transform:none; }

/* ── Parallax layer ── */
.parallax-slow   { will-change:transform; }
.parallax-medium { will-change:transform; }
.parallax-fast   { will-change:transform; }

/* ── Nav scroll behaviour ── */
.nav { transition:box-shadow .35s ease, background .35s ease; }
.nav.nav-scrolled {
  box-shadow: 0 2px 32px rgba(0,0,0,.12);
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(20px);
}
body.dark-theme .nav.nav-scrolled {
  background: rgba(18,18,22,.85) !important;
}

/* ── Progress bar ── */
#scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg,#5b8af6,#a78bfa,#f472b6);
  z-index:9999; transition:width .1s linear;
  pointer-events:none;
}

/* ── Hero parallax word animation ── */
.v22-hero h1 .word {
  display:inline-block;
  opacity:0; transform:translateY(32px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.v22-hero h1.words-visible .word { opacity:1; transform:none; }
.v22-hero h1.words-visible .word:nth-child(1) { transition-delay:.0s; }
.v22-hero h1.words-visible .word:nth-child(2) { transition-delay:.1s; }
.v22-hero h1.words-visible .word:nth-child(3) { transition-delay:.2s; }
.v22-hero h1.words-visible .word:nth-child(4) { transition-delay:.3s; }
.v22-hero h1.words-visible .word:nth-child(5) { transition-delay:.4s; }

/* ── Flow steps: animated connector lines ── */
.v22-flow { position:relative; }
.v22-flow-line {
  position:absolute; top:50%; left:0; width:0%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,120,200,.35),transparent);
  transition:width 1.2s cubic-bezier(.22,1,.36,1);
  pointer-events:none; z-index:0;
}
.v22-flow.lines-visible .v22-flow-line { width:100%; }

/* flow div hover lift */
.v22-flow div {
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.v22-flow div:hover {
  transform:translateY(-6px) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.09);
  z-index:1;
}

/* ── Eco-item hover ── */
.v24-eco-item {
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease !important;
}
.v24-eco-item:hover {
  transform:translateY(-8px) scale(1.015) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.11) !important;
}

/* ── Dark card hover glow ── */
.dark-card {
  transition:transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s ease,
             background .3s ease !important;
}
.dark-card:hover {
  transform:translateY(-8px) !important;
  box-shadow:0 20px 56px rgba(0,0,0,.22) !important;
}

/* ── Video cards: scale reveal ── */
.v22-video {
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s ease !important;
}
.v22-video:hover {
  transform:scale(1.025) translateY(-4px) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.18) !important;
  z-index:2;
}

/* ── Kicker underline animation ── */
.kicker { position:relative; display:inline-block; overflow:hidden; }
.kicker::after {
  content:''; position:absolute; left:0; bottom:-3px;
  width:0%; height:1px;
  background:currentColor; opacity:.5;
  transition:width .8s cubic-bezier(.22,1,.36,1) .2s;
}
.kicker.visible::after,
.reveal.visible .kicker::after,
[class*="reveal"].visible .kicker::after { width:100%; }

/* ── Stat / number count animation ── */
.count-up {
  display:inline-block;
  transition:transform .3s ease;
}

/* ── Rail marquee speed up on scroll ── */
.v22-rail-inner {
  transition:opacity .6s ease;
}
.v22-rail.rail-boosted .v22-rail-inner span {
  animation-duration:12s !important;
}

/* ── Section entrance: slide from bottom with blur ── */
@keyframes sectionBlurIn {
  from { opacity:0; filter:blur(6px); transform:translateY(20px); }
  to   { opacity:1; filter:blur(0);   transform:translateY(0); }
}
.section-blur-in {
  animation: sectionBlurIn .9s cubic-bezier(.22,1,.36,1) both;
}

/* ── Hero orbit ring pulse ── */
@keyframes ringPulseExtra {
  0%,100% { opacity:.6; stroke-width:1; }
  50%      { opacity:1;  stroke-width:1.5; }
}
.hero-ring-path { animation: ringPulseExtra 3s ease-in-out infinite; }

/* ── Signal board text shimmer ── */
@keyframes shimmerSlide {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}
.v22-signal-grid span {
  background: linear-gradient(90deg, currentColor 40%, rgba(150,180,255,.9) 50%, currentColor 60%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: shimmerSlide 4s linear infinite;
}
.v22-signal-grid span:nth-child(1) { animation-delay:0s; }
.v22-signal-grid span:nth-child(2) { animation-delay:.5s; }
.v22-signal-grid span:nth-child(3) { animation-delay:1s; }
.v22-signal-grid span:nth-child(4) { animation-delay:1.5s; }
.v22-signal-grid span:nth-child(5) { animation-delay:2s; }
.v22-signal-grid span:nth-child(6) { animation-delay:2.5s; }

/* ── Accordion number animation ── */
.v27-acc-num {
  transition: transform .4s cubic-bezier(.22,1,.36,1), color .3s ease;
}
.v27-acc-item:hover .v27-acc-num {
  transform: scale(1.2) translateX(4px);
  color: var(--accent, #5b8af6);
}

/* ── Button hover micro-bounce ── */
.btn {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s ease,
              background .25s ease,
              color .25s ease !important;
}
.btn:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
}
.btn:active {
  transform: translateY(0) scale(.985) !important;
  transition-duration: .1s !important;
}

/* ── Micro-slot icons animated ── */
@keyframes slotPing {
  0%,100% { transform:scale(1); opacity:.6; }
  50%      { transform:scale(1.35); opacity:1; }
}
.v24-micro-slot i {
  animation: slotPing 2.4s ease-in-out infinite;
}
.v24-micro-slot:nth-child(2) i { animation-delay:.6s; }
.v24-micro-slot:nth-child(3) i { animation-delay:1.2s; }

/* ── Page transition overlay ── */
#page-transition-overlay {
  position:fixed; inset:0;
  background:#fff;
  z-index:10000;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}
body.dark-theme #page-transition-overlay { background:#0f0f12; }
#page-transition-overlay.active { opacity:1; }

/* ── CTA section animated border ── */
@keyframes ctaBorderMove {
  0%,100% { border-color:rgba(120,140,200,.25); }
  50%      { border-color:rgba(120,140,200,.6); }
}
.v22-cta {
  animation: ctaBorderMove 3.5s ease-in-out infinite;
}

/* ── Orbit cluster extra spin ── */
.v23-orbit-cluster { animation: spinSlow 14s linear infinite !important; }
.v23-orbit-cluster span:nth-child(2) { animation-duration:9s !important; }

/* ── scroll-triggered line draw ── */
.draw-line {
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);
}
.draw-line.visible { stroke-dashoffset:0; }

/* ── brand hover animation ── */
.brand { transition:opacity .25s ease; }
.brand:hover .brand-mark {
  animation: smplFloatSoft .6s ease forwards;
}

/* ── footer social links stagger ── */
.footer-inner > * {
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.footer-inner.footer-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:.0s; }
.footer-inner.footer-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.1s; }
.footer-inner.footer-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.2s; }
.footer-inner.footer-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.3s; }

/* ── Cursor glow scale on hover of interactive elements ── */
a:hover ~ .cursor-glow,
button:hover ~ .cursor-glow {
  transform: scale(1.6);
}

/* ── Reduced motion fallback ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-left, .reveal-right, .reveal-scale,
  .reveal-fade, .reveal-up,
  .stagger-children > *,
  .v22-hero h1 .word,
  .v22-flow-line { transition:none !important; animation:none !important; }
}

/* =============================================
   MOBILE OPTIMISATIONS
   ============================================= */

/* Reduce parallax & heavy transforms on mobile */
@media (max-width: 768px) {
  /* Disable parallax — GPU cost, janky on low-end */
  .parallax-slow, .parallax-medium, .parallax-fast { transform: none !important; }

  /* Simpler reveal on mobile — just fade, no translate */
  .reveal, .reveal-left, .reveal-right, .reveal-up, .reveal-scale {
    transform: none !important;
    transition: opacity .6s ease !important;
  }

  /* Scroll progress bar slightly thicker on mobile */
  #scroll-progress { height: 3px; }

  /* Nav: always full backdrop on mobile */
  .nav { background: rgba(255,255,255,.9) !important; backdrop-filter: blur(16px); }
  body.dark-theme .nav { background: rgba(14,14,18,.9) !important; }

  /* Flow steps: vertical on mobile, disable horizontal line */
  .v22-flow-line { display: none; }
  .v22-flow div:hover { transform: none !important; }

  /* Disable magnetic buttons on touch */
  .btn:hover { transform: none !important; }

  /* Hero words: instant reveal, no delay stagger */
  .v22-hero h1 .word {
    transition: opacity .5s ease !important;
    transform: none !important;
  }

  /* Eco items: no hover lift (no hover on touch) */
  .v24-eco-item:hover { transform: none !important; }
  .dark-card:hover { transform: none !important; }
  .v22-video:hover { transform: none !important; }

  /* Stagger: simpler timing on mobile */
  .stagger-children > * { transform: none !important; }

  /* Signal grid shimmer: pause on mobile for battery */
  .v22-signal-grid span { animation: none !important; -webkit-text-fill-color: unset !important; background: none !important; }

  /* Section head: stack vertically */
  .section-head { flex-direction: column; gap: 12px; }
  .section-head > div { width: 100%; }

  /* Kicker underline: skip animation on mobile */
  .kicker::after { display: none; }

  /* CTA border animation: simpler */
  .v22-cta { animation: none !important; }

  /* Video cards: remove scale hover */
  .v22-video { transition: none !important; }

  /* Rail: consistent speed */
  .v22-rail.rail-boosted .v22-rail-inner span { animation-duration: 18s !important; }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  /* Hero h1 font size safeguard */
  .v22-hero h1 { font-size: clamp(36px, 9vw, 56px); line-height: 1.12; }

  /* Signal board: reduce padding */
  .v22-signal-board { padding: 18px 16px; }
  .v22-signal-grid { gap: 8px 10px; }
  .v22-signal-grid span { font-size: 11px; }

  /* Eco grid: single column */
  .v24-eco-layout { grid-template-columns: 1fr !important; }

  /* Flow: single column already handled by style.css, ensure no gap */
  .v22-flow { gap: 12px; }

  /* Page transition overlay: faster on mobile */
  #page-transition-overlay { transition: opacity .2s ease; }

  /* Accordion: bigger tap targets */
  .v27-acc-trigger { padding: 16px 0; min-height: 52px; }

  /* Progress bar hidden on very small */
  #scroll-progress { display: none; }

  /* orbit cluster: skip spin on tiny screens */
  .v23-orbit-cluster { animation: none !important; }
}

/* Touch: disable cursor glow */
@media (hover: none) {
  .cursor-glow { display: none !important; }
  .btn { transform: none !important; box-shadow: none !important; }
  .btn:active { transform: scale(.97) !important; transition-duration: .1s !important; }
}

/* Dance is handled entirely by style.css — no overrides needed here */