/* =========================================================
   AL-ESSI / HOME EFFECTS
   Source basis:
   - Exact source appear effect recovered from __source__appearAnimationsContent:
     opacity .001 -> 1, spring, duration .4, bounce .2.
   - Remaining viewport/hover effects reproduce source's interaction language
     without shipping the source runtime.
   ========================================================= */

:root{
  --alessi-motion-fast: .28s;
  --alessi-motion-mid: .55s;
  --alessi-motion-long: .8s;
  --alessi-motion-ease: cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   VIEWPORT REVEALS
   Applied by effects.js only when JavaScript is available.
   ========================================================= */

html.alessi-effects-ready [data-alessi-reveal]{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:
    opacity var(--alessi-motion-long) var(--alessi-motion-ease),
    transform var(--alessi-motion-long) var(--alessi-motion-ease);
  transition-delay:var(--alessi-effect-delay,0ms);
  will-change:opacity,transform;
}

html.alessi-effects-ready [data-alessi-reveal="fade"]{
  transform:none;
}

html.alessi-effects-ready [data-alessi-reveal="left"]{
  transform:translate3d(-36px,0,0);
}

html.alessi-effects-ready [data-alessi-reveal="right"]{
  transform:translate3d(36px,0,0);
}

html.alessi-effects-ready [data-alessi-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* Home Works/CTA exact appear state from the Home module:
   opacity 0, y 18, once at 50%, tween 1s [.59,.25,.12,1.17]. */
html.alessi-effects-ready .home-works [data-alessi-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity 1s cubic-bezier(.59,.25,.12,1.17),transform 1s cubic-bezier(.59,.25,.12,1.17);
  transition-delay:0s;
}
html.alessi-effects-ready .home-works [data-alessi-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* Main title blocks */
.home-about__title,
.home-services__title,
.home-works__title,
.home-blog__title{
  transform-origin:left center;
}

/* =========================================================
   IMAGE / CARD HOVER
   ========================================================= */


  .service-card__media img,
  .blog-card__media img{
    transition:transform .7s var(--alessi-motion-ease);
  }

  .service-card:hover .service-card__media img,
  .blog-card:hover .blog-card__media img{
    transform:scale(1.035);
  }


/* =========================================================
   BUTTON / LINK MOTION
   ========================================================= */

.alessi-ui-button{
  will-change:transform;
}

  .alessi-ui-button:hover .alessi-ui-button__icon{
    transform:translate(2px,-2px) rotate(2deg);
  }
}

/* =========================================================
   HERO
   Hero slider itself has its own cross-fade.
   Add the source-like first-load fade to the foreground layer.
   ========================================================= */

html.alessi-effects-ready .hero-slider__content,
html.alessi-effects-ready .hero-slider__project{
  animation:alessi-hero-enter .7s var(--alessi-motion-ease) both;
}

html.alessi-effects-ready .hero-slider__project{
  animation-delay:.08s;
}

@keyframes alessi-hero-enter{
  from{
    opacity:.001;
    transform:translate3d(0,20px,0);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   MARQUEES
   Existing marquee animations are retained; hover slows them instead
   of stopping abruptly.
   ========================================================= */

.brand-slider__track,
.outsourcing-card__marquee-track{
  transition:filter .3s ease;
}

@media(hover:hover) and (pointer:fine){
  .brand-slider:hover .brand-slider__track,
  .outsourcing-card__marquee:hover .outsourcing-card__marquee-track{
    animation-play-state:paused;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */

.alessi-footer__headline,
.alessi-footer__lead-row,
.alessi-footer__identity,
.alessi-footer__columns{
  will-change:opacity,transform;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
  }

  html.alessi-effects-ready [data-alessi-reveal],
  html.alessi-effects-ready .hero-slider__content,
  html.alessi-effects-ready .hero-slider__project{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }

  .brand-slider__track,
  .outsourcing-card__marquee-track{
    animation:none !important;
  }
}