/* =========================================================
   Unterwasser-Hintergrund der Restart-Galerie-Seite.
   Aus assets/css/style.css herausgeloest, damit das
   Galeriebuch weiterhin fuer sich allein laeuft.
   ========================================================= */

:root {
  /* Nur was der Hintergrund braucht – die uebrigen Variablen des
     Galeriebuchs bleiben unangetastet. */
  --water-top: #96e7ff;
  --water-bottom: #4fbae8;
  --shimmer: 1;
  --depth: 0;
}

/* =========================================================
   Hintergrund
   ========================================================= */

.ocean {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- Grundfarbe: hellblau oben, dunkelblau in der Tiefe --- */
.ocean__water {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--water-top) 0%, var(--water-bottom) 100%);
}

/* --- Lichtpaket: Oberflächenglanz, Lichtschein, Schimmer --- */
.ocean__light {
  position: absolute;
  inset: 0;
  opacity: var(--shimmer);
  will-change: opacity;
}

/* heller Schein direkt unter der Wasseroberfläche */
.ocean__surface {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55vh;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.22) 28%,
      rgba(255, 255, 255, 0.00) 100%);
  animation: surfacePulse 7s ease-in-out infinite alternate;
}

@keyframes surfacePulse {
  from { opacity: 0.75; transform: translateY(-1.5%); }
  to   { opacity: 1;    transform: translateY(1.5%); }
}

/* --- Lichtstrahlen (Godrays) --- */
.rays {
  position: absolute;
  inset: 0;
}

.ray {
  position: absolute;
  top: -35vh;
  width: clamp(50px, 9vw, 150px);
  height: 150vh;
  transform-origin: top center;
  filter: blur(22px);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(214, 245, 255, 0.16) 40%,
    rgba(255, 255, 255, 0.00) 78%);
  animation: raySway 11s ease-in-out infinite alternate;
}

.ray:nth-child(1) { left:  4%; --tilt:  10deg; animation-duration: 13s; animation-delay: -1s;  opacity: .85; }
.ray:nth-child(2) { left: 21%; --tilt:  -6deg; animation-duration:  9s; animation-delay: -4s;  opacity: .65; }
.ray:nth-child(3) { left: 39%; --tilt:  14deg; animation-duration: 15s; animation-delay: -7s;  opacity: .9;  }
.ray:nth-child(4) { left: 58%; --tilt:  -3deg; animation-duration: 10s; animation-delay: -2s;  opacity: .7;  }
.ray:nth-child(5) { left: 74%; --tilt:  -12deg; animation-duration: 14s; animation-delay: -9s; opacity: .8;  }
.ray:nth-child(6) { left: 89%; --tilt:   7deg; animation-duration: 12s; animation-delay: -5s;  opacity: .6;  }

@keyframes raySway {
  from { transform: rotate(var(--tilt)) translateX(-2.5vw) scaleX(0.85); }
  to   { transform: rotate(var(--tilt)) translateX(2.5vw)  scaleX(1.25); }
}

/* --- Wasserschimmer (Caustics) --- */
.caustics {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
}

.caustics__layer {
  position: absolute;
  inset: -25%;
  background-repeat: repeat;
}

.caustics__layer--a {
  filter: blur(12px);
  opacity: 0.85;
  background-image:
    radial-gradient(closest-side circle at 30% 32%, rgba(255,255,255,0.55), rgba(255,255,255,0)),
    radial-gradient(closest-side circle at 72% 58%, rgba(198,244,255,0.45), rgba(255,255,255,0)),
    radial-gradient(closest-side circle at 48% 86%, rgba(255,255,255,0.38), rgba(255,255,255,0));
  background-size: 380px 300px, 250px 210px, 320px 250px;
  animation: causticsA 26s linear infinite;
}

.caustics__layer--b {
  filter: blur(20px);
  opacity: 0.55;
  background-image:
    radial-gradient(closest-side circle at 60% 40%, rgba(255,255,255,0.42), rgba(255,255,255,0)),
    radial-gradient(closest-side circle at 22% 74%, rgba(176,236,255,0.36), rgba(255,255,255,0));
  background-size: 540px 420px, 300px 260px;
  animation: causticsB 37s linear infinite;
}

@keyframes causticsA {
  from { background-position:    0px    0px,    0px    0px,    0px    0px; }
  to   { background-position:  380px -300px, -250px  210px,  320px -250px; }
}

@keyframes causticsB {
  from { background-position:    0px    0px,    0px    0px; }
  to   { background-position: -540px  420px,  300px -260px; }
}

/* --- Canvas-Ebenen: #life (Taucher + Fische), darüber #bubbles --- */
.ocean__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Vignette, die mit der Tiefe zunimmt --- */
.ocean__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 25%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
  opacity: calc(0.15 + var(--depth) * 0.75);
}


/* Auf dieser Seite ist der Ozean reine Kulisse und liegt hinter allem.
   Auf der Startseite steht er auf z-index 0, weil dort der Inhalt
   ausdruecklich auf 1 gesetzt ist – das ist hier nicht der Fall. */
.ocean { z-index: -1; }
html { background: #05060a; }
.ocean--raum { background: #05060a; }
body { background: transparent !important; }