/* ============================================================
   Nézetválasztó — „merülés" (2026-10-06). Partial: pages/partials/depth-picker.php
   Espresso = felszín · Overview = középmélység · Mariana = mélymerülés.
   A műszer állapota a .dive-vis[data-level="0|1|2"] attribútumon; minden mozgás CSS-átmenet
   (transform/opacity), a mélységkijelző számlálását a partial inline scriptje végzi.
   ============================================================ */

.depth-picker.dive {
    padding: clamp(34px, 4.4vw, 56px) 0 clamp(36px, 4.6vw, 58px);
    background: linear-gradient(180deg, color-mix(in srgb, #14425E 5%, var(--bg-primary, #fff)), var(--bg-primary, #fff));
    text-align: left;
}
.dive-wrap { max-width: 1000px; margin: 0 auto; }
.dive-head { text-align: center; margin-bottom: clamp(18px, 2.4vw, 26px); }
.dive-title { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.12; color: var(--text-primary, #16202e); }
.dive-sub { margin: 2px 0 0; font-size: clamp(.95rem, 1.5vw, 1.05rem); line-height: 1.4; color: var(--text-secondary, #5a6678); }

.dive-body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 22px); align-items: center; }

/* --- a műszer ------------------------------------------------------------------------------ */
.dive-vis {
    position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 480 / 260; align-self: center; width: 100%;
    background: #071B2B;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 44px -30px rgba(7, 27, 43, .75);
    isolation: isolate;
}
.dive-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dive-vis * { transition-timing-function: cubic-bezier(.45, .05, .25, 1); }

.dive-craft, .dive-pointer { transition: transform .8s; }
.dive-vis[data-level="0"] .dive-craft,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-craft { transform: translate(276px, 30px); }
.dive-vis[data-level="1"] .dive-craft,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-craft { transform: translate(262px, 124px); }
.dive-vis[data-level="2"] .dive-craft,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-craft { transform: translate(250px, 206px); }
.dive-vis[data-level="0"] .dive-pointer,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-pointer { transform: translateY(34px); }
.dive-vis[data-level="1"] .dive-pointer,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-pointer { transform: translateY(124px); }
.dive-vis[data-level="2"] .dive-pointer,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-pointer { transform: translateY(206px); }

.dive-uboat { animation: dive-bob 3.6s ease-in-out infinite; }
@keyframes dive-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2.5px) rotate(-.6deg); } }
.dive-vis[data-level="0"] .dive-uboat,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-uboat { animation-duration: 2.6s; }

.dive-rays, .dive-dark, .dive-net, .dive-detail, .dive-sonar, .dive-lamp, .dive-surface { transition: opacity .8s; }
.dive-dark { opacity: 0; }
.dive-rays { opacity: 1; }
.dive-net, .dive-detail, .dive-sonar, .dive-lamp { opacity: 0; }
.dive-vis[data-level="1"] .dive-dark,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-dark { opacity: .32; }
.dive-vis[data-level="1"] .dive-rays,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-rays { opacity: .35; }
.dive-vis[data-level="1"] .dive-net,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-net { opacity: 1; }
.dive-vis[data-level="1"] .dive-sonar,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-sonar { opacity: .8; }
.dive-vis[data-level="2"] .dive-dark,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-dark { opacity: .7; }
.dive-vis[data-level="2"] .dive-rays,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-rays { opacity: 0; }
.dive-vis[data-level="2"] .dive-net,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-net { opacity: .28; }
.dive-vis[data-level="2"] .dive-detail,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-detail { opacity: 1; }
.dive-vis[data-level="2"] .dive-sonar,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-sonar { opacity: .45; }
.dive-vis[data-level="2"] .dive-lamp,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-lamp { opacity: 1; }

.dive-net path { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.2s .15s; }
.dive-vis[data-level="1"] .dive-net path,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-net path,
.dive-vis[data-level="2"] .dive-net path,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-net path { stroke-dashoffset: 0; }

.dive-sonar circle { transform-box: fill-box; transform-origin: center; animation: dive-ping 2.4s ease-out infinite; opacity: 0; stroke-width: 1.4; }
.dive-sonar circle:nth-child(2) { animation-delay: .8s; }
.dive-sonar circle:nth-child(3) { animation-delay: 1.6s; }
@keyframes dive-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(5.5); opacity: 0; } }

.dive-bubbles circle { transform-box: fill-box; animation: dive-rise 7s linear infinite; opacity: 0; }
.dive-bubbles circle:nth-child(2) { animation-delay: 1.4s; animation-duration: 8s; }
.dive-bubbles circle:nth-child(3) { animation-delay: 2.9s; animation-duration: 9s; }
.dive-bubbles circle:nth-child(4) { animation-delay: 4.1s; }
.dive-bubbles circle:nth-child(5) { animation-delay: 5.6s; animation-duration: 8.5s; }
@keyframes dive-rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translateY(-212px); opacity: 0; } }

/* CSS-tartalék: ha a script valamiért nem futna, a hover akkor is odamerít (a felszín „nulla" értékei explicitek,
   hogy a :has-szabály felülírja az aktuális mélység rétegeit is) */
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-dark { opacity: 0; }
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-rays { opacity: 1; }
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis :is(.dive-net, .dive-detail, .dive-sonar, .dive-lamp) { opacity: 0; }
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis :is(.dive-detail, .dive-lamp) { opacity: 0; }

/* előnézet-jelzés: a műszeren egy szaggatott „cél-mélység" vonal fut végig, amíg az olvasó egy másik szint fölött áll */
.dive-target { position: absolute; left: 12%; right: 0; height: 0; border-top: 1.5px dashed rgba(255, 177, 92, .85); opacity: 0; pointer-events: none; z-index: 1;
    transition: top .8s cubic-bezier(.45, .05, .25, 1), opacity .25s; }
.dive-target span { position: absolute; left: 6px; top: -22px; font: 600 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: #FFB15C; }
.dive-vis.is-previewing .dive-target { opacity: 1; }
.dive-vis[data-level="0"] .dive-target { top: 54.6%; }
.dive-vis[data-level="1"] .dive-target { top: 47.7%; }
.dive-vis[data-level="2"] .dive-target { top: 79.2%; }

/* Espresso = a felszín, Comói-tó hangulat: meleg ég, hegyek, és a merülő test helyett egy klasszikus fa motorcsónak.
   (Szándékosan általános forma, márkajelzés nélkül.) A mélyebb szinteken a csónak kifut, a merülő test veszi át. */
.dive-boat { transform: translate(430px, 33px); transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .5s; opacity: 0; }
.dive-boat-body { animation: dive-rock 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes dive-rock { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(1.2px) rotate(.8deg); } }
.dive-wake path { stroke-dasharray: 18 10; animation: dive-wake 1.1s linear infinite; }
@keyframes dive-wake { to { stroke-dashoffset: -28; } }
.dive-como { opacity: 0; transition: opacity .8s; }
.dive-uboat { transition: opacity .45s; }
.dive-vis[data-level="0"] .dive-boat,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-boat { opacity: 1; transform: translate(250px, 33px); }
.dive-vis[data-level="0"] .dive-como,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-como { opacity: 1; }
.dive-vis[data-level="0"] .dive-uboat,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-uboat { opacity: 0; }
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-boat,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-boat { opacity: 0; transform: translate(420px, 33px); }
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-uboat,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-uboat { opacity: 1; }
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-como,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-como { opacity: 0; }

/* Mariana: a mélyben a klasszikus tengeralattjáró veszi át (a középső modern test kiúszik) */
.dive-deep { transform: translate(250px, 206px); opacity: 0; transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .55s; }
.dive-deep-body { animation: dive-bob 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dive-vis[data-level="2"] .dive-deep,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-deep { opacity: 1; transform: translate(256px, 206px); }
.dive-vis[data-level="2"] .dive-uboat,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-uboat { opacity: 0; }
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-deep,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-deep { opacity: 0; transform: translate(250px, 206px); }
/* a középső test lámpája nem kell: a mélyben a klasszikus hajó világít */
.dive-uboat .dive-lamp { display: none; }

/* középmélység lakói: polip és tintahalak — a felszínen nincsenek, középen láthatók, a mélyben halványan */
.dive-fauna { opacity: 0; transition: opacity .8s; }
.dive-vis[data-level="1"] .dive-fauna,
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-fauna { opacity: 1; }
.dive-vis[data-level="2"] .dive-fauna,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-fauna { opacity: .3; }
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-fauna { opacity: 0; }
.dive-octo-b { animation: dive-octo 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 30%; }
@keyframes dive-octo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.dive-octo path.a1, .dive-octo path.a2, .dive-octo path.a3, .dive-octo path.a4 { transform-box: fill-box; transform-origin: 50% 0; animation: dive-arm 2.3s ease-in-out infinite; }
.dive-octo path.a2 { animation-delay: .3s; } .dive-octo path.a3 { animation-delay: .6s; } .dive-octo path.a4 { animation-delay: .9s; }
@keyframes dive-arm { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
.dive-squid-b { animation: dive-jet 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 70% 50%; }
.dive-squid.s2 .dive-squid-b { animation-duration: 4.1s; animation-delay: 1.2s; }
@keyframes dive-jet { 0%, 100% { transform: translateX(0) scaleX(1); } 18% { transform: translateX(3px) scaleX(1.08); } 40% { transform: translateX(-9px) scaleX(.94); } 70% { transform: translateX(-12px) scaleX(1); } }

/* kamera: Espresso-nál a kép lejjebb ereszkedik (a táj és a csónak a középpontban), mélyebbre menve visszaáll */
.dive-cam { transition: transform .9s cubic-bezier(.45, .05, .25, 1); }
.dive-shallow { opacity: 0; transition: opacity .8s; }
.dive-vis[data-level="0"] .dive-cam,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-cam { transform: translateY(112px); }
.dive-vis[data-level="0"] .dive-shallow,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-shallow { opacity: 1; }
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-cam,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-cam { transform: none; }
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-shallow,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-shallow { opacity: 0; }

/* mélységkijelző: a műszer jobb felső sarkában, műszer-tipóval */
.dive-readout {
    position: absolute; right: 14px; top: 44px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    padding: 7px 11px; border-radius: 10px;
    background: rgba(4, 16, 26, .55); border: 1px solid rgba(207, 227, 238, .18);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dive-zone { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #9FC4D8; }
.dive-m { font-size: 1.05rem; font-weight: 600; color: #FFB15C; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dive-vis.no-anim * { transition: none !important; }

/* --- a három opció ---------------------------------------------------------------------------- */
.dive .depth-picker-group.dive-opts {
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    padding: 0; margin: 0; border: 0; border-radius: 0; background: none; max-width: none; width: 100%;
}
.dive .depth-picker-lens { display: none; }
.dive .depth-picker-btn.dive-opt {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-width: 0; min-height: 0; width: 100%; padding: 14px 16px; border-radius: 14px;
    text-align: left; white-space: normal; text-decoration: none; color: var(--text-primary, #16202e);
    background: var(--bg-primary, #fff); border: 1px solid var(--border-light, #e6eaf0); box-shadow: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dive .dive-opt:hover, .dive .dive-opt:focus-visible, .dive .dive-opt.is-preview, .dive .dive-opt.is-tour {
    border-color: color-mix(in srgb, #14425E 28%, var(--border-light, #e6eaf0));
    background: color-mix(in srgb, #14425E 3%, var(--bg-primary, #fff));
}
.dive .dive-opt:hover { transform: translateX(2px); }
.dive .dive-opts .depth-picker-btn.dive-opt.is-current {
    /* megemelt állapot, nem űrlapmező: keret helyett finom tónus + puha árnyék */
    border-color: transparent;
    background: color-mix(in srgb, var(--accent-current, #5E6AD2) 8%, var(--bg-primary, #fff));
    box-shadow: 0 1px 2px rgba(16, 30, 54, .05), 0 12px 28px -18px color-mix(in srgb, var(--accent-current, #5E6AD2) 45%, transparent);
    transform: translateY(-1px);
}
.dive .dive-opt:focus-visible { outline: 2px solid var(--accent-current, #5E6AD2); outline-offset: 2px; }

/* a jelölő: kis mélységmérő-pötty, az aktuálisnál kitöltve, előnézetnél narancs gyűrű */
.dive-opt-mark { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, #14425E 45%, transparent); transition: border-color .2s, background .2s, box-shadow .2s; }
.dive-opt.is-current .dive-opt-mark { border-color: var(--accent-current, #5E6AD2); background: var(--accent-current, #5E6AD2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-current, #5E6AD2) 18%, transparent); }
.dive-opt.is-preview .dive-opt-mark, .dive-opt.is-tour:not(.is-current) .dive-opt-mark { border-color: #F0A35E; box-shadow: 0 0 0 3px rgba(240, 163, 94, .14); }

.dive-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dive-opt-name { font-size: 1.12rem; font-weight: 750; letter-spacing: -.01em; }
.dive-opt-name small { margin-left: 7px; font-size: .7rem; font-weight: 500; color: var(--text-secondary, #5a6678); letter-spacing: .04em; opacity: .6; }
.dive-opt.is-current .dive-opt-name { color: var(--accent-current, #5E6AD2); }
.dive-opt-desc { font-size: .9rem; font-weight: 400; line-height: 1.35; color: var(--text-secondary, #5a6678); }
.dive-opt-m { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; color: var(--text-secondary, #5a6678); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; }
.dive .dive-opt.is-loading::after { position: absolute; right: 14px; top: 12px; margin: 0; }

/* --- mobil: felül a műszer (alacsonyabb), alatta a három teljes szélességű sor ----------------- */
@media (max-width: 760px) {
    .depth-picker.dive { padding: 26px 0 30px; }
    .dive-head { margin-bottom: 14px; }
    .dive-title { font-size: 1.3rem; }
    .dive-sub { font-size: .92rem; margin-top: 2px; }
    .dive-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .dive-vis { border-radius: 14px; aspect-ratio: 480 / 220; }
    .dive-readout { top: 40px; right: 10px; padding: 5px 9px; }
    .dive-m { font-size: .95rem; }
    .dive .depth-picker-btn.dive-opt { padding: 10px 14px; gap: 12px; }
    .dive .depth-picker-group.dive-opts { gap: 6px; }
    .dive-opt-name { font-size: 1.05rem; }
    .dive-opt-desc { font-size: .85rem; }
    .dive .dive-opt:hover { transform: none; }
}
@media (max-width: 380px) { .dive-opt-m { display: none; } .dive .depth-picker-btn.dive-opt { grid-template-columns: auto minmax(0, 1fr); } }

/* --- sötét téma ------------------------------------------------------------------------------- */
:root[data-theme="dark"] .depth-picker.dive { background: linear-gradient(180deg, #08131c, var(--bg-primary, #0A0A0A)); }
:root[data-theme="dark"] .dive-vis { box-shadow: 0 0 0 1px rgba(127, 209, 232, .12); }
:root[data-theme="dark"] .dive .depth-picker-btn.dive-opt { border-color: rgba(159, 196, 216, .16); background: rgba(255, 255, 255, .02); }
:root[data-theme="dark"] .dive .dive-opt:hover, :root[data-theme="dark"] .dive .dive-opt.is-preview, :root[data-theme="dark"] .dive .dive-opt.is-tour { border-color: rgba(159, 196, 216, .32); background: rgba(127, 209, 232, .05); }
:root[data-theme="dark"] .dive-opt-mark { border-color: rgba(159, 196, 216, .5); }
:root[data-theme="dark"] .dive .dive-opts .depth-picker-btn.dive-opt.is-current { border-color: transparent; background: color-mix(in srgb, var(--accent-current, #5E6AD2) 16%, transparent); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .depth-picker.dive { background: linear-gradient(180deg, #08131c, var(--bg-primary, #0A0A0A)); }
    :root:not([data-theme="light"]) .dive .depth-picker-btn.dive-opt { border-color: rgba(159, 196, 216, .16); background: rgba(255, 255, 255, .02); }
    :root:not([data-theme="light"]) .dive-opt-mark { border-color: rgba(159, 196, 216, .5); }
    :root:not([data-theme="light"]) .dive .dive-opts .depth-picker-btn.dive-opt.is-current { border-color: transparent; background: color-mix(in srgb, var(--accent-current, #5E6AD2) 16%, transparent); }
}

/* Röviden = felszíni nézet: pici periszkópfej a csónaktól balra, a csónak felé néz. Mélyebben lebukik (a vízvonal alatt
   a clipPath levágja). Diszkrét: egy kis csillanás az üvegen, egy fodor körülötte — nem rajzfilm. */
.dive-peri { transform: translate(128px, 34px); }
.dive-peri-up { transform: translateY(24px); transition: transform .55s cubic-bezier(.5, 0, .75, 0); }
.dive-peri-ripple { opacity: 0; transition: opacity .3s; }
.dive-vis[data-level="0"] .dive-peri-up,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-peri-up { transform: none; transition: transform .9s .45s cubic-bezier(.2, .8, .25, 1); }
.dive-vis[data-level="0"] .dive-peri-ripple,
.dive:has(.dive-opt[data-dive-level="0"]:hover) .dive-vis .dive-peri-ripple { opacity: 1; transition: opacity .5s .7s; }
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-peri-up,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-peri-up { transform: translateY(24px); transition: transform .55s cubic-bezier(.5, 0, .75, 0); }
.dive:has(.dive-opt[data-dive-level="1"]:hover) .dive-vis .dive-peri-ripple,
.dive:has(.dive-opt[data-dive-level="2"]:hover) .dive-vis .dive-peri-ripple { opacity: 0; transition: opacity .3s; }
.dive-peri-glass { animation: dive-glint 5.5s ease-in-out infinite; }
@keyframes dive-glint { 0%, 78%, 100% { fill: #BFE6F5; } 84% { fill: #FFFFFF; } }
.dive-peri-ripple path { transform-box: fill-box; transform-origin: 50% 50%; animation: dive-ripple 2.6s ease-in-out infinite; }
.dive-peri-ripple path + path { animation-delay: -1.3s; }
@keyframes dive-ripple { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.25); } }

/* halk szintjelző hang ki/be — a műszer jobb alsó sarkában, alig látszik, amíg nem kell */
.dive-snd {
    position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border-radius: 50%; border: 1px solid rgba(207, 227, 238, .18); background: rgba(4, 16, 26, .45); color: #CFE3EE;
    opacity: .55; transition: opacity .2s, background .2s;
}
.dive-snd[hidden] { display: none; }
@media (max-width: 760px) { .dive-snd { width: 26px; height: 26px; right: 8px; bottom: 8px; } .dive-snd svg { width: 14px; height: 14px; } }
.dive-snd:hover, .dive-snd:focus-visible { opacity: 1; background: rgba(4, 16, 26, .7); }
.dive-snd:focus-visible { outline: 2px solid #FFB15C; outline-offset: 2px; }
.dive-snd .dive-snd-x { display: none; }
.dive-snd.is-off .dive-snd-w { display: none; }
.dive-snd.is-off .dive-snd-x { display: inline; }
/* vár a kattintásra (a böngésző még nem enged hangot): halvány, áthúzott, finoman „hív” */
.dive-snd.is-wait { opacity: .7; animation: dive-snd-call 2.4s ease-out 1.2s 3; }
.dive-snd.is-wait:hover, .dive-snd.is-wait:focus-visible { opacity: 1; }
@keyframes dive-snd-call { 0% { box-shadow: 0 0 0 0 rgba(255, 177, 92, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 177, 92, 0); } }
@media (prefers-reduced-motion: reduce) { .dive-snd.is-wait { animation: none; } }

/* --- csökkentett mozgás: nincs lebegés, szonár, buborék; az állapotváltás azonnali ------------- */
@media (prefers-reduced-motion: reduce) {
    .dive-vis *, .dive .dive-opt { transition: none !important; animation: none !important; }
    .dive-sonar circle { opacity: .5; transform: scale(2.4); }
    .dive-bubbles { display: none; }
    .dive-boat-body, .dive-wake path, .dive-deep-body, .dive-octo-b, .dive-octo path, .dive-squid-b, .dive-peri-glass, .dive-peri-ripple path { animation: none !important; }
}