/*
 * ZERO 투명형 팝업 — 수중 오로라 버전
 * 홈페이지는 그대로 비치고, 경계 없는 빛·물결·공기방울·해파리로 분위기를 만듭니다.
 */
#zeroModal {
    --zero-accent: var(--primary, #00c73c);
    --zero-teal: #25c8c4;
    --zero-cyan: #5ee7f3;
    --zero-blue: #1591bb;
    --zero-deep-blue: #0d5b70;
    --zero-content-width: 740px;
}

/* 공용 모달의 검은 배경과 블러는 사용하지 않습니다. */
#zeroModal.zero-ocean-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 24px;
    overflow: hidden;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
}

/* 외곽 박스 없는 투명 컨테이너 */
#zeroModal .zero-ocean-card {
    position: relative;
    z-index: 3;
    width: min(94vw, var(--zero-content-width));
    max-height: calc(100vh - 36px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    scrollbar-width: none;
    isolation: isolate;
}

#zeroModal .zero-ocean-card::-webkit-scrollbar {
    display: none;
}

/*
 * 네모 박스 대신 가장자리가 사라지는 깊은 수중 음영을 사용합니다.
 * 중앙만 안정적으로 어두워져 문구가 선명하고, 외곽 경계는 보이지 않습니다.
 */
#zeroModal .zero-ocean-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -58px -76px -62px;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 38%,
            rgba(1, 29, 45, 0.90) 0%,
            rgba(2, 47, 63, 0.79) 37%,
            rgba(5, 72, 88, 0.55) 61%,
            rgba(18, 113, 124, 0.20) 80%,
            transparent 100%),
        radial-gradient(circle at 50% 7%,
            rgba(112, 239, 246, 0.20),
            transparent 46%);
    filter: blur(11px);
    opacity: 0.97;
}

/* 수면 반사처럼 흐르는 가느다란 빛결 */
#zeroModal .zero-ocean-card::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -16% -10%;
    pointer-events: none;
    opacity: 0.24;
    mix-blend-mode: screen;
    background:
        repeating-radial-gradient(ellipse at 42% 18%,
            transparent 0 24px,
            rgba(195, 251, 255, 0.34) 25px 27px,
            transparent 28px 51px),
        repeating-radial-gradient(ellipse at 68% 34%,
            transparent 0 32px,
            rgba(82, 221, 234, 0.22) 33px 35px,
            transparent 36px 67px);
    transform: scale(1.1) rotate(-5deg);
    filter: blur(1px);
    animation: zeroCausticDrift 26s ease-in-out infinite alternate;
}

/* 위에서 내려오는 아주 옅은 수중 광선 */
#zeroModal .zero-water-light {
    position: absolute;
    z-index: 2;
    inset: -12% -20% -5%;
    pointer-events: none;
    opacity: 0.42;
    mix-blend-mode: screen;
    background:
        conic-gradient(from 206deg at 28% -4%,
            transparent 0 14deg,
            rgba(157, 248, 255, 0.30) 15deg 21deg,
            transparent 22deg 36deg,
            rgba(111, 228, 240, 0.17) 37deg 43deg,
            transparent 44deg 360deg),
        conic-gradient(from 156deg at 76% -8%,
            transparent 0 18deg,
            rgba(211, 255, 255, 0.22) 19deg 25deg,
            transparent 26deg 46deg,
            rgba(82, 214, 230, 0.15) 47deg 52deg,
            transparent 53deg 360deg);
    filter: blur(12px);
    transform: translate3d(-1%, -2%, 0) scale(1.05);
    animation: zeroLightSway 20s ease-in-out infinite alternate;
}

#zeroModal .zero-popup-content {
    position: relative;
    z-index: 4;
    padding: 44px 34px 30px;
    text-align: center;
}

#zeroModal.active .zero-ocean-card {
    animation: zeroPopupReveal 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#zeroModal .zero-popup-title {
    position: relative;
    margin: 10px 46px 14px;
    color: #ffffff;
    font-size: clamp(1.92rem, 4vw, 2.42rem);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 1.28;
    text-wrap: balance;
    -webkit-text-stroke: 0.18px rgba(255, 255, 255, 0.52);
    text-shadow:
        0 3px 5px rgba(0, 13, 23, 0.94),
        0 0 16px rgba(0, 29, 43, 0.82),
        0 0 34px rgba(105, 239, 249, 0.42);
}

/* 제목 아래에 물방울처럼 빛나는 작은 장식 */
#zeroModal .zero-popup-title::before,
#zeroModal .zero-popup-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(233, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(142, 239, 247, 0.42);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.80),
        0 0 12px rgba(103, 234, 246, 0.78);
    transform: translateY(-50%);
    opacity: 0.88;
}

#zeroModal .zero-popup-title::before { left: -2px; }
#zeroModal .zero-popup-title::after  { right: -2px; }

#zeroModal .zero-popup-divider {
    position: relative;
    width: 96px;
    height: 2px;
    margin: 0 auto 24px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent,
        rgba(137, 246, 244, 0.88) 22%,
        rgba(255, 255, 255, 0.98) 50%,
        rgba(85, 220, 235, 0.88) 78%,
        transparent);
    box-shadow:
        0 0 12px rgba(205, 255, 255, 0.80),
        0 5px 18px rgba(31, 164, 180, 0.28);
}

#zeroModal .zero-popup-divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ecffff;
    box-shadow:
        0 0 0 3px rgba(73, 217, 225, 0.22),
        0 0 16px rgba(213, 255, 255, 0.95);
    transform: translate(-50%, -50%);
}

/* 문구는 박스 없이 유지하되, 글자 자체의 깊이와 빛만 더합니다. */
#zeroModal .zero-popup-copy {
    position: relative;
    max-width: 670px;
    margin: 0 auto;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(247, 254, 255, 0.985);
    font-size: 1.11rem;
    font-weight: 620;
    line-height: 1.94;
    letter-spacing: -0.018em;
    word-break: keep-all;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow:
        0 1px 2px rgba(0, 12, 21, 0.98),
        0 3px 8px rgba(0, 21, 32, 0.88),
        0 0 18px rgba(1, 45, 59, 0.72);
}

/* 문장 중심부에만 아주 약한 청록빛을 얹어 페이지 배경과 자연스럽게 분리 */
#zeroModal .zero-popup-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -18px -30px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 46%, rgba(5, 50, 66, 0.26), transparent 74%);
    filter: blur(5px);
}

#zeroModal .zero-popup-link {
    position: relative;
    display: block;
    width: min(100%, 390px);
    margin: 28px auto 0;
    padding: 15px 26px;
    overflow: hidden;
    border: 1px solid rgba(225, 255, 255, 0.94);
    border-radius: 999px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--zero-accent) 78%, #38d5bf),
            #28b6bf 54%,
            #238ebc);
    color: #ffffff;
    font-size: 1.07rem;
    font-weight: 900;
    letter-spacing: -0.022em;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 42, 55, 0.50);
    box-shadow:
        0 14px 34px rgba(13, 111, 130, 0.34),
        0 0 23px rgba(201, 255, 255, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -10px 20px rgba(3, 86, 122, 0.15);
    transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

/* color-mix 미지원 브라우저용 기본색 */
@supports not (background: color-mix(in srgb, white, black)) {
    #zeroModal .zero-popup-link {
        background: linear-gradient(135deg, var(--zero-accent), #28b6bf 54%, #238ebc);
    }
}

#zeroModal .zero-popup-link::before {
    content: "";
    position: absolute;
    inset: -90% -45%;
    background: linear-gradient(110deg,
        transparent 40%,
        rgba(255, 255, 255, 0.54) 50%,
        transparent 60%);
    transform: translateX(-82%) rotate(7deg);
    animation: zeroButtonShimmer 8.5s ease-in-out infinite;
}

#zeroModal .zero-popup-link::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 2px;
    height: 34%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.34), transparent);
    pointer-events: none;
}

#zeroModal .zero-popup-link:hover {
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.06) saturate(1.04);
    box-shadow:
        0 18px 39px rgba(12, 112, 132, 0.39),
        0 0 27px rgba(218, 255, 255, 0.88),
        inset 0 1px 0 rgba(255, 255, 255, 0.64),
        inset 0 -10px 20px rgba(3, 86, 122, 0.12);
}

#zeroModal .zero-popup-link:focus-visible {
    outline: 3px solid rgba(215, 255, 255, 0.95);
    outline-offset: 4px;
}

#zeroModal .zero-popup-foot {
    position: relative;
    margin-top: 17px;
    padding-top: 7px;
    color: rgba(232, 250, 253, 0.96);
    font-size: 0.91rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    word-break: keep-all;
    text-shadow:
        0 1px 2px rgba(0, 13, 22, 0.98),
        0 3px 8px rgba(0, 25, 37, 0.84),
        0 0 14px rgba(0, 46, 59, 0.64);
}

#zeroModal .zero-popup-foot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 46px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(177, 247, 250, 0.78), transparent);
}

#zeroModal .zero-popup-close {
    position: absolute;
    top: 5px;
    right: 7px;
    z-index: 7;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0 0 3px;
    border: 1px solid rgba(226, 255, 255, 0.94);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 26%, rgba(255,255,255,0.96), rgba(226,250,252,0.78) 45%, rgba(126,215,226,0.48));
    color: rgba(10, 77, 94, 0.88);
    font-size: 1.62rem;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 9px 24px rgba(13, 78, 95, 0.22),
        0 0 18px rgba(227, 255, 255, 0.92),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

#zeroModal .zero-popup-close:hover {
    transform: rotate(6deg) scale(1.07);
    filter: brightness(1.05);
    box-shadow:
        0 11px 27px rgba(13, 78, 95, 0.26),
        0 0 22px rgba(237, 255, 255, 0.98),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

/* 공기방울은 홈페이지 전체에서 천천히 올라옵니다. */
#zeroModal .zero-bubbles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

#zeroModal .zero-bubbles span {
    position: absolute;
    bottom: -42px;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(196, 245, 255, 0.13);
    box-shadow:
        inset 2px 2px 3px rgba(255, 255, 255, 0.72),
        0 0 9px rgba(124, 223, 244, 0.38);
    opacity: 0;
    animation: zeroBubbleUp 15s linear infinite;
    will-change: transform, opacity;
}

#zeroModal .zero-bubbles span:nth-child(1)  { left: 4%;  width: 5px;  height: 5px;  animation-delay: -2s;  animation-duration: 13s; }
#zeroModal .zero-bubbles span:nth-child(2)  { left: 10%; width: 12px; height: 12px; animation-delay: -9s;  animation-duration: 19s; }
#zeroModal .zero-bubbles span:nth-child(3)  { left: 17%; width: 7px;  height: 7px;  animation-delay: -4s;  animation-duration: 15s; }
#zeroModal .zero-bubbles span:nth-child(4)  { left: 24%; width: 16px; height: 16px; animation-delay: -13s; animation-duration: 23s; }
#zeroModal .zero-bubbles span:nth-child(5)  { left: 31%; width: 6px;  height: 6px;  animation-delay: -7s;  animation-duration: 14s; }
#zeroModal .zero-bubbles span:nth-child(6)  { left: 38%; width: 10px; height: 10px; animation-delay: -15s; animation-duration: 21s; }
#zeroModal .zero-bubbles span:nth-child(7)  { left: 45%; width: 4px;  height: 4px;  animation-delay: -3s;  animation-duration: 12s; }
#zeroModal .zero-bubbles span:nth-child(8)  { left: 52%; width: 14px; height: 14px; animation-delay: -11s; animation-duration: 20s; }
#zeroModal .zero-bubbles span:nth-child(9)  { left: 58%; width: 8px;  height: 8px;  animation-delay: -5s;  animation-duration: 16s; }
#zeroModal .zero-bubbles span:nth-child(10) { left: 64%; width: 18px; height: 18px; animation-delay: -18s; animation-duration: 26s; }
#zeroModal .zero-bubbles span:nth-child(11) { left: 70%; width: 6px;  height: 6px;  animation-delay: -8s;  animation-duration: 15s; }
#zeroModal .zero-bubbles span:nth-child(12) { left: 76%; width: 11px; height: 11px; animation-delay: -14s; animation-duration: 22s; }
#zeroModal .zero-bubbles span:nth-child(13) { left: 81%; width: 5px;  height: 5px;  animation-delay: -4s;  animation-duration: 13s; }
#zeroModal .zero-bubbles span:nth-child(14) { left: 86%; width: 15px; height: 15px; animation-delay: -17s; animation-duration: 24s; }
#zeroModal .zero-bubbles span:nth-child(15) { left: 91%; width: 7px;  height: 7px;  animation-delay: -6s;  animation-duration: 17s; }
#zeroModal .zero-bubbles span:nth-child(16) { left: 95%; width: 10px; height: 10px; animation-delay: -12s; animation-duration: 20s; }
#zeroModal .zero-bubbles span:nth-child(17) { left: 34%; width: 4px;  height: 4px;  animation-delay: -1s;  animation-duration: 11s; }
#zeroModal .zero-bubbles span:nth-child(18) { left: 73%; width: 5px;  height: 5px;  animation-delay: -10s; animation-duration: 14s; }

/* 해파리는 ZERO 팝업 안에서만, 문구와 버튼보다 위 레이어로 느리게 유영합니다. */
#zeroModal .zero-jelly-route {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
}

#zeroModal .zero-jellyfish {
    position: absolute;
    left: 0;
    top: 0;
    width: 88px;
    height: 120px;
    opacity: 0.70;
    mix-blend-mode: screen;
    filter:
        drop-shadow(0 12px 18px rgba(33, 134, 156, 0.30))
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.88))
        drop-shadow(0 0 31px rgba(130, 239, 255, 0.52));
    animation: zeroJellyTravel 104s ease-in-out -8s infinite;
    will-change: left, top, transform;
}

#zeroModal .zero-jelly-bell {
    position: absolute;
    left: 50%;
    top: 0;
    width: 64px;
    height: 48px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 52% 52% 38% 38% / 62% 62% 32% 32%;
    background:
        radial-gradient(circle at 30% 23%, rgba(255, 255, 255, 0.98) 0 8%, transparent 24%),
        radial-gradient(circle at 66% 34%, rgba(255, 255, 255, 0.58) 0 9%, transparent 25%),
        linear-gradient(180deg, rgba(180, 246, 252, 0.97), rgba(124, 218, 231, 0.79) 56%, rgba(134, 231, 210, 0.57));
    box-shadow:
        inset 0 3px 8px rgba(255, 255, 255, 0.64),
        0 0 20px rgba(92, 204, 220, 0.43);
    animation: zeroJellyPulse 8.8s ease-in-out infinite;
}

#zeroModal .zero-jelly-bell::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 48px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 0 0 50% 50%;
    background: rgba(237, 255, 255, 0.44);
}

#zeroModal .zero-jelly-tentacles {
    position: absolute;
    left: 50%;
    top: 43px;
    width: 54px;
    height: 66px;
    transform: translateX(-50%);
}

#zeroModal .zero-jelly-tentacles span {
    position: absolute;
    top: 0;
    width: 3px;
    border-radius: 999px;
    transform-origin: top center;
    background: linear-gradient(180deg, rgba(215, 255, 250, 0.92), rgba(101, 189, 207, 0.38), transparent);
    animation: zeroTentacleWave 8.8s ease-in-out infinite;
}

#zeroModal .zero-jelly-tentacles span:nth-child(1) { left: 3px;  height: 52px; animation-delay: -0.2s; }
#zeroModal .zero-jelly-tentacles span:nth-child(2) { left: 15px; height: 43px; animation-delay: -1.1s; }
#zeroModal .zero-jelly-tentacles span:nth-child(3) { left: 26px; height: 61px; animation-delay: -0.6s; }
#zeroModal .zero-jelly-tentacles span:nth-child(4) { left: 38px; height: 42px; animation-delay: -1.6s; }
#zeroModal .zero-jelly-tentacles span:nth-child(5) { left: 50px; height: 51px; animation-delay: -0.9s; }

@keyframes zeroPopupReveal {
    from { opacity: 0; transform: translateY(12px) scale(0.982); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes zeroCausticDrift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.08) rotate(-6deg); opacity: 0.17; }
    50%  { transform: translate3d(2%, 1.5%, 0) scale(1.13) rotate(-2deg); opacity: 0.30; }
    100% { transform: translate3d(-1%, 3%, 0) scale(1.10) rotate(3deg); opacity: 0.22; }
}

@keyframes zeroLightSway {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1.04) rotate(-1deg); opacity: 0.30; }
    100% { transform: translate3d(3%, 1%, 0) scale(1.10) rotate(2deg); opacity: 0.48; }
}

@keyframes zeroButtonShimmer {
    0%, 68% { transform: translateX(-86%) rotate(7deg); opacity: 0; }
    73%     { opacity: 0.78; }
    86%     { transform: translateX(86%) rotate(7deg); opacity: 0.78; }
    92%, 100% { transform: translateX(86%) rotate(7deg); opacity: 0; }
}

@keyframes zeroBubbleUp {
    0% {
        transform: translate3d(0, 0, 0) scale(0.68);
        opacity: 0;
    }
    12% { opacity: 0.62; }
    72% { opacity: 0.46; }
    100% {
        transform: translate3d(34px, calc(-100vh - 100px), 0) scale(1.18);
        opacity: 0;
    }
}

@keyframes zeroJellyTravel {
    0%   { left: 2%;  top: 66%; transform: rotate(-5deg) scale(0.88); }
    15%  { left: 9%;  top: 47%; transform: rotate(-2deg) scale(0.94); }
    30%  { left: 24%; top: 17%; transform: rotate(4deg) scale(1.00); }
    46%  { left: 56%; top: 10%; transform: rotate(-2deg) scale(0.96); }
    62%  { left: 82%; top: 31%; transform: rotate(5deg) scale(1.02); }
    77%  { left: 70%; top: 63%; transform: rotate(-4deg) scale(0.95); }
    90%  { left: 25%; top: 69%; transform: rotate(3deg) scale(0.91); }
    100% { left: 2%;  top: 66%; transform: rotate(-5deg) scale(0.88); }
}

@keyframes zeroJellyPulse {
    0%, 100% { transform: translateX(-50%) translateY(0) scaleX(1) scaleY(1); }
    22%      { transform: translateX(-50%) translateY(4px) scaleX(1.10) scaleY(0.86); }
    48%      { transform: translateX(-50%) translateY(-6px) scaleX(0.92) scaleY(1.10); }
    72%      { transform: translateX(-50%) translateY(2px) scaleX(1.06) scaleY(0.90); }
}

@keyframes zeroTentacleWave {
    0%, 100% { transform: rotate(-10deg) scaleY(0.84); }
    24%      { transform: rotate(-4deg) scaleY(0.72); }
    50%      { transform: rotate(8deg) scaleY(1.18); }
    76%      { transform: rotate(2deg) scaleY(0.92); }
}

@media (max-height: 760px) and (min-width: 641px) {
    #zeroModal.zero-ocean-overlay { padding: 12px; }
    #zeroModal .zero-popup-content { padding-top: 27px; padding-bottom: 18px; }
    #zeroModal .zero-popup-title { margin-top: 7px; margin-bottom: 10px; font-size: clamp(1.65rem, 3.2vw, 2rem); }
    #zeroModal .zero-popup-divider { margin-bottom: 16px; }
    #zeroModal .zero-popup-copy { font-size: 1rem; line-height: 1.70; }
    #zeroModal .zero-popup-link { margin-top: 18px; padding-top: 12px; padding-bottom: 12px; }
    #zeroModal .zero-popup-foot { margin-top: 11px; }
}

@media (max-width: 640px) {
    #zeroModal.zero-ocean-overlay {
        padding: 9px;
        align-items: center;
    }

    #zeroModal .zero-ocean-card {
        width: min(98vw, var(--zero-content-width));
        max-height: calc(100vh - 16px);
    }

    #zeroModal .zero-ocean-card::before {
        inset: -34px -22px -40px;
        filter: blur(9px);
    }

    #zeroModal .zero-ocean-card::after {
        opacity: 0.18;
    }

    #zeroModal .zero-water-light {
        opacity: 0.30;
    }

    #zeroModal .zero-popup-content {
        padding: 42px 16px 24px;
    }

    #zeroModal .zero-popup-title {
        margin-left: 37px;
        margin-right: 37px;
        font-size: 1.70rem;
        line-height: 1.34;
    }

    #zeroModal .zero-popup-title::before,
    #zeroModal .zero-popup-title::after {
        width: 5px;
        height: 5px;
    }

    #zeroModal .zero-popup-copy {
        padding-left: 0;
        padding-right: 0;
        font-size: 1.02rem;
        line-height: 1.80;
    }

    #zeroModal .zero-popup-link {
        width: min(100%, 365px);
        font-size: 1.01rem;
        padding: 14px 18px;
    }

    #zeroModal .zero-popup-foot {
        font-size: 0.83rem;
        line-height: 1.55;
    }

    #zeroModal .zero-popup-close {
        top: 2px;
        right: 3px;
        width: 39px;
        height: 39px;
    }

    #zeroModal .zero-jellyfish {
        width: 70px;
        height: 98px;
        opacity: 0.62;
    }

    #zeroModal .zero-jelly-bell {
        width: 52px;
        height: 39px;
    }

    #zeroModal .zero-jelly-tentacles {
        top: 35px;
        transform: translateX(-50%) scale(0.82);
        transform-origin: top center;
    }
}

@media (prefers-reduced-motion: reduce) {
    #zeroModal .zero-ocean-card,
    #zeroModal .zero-ocean-card::after,
    #zeroModal .zero-water-light,
    #zeroModal .zero-popup-link::before,
    #zeroModal .zero-bubbles span,
    #zeroModal .zero-jellyfish,
    #zeroModal .zero-jelly-bell,
    #zeroModal .zero-jelly-tentacles span {
        animation: none !important;
    }

    #zeroModal .zero-bubbles span { display: none; }
    #zeroModal .zero-jellyfish { left: 78%; top: 18%; }
}