/* Milo & Friends series page ONLY (body.series-milo). Bright, playful under-the-sea look.
   Text sits on solid light panels (navy text) or deep-blue bands (white text): AA contrast.
   All motion stops under prefers-reduced-motion. Font: Fredoka (OFL, self-hosted, /fonts/OFL.txt). */
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-stretch:75% 125%;font-display:swap}
.series-milo{--deep:#0A3F86;--sea:#0A64C2;--aqua:#DDF4FC;--foam:#F4FCFF;--coral:#FF6F7D;--sun:#FFC83D;--navy:#102A4C}
.series-milo main{font-family:"Fredoka","Baloo 2",system-ui,sans-serif;background:var(--aqua)}
.series-milo main h1,.series-milo main h2,.series-milo main h3{font-family:"Fredoka",system-ui,sans-serif;font-style:normal;letter-spacing:0}
.sea-page{position:relative;overflow:hidden;color:var(--navy);font-size:1.06rem}
.series-milo .crumbs{position:relative;z-index:3}

/* Kelp borders along both page edges, swaying */
.kelp-edge{position:absolute;top:0;bottom:0;width:70px;z-index:1;pointer-events:none;
  background:url(/img/series/milo/deco/kelp.svg) repeat-y 0 0/70px 350px;transform-origin:50% 100%;animation:sway 7s ease-in-out infinite alternate}
.kelp-left{left:-8px}
.kelp-right{right:-8px;background-image:url(/img/series/milo/deco/kelp-dark.svg);animation-duration:9s;animation-direction:alternate-reverse}
@keyframes sway{from{transform:skewX(-3deg)}to{transform:skewX(3deg)}}

/* Bubbles rising across the whole page */
.sea-bubbles{position:absolute;inset:0;pointer-events:none;z-index:2}
.sea-bubbles span{position:absolute;bottom:-30px;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  background:radial-gradient(circle at 32% 30%,#fff 0 18%,rgba(255,255,255,.25) 30%,transparent 62%);animation:rise 16s linear infinite}
.sea-bubbles span:nth-child(odd){width:9px;height:9px;animation-duration:12s}
.sea-bubbles span:nth-child(3n){width:20px;height:20px;animation-duration:20s}
.sea-bubbles span:nth-child(1){left:3%;animation-delay:-2s}.sea-bubbles span:nth-child(2){left:8%;animation-delay:-9s}
.sea-bubbles span:nth-child(3){left:15%;animation-delay:-5s}.sea-bubbles span:nth-child(4){left:22%;animation-delay:-13s}
.sea-bubbles span:nth-child(5){left:30%;animation-delay:-1s}.sea-bubbles span:nth-child(6){left:37%;animation-delay:-7s}
.sea-bubbles span:nth-child(7){left:44%;animation-delay:-15s}.sea-bubbles span:nth-child(8){left:52%;animation-delay:-4s}
.sea-bubbles span:nth-child(9){left:59%;animation-delay:-11s}.sea-bubbles span:nth-child(10){left:66%;animation-delay:-6s}
.sea-bubbles span:nth-child(11){left:72%;animation-delay:-14s}.sea-bubbles span:nth-child(12){left:79%;animation-delay:-3s}
.sea-bubbles span:nth-child(13){left:85%;animation-delay:-10s}.sea-bubbles span:nth-child(14){left:90%;animation-delay:-8s}
.sea-bubbles span:nth-child(15){left:95%;animation-delay:-12s}.sea-bubbles span:nth-child(16){left:98%;animation-delay:-0s}
@keyframes rise{0%{transform:translate(0,0);opacity:0}8%{opacity:1}50%{transform:translate(14px,-60vh)}100%{transform:translate(-8px,-130vh);opacity:0}}

/* Hero: bright sea with animated wave bands */
.sea-hero{position:relative;z-index:1;color:#fff;padding:40px 0 170px;
  background:radial-gradient(ellipse at 25% -20%,rgba(255,255,255,.16),transparent 45%),linear-gradient(180deg,#0A5DAE 0%,#0A529F 45%,var(--deep) 100%)}
.sea-waves{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sea-waves i{position:absolute;left:0;width:200%;height:46px;background:url(/img/series/milo/deco/wave.svg) repeat-x 0 0/600px 46px;animation:wave 14s linear infinite}
.sea-waves i:nth-child(1){top:6%}
.sea-waves i:nth-child(2){top:38%;animation-duration:20s;animation-direction:reverse;opacity:.7}
.sea-waves i:nth-child(3){top:68%;animation-duration:26s;opacity:.55}
@keyframes wave{to{transform:translateX(-600px)}}
.sea-hero-inner{position:relative;z-index:3;display:grid;gap:30px;align-items:center}
.sea-kicker{font-weight:600;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:#FFE6A3;margin:0 0 .4em}
.sea-hero h1{font-size:clamp(3rem,2rem + 5vw,5.6rem);line-height:1;font-weight:700;color:#fff;margin:0 0 .25em;text-shadow:0 4px 0 rgba(10,63,134,.55)}
.sea-lead{font-size:1.18rem;line-height:1.6;max-width:42ch;color:#fff;margin:0 0 1em}
.sea-ages{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.sea-ages span{background:var(--sun);color:var(--navy);font-weight:600;border-radius:999px;padding:6px 16px}
.sea-hero-art{display:flex;justify-content:center}
.sea-cover{width:min(40vw,230px);border-radius:10px;border:5px solid #fff;box-shadow:0 18px 36px rgba(5,30,70,.4)}
.sea-cover-0{transform:rotate(-5deg);animation:bob 6s ease-in-out infinite}
.sea-cover-1{transform:rotate(5deg) translateY(16px);margin-left:-30px;animation:bob2 7s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(-3deg) translateY(-8px)}}
@keyframes bob2{0%,100%{transform:rotate(5deg) translateY(16px)}50%{transform:rotate(7deg) translateY(6px)}}
@media (min-width:900px){.sea-hero-inner{grid-template-columns:1.1fr 1fr}.sea-cover{width:250px}}

/* Swimmers: curved path on the wrapper (translate), gentle bob on the inner span (transform) */
.swimmers{position:absolute;inset:0;z-index:2;pointer-events:none}
.swimmer{position:absolute;display:block;will-change:translate}
.swimmer .bob{display:block;position:relative;animation:bob-y 4.5s ease-in-out infinite;will-change:transform}
.swimmer img{width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(5,30,70,.3))}
.s-milo{width:150px;top:52%;left:0;animation:path-wave 36s linear infinite}
.s-lumi{width:96px;top:10%;right:5%;animation:path-loop 14s ease-in-out infinite}
.s-dot{width:170px;top:66%;right:28%;animation:path-arc 16s ease-in-out infinite}
.s-dot .bob{animation-duration:6s}
@keyframes bob-y{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes path-wave{0%{translate:-220px 0}12.5%{translate:12vw -40px}25%{translate:25vw 0}37.5%{translate:38vw 40px}50%{translate:50vw 0}62.5%{translate:62vw -40px}75%{translate:75vw 0}87.5%{translate:88vw 40px}100%{translate:108vw 0}}
@keyframes path-loop{0%,100%{translate:0 0}25%{translate:-40px 30px}50%{translate:-90px 0}75%{translate:-40px -26px}}
@keyframes path-arc{0%,100%{translate:0 0}25%{translate:-70px -30px}50%{translate:-150px -10px}75%{translate:-70px 20px}}
.school{position:absolute;width:150px;height:auto;opacity:.9;left:0;will-change:translate}
.sc1{top:24%;animation:school-r 24s linear infinite}
.sc2{top:44%;width:110px;animation:school-l 30s linear infinite;animation-delay:-10s;transform:scaleX(-1)}
@keyframes school-r{0%{translate:110vw 0}50%{translate:50vw -30px}100%{translate:-200px 10px}}
@keyframes school-l{0%{translate:-200px 0}50%{translate:50vw 26px}100%{translate:110vw -10px}}

/* Lumi's five belly lights twinkle */
.lumi-wrap{position:relative;display:block}
.glow{position:absolute;width:6%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#FFFFF0 0 30%,rgba(255,244,170,.85) 45%,rgba(255,230,120,0) 72%);animation:twinkle 1.8s ease-in-out infinite;pointer-events:none}
.g1{left:46.9%;top:81.9%}.g2{left:54.8%;top:83.7%;animation-delay:.25s}.g3{left:62.9%;top:84.4%;animation-delay:.5s}.g4{left:71%;top:83.7%;animation-delay:.75s}.g5{left:78.8%;top:81.6%;animation-delay:1s}
@keyframes twinkle{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}}

/* Sparkles */
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:2}
.sparkles i{position:absolute;width:14px;height:14px;opacity:0;animation:sparkle 3.2s ease-in-out infinite;
  background:conic-gradient(from 45deg,transparent 0 10%,#fff 12% 13%,transparent 15% 35%,#fff 37% 38%,transparent 40% 60%,#fff 62% 63%,transparent 65% 85%,#fff 87% 88%,transparent 90%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:#FFF6C8}
.sparkles i:nth-child(1){left:8%;top:20%}.sparkles i:nth-child(2){left:22%;top:70%;animation-delay:.6s}.sparkles i:nth-child(3){left:36%;top:12%;animation-delay:1.2s}
.sparkles i:nth-child(4){left:48%;top:56%;animation-delay:1.8s}.sparkles i:nth-child(5){left:60%;top:30%;animation-delay:.3s}.sparkles i:nth-child(6){left:72%;top:78%;animation-delay:2.2s}
.sparkles i:nth-child(7){left:84%;top:16%;animation-delay:.9s}.sparkles i:nth-child(8){left:93%;top:52%;animation-delay:1.5s}.sparkles i:nth-child(9){left:15%;top:44%;animation-delay:2.6s}.sparkles i:nth-child(10){left:55%;top:88%;animation-delay:2s}
.sea-friends .sparkles i{background:#FFC83D;width:12px;height:12px}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}

/* Click/tap bubbles (js/sea-fx.js) */
.pop-bubble{position:fixed;z-index:50;pointer-events:none;border-radius:50%;border:2px solid rgba(255,255,255,.95);
  background:radial-gradient(circle at 32% 30%,#fff 0 16%,rgba(160,225,255,.45) 34%,rgba(255,255,255,.08) 64%);box-shadow:0 0 0 1px rgba(10,63,134,.25);
  animation:pop-rise .9s ease-out forwards}
@keyframes pop-rise{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}80%{opacity:.9;transform:translate(var(--dx),var(--dy)) scale(1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) - 20px)) scale(1.5)}}

/* Reef strips with coral, kelp and peeking friends */
.reef{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;pointer-events:none}
.reef img{position:absolute;bottom:0;height:auto}
.reef .coral{width:260px}
.reef .kelp{width:46px;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate}
.reef-hero .c1{left:2%}.reef-hero .c2{right:4%;transform:scaleX(-1)}
.reef-hero .k1{left:20%;height:170px}.reef-hero .k2{right:24%;height:150px;animation-delay:-2s}
.peek{filter:drop-shadow(0 6px 8px rgba(5,30,70,.25))}
.p-panni{width:110px;left:calc(2% + 150px);bottom:40px;animation:peek-up 6s ease-in-out infinite}
@keyframes peek-up{0%,100%{transform:translateY(40px)}40%,70%{transform:translateY(0) rotate(-4deg)}}

/* Light sections with navy text */
.sea-section{position:relative;z-index:3;padding:64px 0 70px}
.sea-section::before{content:"";position:absolute;left:0;right:0;top:-28px;height:30px;background:url(/img/series/milo/deco/wave-solid.svg) repeat-x 0 0/400px 30px}
.sea-books{background:var(--foam)}
.sea-books::before{filter:brightness(1.03)}
.sea-h2{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.2rem);font-weight:700;color:var(--deep);margin:0 0 .6em}
.sea-h2::after{content:"";display:block;width:90px;height:8px;margin-top:6px;border-radius:8px;background:repeating-linear-gradient(90deg,var(--coral) 0 18px,var(--sun) 18px 36px,#3BB57A 36px 54px)}
.sea-book-grid{display:grid;gap:26px}
@media (min-width:900px){.sea-book-grid{grid-template-columns:1fr 1fr}}
.sea-book-grid .book-card{background:#fff;border-radius:22px;padding:22px;border:3px solid #BFE6F7;box-shadow:0 10px 0 #BFE6F7}
.sea-book-grid .book-card h3{color:var(--deep);font-size:1.5rem}
.sea-book-grid .kicker,.sea-book-grid .kicker a{color:#B3243A}
.sea-book-grid .subtitle,.sea-book-grid .meta{color:#33465F}
.series-milo .sea-book-grid .btn{border-radius:999px;font-family:"Fredoka",sans-serif;letter-spacing:.04em}
.series-milo .sea-book-grid .btn-primary{background:var(--deep)}
.p-pip{position:absolute;right:-30px;top:-40px;width:130px;transform:rotate(-12deg);animation:peek-side 7s ease-in-out infinite;z-index:4}
@keyframes peek-side{0%,100%{transform:translateX(60px) rotate(-12deg)}40%,70%{transform:translateX(0) rotate(-6deg)}}
@media (max-width:700px){.p-pip{right:-20px;width:90px}}

/* Swim lane between sections */
.swim-lane{position:relative;z-index:4;height:0}
.l-otto{width:130px;top:-70px;left:0;animation:path-wave 46s linear infinite;animation-delay:-12s}
.l-stella{width:62px;top:-100px;left:0;animation:path-wave 34s linear infinite reverse;animation-delay:-20s}
.sc3{top:-40px;animation:school-r 28s linear infinite;animation-delay:-6s}

.sea-friends{background:linear-gradient(180deg,var(--aqua),#C9EDFA);padding-bottom:190px}
.sea-friends::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C50 0 150 0 200 20S350 40 400 20V40H0z' fill='%23DDF4FC'/%3E%3C/svg%3E")}
.friends{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.friend{background:#fff;border-radius:26px;padding:16px 18px 20px;text-align:center;border:3px solid #BFE6F7;box-shadow:0 8px 0 #BFE6F7;transition:transform .3s}
.friend{will-change:transform}
.friend:hover,.friend:focus-visible{animation:card-wiggle .9s ease-in-out;transform:translateY(-8px) rotate(-1deg);box-shadow:0 14px 0 #9FD8F0}
.friend:focus-visible{outline:4px solid #FFC83D;outline-offset:3px}
@keyframes card-wiggle{0%{transform:translateY(0)}25%{transform:translateY(-8px) rotate(-2.5deg)}50%{transform:translateY(-8px) rotate(2deg)}75%{transform:translateY(-8px) rotate(-1.5deg)}100%{transform:translateY(-8px) rotate(-1deg)}}
.sea-book-grid .book-card{transition:transform .35s ease}
.sea-book-grid .book-card:hover,.sea-book-grid .book-card:focus-within{transform:translateY(-6px)}
.friend-art{display:block;width:150px;max-width:100%;margin:0 auto 6px;animation:bob-y 5s ease-in-out infinite}
.friend:nth-child(even) .friend-art{animation-delay:-2.5s}
.friend-art img{width:100%;height:120px;object-fit:contain}
.friend h3{font-size:1.7rem;font-weight:700;margin:0;color:var(--deep)}
.friend-kind{display:inline-block;margin:.2em 0 .7em;font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#B3243A;border-radius:999px;padding:2px 12px}
.friend p:last-child{margin:0;font-size:1rem;line-height:1.5;color:#26384F}
.reef-foot{height:170px}
.reef-foot .c3{left:3%}.reef-foot .c4{right:3%;transform:scaleX(-1)}
.reef-foot .k3{left:24%;height:180px}.reef-foot .k4{right:26%;height:160px;animation-delay:-1.5s}
.p-milo{width:140px;left:calc(3% + 170px);bottom:30px;animation:peek-up 8s ease-in-out infinite}

@media (max-width:700px){
  .kelp-edge{width:36px;background-size:36px 180px}
  .sea-hero{padding-bottom:150px}
  .s-milo{width:100px;top:auto;bottom:120px}.s-dot,.sc2{display:none}.school{width:100px}.s-lumi{width:60px;top:auto;bottom:250px;right:3%}
  .reef .coral{width:170px}.p-panni{left:auto;right:120px;width:84px}.p-milo{left:auto;right:150px;width:100px}
  .reef-hero .k1,.reef-foot .k3{display:none}
  .sea-cover{width:42vw}
}
@media (prefers-reduced-motion:reduce){
  .series-milo *{animation:none !important;transition:none !important}
  .swimmer,.school{translate:none !important}.pop-bubble{display:none}.glow{opacity:.85}.sparkles i{opacity:.6}
  .sc1{left:20%}.sc2{left:60%}.sc3{left:40%}
  .friend:hover,.friend:focus-visible,.sea-book-grid .book-card:hover{transform:none}
  .sea-bubbles span:nth-child(odd){bottom:40%}.sea-bubbles span:nth-child(even){bottom:75%}
  .s-milo{left:8%}.l-otto{left:12%}.l-stella{left:auto;right:12%}
  .p-panni,.p-milo{transform:none}.p-pip{transform:rotate(-8deg)}
}
@media print{.sparkles,.school,.pop-bubble,.sea-bubbles,.swimmers,.swim-lane,.kelp-edge,.reef{display:none}}