/* ============================================================
   GJØR HVERDAGEN ENKLERE — fem scener med SVG-animasjoner
   fra salongreisen-design-referanse.html. Scroll-drevet,
   sticky scene-lerret, fargereise fra grå til gylden.
   ============================================================ */

@keyframes ring { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes wave { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: .9; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes tick { 0%,49% { transform: rotate(0deg); } 50%,100% { transform: rotate(30deg); } }
@keyframes flutter { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes glow { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sweep { 0% { transform: translateX(-40px); opacity: .5; } 100% { transform: translateX(10px); opacity: .95; } }
@keyframes shake { 0%,72%,100% { transform: translateY(0); } 80% { transform: translateY(3px); } 90% { transform: translateY(-2px); } }

.vr {
  position: relative;
  z-index: 0;
  isolation: isolate;
  --vr-h: min(50svh, 405px);
}

.vr-layout {
  display: block;
}

.vr-visual {
  display: none;
}

.vr.is-enhanced .vr-visual {
  display: block;
}

@media (min-width: 900px) {
  .vr.is-enhanced .vr-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .vr.is-enhanced .vr-beats {
    grid-column: 1;
    grid-row: 1;
  }

  .vr.is-enhanced .vr-visual {
    grid-column: 2;
    grid-row: 1;
  }

  .vr.is-enhanced .vr-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 96px;
    z-index: 1;
  }
}

@media (max-width: 899px) {
  .vr.is-enhanced .vr-visual {
    position: -webkit-sticky;
    position: sticky;
    top: 82px;
    z-index: 2;
    background: var(--bg);
    margin: 0 -26px;
    padding: 0 26px 14px;
  }

  .vr.is-enhanced .vr-visual::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 26px;
    background: linear-gradient(var(--bg), transparent);
    pointer-events: none;
  }
}

.vr-frame {
  position: relative;
  width: min(100%, calc(var(--vr-h) * 1.78));
  aspect-ratio: 720 / 405;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 24px 54px -26px rgba(31, 93, 67, 0.3), 0 2px 6px rgba(22, 32, 27, 0.05);
}

/* Naar scene 1 er byttet ut med et bilde (data-vr-bilde1), foelger rammen
   bildets sideforhold i stedet for illustrasjonenes 720/405. */
.vr[data-vr-bilde1] .vr-frame,
.vr[data-vr-bilde1] .vr-still-frame {
  aspect-ratio: 1408 / 768;
}

/* Myk groennflate bak bildekortet, samme visuelle spraak som hero-en:
   .hero-visual::before legger en radial-gradient i --accent med lav
   dekning bak booking-kortet og blurrer den. Her gjoer vi det samme bak
   .vr-frame, saa fotoet ikke flyter i ren hvit.

   Ligger BAK rammen, ikke oppaa: ::before kommer foerst i treet og har
   auto z-index, saa den males under .vr-frame, som dessuten har en
   ugjennomsiktig background. Bildet self roeres ikke.

   Scopet til [data-vr-bilde1], samme konvensjon som regelen over, slik
   at illustrasjonsfanen staar uendret. */
.vr[data-vr-bilde1] .vr-sticky::before {
  content: "";
  position: absolute;
  inset: -16% -12% -20%;
  background: radial-gradient(circle at 50% 42%, rgba(31, 93, 67, 0.16), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

/* Paa desktop er .vr-sticky allerede position:sticky og duger som
   utgangsboks. Under 900px er den statisk, saa den maa posisjoneres -
   men kun her, ellers ville regelen overstyrt sticky-en over. Strammere
   bleed fordi visual-en da ligger sticky over teksten som scroller. */
@media (max-width: 899px) {
  .vr[data-vr-bilde1] .vr-sticky {
    position: relative;
  }

  .vr[data-vr-bilde1] .vr-sticky::before {
    inset: -8% -8% -10%;
  }
}

/* <picture> er inline by default og ville brutt height:100% paa bildet.
   Wrapperen maa derfor baere samme boks som <img> gjorde alene. */
.vr-scene > picture,
.vr-still-frame > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.vr-bilde {
  display: block;
  width: 100%;
  height: 100%;
}

/* Fargereisen (saturate/sepia paa .vr-scene og .vr-still-frame) gjelder
   illustrasjonene. Et bilde skal vises slik det er, saa scenelaget som
   faktisk baerer et bilde filtreres ikke. Filteret ligger paa foreldren,
   saa det maa slaas av der: filter:none paa <img> hadde ikke hatt effekt.
   Per indeks, slik at en fane kan blande bilder og SVG-er. */
.vr[data-vr-bilde1] .vr-s1,
.vr[data-vr-bilde2] .vr-s2,
.vr[data-vr-bilde3] .vr-s3,
.vr[data-vr-bilde4] .vr-s4,
.vr[data-vr-bilde5] .vr-s5,
.vr[data-vr-bilde1] .vr-s1 .vr-still-frame,
.vr[data-vr-bilde2] .vr-s2 .vr-still-frame,
.vr[data-vr-bilde3] .vr-s3 .vr-still-frame,
.vr[data-vr-bilde4] .vr-s4 .vr-still-frame,
.vr[data-vr-bilde5] .vr-s5 .vr-still-frame {
  filter: none;
}

/* Ingen permanent will-change: den holdt fem filtrerte lag promotert hele
   tiden. Opacity og filter er GPU-vennlige uansett, og JS skriver nye
   verdier kun naar de faktisk endrer seg. */
.vr-scene {
  --sat: 1;
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: saturate(calc(0.3 + 0.7 * var(--sat))) sepia(calc(0.15 * (1 - var(--sat)))) brightness(calc(1 + 0.05 * (1 - var(--sat))));
}

.vr-scene.is-off {
  visibility: hidden;
}

.vr-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.vr-scene * {
  animation-play-state: paused;
}

.vr-scene.is-live * {
  animation-play-state: running;
}

.vr-svg g, .vr-svg rect, .vr-svg path, .vr-svg circle,
.vr-svg ellipse, .vr-svg line, .vr-svg polygon, .vr-svg text {
  transform-box: view-box;
}

.vr-progress {
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  margin: 14px auto 0;
  width: min(100%, calc(var(--vr-h) * 1.78));
}

.vr-progress span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.vr-beats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vr-beat {
  padding: 20px 0;
}

.vr-place {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
}

.vr-beat p {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 2.7vw, 2.05rem);
  line-height: 1.2;
  color: var(--ink);
  max-width: 20ch;
  margin: 0;
}

.vr.is-enhanced .vr-beat {
  min-height: 74svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vh 0;
}

/* Inaktive beats dimmes med farge, ikke opacity. Opacity 0.26 ga rundt
   1,4:1 kontrast paa tekst som fortsatt staar synlig paa skjermen.
   --dim-body er maalt til 4,6:1 (normal tekst), --dim-head til 3,3:1
   (stor tekst: beat-teksten er 21px+ i vekt 600). */
.vr.is-enhanced .vr-beat .vr-place,
.vr.is-enhanced .vr-beat p {
  transform: translateY(10px);
  transition: color 0.55s var(--ease), transform 0.55s var(--ease);
}

.vr.is-enhanced .vr-beat .vr-place {
  color: var(--dim-body, #666f69);
}

.vr.is-enhanced .vr-beat p {
  color: var(--dim-head, #7f8681);
  transition-delay: 0.06s;
}

.vr.is-enhanced .vr-beat.is-active .vr-place {
  color: var(--accent);
  transform: none;
}

.vr.is-enhanced .vr-beat.is-active p {
  color: var(--ink);
  transform: none;
}

.vr-static {
  display: none;
}

.vr-still {
  margin: 0;
}

.vr-still-frame {
  position: relative;
  aspect-ratio: 720 / 405;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  filter: saturate(calc(0.3 + 0.7 * var(--sat, 1))) sepia(calc(0.15 * (1 - var(--sat, 1)))) brightness(calc(1 + 0.05 * (1 - var(--sat, 1))));
}

.vr-still figcaption {
  margin-top: 14px;
}

.vr-still figcaption span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}

.vr-still figcaption span + span {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0;
}

@media (max-width: 899px) {
  .vr {
    --vr-h: min(34svh, 240px);
  }

  .vr.is-enhanced .vr-beat {
    min-height: 66svh;
  }

  .vr-beat p {
    max-width: 24ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vr * {
    animation: none !important;
    transition: none !important;
  }

  .vr.is-enhanced .vr-visual {
    display: none;
  }

  .vr.is-enhanced .vr-beats {
    display: none;
  }

  .vr.is-enhanced .vr-layout {
    display: block;
  }

  .vr.is-enhanced .vr-static {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(24px, 3vw, 38px);
  }

  .vr-scene {
    position: static;
    opacity: 1;
    transform: none;
    filter: none;
  }
}