/* ==========================================================================
   VestaSys CSS — 06 · Application extras
   --------------------------------------------------------------------------
   The handful of effects that genuinely cannot be expressed as utilities:
   the animated ocean background behind the Salmon Evolution kiosk, and the
   swaying waterline at its foot.

   Everything here is decorative and scoped to the kiosk / mobile check-in /
   info-screen views via the <x-ocean-bg> component. If you are styling normal
   application UI, you want a utility or a component — not this file.
   ========================================================================== */


/* ==========================================================================
   Light shafts (caustics)
   --------------------------------------------------------------------------
   Two large, heavily blurred radial gradients that drift slowly in opposite
   directions, reading as sunlight refracting through moving water.
   ========================================================================== */
.ocean-caustic {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: ocean-caustic-move 26s ease-in-out infinite;
}
.ocean-caustic-1 {
    width: 60vw; height: 60vw; top: -22%; left: -12%;
    background: radial-gradient(circle, rgba(20, 80, 100, 0.55), transparent 70%);
}
.ocean-caustic-2 {
    width: 55vw; height: 55vw; bottom: -28%; right: -14%;
    background: radial-gradient(circle, rgba(244, 101, 29, 0.14), transparent 70%);
    /* Offset duration + negative delay so the two never move in lockstep. */
    animation-duration: 32s;
    animation-delay: -9s;
}


/* ==========================================================================
   Rising bubbles
   --------------------------------------------------------------------------
   Position, size, duration and delay all come from inline styles on each
   <span> (see the ocean-bg component), so one class covers every bubble.
   ========================================================================== */
.ocean-bubble {
    position: absolute;
    bottom: -5vh;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04));
    animation: ocean-rise linear infinite;
}


/* ==========================================================================
   Swimming salmon
   --------------------------------------------------------------------------
   Each fish is two nested elements: an outer "track" that carries it across
   the screen, and an inner "bob" that rocks it up and down. Splitting the two
   lets the transforms compose without fighting over a single `transform`.

   The fish itself is the brand SVG used as a CSS mask over a solid colour, so
   its colour (and therefore its opacity/glow) is set in CSS rather than baked
   into the artwork.
   ========================================================================== */
.ocean-fish {
    display: block;
    aspect-ratio: 1;
    background-color: currentColor;
    -webkit-mask: url('/images/salmon.svg') center / contain no-repeat;
    mask: url('/images/salmon.svg') center / contain no-repeat;
}
.ocean-fish-track { position: absolute; left: 0; animation: ocean-swim linear infinite; }
.ocean-fish-track-reverse { animation-name: ocean-swim-reverse; }
.ocean-fish-bob { animation: ocean-bob ease-in-out infinite alternate; }

/* Depth is suggested with three colour/opacity tiers rather than z-index. */
.ocean-fish-orange { color: #f4651d; opacity: 0.55; filter: drop-shadow(0 0 28px rgba(244, 101, 29, 0.35)); }
.ocean-fish-copper { color: #ff9a56; opacity: 0.35; }
.ocean-fish-ghost  { color: #ffffff; opacity: 0.07; }
/* Face the left→right swimmers forward (the artwork points left). */
.ocean-fish-flip   { transform: scaleX(-1); }


/* ==========================================================================
   Waterline
   ========================================================================== */
.ocean-wave path { fill: rgba(13, 38, 48, 0.7); }
.ocean-wave-front path { fill: rgba(9, 26, 33, 0.85); }
.ocean-wave-back  { animation: ocean-wave-sway 18s ease-in-out infinite; opacity: 0.6; }
.ocean-wave-front { animation: ocean-wave-sway 12s ease-in-out infinite reverse; }


/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes ocean-rise {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 0.5; }
    90%  { opacity: 0.3; }
    100% { transform: translate(24px, -105vh); opacity: 0; }
}
@keyframes ocean-caustic-move {
    0%, 100% { transform: translate(-5%, -5%) scale(1); opacity: 0.5; }
    50%      { transform: translate(5%, 5%) scale(1.15); opacity: 0.85; }
}
@keyframes ocean-bob {
    from { transform: translateY(0) rotate(-3deg); }
    to   { transform: translateY(22px) rotate(3deg); }
}
@keyframes ocean-swim {
    from { transform: translateX(-22vw); }
    to   { transform: translateX(122vw); }
}
@keyframes ocean-swim-reverse {
    from { transform: translateX(122vw); }
    to   { transform: translateX(-22vw); }
}
@keyframes ocean-wave-sway {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-3%); }
}


/* ==========================================================================
   Reduced motion
   --------------------------------------------------------------------------
   The global reduced-motion rule in 05-variants.css only shortens durations.
   An ambient background should stop completely, so freeze it outright.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ocean-caustic,
    .ocean-bubble,
    .ocean-fish-track,
    .ocean-fish-bob,
    .ocean-wave-back,
    .ocean-wave-front {
        animation: none !important;
    }
}