/* Keloğlan wall-crawler mascot.
   TUNING: change --kg-height (size) and --kg-left (horizontal position) here.
   The climb speed is CLIMB_SECONDS in keloglan.js. */
:root {
    --kg-height: 100px;
    --kg-left: 50%;
}

@media (max-width: 620px) {
    :root { --kg-height: 70px; }
}

body.is-playing > .site-menu-bar,
body.is-playing > .page-header { display: none; }

/* Full-viewport overlay: it never blocks clicks (only the mascot himself can be pressed). */
.keloglan-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* The shark's fin and wake share one moving group behind Keloğlan. */
.kg-shark-tail {
    position: absolute;
    top: 0;
    left: var(--kg-left);
    z-index: 1;
    width: clamp(74px, 18vw, 120px);
    aspect-ratio: 3 / 4;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
.kg-shark-tail.is-active { visibility: visible; }
.kg-shark-tail-sway {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    animation: kg-shark-tail-sway 2.6s ease-in-out infinite alternate;
    animation-play-state: paused;
}
.kg-shark-tail-sway::before,
.kg-shark-tail-sway::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 150%;
    aspect-ratio: 1;
    margin: -75% 0 0 -75%;
    border: 3px solid rgba(225, 250, 255, .75);
    box-shadow: 0 0 14px rgba(200, 245, 255, .45), inset 0 0 12px rgba(200, 245, 255, .3);
    border-radius: 50%;
    pointer-events: none;
    animation: kg-wave 2.6s ease-out infinite;
    animation-play-state: paused;
}
.kg-shark-tail.is-active:not(.is-paused) .kg-shark-tail-sway,
.kg-shark-tail.is-active:not(.is-paused) .kg-shark-wake-line { animation-play-state: running; }
.kg-shark-tail.is-active:not(.is-paused) .kg-shark-tail-sway::before,
.kg-shark-tail.is-active:not(.is-paused) .kg-shark-tail-sway::after { animation-play-state: running; }
.kg-shark-tail-sway::after { animation-delay: 1.3s; }
.kg-shark-wakes {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 200%;
    height: 100%;
    overflow: visible;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.kg-shark-wake-line {
    fill: none;
    stroke: #d3f7fb;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: .8;
    transform-box: fill-box;
    transform-origin: center;
    animation: kg-shark-wake 1.8s ease-in-out infinite alternate;
    animation-play-state: paused;
}
.kg-shark-wake-line--right { animation-delay: -.9s; }
.kg-shark-fin,
.kg-shark-fin-fallback {
    position: absolute;
    inset: 5%;
    z-index: 1;
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;
}
.kg-shark-fin-fallback { display: grid; place-items: center; }
.kg-shark-fin-fallback[hidden] { display: none; }
.kg-shark-fin-fallback svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes kg-shark-tail-sway {
    from { transform: rotate(-3deg); }
    to { transform: rotate(3deg); }
}
@keyframes kg-shark-wake {
    from { transform: translateX(-3px); opacity: .55; }
    to { transform: translateX(3px); opacity: .9; }
}

/* Moved up the screen with a transform (set from keloglan.js). */
.keloglan-rider {
    position: absolute;
    top: 0;
    z-index: 2;
    left: var(--kg-left);
    height: var(--kg-height);
    aspect-ratio: 88 / 184;
    margin-left: calc(var(--kg-height) * -0.2391); /* half of the width */
    will-change: transform;
}

/* Only the game mode makes him pressable. */
.keloglan-rider.is-clickable { pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.keloglan-rider.is-paused .keloglan g { animation-play-state: paused; }

.keloglan {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Rotations happen around the joints given in SVG user units. */
.keloglan g {
    transform-box: view-box;
}

.kg-arm-left  { transform-origin: -10px -8px; animation: kg-arm-a .9s ease-in-out infinite; }
.kg-arm-right { transform-origin: 10px -8px;  animation: kg-arm-b .9s ease-in-out infinite; }
.kg-leg-left  { transform-origin: -6px 38px;  animation: kg-leg-b .9s ease-in-out infinite; }
.kg-leg-right { transform-origin: 6px 36px;   animation: kg-leg-a .9s ease-in-out infinite; }
.kg-body      { transform-origin: 0px 10px;   animation: kg-sway .9s ease-in-out infinite; }
.kg-head      { transform-origin: 0px -20px;  animation: kg-sway-head .9s ease-in-out infinite; }

/* Left arm + right leg move together, then right arm + left leg. */
@keyframes kg-arm-a { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes kg-arm-b { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }
@keyframes kg-leg-a { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes kg-leg-b { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
@keyframes kg-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes kg-sway-head { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }

/* Reduced motion: keep him still in his climbing pose. */
@media (prefers-reduced-motion: reduce) {
    .keloglan g { animation: none !important; }
}

/* Shallow wave rings around the swimmer (transform + opacity only). */
.keloglan-rider.has-waves::before,
.keloglan-rider.has-waves::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: 300%;
    aspect-ratio: 1.15;
    margin: -87% 0 0 -150%;
    border: 3px solid rgba(225, 250, 255, .75);
    box-shadow: 0 0 14px rgba(200, 245, 255, .45), inset 0 0 12px rgba(200, 245, 255, .3);
    border-radius: 50%;
    pointer-events: none;
    animation: kg-wave 2.6s ease-out infinite;
}
.keloglan-rider.has-waves::after { animation-delay: .87s; }
.keloglan-rider.has-waves .kg-ring {
    position: absolute; left: 50%; top: 52%; width: 300%; aspect-ratio: 1.15; margin: -87% 0 0 -150%;
    border: 3px solid rgba(225, 250, 255, .75); border-radius: 50%; pointer-events: none;
    animation: kg-wave 2.6s ease-out infinite; animation-delay: 1.74s;
}
.keloglan-rider.has-waves.is-paused .kg-ring,
.keloglan-rider.has-waves.is-paused::before,
.keloglan-rider.has-waves.is-paused::after { animation-play-state: paused; }
@keyframes kg-wave {
    0%   { transform: scale(.35); opacity: .75; }
    100% { transform: scale(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .keloglan-rider.has-waves::before, .keloglan-rider.has-waves::after, .keloglan-rider.has-waves .kg-ring { animation: none; opacity: .35; transform: scale(.7); }
    .kg-shark-tail-sway, .kg-shark-wake-line { animation: none !important; }
    .kg-shark-tail-sway::before, .kg-shark-tail-sway::after { animation: none !important; opacity: .35; transform: scale(.7); }
}