/* WHALE ocean primitives - shared by every Filament panel (loaded next to
   whale-theme.css by App\Support\WhaleTheme::customStylesheet) and by the
   standalone login, 2FA and error pages.

   .wh-ocean   the deep-sea backdrop: light shafts, a far whale, waves
               (markup: App\Support\WhaleTheme::oceanBackdrop)
   .wh-mark    a whale mark with a spout puffing from its blowhole
               (markup: App\Support\WhaleTheme::spout)
   .wh-ripple  the press ripple added by WhaleTheme's ripple script

   Colors come from the same --gp-* channels as whale-theme.css; standalone
   pages declare them themselves. Motion: transform/opacity only on anything
   large, and all of it stops under prefers-reduced-motion. */

:root {
    --gp-primary: 38, 128, 245;
    --gp-primary-2: 125, 211, 252;
    --gp-accent-green: 22, 104, 222;
    --gp-accent-green-bright: 103, 232, 249;
    --gp-navy-950: 6, 13, 29;

    /* Seamless wave tiles. Each path starts and ends at the same height with
       the same slope, so a row of tiles reads as one endless swell. */
    --wh-wave-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='60' viewBox='0 0 800 60' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C100 4 300 4 400 22 C500 40 700 40 800 22 V60 H0 Z' fill='rgba(56,150,255,0.16)'/%3E%3Cpath d='M0 22 C100 4 300 4 400 22 C500 40 700 40 800 22' fill='none' stroke='rgba(147,215,255,0.35)' stroke-width='1.5'/%3E%3C/svg%3E");
    --wh-wave-fill-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='60' viewBox='0 0 800 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C100 44 300 44 400 30 C500 16 700 16 800 30 V60 H0 Z' fill='rgba(22,104,222,0.22)'/%3E%3C/svg%3E");
    --wh-wave-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 C15 1 45 1 60 6 C75 11 105 11 120 6' fill='none' stroke='rgba(125,211,252,0.55)' stroke-width='1.2'/%3E%3C/svg%3E");
    --wh-wave-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 30 C30 18 90 18 120 30 C150 42 210 42 240 30' stroke='rgba(125,211,252,0.22)' stroke-width='1.4'/%3E%3Cpath d='M0 52 C30 40 90 40 120 52 C150 64 210 64 240 52' stroke='rgba(56,150,255,0.18)' stroke-width='1.4'/%3E%3Cpath d='M0 74 C30 62 90 62 120 74 C150 86 210 86 240 74' stroke='rgba(56,150,255,0.10)' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
    --wh-foam: 225, 245, 255;
    --wh-abyss: 3, 8, 20;
}

@keyframes wh-drift-800 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-800px, 0, 0); } }
@keyframes wh-drift-800-rev { from { transform: translate3d(-800px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes wh-drift-120 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-120px, 0, 0); } }
@keyframes wh-swell { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@keyframes wh-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -3px; rotate: -1.5deg; } }

/* ---------- The sea ---------- */
.wh-ocean {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1100px 620px at 74% -12%, rgba(var(--gp-primary), 0.24), transparent 62%),
        radial-gradient(900px 560px at -10% 106%, rgba(var(--gp-accent-green-bright), 0.07), transparent 58%),
        linear-gradient(180deg, rgb(12, 32, 66) 0%, rgb(var(--gp-navy-950)) 46%, rgb(var(--wh-abyss)) 100%);
}

/* Light shafts from the surface: soft diagonal bands, masked so they only
   exist near the top and fade out with depth. */
.wh-ocean-rays {
    position: absolute;
    inset: -8vh -25vw auto;
    height: 82vh;
    background: repeating-linear-gradient(
        104deg,
        transparent 0 70px,
        rgba(var(--gp-primary-2), 0.055) 70px 110px,
        transparent 110px 190px,
        rgba(var(--gp-primary-2), 0.035) 190px 206px,
        transparent 206px 300px
    );
    -webkit-mask-image: radial-gradient(55% 100% at 62% 0%, #000 8%, transparent 78%);
    mask-image: radial-gradient(55% 100% at 62% 0%, #000 8%, transparent 78%);
    transform-origin: 50% 0;
    will-change: transform, opacity;
    animation: wh-rays 18s ease-in-out infinite alternate;
}

@keyframes wh-rays {
    0% { opacity: 0.55; transform: skewX(-3deg) translate3d(-1.5%, 0, 0); }
    100% { opacity: 1; transform: skewX(3deg) translate3d(1.5%, 0, 0); }
}

/* A far-off whale crossing the deep, once every couple of minutes. */
.wh-ocean-whale {
    position: absolute;
    left: 0;
    bottom: 16vh;
    width: clamp(260px, 30vw, 460px);
    aspect-ratio: 1;
    background: url("/images/whale-silhouette.png?v=1") center / contain no-repeat;
    opacity: 0.05;
    will-change: transform;
    animation: wh-whale-swim 150s linear infinite;
    animation-delay: -40s;
}

@keyframes wh-whale-swim {
    0% { transform: translate3d(-40vw, 0, 0) rotate(2deg); }
    25% { transform: translate3d(12vw, -4vh, 0) rotate(-2deg); }
    50% { transform: translate3d(55vw, -1vh, 0) rotate(2deg); }
    75% { transform: translate3d(90vw, -6vh, 0) rotate(-2deg); }
    100% { transform: translate3d(130vw, -3vh, 0) rotate(1deg); }
}

.wh-ocean-waves {
    position: absolute;
    inset: auto 0 0 0;
    height: 110px;
}

.wh-wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + 800px);
    height: 100%;
    background-repeat: repeat-x;
    background-size: 800px 100%;
    will-change: transform;
}

.wh-wave--back {
    height: 86%;
    background-image: var(--wh-wave-fill-deep);
    animation: wh-drift-800-rev 46s linear infinite;
}

.wh-wave--front {
    height: 64%;
    background-image: var(--wh-wave-fill);
    animation: wh-drift-800 30s linear infinite;
}

/* ---------- Spout ---------- */
/* Anchored at the blowhole (67% / 33% of the mark's box - measured off the
   artwork). --h is the jet height; everything else scales from it, so the
   same markup works on the 3rem sidebar mark and the 10rem login mark. */
.wh-mark {
    --h: 1.35rem;
    position: relative;
    display: inline-block;
    line-height: 0;
    animation: wh-bob 7s ease-in-out infinite;
}

.wh-spout {
    position: absolute;
    left: 67%;
    top: 33%;
    width: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}

.wh-spout-jet {
    position: absolute;
    left: calc(var(--h) * -0.08);
    bottom: 0;
    width: calc(var(--h) * 0.16);
    min-width: 3px;
    height: var(--h);
    border-radius: 999px 999px 2px 2px;
    background: linear-gradient(0deg, rgba(var(--gp-primary-2), 0.95), rgba(var(--wh-foam), 0.95) 55%, rgba(var(--wh-foam), 0));
    transform-origin: 50% 100%;
    rotate: 8deg;
    transform: scaleY(0);
    opacity: 0;
    animation: wh-jet 6.5s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

.wh-spout-jet--side {
    height: calc(var(--h) * 0.72);
    rotate: -18deg;
    animation-delay: 70ms;
}

@keyframes wh-jet {
    0% { transform: scaleY(0); opacity: 0; }
    3% { opacity: 1; }
    10% { transform: scaleY(1); opacity: 1; }
    17% { transform: scaleY(1.06) translateY(-6%); opacity: 0.9; }
    28% { transform: scaleY(1.1) translateY(-14%); opacity: 0; }
    100% { transform: scaleY(0); opacity: 0; }
}

.wh-spout-mist {
    position: absolute;
    left: calc(var(--h) * -0.5);
    top: calc(var(--h) * -1.36);
    width: var(--h);
    height: calc(var(--h) * 0.7);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--wh-foam), 0.9), rgba(var(--gp-primary-2), 0.45) 55%, transparent);
    opacity: 0;
    transform: scale(0.3);
    animation: wh-mist 6.5s ease-out infinite;
}

@keyframes wh-mist {
    0%, 8% { opacity: 0; transform: scale(0.3); }
    15% { opacity: 0.95; transform: scale(0.9); }
    38% { opacity: 0; transform: scale(1.5) translateY(-24%); }
    100% { opacity: 0; transform: scale(0.3); }
}

.wh-drop {
    position: absolute;
    left: calc(var(--h) * -0.06);
    top: calc(var(--h) * -1);
    width: calc(var(--h) * 0.13);
    height: calc(var(--h) * 0.13);
    min-width: 2px;
    min-height: 2px;
    border-radius: 50%;
    background: rgb(var(--wh-foam));
    box-shadow: 0 0 4px rgba(var(--gp-primary-2), 0.9);
    opacity: 0;
    animation: wh-drop 6.5s ease-out infinite;
    animation-delay: var(--dl);
}

@keyframes wh-drop {
    0%, 10% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    13% { transform: translate(0, 0) scale(1); opacity: 1; }
    24% { transform: translate(calc(var(--dx) * var(--h) * 0.6), calc(var(--dy) * var(--h) * 0.45)) scale(1); opacity: 1; }
    42% { transform: translate(calc(var(--dx) * var(--h) * 1.05), calc(var(--h) * 0.75)) scale(0.55); opacity: 0; }
    100% { opacity: 0; }
}

/* ---------- Ripple ---------- */
.wh-ripple {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0, rgba(var(--gp-primary-2), 0.22) 38%, transparent 68%);
    transform: scale(0);
    animation: wh-ripple 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wh-ripple {
    to { transform: scale(1); opacity: 0; }
}

/* ---------- Mobile: lighter sea ---------- */
@media (max-width: 767px) {
    .wh-ocean-rays,
    .wh-ocean-whale {
        display: none;
    }

    .wh-ocean-waves {
        height: 70px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .wh-ocean *,
    .wh-mark,
    .wh-spout * {
        animation: none !important;
    }

    .wh-spout,
    .wh-ripple {
        display: none;
    }
}