/* ============================================
   BACKGROUNDS.CSS — Light Aurora Canvas (v4)
   Geometriske SVG-figurer (krispe vektorer) i kantene,
   myk org-tonet glow under, ren midten.
   ============================================ */

/* ============================================
   BG-CANVAS — soft glow + SVG-injected geometry
   Pseudo-elementene leverer KUN myk atmosfære.
   Selve geometri-figurene injiseres som <svg> via engine.js
   for å sikre vektor-skarphet på alle DPI/oppløsninger.
   ============================================ */

.slide.bg-canvas {
  background: var(--metis-white);
  position: absolute;
  overflow: hidden;
  isolation: isolate;
}

/* Venstre kant — myk org-tonet glow (atmosfære, ikke geometri) */
.slide.bg-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 80% at -5% 35%,
      color-mix(in srgb, var(--metis-primary) 14%, transparent),
      transparent 70%),
    radial-gradient(ellipse 35% 50% at 8% 90%,
      color-mix(in srgb, var(--metis-secondary) 18%, transparent),
      transparent 65%);
  mask-image: linear-gradient(to right,
    black 0%, black 35%, transparent 60%);
  -webkit-mask-image: linear-gradient(to right,
    black 0%, black 35%, transparent 60%);
  animation: canvas-glow-l 24s ease-in-out infinite;
}

/* Høyre kant — speilvendt */
.slide.bg-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 80% at 105% 65%,
      color-mix(in srgb, var(--metis-primary) 14%, transparent),
      transparent 70%),
    radial-gradient(ellipse 35% 50% at 92% 15%,
      color-mix(in srgb, var(--metis-secondary) 18%, transparent),
      transparent 65%);
  mask-image: linear-gradient(to left,
    black 0%, black 35%, transparent 60%);
  -webkit-mask-image: linear-gradient(to left,
    black 0%, black 35%, transparent 60%);
  animation: canvas-glow-r 30s ease-in-out infinite reverse;
}

@keyframes canvas-glow-l {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50%      { transform: translate(8px, -10px) scale(1.04); opacity: 0.85; }
}
@keyframes canvas-glow-r {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50%      { transform: translate(-6px, 10px) scale(1.05); opacity: 0.85; }
}

.slide.bg-canvas > * { position: relative; z-index: 1; }

/* ============================================
   CANVAS-DECO — SVG-figurene (injisert av engine.js)
   Vektor-geometri som ikke pixleres.
   ============================================ */

.slide.bg-canvas .canvas-deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Kun ett element animeres — en ekstra arc som drifter sakte.
   Resten er statiske krisp geometri. */
.slide.bg-canvas .canvas-deco .anim-drift {
  transform-box: fill-box;
  transform-origin: center;
  animation: deco-drift 28s ease-in-out infinite;
}

@keyframes deco-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(6px, -8px) rotate(8deg); }
}

/* ============================================
   BG-AURORA — full-immersive (title/closing)
   ============================================ */

.slide.bg-aurora {
  background: var(--metis-white);
  position: absolute;
  overflow: hidden;
  isolation: isolate;
}

.slide.bg-aurora::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: conic-gradient(
    from 0deg at 30% 40%,
    var(--metis-primary) 0deg,
    transparent 60deg,
    var(--metis-secondary) 140deg,
    transparent 220deg,
    var(--metis-primary) 320deg,
    var(--metis-primary) 360deg
  );
  filter: blur(90px) saturate(1.3);
  mix-blend-mode: multiply;
  opacity: 0.6;
  animation: aurora-rotate-a 22s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.slide.bg-aurora::after {
  content: '';
  position: absolute;
  inset: -25%;
  background: conic-gradient(
    from 180deg at 70% 65%,
    transparent 0deg,
    var(--metis-secondary) 90deg,
    transparent 180deg,
    var(--metis-primary) 270deg,
    transparent 360deg
  );
  filter: blur(100px) saturate(1.4);
  mix-blend-mode: overlay;
  opacity: 0.5;
  animation: aurora-rotate-b 17s linear infinite reverse;
  z-index: 0;
  pointer-events: none;
}

@keyframes aurora-rotate-a { to { transform: rotate(360deg); } }
@keyframes aurora-rotate-b { to { transform: rotate(-360deg) translate(2%, -1%); } }

.slide.bg-aurora > * { position: relative; z-index: 2; }

/* ============================================
   BG-PHOTO (uendret)
   ============================================ */

.slide.bg-photo {
  background-color: var(--metis-primary);
  background-size: cover;
  background-position: center;
  color: var(--metis-text-inverse);
  position: relative;
  overflow: hidden;
}

.slide.bg-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--metis-primary) 85%, transparent),
      rgba(0,0,0,0.4)),
    linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
  z-index: 0;
}

.slide.bg-photo > * {
  position: relative;
  z-index: 1;
}

.slide.bg-photo h1,
.slide.bg-photo p {
  color: var(--metis-text-inverse);
}

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

@media (prefers-reduced-motion: reduce) {
  .slide.bg-aurora::before,
  .slide.bg-aurora::after,
  .slide.bg-canvas::before,
  .slide.bg-canvas::after,
  .slide.bg-canvas .canvas-deco .anim-drift {
    animation: none;
  }
}