/* Copyright (c) 2026 Gregorey Landveld. All rights reserved. See LICENSE. */
/* The hero: its look and its motion (moved out of waka-style.css 17-10-2026, shared with the link page links.html).
   The drawing is in waka-hero.js. Colours by style come from body[data-wk-theme], the night from body.neti. */
/* ---------- the hero: the Paramaribo waterfront on top of the panel (day: sun and river; night: moon and fireflies) ---------- */
.wk-hero { position: relative; height: 84px; margin: 2px 0 12px; border-radius: 18px; overflow: hidden; box-shadow: var(--wk-shadow), inset 0 0 0 1px var(--wk-tile-ring); }
.wk-hero svg { display: block; width: 100%; height: 100%; }
.wk-hero .wk-n { display: none; }
body.neti .wk-hero .wk-d { display: none; }
body.neti .wk-hero .wk-n { display: inline; }
body.neti .wk-hero :is(.wk-palm, .wk-korjaal, .wk-bird) { filter: brightness(.5) saturate(.7); }
.wk-hero .wk-bird { transform-box: fill-box; transform-origin: 50% 100%; animation: wk-perch 3.2s ease-in-out infinite; }
@keyframes wk-perch { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-1.5px) rotate(-6deg); } 80% { transform: translateY(0) rotate(2deg); } }
/* a tap on the grietjebie: its call and a little hop (waka-style.js birdCall) */
.wk-hero .wk-bird-tap { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.wk-hero .wk-bird-tap:focus-visible { stroke: var(--wk-gold); stroke-width: 2; stroke-dasharray: 4 3; }
.wk-hero .wk-bird.wk-hop { animation: wk-hop .55s ease-out; }
@keyframes wk-hop { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-5px) rotate(-8deg); } 65% { transform: translateY(0) rotate(4deg); } 100% { transform: translateY(0) rotate(0); } }
.wk-hero .wk-korjaal { transform-box: fill-box; transform-origin: 50% 100%; animation: wk-rock 4.5s ease-in-out infinite; }
@keyframes wk-rock { 50% { transform: translateY(1px) rotate(1.5deg); } }
.wk-hero .wk-flies circle { animation: wk-blink 2.2s ease-in-out infinite; filter: drop-shadow(0 0 3px #2ee6c5); }
.wk-hero .wk-flies circle:nth-child(2) { animation-delay: .6s; } .wk-hero .wk-flies circle:nth-child(3) { animation-delay: 1.1s; } .wk-hero .wk-flies circle:nth-child(4) { animation-delay: 1.6s; }
@keyframes wk-blink { 50% { opacity: .15; } }
@media (max-width: 720px) { .wk-hero { height: auto; aspect-ratio: 360 / 84; margin-bottom: 10px; } }
/* a living hero (owner 17-10-2026: "can we make the tree blow and the water move and the sun emit light?"): calm, slow
   loops of transform and opacity only, so the grietjebie stays the one to look at (and the only one that answers a tap) */
.wk-hero .wk-palm { transform-box: fill-box; transform-origin: 28% 100%; animation: wk-sway 5s ease-in-out infinite; }
.wk-hero .wk-fronds { transform-box: fill-box; transform-origin: 50% 55%; animation: wk-fronds 3.4s ease-in-out infinite; }
@keyframes wk-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.6deg); } }
@keyframes wk-fronds { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(3deg); } }
.wk-hero .wk-ripples path { opacity: .7; animation: wk-ripple 4s ease-in-out infinite; }
.wk-hero .wk-ripples path:nth-child(2) { animation-delay: -1s; } .wk-hero .wk-ripples path:nth-child(3) { animation-delay: -2.2s; }
.wk-hero .wk-ripples path:nth-child(4) { animation-delay: -3s; } .wk-hero .wk-ripples path:nth-child(5) { animation-delay: -1.6s; }
@keyframes wk-ripple { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(5px); opacity: .2; } }
.wk-hero :is(.wk-sunglow, .wk-moonglow) { transform-box: fill-box; transform-origin: center; filter: blur(4px); opacity: .35; animation: wk-shinelight 4.5s ease-in-out infinite; }
.wk-hero .wk-moonglow { opacity: .22; animation-duration: 6s; }
@keyframes wk-shinelight { 0%, 100% { transform: scale(.88); opacity: .25; } 50% { transform: scale(1.12); opacity: .55; } }
.wk-hero .wk-rays { transform-box: fill-box; transform-origin: center; animation: wk-rays 30s linear infinite; }
@keyframes wk-rays { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wk-hero :is(.wk-bird, .wk-bird.wk-hop, .wk-korjaal, .wk-flies circle, .wk-palm, .wk-fronds, .wk-ripples path, .wk-sunglow, .wk-moonglow, .wk-rays) { animation: none; } }
.wk-hero .wk-t-sari { display: none; }
body[data-wk-theme="sari"] .wk-hero .wk-t-sari { display: inline; }
body[data-wk-theme="sari"] .wk-hero .wk-korjaal { display: none; }
body.neti .wk-hero .wk-t-sari { filter: brightness(.7) saturate(.9); }
.wk-hero .wk-t-batik { display: none; }
body[data-wk-theme="batik"] .wk-hero .wk-t-batik { display: inline; }
body[data-wk-theme="batik"] .wk-hero .wk-korjaal { display: none; }
body.neti .wk-hero .wk-t-batik { filter: brightness(.7) saturate(.9); }
.wk-hero .wk-t-lantaarn { display: none; }
body[data-wk-theme="lantaarn"] .wk-hero .wk-t-lantaarn { display: inline; }
body[data-wk-theme="lantaarn"] .wk-hero .wk-korjaal { display: none; }
body.neti .wk-hero .wk-t-lantaarn .wk-lamp { fill: #ff3b3b; filter: drop-shadow(0 0 3px #ff4d4d); }
.wk-hero .wk-t-mand { display: none; }
body[data-wk-theme="mand"] .wk-hero .wk-t-mand { display: inline; }
body.neti .wk-hero .wk-t-mand { filter: brightness(.55) saturate(.8); }
body[data-wk-theme="waka"] .wk-hero .wk-korjaal { display: none; }

/* the boat, the hammock and the garlands of the styles move too (owner 17-10-2026: "kunnen de boot en de hangmat ook
   meegenomen bij de animatie"): the hammock swings from its two cords, the garlands sway a little in the wind */
.wk-hero .wk-hammock { transform-box: fill-box; transform-origin: 50% 0; animation: wk-swing 3.8s ease-in-out infinite; }
@keyframes wk-swing { 0%, 100% { transform: skewX(-5deg); } 50% { transform: skewX(5deg); } }
.wk-hero :is(.wk-t-sari, .wk-t-batik, .wk-t-lantaarn) { transform-box: fill-box; transform-origin: 50% 0; animation: wk-garland 6s ease-in-out infinite; }
@keyframes wk-garland { 0%, 100% { transform: skewX(-1.2deg) translateY(0); } 50% { transform: skewX(1.2deg) translateY(.6px); } }
@media (prefers-reduced-motion: reduce) { .wk-hero :is(.wk-hammock, .wk-t-sari, .wk-t-batik, .wk-t-lantaarn) { animation: none; } }