/* ════════════════════════════════════════════════════════════════
   MOTC Ocean World (v6.8) — shared by the main site and the Sing-Along
   Fish and sea life only. No mermaids in the water.
     .sea-swim-free layers: one fixed layer on Sing-Along,
     .sea-pocket:  a little sea inside each section of the home page
   ════════════════════════════════════════════════════════════════ */

.motc-ocean-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.motc-ocean-layer img,.sea-pocket img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}

/* fish: small, bright, never competing */
.sea-fish{position:absolute;left:0;top:0;width:var(--fw,22px);opacity:.78;will-change:transform,opacity;
  animation:fish-route var(--dur,34s) linear infinite;animation-delay:var(--delay,0s)}
.sea-fish img{animation:fish-flick 1.9s ease-in-out infinite alternate;transform-origin:70% 50%;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.22))}

/* other sea life */
.sea-animal{position:absolute;left:0;top:0;opacity:.88;will-change:transform,opacity;
  animation:animal-route var(--dur,60s) linear infinite;animation-delay:var(--delay,0s)}
.sea-animal.turtle{width:clamp(48px,6vw,86px)}
.sea-animal.seahorse{width:clamp(26px,3.4vw,50px)}
.sea-animal.dolphin{width:clamp(74px,9vw,136px)}
.sea-animal.crab{width:clamp(26px,3.2vw,48px)}
.sea-animal img{animation:tail-sweep var(--sweep,4.4s) ease-in-out infinite alternate;transform-origin:65% 50%;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}

/* mermaids (Sing-Along, tablets and larger only) */
.sea-mermaid{position:absolute;left:0;top:0;will-change:transform,opacity;pointer-events:none}
.sea-mermaid img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));
  transform-origin:58% 26%;animation:tail-sweep var(--sweep,3.6s) ease-in-out infinite alternate}
.sea-bob{animation:sea-bob var(--bob,4.2s) ease-in-out infinite alternate}
.sea-dana{left:auto;right:max(2vw,12px);top:84px;width:clamp(100px,12vw,190px);opacity:.95}
.sea-friend{width:calc(clamp(92px,12vw,150px) * var(--wk,1))}
@keyframes sea-bob{from{transform:translateY(-5px)}to{transform:translateY(7px)}}
@media(max-width:640px),(max-height:479px){ .sea-mermaid{display:none!important} }
@media(prefers-reduced-motion:reduce){ .sea-mermaid img,.sea-bob{animation:none!important} .motc-fx-layer{display:none} }

/* fun layer: sparkles, bubbles, hearts, music notes, gifts, "hee hee!" — never tappable */
.motc-fx-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:150}
.sea-trick{will-change:transform}
.sea-spark,.sea-bub,.sea-note,.sea-say,.sea-gift,.sea-hand{position:absolute;left:0;top:0;pointer-events:none}
.sea-hand{font-size:52px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.sea-spark{line-height:1;text-shadow:0 0 8px currentColor;margin:-10px 0 0 -10px}
.sea-bub{border-radius:50%;border:1.5px solid rgba(255,255,255,.8);
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.75),rgba(255,255,255,.08) 62%)}
.sea-note{font-size:28px;line-height:1;text-shadow:0 0 10px currentColor;margin:-14px 0 0 -10px}
.sea-say{font:700 16px/1 'DM Sans',system-ui,sans-serif;color:#0a3c4a;background:#fff;padding:8px 14px;border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap}
.sea-gift{width:34px;height:34px;margin:-17px 0 0 -17px}
.sea-gift img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.sea-gift.pearl{border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  background:radial-gradient(circle at 34% 30%,#fff,#ffeaf4 45%,#e2a9cb 100%);box-shadow:0 0 12px 3px rgba(255,226,240,.8)}

/* dancing: everyone sways faster and wider while a song plays */
.sea-dance .sea-bob{animation-duration:.85s!important}
.sea-dance .sea-mermaid img{animation:dance-sway .8s ease-in-out infinite alternate!important}
@keyframes dance-sway{from{transform:rotate(-9deg) scale(1)}to{transform:rotate(9deg) scale(1.04)}}

/* still things (Sing-Along only) */
.sea-shells{position:absolute;right:3vw;bottom:7vh;width:clamp(52px,7vw,96px);opacity:.5}
.sea-coral{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:min(820px,72vw);opacity:.3}

@keyframes tail-sweep{from{transform:rotate(-4deg) skewX(2deg)}to{transform:rotate(4deg) skewX(-2deg)}}
@keyframes fish-flick{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes fish-route{
  0%{opacity:0;transform:translate(var(--fsx),var(--fsy)) scaleX(var(--flip,1))}
  9%{opacity:.78}
  91%{opacity:.78}
  100%{opacity:0;transform:translate(var(--fex),var(--fey)) scaleX(var(--flip,1))}
}
@keyframes animal-route{
  0%{opacity:0;transform:translate(var(--asx),var(--asy)) scaleX(var(--flip,1))}
  10%{opacity:.88}
  90%{opacity:.88}
  100%{opacity:0;transform:translate(var(--aex),var(--aey)) scaleX(var(--flip,1))}
}
/* "sparse": in view for the first part of a long cycle, then away for a good while */
@keyframes fish-route-sparse{
  0%{opacity:0;transform:translate(var(--fsx),var(--fsy)) scaleX(var(--flip,1))}
  3%{opacity:.5}
  37%{opacity:.5}
  40%,100%{opacity:0;transform:translate(var(--fex),var(--fey)) scaleX(var(--flip,1))}
}
@keyframes animal-route-sparse{
  0%{opacity:0;transform:translate(var(--asx),var(--asy)) scaleX(var(--flip,1))}
  3%{opacity:.5}
  32%{opacity:.5}
  35%,100%{opacity:0;transform:translate(var(--aex),var(--aey)) scaleX(var(--flip,1))}
}

/* ── HOME PAGE: a pocket of sea inside each section ── */
.sea-pocket{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.sea-pocket.above{z-index:1}                 /* hero and story: above their own background, below their text */
.sea-pocket.stick{position:sticky;top:0;inset:auto;width:100%;height:100vh;height:100svh;
  margin-bottom:-100vh;margin-bottom:-100svh}   /* follows the visitor down a tall section */
.sea-pocket .sea-fish{animation-name:pf-r}
.sea-pocket .pf-l{animation-name:pf-l}
.sea-pocket .pf-r{animation-name:pf-r}
.sea-pocket .sea-animal.pf-r{animation-name:pf-r}
.sea-pocket .sea-animal.pf-l{animation-name:pf-l}
.sea-pocket .sea-fish{opacity:.8}
.sea-pocket .sea-animal{opacity:.85}
@keyframes pf-r{
  0%{opacity:0;transform:translate(-16vw,0)}
  6%{opacity:.85}
  50%{transform:translate(50vw,var(--dy,3vh))}
  94%{opacity:.85}
  100%{opacity:0;transform:translate(116vw,0)}
}
@keyframes pf-l{
  0%{opacity:0;transform:translate(116vw,0) scaleX(-1)}
  6%{opacity:.85}
  50%{transform:translate(50vw,var(--dy,-3vh)) scaleX(-1)}
  94%{opacity:.85}
  100%{opacity:0;transform:translate(-16vw,0) scaleX(-1)}
}

/* soft sunlight through Caribbean water, in the dark sections */
.sea-pocket.rays::before{content:'';position:absolute;left:-15%;right:-15%;top:-10%;height:85%;
  background:repeating-linear-gradient(103deg,rgba(255,255,255,0) 0 46px,rgba(110,236,228,.10) 70px 96px,rgba(255,255,255,0) 128px 210px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  animation:rays-sway 16s ease-in-out infinite alternate}
@keyframes rays-sway{from{transform:translateX(-3%) skewX(-3deg)}to{transform:translateX(3%) skewX(3deg)}}

/* keep sticky working: clip instead of hide (older browsers just keep "hidden") */
main > section{overflow:hidden;overflow:clip}
main > section.club-sec,main > section#islands{overflow:visible;overflow:clip}

/* ── Caribbean colour: sea-glass and sand instead of plain cream/white ── */
.rep-band{background:linear-gradient(180deg,#f3fbf8 0%,#dcf4f1 58%,#f4efe0 100%)!important;
  border-top:1px solid rgba(62,201,201,.25)!important;border-bottom:1px solid rgba(62,201,201,.2)!important}
#islands{background:linear-gradient(180deg,#f7fffd 0%,#e1f6f3 100%)!important}
.club-sec{background:linear-gradient(180deg,#f4efe0 0%,#e2f6f3 100%)!important}
.hero{background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(90,235,225,.22),transparent 65%),
    radial-gradient(ellipse 70% 80% at 70% 60%,rgba(14,150,150,.34),transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 20%,rgba(62,201,201,.14),transparent 60%),
    linear-gradient(170deg,#0a4058 0%,#0b6b78 42%,#0f8f8c 100%)!important}

/* home intro above Dana — phones only */
.hero-intro{display:none}
@media(max-width:900px){
  .hero-intro{display:block;order:-2;text-align:center;position:relative;z-index:3;margin-bottom:-6px}
  .hero-intro .hi-kick{display:block;font-size:.72rem;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;
    color:#8ff0ea;margin-bottom:10px}
  .hero-intro .hi-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
    font-size:clamp(1.55rem,6.4vw,2rem);line-height:1.25;color:#fff;max-width:19em;margin:0 auto}
  .hero-intro .hi-line b{font-weight:600;font-style:normal;color:#ffe27a}
}

/* Reduced motion: movement stops, the sea stays populated. */
@media(prefers-reduced-motion:reduce){
  .sea-fish,.sea-fish img,.sea-animal,.sea-animal img,.sea-pocket.rays::before{animation:none!important}
  .sea-pocket .sea-fish,.sea-pocket .sea-animal{transform:translate(var(--rx,30vw),0)}
  .sea-pocket .pf-l{transform:translate(var(--rx,30vw),0) scaleX(-1)}
}

/* PHONES: calmer sea */
@media(max-width:640px){
  .motc-ocean-layer .sea-fish{opacity:.5;animation-name:fish-route-sparse}
  .motc-ocean-layer .sea-animal{opacity:.5;animation-name:animal-route-sparse}
  .sea-animal.turtle{width:clamp(40px,12vw,60px)}
  .sea-animal.dolphin{width:clamp(56px,16vw,80px)}
  .sea-animal.seahorse{width:clamp(24px,6vw,34px)}
  .sea-animal.crab{width:clamp(24px,6vw,34px)}
  .sea-coral{width:96vw;opacity:.22}
  .sea-shells{width:52px;opacity:.35}
  /* home: a little smaller so fish don't crowd Dana */
  .sea-pocket .sea-animal.dolphin{width:74px}
}

/* The sea always sits behind the page. Nothing a child needs to tap
   can ever be covered by a fish. */
body > nav, body > header, body > main, body > footer,
body > section, body > .filters, body > .list,
.player, .sa, .card, .filters, .list{position:relative;z-index:3}
.player{z-index:200}
.sa{z-index:500}

/* Home page ocean-sound button — bottom right, above the Reduce-motion button */
#ocean-toggle{position:fixed;right:14px;bottom:70px;z-index:9995;width:48px;height:48px;border-radius:50%;
  background:rgba(7,30,46,.88);border:1.5px solid rgba(62,201,201,.45);color:#fff;font-size:1.2rem;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
#ocean-toggle:hover,#ocean-toggle:focus-visible{border-color:#3ec9c9;background:rgba(14,124,123,.75)}
.comfort-bar{position:fixed!important;right:14px;bottom:14px;z-index:9997}