/* Chapter 8: the South Sea island. A whole day: morning, low tide, a tropical shower, dusk and the turtles.
   Close-ups: the sundial, the tide post, the captain's map (paces), the treasure chest's lock (a food chain),
   the thunder and the turtle nest. Everything stops with the Motion setting (css/animations.css). */
.dialog.who-parrot .who{color:#7ad06a} .dialog.who-parrot{border-left-color:#7ad06a}

/* ---------- the island comes alive ---------- */
@keyframes siDrift{0%{transform:translateX(0)}100%{transform:translateX(-140px)}}
@keyframes siSun{to{transform:rotate(360deg)}}
@keyframes siBird{0%{transform:translate(-120px,120px)}100%{transform:translate(1720px,40px)}}
@keyframes siFlap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.5)}}
@keyframes siBob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(4px) rotate(.6deg)}}
@keyframes siPalm{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}
@keyframes siPalmStorm{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(5deg)}}
@keyframes siPerch{0%,40%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}60%{transform:rotate(4deg)}}
@keyframes siWing{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-30deg)}90%{transform:rotate(0)}95%{transform:rotate(-30deg)}}
@keyframes siHammock{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes siZz{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(20px,-30px);opacity:0}}
@keyframes siClimb{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes siCrab{0%,100%{transform:translateX(0)}25%{transform:translateX(-26px)}50%{transform:translateX(10px)}75%{transform:translateX(30px)}}
@keyframes siFoam{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(8px);opacity:.5}}
@keyframes siRipple{0%,100%{transform:translateX(0)}50%{transform:translateX(-20px)}}
@keyframes siDolphin{0%{transform:translate(380px,480px) rotate(-40deg);opacity:0}3%{opacity:1}15%{transform:translate(450px,400px) rotate(0)}29%{transform:translate(520px,480px) rotate(40deg);opacity:1}30%,100%{transform:translate(520px,500px) rotate(40deg);opacity:0}}
@keyframes siNod{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes siTail{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
@keyframes siWobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes siPlait{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes siRain{0%{transform:translateY(-120px)}100%{transform:translateY(120px)}}
@keyframes siFlash{0%,6%,10%,100%{opacity:0}7%,9%{opacity:.75}}
@keyframes siBolt{0%,6%,11%,100%{opacity:0}7%,10%{opacity:1}}
@keyframes siTw{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes siGlow{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes siMoon{0%,100%{opacity:.55}50%{opacity:.3}}
@keyframes siBaby{0%{transform:translate(200px,770px);opacity:1}85%{opacity:1}100%{transform:translate(130px,610px);opacity:0}}

#sc-island .si-cloud{animation:siDrift 46s ease-in-out infinite alternate}
#sc-island .si-cloud.b{animation-duration:60s;animation-direction:alternate-reverse}
#sc-island .si-cloud.c{animation-duration:76s}
#sc-island .si-cloud.d{animation-duration:54s;animation-direction:alternate-reverse}
@keyframes siGlint{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes siBend{0%,100%{transform:skewX(-5deg)}50%{transform:skewX(5deg)}}
#sc-island .si-glint path{animation:siGlint 2.4s ease-in-out infinite}
#sc-island .si-glint .b{animation-delay:-1.2s}
#sc-island .si-dune use{transform-box:fill-box;transform-origin:50% 100%;animation:siBend 3.5s ease-in-out infinite}
#sc-island .si-dune use:nth-child(even){animation-delay:-1.7s}
#sc-island .rays{transform-box:view-box;transform-origin:1240px 96px;animation:siSun 70s linear infinite}
#sc-island .si-bird{transform:translate(-200px,0);animation:siBird 24s linear infinite}
#sc-island .si-bird .wings{transform-box:fill-box;transform-origin:50% 100%;animation:siFlap .6s ease-in-out infinite}
#si-ship{transform-box:view-box;transform-origin:215px 418px;animation:siBob 5s ease-in-out infinite}
#sc-island .flagw{transform-box:fill-box;transform-origin:0 50%;animation:ccFlag 1.4s ease-in-out infinite}
#sc-island .si-dolphin{opacity:0;transform-box:view-box;transform-origin:0 0;animation:siDolphin 9s ease-in-out infinite}
#sc-island .palm{transform-box:fill-box;transform-origin:50% 100%;animation:siPalm 4s ease-in-out infinite}
#sc-island .palm.b{animation-duration:5s;animation-delay:-2s}
#sc-island.storm .palm{animation:siPalmStorm 1.2s ease-in-out infinite}
#si-parrot .perch{transform-box:view-box;transform-origin:1018px 340px;animation:siPerch 5s ease-in-out infinite}
#si-parrot .wing{transform-box:fill-box;transform-origin:50% 0;animation:siWing 4s ease-in-out infinite}
#si-captain .sway{transform-box:view-box;transform-origin:1220px 500px;animation:siHammock 4s ease-in-out infinite}
#si-captain .zz text{animation:siZz 2.4s ease-out infinite}
#si-captain .zz text + text{animation-delay:-1.2s}
#si-nilsson .climb{animation:siClimb 1.6s ease-in-out infinite}
#sc-island .si-crab.a{animation:siCrab 6s ease-in-out infinite}
#sc-island .si-crab.b{animation:siCrab 4s ease-in-out infinite reverse}
#sc-island .si-foam{animation:siFoam 3.2s ease-in-out infinite}
#sc-island .si-ripple{animation:siRipple 4s ease-in-out infinite}
#si-horse .hhead{transform-box:view-box;transform-origin:458px 680px;animation:siNod 3s ease-in-out infinite}
#si-horse .htail{transform-box:fill-box;transform-origin:0 0;animation:siTail 2s ease-in-out infinite}
#si-pippi .handst{transform-box:view-box;transform-origin:775px 762px;animation:siWobble 1.8s ease-in-out infinite}
#si-pippi .plait{transform-box:fill-box;animation:siPlait 1.2s ease-in-out infinite}
#si-pippi .plait.l{transform-origin:100% 0} #si-pippi .plait.r{transform-origin:0 0;animation-delay:-.6s}
/* the tide goes out: the high water slides away and the sandbar and rock pools come up */
#si-highwater{transition:opacity 3s ease,transform 3s ease}
#sc-island.lowtide #si-highwater{opacity:0;transform:translateY(40px)}
/* the shower */
#sc-island #si-rain .drops{animation:siRain .45s linear infinite}
#sc-island #si-flash{opacity:0;pointer-events:none;animation:siFlash 7s linear infinite}
#sc-island .si-bolt{opacity:0;animation:siBolt 7s linear infinite}
/* dusk */
#si-tint{pointer-events:none}
#sc-island .si-stars .tw{animation:siTw 2.4s ease-in-out infinite}
#sc-island .si-stars .tw.b{animation-delay:-.8s} #sc-island .si-stars .tw.c{animation-delay:-1.6s}
#sc-island #si-moonpath{animation:siMoon 3s ease-in-out infinite}
#sc-island #si-lantern{animation:siGlow 1.6s ease-in-out infinite}
/* the hatchlings scurry down to the sea */
#sc-island .si-baby{transform:translate(170px,720px)}
#sc-island .si-baby.a{animation:siBaby 3.4s linear infinite}
#sc-island .si-baby.b{animation:siBaby 3.4s linear infinite;animation-delay:-.9s}
#sc-island .si-baby.c{animation:siBaby 3.4s linear infinite;animation-delay:-1.8s}
#sc-island .si-baby.d{animation:siBaby 3.4s linear infinite;animation-delay:-2.6s}

/* ---------- close-ups ---------- */
.dial8-svg{width:100%;max-width:320px;height:auto;display:block;margin:0 auto;border-radius:8px}
.dial8-svg .hr.pick{cursor:pointer}
.dial8-svg .hr.pick:hover circle{fill:#ffe27a}
.dial8-ask{margin:10px 0 0}

.tide8{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.tide8-svg{width:110px;height:auto;flex:0 0 auto;border-radius:6px}
.tide8-side{flex:1 1 260px;min-width:0}

.walkers{flex-wrap:wrap}
.wk8.on{background:var(--amber);color:#24120a}
.pace8{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:14px}
.pace8 input{width:100%;accent-color:var(--amber)}
.pace8-svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;border-radius:6px}

.slots8{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin:12px 0}
.slot8{width:64px;height:72px;border:2px dashed var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;text-align:center;line-height:1.1}
.slot8 svg{width:36px;height:36px}
.arrow8{color:var(--amber);font-weight:700}
.cards8{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:8px 0}
.card8{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:2px solid var(--line);border-radius:8px;background:var(--ink);font-size:12px;line-height:1.2;text-align:center;min-width:0}
.card8 svg{width:40px;height:40px}
.card8.gone{opacity:.35}

.thunder8{display:flex;align-items:center;justify-content:center;gap:20px;margin:12px 0;min-height:70px}
.flash8 svg{width:40px;height:60px;opacity:.25;transition:opacity .1s}
.flash8.on svg{opacity:1;filter:drop-shadow(0 0 12px #fff6b0)}
.count8{font-family:var(--f-mono);font-size:40px;font-weight:700;min-width:2ch;text-align:center}
.boom8{font-size:28px;font-weight:700;color:var(--amber);min-width:4ch}

.turtle8-svg{width:100%;max-width:440px;height:auto;display:block;margin:0 auto;border-radius:6px}
.lights8{flex-wrap:wrap}
.lt8.on{border-color:#ffcf6a;color:#ffcf6a}
@media (max-width:520px){ .cards8{grid-template-columns:repeat(3,minmax(0,1fr))} }