/* =========================================================
   VIMGO LLC — ANIMATION SYSTEM
   Layered on top of style.css. Every rule here is additive:
   it only changes motion/interaction states, never layout,
   color, spacing, or typography tokens.
   Respects prefers-reduced-motion throughout (see bottom).
   ========================================================= */

/* ---------------------------------------------------------
   0. Page load — fade/blur reveal
   --------------------------------------------------------- */
html.js-loading body{
  opacity:0;
}
body.page-ready{
  animation: page-fade-in .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes page-fade-in{
  from{ opacity:0; filter:blur(6px); transform:translateY(8px); }
  to{ opacity:1; filter:blur(0); transform:translateY(0); }
}

/* page-out transition (triggered on internal link click) */
body.page-leaving{
  animation: page-fade-out .32s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes page-fade-out{
  to{ opacity:0; transform:translateY(-6px); filter:blur(4px); }
}

/* ---------------------------------------------------------
   1. Scroll progress bar
   --------------------------------------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:9999; background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--rust), var(--safety));
  transform-origin:left;
  transition:width .08s linear;
}

/* ---------------------------------------------------------
   2. Scroll reveal primitives
   Applied via data-anim attributes, set up by animations.js
   with GSAP ScrollTrigger. CSS supplies the *initial* state
   so content doesn't flash unstyled before JS binds it.
   --------------------------------------------------------- */
[data-anim]{ will-change:transform, opacity; }
html.gsap-ready [data-anim="fade-up"],
html.gsap-ready [data-anim="fade-left"],
html.gsap-ready [data-anim="fade-right"],
html.gsap-ready [data-anim="scale-in"],
html.gsap-ready [data-anim="mask-reveal"],
html.gsap-ready [data-anim="stagger"] > *{
  opacity:0;
}

/* Fallback (no-JS or reduced motion): everything just visible */
.no-js [data-anim],
.reduced-motion [data-anim],
.reduced-motion [data-anim] > *{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

/* Simple CSS-only reveal (used pre-existing .reveal class) kept intact,
   enhanced with nicer easing */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------
   3. Image reveal — clip-path mask + slow zoom on load
   --------------------------------------------------------- */
.img-reveal{
  position:relative; overflow:hidden; background:var(--paper-dim);
}
.img-reveal .img-el{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.08);
  opacity:0;
  transition:opacity .8s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
}
.img-reveal .img-el.is-visible{
  opacity:1; transform:scale(1);
}
.img-hover-zoom{ transition:opacity .8s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.img-reveal:hover .img-hover-zoom.is-visible{ transform:scale(1.06); }

/* ---------------------------------------------------------
   4. Cards — lift, glow, tilt
   --------------------------------------------------------- */
.card{
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
  transform-style:preserve-3d;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px rgba(0,0,0,.16);
  border-color:var(--rust);
}
.section-dark .card:hover, .section-steel .card:hover{
  border-color:var(--safety);
  box-shadow:0 22px 40px rgba(0,0,0,.4);
}
.card .num{ transition:transform .35s ease, color .35s ease; display:inline-block; }
.card:hover .num{ transform:translateX(3px); color:var(--rust); }

/* ---------------------------------------------------------
   5. Buttons — shine sweep, scale, glow
   --------------------------------------------------------- */
.btn{
  position:relative; overflow:hidden;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg);
  transition:left .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.btn:hover::after{ left:130%; }
.btn:active{ transform:scale(.96); }
.btn:focus-visible{ box-shadow:0 0 0 4px rgba(245,183,0,.35); }

/* magnetic hover handled via JS transform on .btn-magnetic (buttons only, subtle) */
.btn-magnetic{ transition:transform .18s cubic-bezier(.22,1,.36,1); }

/* ---------------------------------------------------------
   6. Icons / numerals / stat chips
   --------------------------------------------------------- */
.vh-stats .stat b{ display:inline-block; }
.vh-stats .stat{
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}
.vh-stats .stat.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------
   7. Navigation
   --------------------------------------------------------- */
header.site-header{ transition:box-shadow .25s ease, background-color .25s ease; }
nav.main-nav a{ position:relative; transition:color .25s ease; }

/* dropdown submenus */
.main-nav li.has-submenu{ position:relative; }
.main-nav li.has-submenu > a::after{
  content:"▾"; display:inline-block; margin-left:4px; font-size:8px; opacity:.65;
  transition:transform .25s ease;
}
.main-nav .submenu{
  list-style:none; margin:0; padding:6px 0;
  position:absolute; top:100%; left:0; min-width:230px;
  background:var(--paper); border:2px solid var(--asphalt); border-top:2px solid var(--rust);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:60; box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.main-nav li.has-submenu:hover > .submenu,
.main-nav li.has-submenu:focus-within > .submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.main-nav li.has-submenu:hover > a::after{ transform:rotate(180deg); }
.main-nav .submenu li{ border-bottom:none !important; }
.main-nav .submenu a{
  padding:11px 18px; font-size:11.5px; border-bottom:none; display:block; white-space:nowrap;
  color:var(--ink);
}
.main-nav .submenu a::before{ display:none; }
.main-nav .submenu a:hover{ background:var(--paper-dim); color:var(--rust); }

@media (max-width:1180px){
  .main-nav li.has-submenu > a::after{ content:""; }
  .main-nav .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    border:none; box-shadow:none; background:transparent;
    padding:0 0 6px 18px; min-width:0;
  }
  .main-nav .submenu a{ padding:9px 0; font-size:13px; color:var(--ink-soft); border-bottom:none; }
}
nav.main-nav a::before{
  content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px;
  background:var(--rust); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
nav.main-nav a:hover::before, nav.main-nav a.active::before{ transform:scaleX(1); }
.brand-logo{ transition:transform .3s cubic-bezier(.22,1,.36,1), filter .3s ease; }
.brand:hover .brand-logo{ transform:scale(1.04) rotate(-1deg); }

/* mobile menu open/close animation */
nav.main-nav{
  transform-origin:top;
}
@media (max-width:1180px){
  nav.main-nav{
    opacity:0; transform:translateY(-8px) scaleY(.98);
    transition:opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
  }
  nav.main-nav.open{
    display:block; opacity:1; transform:translateY(0) scaleY(1); pointer-events:auto;
  }
  nav.main-nav li{
    opacity:0; transform:translateX(-8px);
    animation:none;
  }
  nav.main-nav.open li{
    animation:nav-item-in .35s cubic-bezier(.22,1,.36,1) forwards;
  }
  nav.main-nav.open li:nth-child(1){ animation-delay:.03s; }
  nav.main-nav.open li:nth-child(2){ animation-delay:.06s; }
  nav.main-nav.open li:nth-child(3){ animation-delay:.09s; }
  nav.main-nav.open li:nth-child(4){ animation-delay:.12s; }
  nav.main-nav.open li:nth-child(5){ animation-delay:.15s; }
  nav.main-nav.open li:nth-child(6){ animation-delay:.18s; }
  nav.main-nav.open li:nth-child(7){ animation-delay:.21s; }
  nav.main-nav.open li:nth-child(8){ animation-delay:.24s; }
  nav.main-nav.open li:nth-child(9){ animation-delay:.27s; }
  nav.main-nav.open li:nth-child(10){ animation-delay:.30s; }
}
@keyframes nav-item-in{
  from{ opacity:0; transform:translateX(-8px); }
  to{ opacity:1; transform:translateX(0); }
}
.nav-toggle span{ transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------
   8. Forms — floating labels, focus glow, loading/success
   --------------------------------------------------------- */
.form-row{ position:relative; }
.form-row input, .form-row textarea, .form-row select{
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  box-shadow:0 0 0 4px rgba(191,59,38,.12);
}
.btn[data-loading="true"]{ pointer-events:none; color:transparent !important; position:relative; }
.btn[data-loading="true"]::before{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.form-success{
  transform:translateY(-6px); opacity:0;
  transition:opacity .4s ease, transform .4s ease;
}
.form-success.show{ transform:translateY(0); opacity:1; }

/* ---------------------------------------------------------
   9. FAQ accordion
   --------------------------------------------------------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:20px 4px; font-family:var(--font-display); font-size:17px;
  letter-spacing:.01em; color:var(--asphalt);
}
.faq-q .plus{
  flex:none; width:24px; height:24px; position:relative;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background:var(--rust);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-q .plus::before{ width:16px; height:2px; }
.faq-q .plus::after{ width:2px; height:16px; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.faq-item.open .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .4s cubic-bezier(.22,1,.36,1);
}
.faq-a-inner{ padding:0 4px 22px; color:var(--ink-soft); font-size:15px; max-width:70ch; }

/* ---------------------------------------------------------
   10. Testimonial / review carousel
   --------------------------------------------------------- */
.testimonial-track{
  display:flex; transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.testimonial-slide{ flex:0 0 100%; }
.testimonial-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.testimonial-dots button{
  width:9px; height:9px; border-radius:50%; border:none; padding:0;
  background:var(--line); cursor:pointer; transition:background .25s ease, transform .25s ease;
}
.testimonial-dots button.active{ background:var(--rust); transform:scale(1.25); }

/* ---------------------------------------------------------
   11. Footer reveal + link hover
   --------------------------------------------------------- */
footer.site-footer a{ position:relative; transition:color .25s ease; }
footer.site-footer .contact-list a{
  display:inline-flex; align-items:center; gap:9px;
}
footer.site-footer .contact-list svg{
  flex:none; width:15px; height:15px; opacity:.85;
  transition:opacity .25s ease, transform .25s ease;
}
footer.site-footer .contact-list a:hover svg{ opacity:1; transform:translateX(2px); }

/* ---------------------------------------------------------
   12. Cursor — normal system cursor (custom cursor disabled)
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   13. Counters
   --------------------------------------------------------- */
.count-el{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------
   15. Floating call button (bottom-right, all pages)
   --------------------------------------------------------- */
.floating-phone{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:var(--rust); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-color .25s ease, color .25s ease;
  text-decoration:none;
}
.floating-phone::before{
  content:"";
  position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--rust);
  opacity:.55;
  animation:floating-phone-pulse 2.4s ease-out infinite;
}
.floating-phone:hover{
  background:var(--safety); color:var(--asphalt);
  transform:scale(1.08);
  box-shadow:0 14px 32px rgba(0,0,0,.38);
}
.floating-phone svg{ width:24px; height:24px; position:relative; z-index:1; }
@keyframes floating-phone-pulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.5); opacity:0; }
}
@media (max-width:600px){
  .floating-phone{ width:50px; height:50px; right:16px; bottom:16px; }
  .floating-phone svg{ width:21px; height:21px; }
}
@media (prefers-reduced-motion: reduce){
  .floating-phone::before{ animation:none; display:none; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js-loading body{ opacity:1; }
  [data-anim], [data-anim] > *,
  .reveal, .img-reveal .img-el, .vh-stats .stat{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
  .cursor-dot, .cursor-ring{ display:none; }
}