.rounded-videopress {
    border-radius: 15px;
    overflow: hidden;
}

.hover-box {
  display: inline-block; /* Ensures the element fits the image */
  border: 2px solid transparent; /* Initially no visible border */
  border-radius: 25px; /* Set border radius to 25px */
  padding: 0; /* No padding */
  transition: border-width 0.3s ease, transform 0.3s ease; /* Smooth transition for border width and scaling */
  overflow: hidden; /* Ensures the border stays within the rounded corners */
}

/* Border comes from within and expands on hover */
.hover-box:hover {
  border: 2px solid #008CBA; /* Thicker border on hover with blue color */
  transform: scale(1.05); /* Slightly scale up the image */
}

.hover-text{
	z-index: 2;
	transform: scale(1.05);
	pointer-events:none;
}

.darken-image {
  filter: brightness(75%); /* Adjust the percentage to make the image darker or lighter */
}


.flexible-slider {
    height: auto; /* Adjusts height dynamically */
    min-height: [desired height in px or %]; /* Ensures a minimum height */
}

.floating-element {
  transition: transform 0.2s ease-out;
  will-change: transform;
}






@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback: synlig uten animasjon for gamle nettlesere */
.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* Kun for nettlesere som støtter animation-timeline */
@supports (animation-timeline: view()) {
  .animate-on-scroll {
    /* starttilstand før animasjonen spiller */
    opacity: 0;
    transform: translateY(50px);

    /* binder animasjonen til viewport */
    animation-timeline: view(block);

    /* selve animasjonen — navnet og easing brukes,
       men varigheten vil styres av scroll når animation-timeline er aktiv. */
    animation-name: fadeInUp;
    animation-duration: 1s;      /* fortsatt oppgitt for konsistens */
    animation-timing-function: ease-out;
    animation-fill-mode: both;

    /* STARTET SENERE: sett start når 40% av elementet er i view, slutt ved 80% */
    /* Endre disse prosentene for å starte tidligere/senere eller gjøre "trigger"-området
       større/mindre */
    animation-range: entry 20% entry 200%;
  }
}










/* Starttilstand – usynlig og litt nedenfor */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Når den er aktiv – fade inn og flytt opp */
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}



.text-italic-on-load {
  display: inline-block;
  font-style: normal;
  transform: skew(0deg);
  letter-spacing: 0px;
  opacity: 1;
  transition: all 0.8s ease;
	transform-origin: bottom left;
  animation: italicSmooth 1s ease forwards;
	animation-delay: 1s;
}

@keyframes italicSmooth {
  0% {
    font-style: normal;
    transform: skew(0deg);
    letter-spacing: 0px;
    opacity: 1;
  }
  100% {
    transform: skew(-15deg);
    letter-spacing: 0px;
    opacity: 1;
  }
}






/* Scroll-seksjonen */
.scroll-section {
  position: relative;
  height: 800vh;
	overflow: clip;
	isolation: isolate;
}

/* Sticky tekst-holder */
.sticky-wrapper {
  position: sticky;
  top: 40vh;
  transform: translateY(-50%);
  z-index: 10;
	padding-bottom: 5vh;
	padding-top: 15vh
}

/* Slides */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(24px); /* start litt nede */
  will-change: opacity, transform;
  transition: none; /* viktig: ingen tidsbasert animasjon */
}

/* Aktiv slide */
.slide.is-visible {
  opacity: 1;
}

/* Skjul sticky-wrapper når seksjonen er ute av view */
.sticky-wrapper.is-hidden {
  opacity: 0;
  pointer-events: none;
}