/* ═══════════════════════════════════════════════════════════════
   Friday Technologies — Motion layer
   Scroll reveals, hero text motion, shimmer accents, card tilt.
   Loaded after app.css — only adds motion, never changes layout.
   ═══════════════════════════════════════════════════════════════ */

html{scroll-behavior:smooth}

/* ─────────────────────────────────────────────────────────────
   HERO — load-in choreography (no JS required for these)
   ───────────────────────────────────────────────────────────── */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroFadeIn{
  from{opacity:0;transform:scale(.94)}
  to{opacity:1;transform:scale(1)}
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

.home-hero-tag{animation:heroFadeUp .7s cubic-bezier(.19,1,.22,1) both}
.home-hero p{animation:heroFadeUp .7s cubic-bezier(.19,1,.22,1) .5s both}
.home-hero-actions{animation:heroFadeUp .7s cubic-bezier(.19,1,.22,1) .65s both}
.home-hero-stats{animation:heroFadeUp .8s cubic-bezier(.19,1,.22,1) .8s both}
.home-hero-art{animation:heroFadeIn 1s ease .35s both}
.home-hero-art img,
.home-hero-art svg{animation:heroFloat 5.5s ease-in-out 1.3s infinite}

/* Hero heading — words rise into place (spans injected by scroll-reveal.js) */
.reveal-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.reveal-word-inner{
  display:inline-block;
  transform:translateY(115%);opacity:0;
  animation:wordRise .75s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay:calc(var(--wi,0) * 55ms + .1s);
}
@keyframes wordRise{to{transform:translateY(0);opacity:1}}

/* Animated gradient sweep on the accent word */
.home-hero h1 .accent{
  background:linear-gradient(90deg,var(--primary) 0%,var(--primary-2) 45%,var(--primary) 90%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:accentShimmer 4.5s linear 1.1s infinite;
}
@keyframes accentShimmer{to{background-position:-200% center}}

/* ─────────────────────────────────────────────────────────────
   SCROLL REVEALS — classes toggled by scroll-reveal.js
   ───────────────────────────────────────────────────────────── */
.reveal-up{
  opacity:0;transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1);
}
.reveal-up.in-view{opacity:1;transform:translateY(0)}

.reveal-stagger > *{
  opacity:0;transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1);
}
.reveal-stagger.in-view > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.03s}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.13s}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.18s}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.23s}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.28s}
.reveal-stagger.in-view > *:nth-child(7){transition-delay:.33s}
.reveal-stagger.in-view > *:nth-child(8){transition-delay:.38s}
.reveal-stagger.in-view > *:nth-child(9){transition-delay:.43s}
.reveal-stagger.in-view > *:nth-child(n+10){transition-delay:.48s}

/* ─────────────────────────────────────────────────────────────
   CARD TILT — subtle 3D pointer-follow (desktop only, JS-driven)
   ───────────────────────────────────────────────────────────── */
.tilt-card{transform-style:preserve-3d;will-change:transform;transition:transform .35s cubic-bezier(.16,.84,.44,1),box-shadow var(--trans),border-color var(--trans)}
.tilt-card:hover{transition:box-shadow var(--trans),border-color var(--trans)}

/* ─────────────────────────────────────────────────────────────
   BUTTON SHINE — light sweep across solid CTAs on hover
   ───────────────────────────────────────────────────────────── */
.btn-primary,.btn-accent,.btn-white{position:relative;overflow:hidden}
.btn-primary::after,.btn-accent::after,.btn-white::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .65s cubic-bezier(.16,.84,.44,1);
  pointer-events:none;
}
.btn-primary:hover::after,.btn-accent:hover::after,.btn-white:hover::after{left:130%}

/* Icon pop on service/why icons — small extra nudge on hover */
.service-card:hover .service-icon{transform:scale(1.08) rotate(-4deg)}
.why-card:hover .why-icon{transform:scale(1.08) rotate(4deg)}
.why-icon{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}

/* Testimonial / product / blog image zoom on hover */
.product-card:hover .product-img img,
.blog-card:hover .blog-img img{transform:scale(1.06)}
.product-img img,.blog-img img{transition:transform .5s cubic-bezier(.16,.84,.44,1)}

/* Stat number pop on stats strip */
.stats-strip-grid .stat-num{display:inline-block}
.reveal-stagger.in-view .stat-num{animation:statPop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes statPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

/* ─────────────────────────────────────────────────────────────
   HERO PARTICLE NETWORK — canvas injected behind hero content by
   ui-enhance.js. Sits at z-index 0; hero content already has its
   own z-index:1 wrapper (.container / .home-hero .container), so
   this never needs any markup change on individual pages.
   ───────────────────────────────────────────────────────────── */
.hero-particles{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.85;
}

/* ─────────────────────────────────────────────────────────────
   MAGNETIC BUTTON GLOW — a touch more lift/glow than the default
   hover state, layered under the pointer-follow transform that
   ui-enhance.js drives via inline style.
   ───────────────────────────────────────────────────────────── */
.btn-primary:hover,.btn-accent:hover{box-shadow:0 14px 34px -6px rgba(14,83,190,.4)}
.btn-white:hover{box-shadow:0 14px 30px -8px rgba(0,0,0,.2)}
.btn-outline:hover{box-shadow:0 10px 26px -8px rgba(14,83,190,.28)}

/* ─────────────────────────────────────────────────────────────
   CLICK RIPPLE — color adapts per button variant via --ripple-color
   ───────────────────────────────────────────────────────────── */
.btn{position:relative;overflow:hidden;--ripple-color:rgba(14,83,190,.18)}
.btn-primary,.btn-accent{--ripple-color:rgba(255,255,255,.45)}
.btn-white-outline{--ripple-color:rgba(255,255,255,.35)}
.btn-ripple{
  position:absolute;border-radius:50%;
  background:var(--ripple-color);
  transform:scale(0);
  animation:btnRippleAnim .6s ease-out forwards;
  pointer-events:none;
}
@keyframes btnRippleAnim{to{transform:scale(1);opacity:0}}

/* ─────────────────────────────────────────────────────────────
   TOP LOADING BAR — perceived page-load / form-submit progress
   ───────────────────────────────────────────────────────────── */
.page-load-bar{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--fill-grad);
  z-index:99999;
  transition:width .4s cubic-bezier(.16,.84,.44,1),opacity .3s ease;
  box-shadow:0 0 10px rgba(14,83,190,.6);
}

/* Submit-button loading state */
.btn-loading{opacity:.85;pointer-events:none}

/* ─────────────────────────────────────────────────────────────
   FOCUS RING PULSE — a quick outward pulse the instant an input
   is focused, layered on top of the existing static focus ring.
   ───────────────────────────────────────────────────────────── */
.form-control:focus{
  animation:focusPulse .5s ease-out;
}
@keyframes focusPulse{
  0%{box-shadow:0 0 0 0 var(--primary-glow)}
  100%{box-shadow:0 0 0 4px var(--primary-glow)}
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY — respect reduced motion preference
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal-up,.reveal-stagger > *,.reveal-word-inner{opacity:1!important;transform:none!important}
  .tilt-card{transform:none!important}
  .hero-particles{display:block}
}