/* Slide 4 · Problem identification: the knowing-vs-using gap and problem structuring. */
.gap-slide { --gap-red: #ec493d; --gap-good: #3fc2a4; position: absolute; inset: 118px 6vw 88px; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.25fr) minmax(0,.8fr); grid-template-rows: minmax(0,1fr) auto; gap: 18px 3.5vw; }
:root[data-theme="cream"] .gap-slide { --gap-red: #ce302a; --gap-good: #17836b; }
.gap-slide[hidden] { display: none; }
.gap-slide b { color: var(--ink); font-weight: 600; }
.gap-slide .eyebrow { margin-bottom: 12px; }

.gap-now { align-self: center; }
.gap-now h2 { margin: 0 0 22px; font-size: clamp(30px, 3.6vw, 59px); line-height: 1.04; font-weight: 550; letter-spacing: -.05em; }
.gap-tag { display: inline-block; margin: 0 0 12px; padding: 4px 9px 3px; font: 600 11px monospace; letter-spacing: .16em; text-transform: uppercase; border-radius: 3px; }
.now-tag { color: var(--page); background: var(--gap-red); }
.desired-tag { color: var(--page); background: var(--gap-good); }
.gap-stat { display: flex; align-items: center; gap: 18px; padding: 10px 0; border-top: 1px solid var(--line); }
.gap-stat strong { flex: none; font-size: clamp(34px, 3.9vw, 62px); font-weight: 550; letter-spacing: -.06em; line-height: 1; color: var(--gap-red); font-variant-numeric: tabular-nums; }
.gap-stat span { font-size: clamp(13px, 1.1vw, 17px); line-height: 1.35; color: var(--muted); }

.gap-chart { display: flex; flex-direction: column; min-height: 0; }
.gap-plot { position: relative; flex: 1; min-height: 150px; margin-top: 74px; }
.gap-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.gap-bar { position: absolute; bottom: 0; width: 28%; height: var(--h); }
.gap-bar.aware { --h: 89.6%; left: 4%; background: var(--ink); }
.gap-bar.used { --h: 20.3%; left: 64%; background: var(--gap-red); }
.gap-bar.ghost { --h: 89.6%; left: 64%; border: 2px dashed var(--gap-good); border-bottom: 0; background: color-mix(in srgb, var(--gap-good) 10%, transparent); }
.bar-value { position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 6px; text-align: center; font-size: clamp(15px, 1.4vw, 21px); font-weight: 600; letter-spacing: -.03em; }
.aware .bar-value { bottom: auto; top: 8px; color: var(--page); }
.ghost-label { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font: 600 11px monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--gap-good); line-height: 1.35; }
.gap-bracket { position: absolute; left: 86%; bottom: 20.3%; height: 69.3%; width: 0; border-left: 2px dashed var(--gap-red); }
.gap-bracket::before, .gap-bracket::after { content: ''; position: absolute; left: -7px; width: 12px; height: 2px; background: var(--gap-red); }
.gap-bracket::before { top: 0; }
.gap-bracket::after { bottom: 0; }
.gap-bracket span { position: absolute; top: 34%; right: 10px; white-space: nowrap; text-align: right; font-size: clamp(12px, 1vw, 15px); font-weight: 700; line-height: 1.15; color: var(--gap-red); }
.used .bar-value { bottom: auto; top: 50%; transform: translateY(-50%); padding: 0; color: var(--page); }
.mind-sign { position: absolute; left: 48%; top: 54%; transform: translateX(-50%); transform-origin: 50% -40px; }
.mind-sign::before, .mind-sign::after { content: ''; position: absolute; bottom: 100%; width: 1px; height: 40px; background: var(--subtle); }
.mind-sign::before { left: 18%; }
.mind-sign::after { right: 18%; }
.mind-sign span { display: block; padding: 6px 10px; border: 2px solid var(--gap-red); border-radius: 4px; background: var(--page); color: var(--gap-red); font: 800 clamp(11px, 1vw, 15px) "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .08em; white-space: nowrap; }

.gap-hero { position: absolute; left: 72%; bottom: 20.3%; width: 26px; height: 48px; transform: translateX(-50%); z-index: 2; }
.hero-body { display: block; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; transform-origin: 50% 100%; }
.hero-body circle { fill: var(--ink); }
.hero-say { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 9px; border-radius: 12px; background: var(--ink); color: var(--page); font-size: clamp(11px, .95vw, 14px); font-weight: 600; white-space: nowrap; opacity: 0; }
.hero-say::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.say-oof { opacity: 1; background: var(--gap-red); }
.say-oof::after { border-top-color: var(--gap-red); }
.gap-axis { position: relative; height: 34px; margin-top: 8px; }
.gap-axis span { position: absolute; top: 0; width: 28%; text-align: center; font-size: clamp(11px, .95vw, 14px); line-height: 1.25; color: var(--muted); }
.gap-axis span:first-child { left: 4%; }
.gap-axis span:last-child { left: 64%; }

.gap-desired { align-self: center; }
.desired-item { display: flex; gap: 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: clamp(15px, 1.35vw, 21px); line-height: 1.3; letter-spacing: -.02em; color: var(--muted); }
.desired-item i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gap-good); color: var(--page); font-style: normal; font-size: 13px; font-weight: 800; }

.gap-structure { grid-column: 1 / -1; display: grid; grid-template-columns: .95fr 1fr 1.6fr; gap: 3vw; padding-top: 16px; border-top: 1px solid var(--line); }
.gap-structure .eyebrow { margin-bottom: 10px; }
.stakeholder-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stakeholder-chips span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: clamp(11px, .95vw, 14px); color: var(--ink); }
.objective p:last-child { margin: 0; font-size: clamp(14px, 1.25vw, 19px); line-height: 1.4; letter-spacing: -.015em; color: var(--muted); }
.constraint-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.constraint-cards > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-content: start; padding: 9px 10px; border: 1px solid var(--line); border-left: 3px solid var(--gap-red); border-radius: 3px; }
.constraint-icon { grid-row: span 2; font-size: 18px; line-height: 1.1; }
.constraint-cards strong { font-size: clamp(12px, 1vw, 15px); font-weight: 600; }
.constraint-cards small { font-size: clamp(11px, .9vw, 13px); line-height: 1.3; color: var(--muted); }

/* Timeline: stats → bars → leap of faith → fall → desired state → structuring. */
.play-gap .gap-now > * { animation: gap-rise .5s calc(.1s + var(--i, 0) * .12s) both; }
.play-gap .gap-now > :nth-child(2) { --i: 1; }
.play-gap .gap-now > :nth-child(3) { --i: 3; }
.play-gap .gap-now > :nth-child(4) { --i: 4; }
.play-gap .gap-now > :nth-child(5) { --i: 6; }
.play-gap .gap-bar.aware, .play-gap .gap-bar.used { animation: gap-grow .9s cubic-bezier(.2,.9,.3,1.25) 1s both; }
.play-gap .gap-bar.used { animation-delay: 1.25s; }
.play-gap .bar-value, .play-gap .gap-axis { animation: gap-fade .4s 1.8s both; }
.play-gap .mind-sign { animation: sign-drop 1.6s cubic-bezier(.3,1.5,.5,1) 2s both; }
.play-gap .gap-hero { animation: hero-journey 3s 2.3s both; }
.play-gap .hero-body { animation: hero-flail .9s cubic-bezier(.5,0,1,1) 4.25s both, hero-squash .5s 5.15s both; }
.play-gap .say-know { animation: say 1.5s 2.5s both; }
.play-gap .say-whee { animation: say .9s 4.25s both; }
.play-gap .say-oof { animation: gap-pop .35s 5.2s both; }
.play-gap .gap-bar.ghost { animation: ghost-rise 1.1s cubic-bezier(.3,.9,.3,1) 5.9s both; }
.play-gap .ghost-label { animation: gap-fade .4s 6.8s both; }
.play-gap .gap-bracket { animation: bracket-draw .6s 5.6s both; }
.play-gap .gap-bracket span { animation: gap-pop .4s 6s both; }
.play-gap .gap-desired > * { animation: gap-slide-in .5s calc(6.4s + var(--i, 0) * .25s) both; }
.play-gap .gap-desired > :nth-child(2) { --i: 1; }
.play-gap .gap-desired > :nth-child(3) { --i: 2; }
.play-gap .desired-item i { animation: gap-pop .4s calc(6.6s + var(--i, 0) * .25s) both; }
.play-gap .gap-structure { animation: gap-line .7s 7.2s both; }
.play-gap .gap-structure .eyebrow, .play-gap .objective p:last-child { animation: gap-rise .45s 7.4s both; }
.play-gap .stakeholder-chips span { animation: gap-pop .35s calc(7.6s + var(--i, 0) * .1s) both; }
.play-gap .stakeholder-chips span:nth-child(2) { --i: 1; }
.play-gap .stakeholder-chips span:nth-child(3) { --i: 2; }
.play-gap .stakeholder-chips span:nth-child(4) { --i: 3; }
.play-gap .stakeholder-chips span:nth-child(5) { --i: 4; }
.play-gap .constraint-cards > div { animation: card-thud .55s calc(8.2s + var(--i, 0) * .22s) both; }
.play-gap .constraint-cards > div:nth-child(2) { --i: 1; }
.play-gap .constraint-cards > div:nth-child(3) { --i: 2; }
.motion-paused .gap-slide *, .motion-paused .gap-slide *::before, .motion-paused .gap-slide *::after { animation-play-state: paused !important; }

@keyframes gap-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes gap-fade { from { opacity: 0; } }
@keyframes gap-slide-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes gap-pop { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes gap-grow { from { height: 0; } }
@keyframes ghost-rise { from { height: 20.3%; opacity: 0; } 20% { opacity: 1; } }
@keyframes bracket-draw { from { height: 0; opacity: 0; } }
@keyframes gap-line { from { border-top-color: transparent; } }
@keyframes sign-drop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-60px) rotate(0); }
  25% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(14deg); }
  45% { transform: translateX(-50%) rotate(-10deg); }
  65% { transform: translateX(-50%) rotate(6deg); }
  82% { transform: translateX(-50%) rotate(-3deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
@keyframes hero-journey {
  0% { opacity: 0; left: 13%; bottom: 89.6%; }
  6% { opacity: 1; left: 13%; bottom: 89.6%; }
  50% { left: 28%; bottom: 89.6%; animation-timing-function: ease-out; }
  59% { left: 37%; bottom: 99%; animation-timing-function: cubic-bezier(.5,0,1,1); }
  95%, 100% { opacity: 1; left: 72%; bottom: 20.3%; }
}
@keyframes hero-flail { to { rotate: 720deg; } }
@keyframes hero-squash { 0% { scale: 1; } 30% { scale: 1.45 .5; } 60% { scale: .85 1.15; } 100% { scale: 1; } }
@keyframes say { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 15%, 80% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
.say-oof { transform: translateX(-50%); }
.play-gap .say-oof { animation-name: oof-pop; }
@keyframes oof-pop { 0% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(-14deg); } 70% { transform: translateX(-50%) scale(1.2) rotate(6deg); } 100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-4deg); } }
@keyframes card-thud { 0% { opacity: 0; transform: translateY(-26px) rotate(-3deg); } 60% { opacity: 1; transform: translateY(3px) rotate(1deg); } 80% { transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .play-gap * { animation: none !important; } }
@media (max-height: 680px) and (min-width: 761px) {
  .gap-slide { inset: 108px 6vw 78px; gap: 12px 3vw; }
  .gap-plot { margin-top: 60px; }
  .gap-stat { padding: 6px 0; }
}
@media (max-width: 760px) {
  .gap-slide { inset: 140px 20px 100px; overflow-y: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .gap-plot { min-height: 220px; }
  .gap-structure { grid-template-columns: 1fr; }
  .constraint-cards { grid-template-columns: 1fr; }
}

/* Step 2 · a hungry fish winds around eating the slide, burps, gets x-rayed, and leaves the fishbone. */
.gap-slide { --fb-teal: #3fc2a4; --fb-teal-bg: #0d4a3e; --fb-coral: #ff7f5c; --fb-coral-bg: #6e2c1b; }
:root[data-theme="cream"] .gap-slide { --fb-teal: #17836b; --fb-teal-bg: #d5ebe3; --fb-coral: #c4502c; --fb-coral-bg: #f6dccf; }
.gap-fish, .xray-flash, .fish-stage { display: none; }
.fish-on .gap-fish, .fish-on .xray-flash { display: block; }
.fish-on .fish-stage { display: block; visibility: hidden; }
.fish-xray .fish-stage { visibility: visible; }
.fish-on > .gap-now, .fish-on > .gap-chart, .fish-on > .gap-desired, .fish-on > .gap-structure { pointer-events: none; }
.gap-slide > .scared { animation: scared .09s infinite alternate; }
.gap-slide > .eaten { animation: gulp .42s cubic-bezier(.55,0,.9,.4) forwards; }
.gap-chart.scared .say-oof { visibility: hidden; }
.say-nope { background: var(--gap-red); }
.say-nope::after { border-top-color: var(--gap-red); }
.gap-chart.scared .say-nope { animation: say 1.2s both; }
@keyframes scared { from { transform: translate(-2px, 1px) rotate(-.5deg); } to { transform: translate(2px, -1px) rotate(.5deg); } }
@keyframes gulp { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: scale(1.06) rotate(-3deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0) rotate(35deg); } }

.gap-fish { position: absolute; left: 0; top: 0; z-index: 6; width: clamp(105px, 11vw, 160px); aspect-ratio: 200 / 120; pointer-events: none; will-change: transform; }
.fish-rig { width: 100%; height: 100%; will-change: transform; }
.fish-rig svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fish-body { fill: #ff8a3d; }
.fish-belly { fill: #ffc28c; }
.fish-tail, .fish-fin { fill: #ff6a2b; }
.fish-stripe { fill: none; stroke: #e05a1c; stroke-width: 5; stroke-linecap: round; }
.fish-cheek { fill: #ff4f7b; opacity: .5; }
.fish-eye { fill: #fff; }
.fish-pupil { fill: #111; }
.fish-shine { fill: #fff; }
.fish-mouth { fill: var(--page); transform-box: fill-box; transform-origin: 100% 50%; }
.fish-tail { transform-box: fill-box; transform-origin: 100% 50%; }
.fish-on .fish-mouth { animation: chomp .17s infinite alternate; }
.fish-on .fish-tail { animation: tail-wag .22s infinite alternate ease-in-out; }
@keyframes chomp { from { transform: scaleY(1); } to { transform: scaleY(.08); } }
@keyframes tail-wag { from { transform: skewY(10deg) scaleX(1.05); } to { transform: skewY(-10deg) scaleX(.9); } }
.fish-say { position: absolute; left: 50%; top: 50%; translate: -50% calc(-100% - var(--lift, 60px)); transform-origin: 50% 100%; padding: 5px 11px; border-radius: 14px; background: var(--ink); color: var(--page); font-size: clamp(12px, 1vw, 15px); font-weight: 700; white-space: nowrap; opacity: 0; }
.fish-say::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.fish-say.talk { animation: fish-talk 1.25s both; }
.fish-say.burp { background: #ff8a3d; color: #1b0f05; font-style: italic; font-size: clamp(16px, 1.5vw, 23px); }
.fish-say.burp::after { border-top-color: #ff8a3d; }
.fish-say.burp.talk { animation: fish-talk 1.5s both; }
@keyframes fish-talk { 0% { opacity: 0; scale: .4; rotate: -8deg; } 14% { opacity: 1; scale: 1.15; rotate: 4deg; } 24%, 82% { opacity: 1; scale: 1; rotate: 0deg; } 100% { opacity: 0; scale: 1; } }
.fish-bubble { position: absolute; z-index: 5; border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 50%; pointer-events: none; animation: bubble-rise .9s ease-out forwards; }
@keyframes bubble-rise { 0% { opacity: .85; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), calc(-50% - 42px)) scale(1.15); } }
.fish-xray .gap-fish { animation: fish-vanish .6s forwards; }
@keyframes fish-vanish { 0% { opacity: 1; scale: 1; filter: none; } 40% { opacity: 1; scale: 1.08; filter: brightness(2.5) saturate(0); } 100% { opacity: 0; scale: .55; translate: 75% 0; filter: brightness(3) saturate(0); } }

.xray-flash { position: absolute; left: 62%; right: -18%; top: 4%; bottom: 4%; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--fb-teal) 60%, transparent), transparent); }
.xray-flash span { position: absolute; left: 30%; top: 14%; font: 700 clamp(12px, 1vw, 15px) monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fb-teal); }
.fish-xray .xray-flash { animation: xray 1s both; }
@keyframes xray { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: .35; } 45% { opacity: .9; } 100% { opacity: 0; } }

.fish-stage { position: absolute; inset: 0; z-index: 4; }
.fb-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fb-lines line { stroke: var(--subtle); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; }
.fb-lines .spine { stroke: var(--ink); stroke-width: 3; }
.fb-lines .rib { stroke: var(--line); stroke-width: 2; }
.fb-lines .sub { stroke: var(--line); stroke-width: 1.5; }
.fb-lines .coral { stroke: var(--fb-coral); stroke-width: 2.5; }
.fb-lines .sub.coral { stroke-width: 1.5; opacity: .75; }
.fish-xray .fb-lines line { animation: fb-draw .5s var(--d) both; }
@keyframes fb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.fb-head { position: absolute; left: 84%; right: 0; top: 38%; bottom: 38%; display: grid; place-items: center; padding: 6px 18px 6px 16px; border: 2px solid var(--ink); border-radius: 14px 50% 50% 14px / 14px 50% 50% 14px; background: color-mix(in srgb, var(--ink) 9%, var(--page)); text-align: center; }
.fb-head span { font-size: clamp(11px, 1.05vw, 16px); font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
.fb-head::before { content: ''; position: absolute; left: 12px; top: 18%; bottom: 18%; width: 10px; border-left: 2px solid var(--line); border-radius: 50%; }
.fb-eye { position: absolute; right: 17%; top: 13%; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--page), 0 0 0 4.5px var(--ink); }
.fb-tag { position: absolute; font: 600 10px monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); }
.fb-tag.causes { left: 0; top: 30%; }
.fb-tag.effect { left: 84%; top: 31%; }
.fb-chip { position: absolute; left: var(--x); top: 0; translate: -50% 0; padding: 7px 18px; border: 1.5px solid var(--fb-teal); border-radius: 6px; background: var(--fb-teal-bg); color: var(--ink); font-size: clamp(13px, 1.15vw, 17px); font-weight: 600; white-space: nowrap; }
.fb-chip.bottom { top: auto; bottom: 0; }
.fb-chip.coral { border-color: var(--fb-coral); background: var(--fb-coral-bg); }
.fb-evidence { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.fb-evidence li { position: absolute; translate: 0 -50%; display: flex; align-items: center; gap: 6px; font-size: clamp(11px, .98vw, 14px); line-height: 1.2; color: var(--muted); white-space: nowrap; }
.fb-evidence b { color: var(--ink); font-weight: 650; }
.fb-evidence.coral b { color: var(--fb-coral); }
.mb { position: relative; flex: none; width: clamp(34px, 3.6vw, 52px); height: 6px; margin-left: 4px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.mb i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 3px; background: var(--fb-teal); transform-origin: left; }
.coral .mb i { background: var(--fb-coral); }
.mb.dual i:first-child { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; margin-left: 4px; }
.spark i { width: 6px; height: var(--v); border-radius: 1px; background: var(--fb-teal); transform-origin: bottom; }
.fb-title { position: absolute; left: 63%; top: 0; }
.fb-title .eyebrow { margin-bottom: 4px; }
.fb-title-text { margin: 0; font-size: clamp(15px, 1.4vw, 21px); letter-spacing: -.03em; color: var(--muted); }
.fb-title-text b { color: var(--ink); }
.fb-callout { margin: 5px 0 0; font-size: clamp(11px, .95vw, 14px); color: var(--muted); }
.fb-callout b { color: var(--fb-coral); }
.fb-legend { position: absolute; right: 0; bottom: 4px; display: flex; gap: 16px; font-size: clamp(10px, .9vw, 13px); color: var(--muted); }
.fb-legend span { display: flex; align-items: center; gap: 7px; }
.fb-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--fb-teal); background: var(--fb-teal-bg); }
.fb-legend i.coral { border-color: var(--fb-coral); background: var(--fb-coral-bg); }
.fb-legend i.bar { width: 20px; height: 6px; border: 0; background: var(--fb-teal); }

/* Skeleton timeline, relative to the x-ray. */
.fish-xray .fb-head { animation: gap-pop .5s .25s both; }
.fish-xray .fb-eye { animation: blink 3.2s 1.3s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.fish-xray .fb-title, .fish-xray .fb-tag { animation: gap-rise .5s .45s both; }
.fish-xray .fb-callout { animation: gap-rise .5s 3.9s both; }
.fish-xray .fb-chip { animation: gap-pop .45s calc(1.55s + var(--b) * .55s) both; }
.fish-xray .fb-chip.coral { animation: gap-pop .45s calc(1.55s + var(--b) * .55s) both, coral-wiggle .6s calc(2.1s + var(--b) * .55s) 2; }
.fish-xray .fb-evidence li { animation: gap-slide-in .35s calc(1.8s + var(--b) * .55s + var(--l) * .1s) both; }
.fish-xray .mb i { animation: bar-fill .6s calc(2s + var(--b) * .55s + var(--l) * .1s) both; }
.fish-xray .spark i { animation: spark-grow .5s calc(2.1s + var(--b) * .55s + var(--l) * .1s) both; }
.fish-xray .spark i:nth-child(2) { animation-delay: calc(2.2s + var(--b) * .55s + var(--l) * .1s); }
.fish-xray .spark i:nth-child(3) { animation-delay: calc(2.3s + var(--b) * .55s + var(--l) * .1s); }
.fish-xray .fb-legend { animation: gap-fade .5s 3.7s both; }
[data-bone="0"] { --b: 0; } [data-bone="1"] { --b: 1; } [data-bone="2"] { --b: 2; } [data-bone="3"] { --b: 3; }
.fb-evidence li:nth-child(1) { --l: 0; } .fb-evidence li:nth-child(2) { --l: 1; } .fb-evidence li:nth-child(3) { --l: 2; } .fb-evidence li:nth-child(4) { --l: 3; }
@keyframes coral-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 75% { rotate: 5deg; } }
@keyframes bar-fill { from { transform: scaleX(0); } }
@keyframes spark-grow { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  .fish-on *, .fish-on > * { animation: none !important; }
  .fish-on > .gap-now, .fish-on > .gap-chart, .fish-on > .gap-desired, .fish-on > .gap-structure, .fish-on .gap-fish, .fish-on .xray-flash { visibility: hidden; }
}

/* Finished fishbone with no replay: used when returning from slide 5 and for slide 5's copy. */
.fb-instant .fish-stage *, .fb-instant .fish-stage *::before, .fb-instant .fish-stage *::after { animation: none !important; }
.fb-instant > .gap-now, .fb-instant > .gap-chart, .fb-instant > .gap-desired, .fb-instant > .gap-structure { visibility: hidden; }
.fb-instant .gap-fish, .fb-instant .xray-flash { display: none !important; }


/* Ocean bed · slide 4 sits on the sea floor. Sea colours are shared with slide 5 so its first frame matches this one. */
:root { --sea-0: #17648c; --sea-1: #0a3048; --sea-2: #051a2b; --sea-deep: #01070d; --sea-light: rgba(170, 225, 255, .09); --sea-snow: rgba(200, 235, 255, .35); --sea-foam: rgba(170, 230, 255, .5); --sea-weed: #1d6b51; --sea-sand: #14272c; --sea-grain: rgba(255, 255, 255, .07); --sea-rock: #0c1f2c; --sea-coral: #b9584a; --sea-coral-2: #b0577f; --sea-star: #d47448; --sea-critter: rgba(255, 255, 255, .16); }
:root[data-theme="cream"] { --sea-0: #eef8f5; --sea-1: #d8ede9; --sea-2: #a9d4d2; --sea-deep: #4f8f99; --sea-light: rgba(255, 255, 255, .38); --sea-snow: rgba(255, 255, 255, .8); --sea-foam: rgba(255, 255, 255, .9); --sea-weed: #4c9a73; --sea-sand: #e4d4a8; --sea-grain: rgba(120, 90, 40, .14); --sea-rock: #8fb4b2; --sea-coral: #e3876f; --sea-coral-2: #d97fa3; --sea-star: #e0703f; --sea-critter: rgba(30, 70, 80, .18); }
.gap-slide > .gap-now, .gap-slide > .gap-chart, .gap-slide > .gap-desired, .gap-slide > .gap-structure { position: relative; z-index: 1; }
.ocean-arriving > .gap-now, .ocean-arriving > .gap-chart, .ocean-arriving > .gap-desired, .ocean-arriving > .gap-structure { opacity: 0; }
.gap-ocean { position: absolute; inset: -118px -6vw -88px; z-index: 0; overflow: hidden; container-type: size; pointer-events: none; }
.ocean-water { position: absolute; inset: 0; background: linear-gradient(var(--sea-1), var(--sea-2)); }
.ocean-rays { position: absolute; inset: 0 -60px 30%; background: repeating-linear-gradient(105deg, var(--sea-light) 0 44px, transparent 44px 150px); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); animation: sea-sway 9s ease-in-out infinite alternate; }
@keyframes sea-sway { from { translate: -40px 0; } to { translate: 40px 0; } }
.ocean-caustics { position: absolute; inset: 0 -200px 55% -200px; opacity: .6; background: radial-gradient(ellipse 34px 14px at 30% 40%, var(--sea-light), transparent 70%), radial-gradient(ellipse 22px 10px at 70% 70%, var(--sea-light), transparent 70%), radial-gradient(ellipse 28px 12px at 85% 20%, var(--sea-light), transparent 70%); background-size: 160px 90px, 120px 70px, 200px 110px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); animation: sea-caustics 10s linear infinite; }
@keyframes sea-caustics { to { background-position: 160px 30px, -120px 20px, 200px -30px; } }
/* Marine snow drifting sideways with the current: the "flowing water". */
.ocean-snow { position: absolute; inset: 0; background: radial-gradient(circle, var(--sea-snow) 1px, transparent 1.6px) 0 0 / 97px 83px, radial-gradient(circle, var(--sea-snow) .8px, transparent 1.3px) 40px 20px / 61px 71px, radial-gradient(circle, var(--sea-snow) 1.3px, transparent 2px) 10px 50px / 173px 131px; opacity: .55; animation: sea-current 14s linear infinite; }
@keyframes sea-current { to { background-position: 97px 83px, 101px 91px, 183px 181px; } }
.ocean-critter { position: absolute; width: 34px; height: 17px; fill: var(--sea-critter); }
.ocean-critter svg { display: block; width: 100%; height: 100%; }
.ocean-critter.one { top: 34%; animation: critter-swim 26s linear -6s infinite; }
.ocean-critter.two { top: 62%; width: 24px; height: 12px; animation: critter-swim 34s linear -20s infinite reverse; }
.ocean-critter.three { top: 22%; width: 18px; height: 9px; animation: critter-swim 40s linear -31s infinite; }
@keyframes critter-swim { 0% { left: -6%; transform: scaleX(1); } 49% { left: 104%; transform: scaleX(1) translateY(-18px); } 50% { left: 104%; transform: scaleX(-1); } 99% { left: -6%; transform: scaleX(-1) translateY(12px); } 100% { left: -6%; transform: scaleX(1); } }

.ocean-floor { position: absolute; inset: 0; }
.ocean-sand { position: absolute; left: 0; right: 0; top: 91%; bottom: 0; }
.ocean-sand, .catch-floor { background: radial-gradient(circle, var(--sea-grain) 1.4px, transparent 2px) center top / 11px 7px, radial-gradient(circle, var(--sea-grain) 1px, transparent 1.6px) center 3px / 17px 9px, var(--sea-sand); }
.ocean-sand::before, .catch-floor::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; margin-bottom: -1px; background: radial-gradient(ellipse 72px 12px at 50% 100%, var(--sea-sand) 97%, transparent 100%) center bottom / 144px 12px repeat-x; }
.ocean-weed { position: absolute; left: var(--x); bottom: 7%; width: 34px; height: var(--h); margin-left: -17px; fill: var(--sea-weed); opacity: .62; transform-origin: 50% 100%; animation: weed-sway var(--t) ease-in-out var(--d) infinite alternate; }
.ocean-weed.b { width: 24px; margin-left: -12px; opacity: .45; }
@keyframes weed-sway { from { transform: skewX(-10deg); } to { transform: skewX(10deg); } }
.ocean-rock { position: absolute; left: var(--x); top: calc(91% - var(--h) + 8px); width: var(--w); height: var(--h); translate: -50% 0; fill: var(--sea-rock); }
.ocean-rock.b { filter: brightness(1.15); }
.ocean-rock svg, .ocean-coral svg, .ocean-star svg, .ocean-shell svg { display: block; width: 100%; height: 100%; }
.ocean-coral { position: absolute; left: var(--x); top: calc(91% + 4px); width: var(--w); aspect-ratio: 80 / 72; translate: -50% -100%; fill: none; stroke: var(--sea-coral); stroke-width: 7; stroke-linecap: round; opacity: .85; }
.ocean-coral.pink { stroke: var(--sea-coral-2); }
.ocean-star { position: absolute; left: var(--x); top: 93%; width: 26px; height: 26px; fill: var(--sea-star); rotate: 18deg; opacity: .85; }
.ocean-shell { position: absolute; left: var(--x); top: 92.5%; width: 26px; height: 20px; fill: color-mix(in srgb, var(--sea-sand) 60%, #fff); stroke: color-mix(in srgb, var(--sea-sand) 60%, #000); stroke-width: 1.4; }
.ocean-bubbles i { position: absolute; left: var(--x); bottom: 8%; width: var(--s); height: var(--s); border: 1.5px solid var(--sea-foam); border-radius: 50%; opacity: 0; animation: sea-bubble var(--t) ease-in var(--d) infinite; }
@keyframes sea-bubble { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .8; } 50% { transform: translate(8px, -45cqh); } 90% { opacity: .7; } 100% { opacity: 0; transform: translate(-6px, -92cqh); } }

/* Arrival: the water floods in, the sea floor rises into view, the kelp grows, then the slide's own timeline starts. */
.play-ocean .ocean-water { animation: sea-tide .7s ease-out both; }
@keyframes sea-tide { from { opacity: 0; } }
.play-ocean .ocean-snow { animation: sea-tide .8s .2s both, sea-current 14s linear infinite; }
.play-ocean .ocean-rays { animation: sea-tide 1s .4s both, sea-sway 9s ease-in-out infinite alternate; }
.play-ocean .ocean-caustics { animation: sea-tide 1s .5s both, sea-caustics 10s linear infinite; }
.play-ocean .ocean-floor { animation: ocean-arrive 1.1s cubic-bezier(.2,.8,.3,1) .2s both; }
@keyframes ocean-arrive { from { transform: translateY(16%); opacity: 0; } }
.play-ocean .ocean-weed { animation: weed-grow .9s cubic-bezier(.3,1.5,.5,1) calc(.7s + var(--d) * -.12) both, weed-sway var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes weed-grow { from { scale: 1 0; } }
.play-ocean .ocean-bubbles { animation: sea-tide 1s 1s both; }
.motion-paused .gap-ocean, .motion-paused .gap-ocean * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .gap-ocean, .gap-ocean * { animation: none !important; } }