/* RIBA animacija - CSS omejen na .riba-anim (brez globalnih pravil) */

.riba-anim {
  position: relative;
  width: 100%;
  line-height: 0;
}

.riba-anim .aquatic-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  user-select: none;
  background-color: #ffffff;
  cursor: pointer;
}

.riba-anim .sky-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 1;
}

.riba-anim .water-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.riba-anim .underwater-plants-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 380px;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.riba-anim .seaweed {
  position: absolute;
  bottom: -10px;
  transform-origin: bottom center;
  color: #38bdf8;
  filter: blur(1.8px);
  opacity: 0.16;
}

.riba-anim .seaweed-left {
  left: 9%;
  width: 155px;
  height: 290px;
  animation: riba-sway 7s ease-in-out infinite alternate;
}

.riba-anim .seaweed-right {
  right: 12%;
  width: 175px;
  height: 260px;
  animation: riba-sway 8.5s ease-in-out 1s infinite alternate;
}

@keyframes riba-sway {
  0% { transform: rotate(-5deg) skewX(-3deg); }
  50% { transform: rotate(2deg) skewX(2deg); }
  100% { transform: rotate(6deg) skewX(4deg); }
}

.riba-anim .fish-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.riba-anim .fish-actor {
  position: absolute;
  top: 0;
  left: 0;
  width: 450px;
  max-width: 90vw;
  height: auto;
  pointer-events: none;
  transform-origin: center center;
  opacity: 0.38;
  transition: opacity 0.25s ease;
  will-change: transform, opacity;
}

.riba-anim .fish-actor img {
  width: 100%;
  height: auto;
  display: block;
}

.riba-anim .foreground-wave-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
}

.riba-anim .splash-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
}