/* =============================================
   Animationer & effekter (performance-optimeret)
   ============================================= */

/* ── Scroll progress ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--orange-dark), var(--orange));
  will-change: transform;
}

/* ── Pause infinite animationer under scroll ── */
body.is-scrolling .hero__orb,
body.is-scrolling .hero__background-image,
body.is-scrolling .cta__bg-image,
body.is-scrolling .cta__image img,
body.is-scrolling .hero__headline--accent,
body.is-scrolling .about__headline--accent,
body.is-scrolling .cta__headline--accent {
  animation-play-state: paused !important;
}

/* ── Floating orbs (reduceret blur) ── */
.hero__orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.1;
  animation: float-orb 16s ease-in-out infinite;
  will-change: transform;
}

.hero__orb--1 {
  width: 300px;
  height: 300px;
  background: var(--orange);
  top: 10%;
  right: 15%;
}

.hero__orb--2 {
  width: 220px;
  height: 220px;
  background: #ff9a5c;
  bottom: 20%;
  left: 5%;
  animation-delay: -5s;
}

.hero__orb--3 {
  display: none;
}

@keyframes float-orb {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%       { transform: translate3d(15px, -10px, 0); }
}

/* ── Hero bg – langsom zoom, GPU layer ── */
.hero__background-image {
  animation: ken-burns 30s ease-in-out infinite alternate;
  transform: translateZ(0);
}

@keyframes ken-burns {
  0%   { transform: translateZ(0) scale(1); }
  100% { transform: translateZ(0) scale(1.05); }
}

/* ── Header scroll state (ingen backdrop-filter) ── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.header--scrolled {
  padding-block: 16px;
  background: rgba(10, 10, 10, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* ── Hero load stagger ── */
.hero__eyebrow,
.hero__headline,
.hero__description,
.hero__content .btn,
.feature {
  opacity: 0;
  transform: translateY(24px);
}

.hero--loaded .hero__eyebrow  { animation: fade-up 0.7s 0.15s ease forwards; }
.hero--loaded .hero__headline { animation: fade-up 0.8s 0.3s ease forwards; }
.hero--loaded .hero__description { animation: fade-up 0.7s 0.45s ease forwards; }
.hero--loaded .hero__content .btn { animation: fade-up 0.7s 0.6s ease forwards; }
.hero--loaded .feature:nth-child(1) { animation: fade-up 0.6s 0.75s ease forwards; }
.hero--loaded .feature:nth-child(2) { animation: fade-up 0.6s 0.9s ease forwards; }
.hero--loaded .feature:nth-child(3) { animation: fade-up 0.6s 1.05s ease forwards; }

@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Accent text – statisk gradient, ingen shimmer-loop */
.hero__headline--accent,
.about__headline--accent,
.cta__headline--accent {
  color: var(--orange);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal--left  { transform: translate3d(-32px, 0, 0); }
.reveal--right { transform: translate3d(32px, 0, 0); }
.reveal--scale { transform: scale(0.95); }

.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ── Buttons ── */
.btn {
  position: relative;
  overflow: hidden;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.btn--primary {
  box-shadow: 0 4px 16px rgba(232, 96, 36, 0.25);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(232, 96, 36, 0.4);
}

.btn--ghost:hover,
.btn--outline-white:hover {
  transform: translateY(-2px);
}

/* ── Feature hover ── */
.feature {
  transition: transform 0.25s ease;
}

.feature:hover {
  transform: translateY(-3px);
}

.feature__icon {
  transition: transform 0.3s ease, color 0.25s;
}

.feature:hover .feature__icon {
  transform: scale(1.1);
  color: #ff9a5c;
}

/* ── About image ── */
.about__image-wrap {
  transition: transform 0.4s ease;
}

.about__image-wrap:hover {
  transform: scale(1.02);
}

.about__image {
  transition: transform 0.4s ease;
}

.about__image-wrap:hover .about__image {
  transform: scale(1.04);
}

/* ── Value icons ── */
.value__icon {
  transition: transform 0.3s ease, background 0.25s, box-shadow 0.25s;
}

.value:hover .value__icon {
  transform: scale(1.1);
  background: rgba(232, 96, 36, 0.12);
  box-shadow: 0 0 12px rgba(232, 96, 36, 0.2);
}

/* ── Testimonial cards (CSS hover, ingen JS tilt) ── */
.testimonial {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
}

.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  border-color: rgba(232, 96, 36, 0.15);
}

.testimonial__quote-icon {
  transition: opacity 0.3s ease;
}

.testimonial:hover .testimonial__quote-icon {
  opacity: 1;
}

/* ── CTA bg – statisk, ingen float på billeder ── */
.cta__bg-image {
  transform: translateZ(0);
}

/* ── Footer social ── */
.footer__social-link {
  transition: transform 0.25s ease, border-color 0.25s, color 0.25s, background 0.25s;
}

.footer__social-link:hover {
  transform: translateY(-2px);
  background: rgba(232, 96, 36, 0.12);
}

.footer__links a,
.footer__contact a {
  display: inline-block;
  transition: color 0.25s, transform 0.25s;
}

.footer__links a:hover,
.footer__contact a:hover {
  transform: translateX(4px);
}

/* ── Section performance ── */
.about,
.testimonials,
.cta,
.booking,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* ── Eyebrow line ── */
.about__eyebrow,
.testimonials__eyebrow {
  position: relative;
  display: inline-block;
}

.about__eyebrow::before,
.testimonials__eyebrow::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width 0.5s ease;
}

.reveal.is-visible .about__eyebrow::before,
.reveal.is-visible .testimonials__eyebrow::before {
  width: 100%;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .hero__eyebrow,
  .hero__headline,
  .hero__description,
  .hero__content .btn,
  .feature {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}