/*fade up animation --------------------------------------------------*/

:root{
  --fade-ease: cubic-bezier(.2,.8,.2,1);
  --fade-dur: 3.8s;     /* långsammare, lyxigt */
  --fade-shift: 36px;   /* hur mycket de glider uppåt */
  --fade-stagger: .12s; /* mellanrum mellan syskon */
}

@media (prefers-reduced-motion: reduce){
  .gm-fade-up,
  .gm-fade-in,
  .gm-slide-up { 
    opacity: 1 !important; 
    transform: none !important; 
  }
}

/* =======================
   Combined: gm-fade-up
   (fade + slide)
   ======================= */

.gm-fade-up {
  opacity: 0;
  transform: translateY(var(--fade-shift));
  will-change: transform, opacity;
  transition:
    opacity var(--fade-dur) var(--fade-ease),
    transform var(--fade-dur) var(--fade-ease);
}

.gm-fade-up.gm-is-inview {
  opacity: 1;
  transform: translateY(0);
}


/* =======================
   Fade only: gm-fade-in
   ======================= */

.gm-fade-in {
  opacity: 0;
  transform: none;
  will-change: opacity;
  transition:
    opacity var(--fade-dur) var(--fade-ease);
}

.gm-fade-in.gm-is-inview {
  opacity: 1;
}


/* =======================
   Slide only: gm-slide-up
   ======================= */

.gm-slide-up {
  opacity: 1;
  transform: translateY(var(--fade-shift));
  will-change: transform;
  transition:
    transform var(--fade-dur) var(--fade-ease);
}

.gm-slide-up.gm-is-inview {
  transform: translateY(0);
}


/* =======================
   Optional stagger helper
   ======================= */

.gm-fade-stagger > * { transition-delay: 0s; }
.gm-fade-stagger > *:nth-child(1){ transition-delay: calc(var(--fade-stagger)*0); }
.gm-fade-stagger > *:nth-child(2){ transition-delay: calc(var(--fade-stagger)*1); }
.gm-fade-stagger > *:nth-child(3){ transition-delay: calc(var(--fade-stagger)*2); }
.gm-fade-stagger > *:nth-child(4){ transition-delay: calc(var(--fade-stagger)*3); }
.gm-fade-stagger > *:nth-child(5){ transition-delay: calc(var(--fade-stagger)*4); }
/* lägg gärna till fler rader vid behov */



/*---------------------*/

/* =========================================
   COVER GLIDE — SMOOTH (matchar fade-up-känslan)
   ========================================= */

:root{
  /* Lugnare kurva (samma karaktär som fade-up) */
  --cv-ease: cubic-bezier(.2,.8,.2,1);
  --cv-dur: 2s;     /* lite längre svans */
  --cv-shift: 14px;   /* vertikal startförflyttning */
  --cv-zoom: 1.03;    /* diskret startzoom */
}

@media (prefers-reduced-motion: reduce){
  .gm-cover-glide .wp-block-cover__image-background,
  .gm-cover-glide video.wp-block-cover__video-background {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.gm-cover-glide {
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Startläge – ingen transition än */
.gm-cover-glide .wp-block-cover__image-background,
.gm-cover-glide video.wp-block-cover__video-background {
  opacity: 0;
  transform: scale(var(--cv-zoom)) translateY(var(--cv-shift)) translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: none;
  transform-origin: 50% 50%;
}

/* Inview – lugn, sammanhängande glidning */
.gm-cover-glide.gm-inview .wp-block-cover__image-background,
.gm-cover-glide.gm-inview video.wp-block-cover__video-background {
  opacity: 1;
  transform: scale(1) translateY(0) translateZ(0);
  transition:
    transform var(--cv-dur) var(--cv-ease),
    opacity  calc(var(--cv-dur) * .9) var(--cv-ease);
}

/* FINJUSTERING (valfritt)
   – ingen prefixändring behövs här */