/* Slide 5 opening · the camera pulls back from the fishbone sea floor to a fisherman, who reels the fishbone up and drops it in his boat.
   One animated number, --s, is the camera zoom. Every layer scales by it around the same point, and the sky/water
   gradient is computed from it, so nothing can drift out of step. Positions are world pixels set once by catch-slide.js. */
@property --s { syntax: '<number>'; inherits: true; initial-value: 1; }
.catch-slide { --sky-top: #030712; --sky-bottom: #12305a; --boat: #7a4a24; --boat-dark: #5a3418; --coat: #f2c230; --hat: #2f6a52; --skin: #f1c27d; --line-color: rgba(235, 240, 245, .9); --T: 10s; position: absolute; inset: 0; overflow: hidden; }
:root[data-theme="cream"] .catch-slide { --sky-top: #f4efdf; --sky-bottom: #d3ebe8; --boat: #8b5a2b; --boat-dark: #6b4220; --line-color: rgba(40, 37, 31, .85); }
.catch-slide[hidden] { display: none; }

/* World y → screen y is  oy + (y − oy)·s,  with the camera pinned at 50% / 88%. */
.c5-bg { position: absolute; inset: 0; background: linear-gradient(var(--sky-top) 0px, var(--sky-bottom) calc(var(--oy) + (var(--ys) - var(--oy)) * var(--s)), var(--sea-0) calc(var(--oy) + (var(--ys) - var(--oy)) * var(--s)), var(--sea-1) calc(var(--oy) * (1 - var(--s))), var(--sea-2) calc(var(--oy) + (var(--h) - var(--oy)) * var(--s)), var(--sea-deep) calc(var(--oy) + (var(--h) * 2.4 - var(--oy)) * var(--s))); }
.c5-zoom { position: absolute; inset: 0; transform-origin: 50% 88%; transform: scale(var(--s)); will-change: transform; pointer-events: none; }

.c5-orb { position: absolute; left: 22%; top: calc(var(--ys) - var(--h) * .62); width: calc(var(--h) * .16); aspect-ratio: 1; border-radius: 50%; background: #f1eedc; box-shadow: 0 0 90px 20px rgba(255, 252, 225, .25); }
:root[data-theme="cream"] .c5-orb { background: #f6c453; box-shadow: 0 0 110px 30px rgba(246, 196, 83, .4); }
.c5-cloud { position: absolute; height: calc(var(--h) * .09); border-radius: 999px; background: color-mix(in srgb, var(--sky-bottom) 50%, #fff); opacity: .3; }
:root[data-theme="cream"] .c5-cloud { background: #fff; opacity: .85; }
.c5-cloud.one { left: -10%; top: calc(var(--ys) - var(--h) * .45); width: 32%; }
.c5-cloud.two { left: -75%; top: calc(var(--ys) - var(--h) * .9); width: 24%; }

.c5-surface { position: absolute; left: -125%; width: 350%; top: calc(var(--ys) - 24px); height: 48px; overflow: hidden; }
.c5-surface i { position: absolute; inset: 0 -50% 0 0; background: radial-gradient(ellipse 120px 24px at 50% 100%, var(--sea-0) 96%, transparent 100%) 0 0 / 240px 24px repeat-x, linear-gradient(transparent 24px, var(--sea-0) 24px); animation: c5-waves 6s linear infinite; }
@keyframes c5-waves { to { transform: translateX(-240px); } }
.catch-floor { position: absolute; left: -125%; width: 350%; top: 91%; height: 70%; }
.c5-sides .ocean-floor { position: absolute; top: 0; height: 100%; width: 100%; }
.c5-sides .ocean-floor.left { left: -100%; transform: scaleX(-1); }
.c5-sides .ocean-floor.right { left: 100%; }
.c5-scenery .gap-ocean { inset: 0; }
.c5-mid-box { position: absolute; left: -125%; width: 350%; top: -95%; height: 180%; }
.c5-mid .ocean-critter { fill: var(--sea-critter); }

.c5-boat { position: absolute; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); }
.c5-boat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c5-rod { fill: none; stroke: #3b2a1a; stroke-width: 3.4; stroke-linecap: round; }
:root[data-theme="cream"] .c5-rod { stroke: #2b1d10; }
.c5-coat { fill: var(--coat); }
.c5-arm { fill: none; stroke: var(--coat); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.c5-skin { fill: var(--skin); }
.c5-eye { fill: #1a1a1a; }
.c5-hat { fill: var(--hat); }
.c5-reel { fill: #9aa3ad; stroke: #4b525a; stroke-width: 1.5; }
.c5-handle { stroke: #4b525a; stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 192px 128px; }
.c5-hull { fill: var(--boat); }
.c5-rim { fill: var(--boat-dark); }
.c5-stripe { stroke: #e9e2cf; stroke-width: 4; opacity: .7; }
.c5-fisher { transform-box: view-box; transform-origin: 218px 176px; }
.c5-say { position: absolute; right: 31%; bottom: 79%; margin: 0; padding: .3em .75em; border-radius: 1em; background: var(--ink); color: var(--page); font-size: calc(var(--bw) * .055); font-weight: 700; white-space: nowrap; transform-origin: 100% 100%; opacity: 0; }
.c5-say::after { content: ''; position: absolute; top: 100%; right: 1em; border: .35em solid transparent; border-top-color: var(--ink); }
.c5-say.big { font-size: calc(var(--bw) * .09); padding: .1em .6em; }

.c5-bone { position: absolute; inset: 0; transform-origin: var(--ex) var(--ey); }
.c5-line { position: absolute; left: calc(var(--ex) - 2px); top: var(--tipy); width: 4px; height: 0; background: var(--line-color); }
.c5-hook { position: absolute; left: 50%; bottom: -30px; width: 20px; height: 34px; margin-left: -10px; overflow: visible; fill: none; stroke: #c7ccd3; stroke-width: 4; stroke-linecap: round; }
.c5-splash { position: absolute; left: var(--ex); top: var(--ys); opacity: 0; }
.c5-splash i { position: absolute; width: 60px; height: 18px; margin: -9px 0 0 -30px; border: 6px solid var(--sea-foam); border-radius: 50%; opacity: 0; }
.c5-splash b { position: absolute; width: 20px; height: 26px; margin: -13px 0 0 -10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--sea-foam); opacity: 0; }
.c5-splash b:nth-of-type(1) { --vx: -130px; --vy: -170px; } .c5-splash b:nth-of-type(2) { --vx: -60px; --vy: -240px; }
.c5-splash b:nth-of-type(3) { --vx: 20px; --vy: -260px; } .c5-splash b:nth-of-type(4) { --vx: 90px; --vy: -210px; }
.c5-splash b:nth-of-type(5) { --vx: 150px; --vy: -150px; } .c5-splash b:nth-of-type(6) { --vx: -180px; --vy: -110px; }
.c5-splash b:nth-of-type(7) { --vx: 200px; --vy: -260px; } .c5-splash b:nth-of-type(8) { --vx: -220px; --vy: -230px; }
.c5-cues { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── The script, 10 s. Keyframe percentages are tenths of a second. ── */
.c5-play { animation: c5-zoom var(--T) both; }
@keyframes c5-zoom { 0%, 6% { --s: 1; animation-timing-function: cubic-bezier(.65, 0, .3, 1); } 32%, 100% { --s: .3; } }
/* Slide 4's light shafts and drifting specks belong to the close-up; they fade as the camera pulls back. */
.c5-play .c5-scenery .ocean-rays { animation: c5-fade-out 1.4s .6s both, sea-sway 9s ease-in-out infinite alternate; }
.c5-play .c5-scenery .ocean-caustics { animation: c5-fade-out 1.4s .6s both, sea-caustics 10s linear infinite; }
.c5-play .c5-scenery .ocean-snow { animation: c5-fade-out 1.4s .6s both, sea-current 14s linear infinite; }
@keyframes c5-fade-out { to { opacity: 0; } }
.c5-play .c5-mid { animation: c5-fade-in 1.6s 1.2s both; }
@keyframes c5-fade-in { from { opacity: 0; } }

/* The hook drops from the rod tip, the line tightens while reeling, and it goes slack once the catch is aboard.
   The line's length and the bone's lift use the same keyframes and the same linear stretch, so the hook stays in the eye. */
.c5-play .c5-line { animation: c5-line var(--T) both; }
@keyframes c5-line { 0%, 34% { height: 0; opacity: 1; animation-timing-function: linear; } 43% { height: var(--L); } 50% { height: var(--L); animation-timing-function: linear; } 74% { height: 0px; opacity: 1; } 75%, 100% { height: 0; opacity: 0; } }
.c5-play .c5-bone { animation: c5-bone-move var(--T) both, c5-bone-turn var(--T) both, c5-bone-size var(--T) both; }
@keyframes c5-bone-move { 0%, 50% { translate: 0 0; animation-timing-function: linear; } 74% { translate: 0 calc(var(--L) * -1); } 76% { translate: 0 calc(var(--L) * -1); animation-timing-function: cubic-bezier(.3, 0, .6, 1); } 81% { translate: var(--hx-mid) var(--hy-mid); animation-timing-function: cubic-bezier(.4, 0, .7, 1); } 86%, 100% { translate: var(--hx) var(--hy); } }
@keyframes c5-bone-turn { 0%, 44% { rotate: 0deg; } 45% { rotate: -5deg; } 46% { rotate: 5deg; } 47% { rotate: -4deg; } 48% { rotate: 3deg; } 49% { rotate: -1deg; } 50% { rotate: 0deg; } 56% { rotate: -94deg; } 61% { rotate: -70deg; } 66% { rotate: -87deg; } 71% { rotate: -77deg; } 76% { rotate: -80deg; } 86%, 100% { rotate: -360deg; } }
@keyframes c5-bone-size { 0%, 50% { scale: 1; } 74%, 76% { scale: .33; } 86%, 100% { scale: var(--f); } }

.c5-play .c5-splash.in { animation: c5-show 1.2s var(--hook-in) both; }
.c5-play .c5-splash.out { animation: c5-show 1.4s var(--bone-out) both; }
@keyframes c5-show { 0%, 100% { opacity: 1; } }
.c5-play .c5-splash i { animation: c5-ripple 1s var(--hook-in) ease-out both; }
.c5-play .c5-splash i + i { animation-delay: calc(var(--hook-in) + .25s); }
.c5-play .c5-splash.out i { animation-delay: var(--bone-out); }
.c5-play .c5-splash.out i + i { animation-delay: calc(var(--bone-out) + .25s); }
@keyframes c5-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(5, 3); } }
.c5-play .c5-splash.in b { animation: c5-drop .8s var(--hook-in) cubic-bezier(.2, .7, .5, 1) both; }
.c5-play .c5-splash.out b { animation: c5-drop 1s var(--bone-out) cubic-bezier(.2, .7, .5, 1) both; }
@keyframes c5-drop { 0% { opacity: 1; transform: none; } 45% { opacity: 1; transform: translate(calc(var(--vx) * .6), var(--vy)); } 100% { opacity: 0; transform: translate(var(--vx), 60px); } }
.c5-splash.in b { scale: .6; }

.c5-play .c5-say { animation: c5-talk var(--d) var(--t) both; }
.c5-play .c5-say.last { animation: c5-talk-stay .5s var(--t) both; }
@keyframes c5-talk { 0% { opacity: 0; scale: .4; rotate: -8deg; } 14% { opacity: 1; scale: 1.15; rotate: 4deg; } 24%, 85% { opacity: 1; scale: 1; rotate: 0deg; } 100% { opacity: 0; } }
@keyframes c5-talk-stay { 0% { opacity: 0; scale: .4; rotate: -8deg; } 50% { opacity: 1; scale: 1.15; rotate: 4deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
.c5-play .c5-handle { animation: c5-crank .3s linear 5s 8; }
@keyframes c5-crank { to { rotate: 360deg; } }
.c5-play .c5-rig .c5-fisher { animation: c5-lean .6s ease-in-out 5s 4 alternate, c5-hop .3s ease-out 8.6s 4 alternate; }
@keyframes c5-lean { to { rotate: 6deg; } }
@keyframes c5-hop { to { translate: 0 -10px; } }
.c5-play .c5-cue { animation: c5-cue 1ms var(--t) both; }
.c5-play .c5-cue.crank { animation: c5-cue .3s linear 5s 8; }
@keyframes c5-cue { to { opacity: 1; } }

.motion-paused .catch-slide, .motion-paused .catch-slide * { animation-play-state: paused !important; }
/* Reduced motion: jump straight to the final frame. */
@media (prefers-reduced-motion: reduce) { .c5-play, .c5-play * { animation-delay: -60s !important; } }

/* Optional handoff: the fishing intro can end by revealing the findings. */
.c5-play.c5-then-findings { animation:c5-zoom var(--T) both,c5-intro-out .55s calc(var(--T) - .55s) both; }
@keyframes c5-intro-out { from { opacity:1; } to { opacity:0; } }