/*
Theme Name: Sahara Sparkle Version 2.3 Mobile Fix
Theme URI: https://www.saharasparkle.com.au
Author: Rebecca Hopkins
Author URI: https://www.saharasparkle.com.au
Description: Sahara Sparkle Version 2.0 — a magical, cinematic WordPress experience with three Sahara worlds, books, music, Lady Pie, reading support and the Adventure Chest.
Version: 2.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sahara-sparkle
License: GNU General Public License v2 or later
*/

:root{
  --ink:#39184f;--purple:#7040a0;--deep:#35114f;--pink:#ed5fa8;--gold:#f7ca58;
  --cream:#fffaf6;--aqua:#35b9c4;--shadow:0 24px 70px rgba(68,22,91,.16);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Lexend,sans-serif;color:var(--ink);background:
radial-gradient(circle at 5% 8%,#ffe8f5 0 12%,transparent 28%),
radial-gradient(circle at 96% 18%,#eee2ff 0 10%,transparent 26%),#fffaf8;overflow-x:hidden}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}button,input{font:inherit}
.sparkle-layer{position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:
radial-gradient(circle,#f7ca58 0 1px,transparent 2px),radial-gradient(circle,#e685c0 0 1px,transparent 2px);
background-size:74px 74px,113px 113px;background-position:10px 20px,44px 5px;opacity:.25}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:8px clamp(18px,5vw,72px);position:sticky;top:0;z-index:50;background:rgba(255,250,248,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(112,64,160,.08)}
.brand img{height:72px;width:auto;object-fit:contain}.site-header nav{display:flex;align-items:center;gap:1.5rem;font-weight:700;font-size:.87rem}.site-header nav a:hover{color:var(--pink)}.nav-button{background:var(--deep);color:white!important;padding:.8rem 1rem;border-radius:999px}.menu-button{display:none;border:0;background:none;font-size:1.7rem;color:var(--deep)}
.hero{min-height:calc(100vh - 88px);display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;gap:clamp(30px,5vw,80px);padding:clamp(48px,7vw,100px) clamp(20px,7vw,110px)}
.eyebrow,.section-heading>span{display:inline-block;text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;font-weight:800;color:var(--pink)}
h1,h2,h3{font-family:"Playpen Sans",sans-serif;line-height:1.04;margin:.3em 0;color:var(--deep)}h1{font-size:clamp(3rem,6.2vw,6.4rem);letter-spacing:-.07em}h2{font-size:clamp(2.35rem,4.3vw,4.5rem);letter-spacing:-.05em}h3{font-size:clamp(2rem,3vw,3.3rem)}
.hero-copy>p{font-size:clamp(1rem,1.4vw,1.22rem);line-height:1.8;max-width:640px}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.7rem 0}.button{display:inline-flex;justify-content:center;align-items:center;padding:1rem 1.25rem;border-radius:999px;font-weight:800;border:0;cursor:pointer;transition:.22s}.button:hover{transform:translateY(-3px)}.primary{background:linear-gradient(135deg,var(--purple),var(--pink));color:white;box-shadow:0 13px 25px rgba(166,57,133,.24)}.secondary{background:white;border:1px solid #eadcf2;color:var(--deep)}.trust-row{display:flex;flex-wrap:wrap;gap:.7rem;font-size:.73rem;font-weight:700;color:#745d7f}
.video-stage{position:relative;border-radius:42px;padding:12px;background:linear-gradient(135deg,#fff,#ffddef,#edddff,#fff0a8);box-shadow:var(--shadow);isolation:isolate}.video-stage video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:31px;display:block;background:#240b3a}.video-glow{position:absolute;inset:-20px;background:linear-gradient(135deg,#ec72b3,#8c67cf,#45c5cb);filter:blur(42px);opacity:.22;z-index:-1}.video-label{position:absolute;left:7%;bottom:-34px;background:rgba(255,255,255,.96);padding:.9rem 1.15rem;border-radius:18px;box-shadow:0 14px 30px rgba(40,11,60,.18);display:grid}.video-label span{font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--pink);font-weight:800}.video-label strong{font-family:"Playpen Sans";font-size:1rem}.video-label a{font-size:.65rem;margin-top:.25rem;color:var(--purple);font-weight:800}
.section{padding:clamp(75px,9vw,130px) clamp(20px,7vw,110px)}.section-heading{text-align:center;max-width:820px;margin:0 auto 4rem}.section-heading p{line-height:1.8}.section-heading.left{text-align:left;margin-left:0}
.worlds{background:linear-gradient(180deg,transparent,#fff 8%,#fff 92%,transparent)}
.world-card{max-width:1350px;margin:0 auto 3.3rem;display:grid;grid-template-columns:minmax(260px,34%) 1fr;border-radius:42px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(70,22,95,.08);background:white}
.character-panel{position:relative;min-height:540px;overflow:hidden}.character-panel img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .7s}.world-card:hover .character-panel img{transform:scale(1.035)}.character-panel:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(30,7,45,.82))}.character-title{position:absolute;z-index:2;left:8%;right:6%;bottom:6%;color:white}.character-title span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.character-title h3{color:white;margin:.25rem 0}
.world-content{padding:clamp(28px,5vw,68px);display:flex;flex-direction:column;justify-content:center}.world-content>p{font-size:1.03rem;line-height:1.8;max-width:720px}.sweet{background:linear-gradient(135deg,#fff,#fff0f8)}.adventure{background:linear-gradient(135deg,#fff,#fff8db)}.realm{background:linear-gradient(135deg,#fff,#e9fbfb)}
.book-rail{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:1rem;margin:1.4rem 0}.book-rail.compact{grid-template-columns:repeat(2,minmax(130px,210px))}.book-card{background:transparent;border:0;padding:0;text-align:left;color:var(--ink);cursor:pointer}.book-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:13px;box-shadow:0 10px 22px rgba(49,15,70,.16);transition:.25s}.book-card:hover img{transform:translateY(-8px) rotate(-1.5deg)}.book-card span{display:block;font-size:.68rem;font-weight:800;line-height:1.3;margin-top:.55rem}.world-note{display:inline-flex;align-self:flex-start;padding:.72rem .9rem;border-radius:14px;background:rgba(255,255,255,.75);font-size:.7rem;font-weight:800}.inline-link{font-size:.75rem;font-weight:800;color:var(--purple);margin-top:.8rem}
.lady{display:grid;grid-template-columns:1fr minmax(300px,550px);align-items:center;gap:6vw;background:linear-gradient(135deg,#5c2b82,#9d4fa1);color:white}.lady h2,.lady .eyebrow{color:white}.lady-copy p{line-height:1.8;font-size:1.05rem}.lady img{border-radius:50%;background:#fff5df;box-shadow:0 24px 70px rgba(20,6,32,.27)}.lady-tags{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}.lady-tags span{background:rgba(255,255,255,.13);padding:.65rem .8rem;border-radius:999px;font-size:.68rem;font-weight:700}
.music{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.music p{line-height:1.8}.number-orbit{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.number-orbit a{aspect-ratio:1;border-radius:30%;display:grid;place-items:center;font-family:"Playpen Sans";font-size:clamp(1.4rem,3vw,2.7rem);font-weight:800;color:white;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 12px 25px rgba(93,34,122,.18);transition:.22s}.number-orbit a:nth-child(3n+2){background:linear-gradient(135deg,#f0a423,#f16f81)}.number-orbit a:nth-child(3n){background:linear-gradient(135deg,#20aeba,#6a67c7)}.number-orbit a:hover{transform:translateY(-6px) rotate(3deg)}
.parents{background:#fff}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.feature-grid div{padding:2rem;border-radius:26px;background:#fbf4ff;border:1px solid #eee0f5}.feature-grid b{font-family:"Playpen Sans";font-size:1.1rem}.feature-grid p{font-size:.85rem;line-height:1.7}
.shop{background:linear-gradient(180deg,#fffaf8,#f7efff)}.coming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1000px;margin:auto}.coming-grid div{min-height:220px;border-radius:30px;background:white;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:3rem;box-shadow:var(--shadow)}.coming-grid b{font-size:1rem;margin:.8rem 0 .25rem}.coming-grid span{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--pink)}
.club{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;background:linear-gradient(135deg,#35114f,#7c3d95);color:white}.club h2,.club .eyebrow{color:white}.club p{line-height:1.8}.club form{display:grid;grid-template-columns:1fr auto;gap:.7rem}.club input{border:0;border-radius:999px;padding:1rem 1.2rem;min-width:0}.success{display:none;grid-column:1/-1}.submitted .success{display:block}
footer{min-height:180px;padding:2rem 7vw;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#210a32;color:#eee0f5;font-size:.7rem}footer img{height:100px;width:auto}footer a{font-weight:800}
@media(max-width:980px){.hero,.music,.lady,.club{grid-template-columns:1fr}.hero{padding-top:45px}.video-stage{margin-top:2rem}.world-card{grid-template-columns:1fr}.character-panel{min-height:420px}.feature-grid{grid-template-columns:1fr}.site-header nav{position:absolute;top:88px;left:0;right:0;background:#fff;padding:1.3rem;display:none;flex-direction:column}.site-header nav.open{display:flex}.menu-button{display:block}.coming-grid{grid-template-columns:1fr}.club form{grid-template-columns:1fr}}
@media(max-width:640px){h1{font-size:3.2rem}.hero{padding-inline:18px}.section{padding-inline:18px}.book-rail{display:flex;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}.book-card{min-width:115px;scroll-snap-align:start}.book-rail.compact .book-card{min-width:145px}.character-panel{min-height:360px}.world-card{border-radius:28px}.world-content{padding:25px}.video-label{position:relative;left:auto;bottom:auto;margin:-8px 14px 0}.number-orbit{gap:.6rem}.number-orbit a{border-radius:24%}footer{flex-direction:column;text-align:center}.brand img{height:62px}.site-header{height:76px}.site-header nav{top:76px}}


/* VERSION 6: animated storybook world */
body{position:relative;background:
linear-gradient(180deg,#fff7fb 0%,#f8f0ff 26%,#effcff 52%,#fff9e9 76%,#fff7fb 100%);
background-size:100% 300%;animation:pageSky 24s ease-in-out infinite}
@keyframes pageSky{0%,100%{background-position:0 0}50%{background-position:0 100%}}

.animated-sky{position:fixed;inset:0;pointer-events:none;z-index:-3;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.18;mix-blend-mode:multiply}
.aurora-one{width:46vw;height:46vw;left:-10vw;top:8vh;background:radial-gradient(circle,#ff72bd,#ac75ef 58%,transparent 70%);animation:auroraFloat 18s ease-in-out infinite}
.aurora-two{width:42vw;height:42vw;right:-8vw;top:44vh;background:radial-gradient(circle,#63dbe1,#7e8df2 56%,transparent 70%);animation:auroraFloat 22s ease-in-out infinite reverse}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-7vh) scale(1.12)}}

.cloud{position:absolute;color:rgba(255,255,255,.78);filter:drop-shadow(0 12px 18px rgba(103,70,139,.12));font-size:clamp(5rem,10vw,11rem);line-height:1;opacity:.8}
.cloud-one{top:6vh;left:-18vw;animation:cloudDrift 44s linear infinite}
.cloud-two{top:38vh;left:-25vw;font-size:clamp(4rem,8vw,9rem);animation:cloudDrift 58s linear infinite 8s;opacity:.6}
.cloud-three{top:72vh;left:-20vw;font-size:clamp(3rem,7vw,7rem);animation:cloudDrift 50s linear infinite 16s;opacity:.48}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(145vw)}}

.floating-shape{position:absolute;filter:drop-shadow(0 8px 12px rgba(78,36,103,.18));animation:gentleFloat 8s ease-in-out infinite}
.star-one{top:15%;left:7%;font-size:2rem;color:#f6c94d}
.star-two{top:62%;right:7%;font-size:1.5rem;color:#e68fc6;animation-delay:1.2s}
.heart-one{top:84%;left:12%;font-size:2.4rem;color:#d980c6;animation-delay:2s}
.note-one{top:32%;right:9%;font-size:2.5rem;color:#8668c8;animation-delay:.5s}
.note-two{top:70%;left:5%;font-size:2rem;color:#32b8c1;animation-delay:2.5s}
.butterfly-one{top:22%;right:18%;font-size:2rem;animation:butterflyPath 15s ease-in-out infinite}
.butterfly-two{top:78%;right:28%;font-size:1.6rem;animation:butterflyPath 19s ease-in-out infinite reverse}
@keyframes gentleFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-22px) rotate(7deg)}}
@keyframes butterflyPath{0%,100%{transform:translate(0,0) rotate(-8deg)}25%{transform:translate(80px,-35px) rotate(9deg)}50%{transform:translate(25px,-90px) rotate(-6deg)}75%{transform:translate(-55px,-35px) rotate(8deg)}}

.bubble-one,.bubble-two,.bubble-three{border-radius:50%;border:2px solid rgba(255,255,255,.65);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.9),rgba(200,237,255,.22) 42%,rgba(197,139,241,.14));box-shadow:inset 0 0 16px rgba(255,255,255,.7)}
.bubble-one{width:68px;height:68px;left:22%;bottom:-90px;animation:bubbleRise 16s linear infinite}
.bubble-two{width:40px;height:40px;left:48%;bottom:-60px;animation:bubbleRise 20s linear infinite 4s}
.bubble-three{width:88px;height:88px;right:16%;bottom:-120px;animation:bubbleRise 24s linear infinite 8s}
@keyframes bubbleRise{from{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.65}80%{opacity:.45}to{transform:translateY(-120vh) translateX(70px);opacity:0}}

.shooting-star{position:absolute;width:130px;height:2px;background:linear-gradient(90deg,transparent,#fff,#f6d36b);border-radius:999px;opacity:0;transform:rotate(-22deg)}
.shooting-star:after{content:"";position:absolute;right:-2px;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff8c8;box-shadow:0 0 14px #fff}
.shooting-one{top:12%;left:18%;animation:shoot 11s ease-in-out infinite 3s}
.shooting-two{top:50%;right:8%;animation:shoot 14s ease-in-out infinite 8s}
@keyframes shoot{0%,78%,100%{opacity:0;transform:translate(0,0) rotate(-22deg)}81%{opacity:1}90%{opacity:0;transform:translate(420px,150px) rotate(-22deg)}}

.paw-trail{position:absolute;bottom:5%;left:-280px;font-size:1.5rem;opacity:.2;transform:rotate(-8deg);animation:pawWalk 26s linear infinite}
@keyframes pawWalk{from{transform:translateX(0) rotate(-8deg)}to{transform:translateX(140vw) rotate(-8deg)}}

.site-header{box-shadow:0 8px 26px rgba(73,26,95,.06)}
.hero{position:relative;isolation:isolate}
.hero:before{content:"";position:absolute;inset:8% 4% 12%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.82),rgba(255,255,255,.2) 58%,transparent 72%);z-index:-1;filter:blur(12px);animation:heroPulse 8s ease-in-out infinite}
@keyframes heroPulse{0%,100%{transform:scale(.98);opacity:.7}50%{transform:scale(1.04);opacity:1}}

.video-stage{animation:stageFloat 6s ease-in-out infinite}
@keyframes stageFloat{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-12px) rotate(.4deg)}}

.magic-ribbon{position:absolute;left:-10%;right:-10%;height:150px;filter:blur(1px);opacity:.28;pointer-events:none;transform:rotate(-3deg)}
.ribbon-pink{top:40px;background:linear-gradient(90deg,transparent,#ff8fc8,#ae7aee,#68d2d7,transparent);clip-path:path("M 0 80 C 260 0, 480 150, 820 60 S 1400 130, 1800 40 L 1800 120 C 1420 190, 1120 70, 780 140 S 260 60, 0 150 Z")}
.ribbon-blue{bottom:50px;background:linear-gradient(90deg,transparent,#6fd4e5,#7d80e3,#f08ec2,transparent)}
.worlds,.shop,.music{position:relative;overflow:hidden}

.world-card{position:relative;transition:transform .35s,box-shadow .35s}
.world-card:hover{transform:translateY(-8px);box-shadow:0 34px 90px rgba(68,22,91,.22)}
.world-card:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.7) 48%,transparent 68%);transform:translateX(-130%);transition:transform .9s;pointer-events:none;z-index:3}
.world-card:hover:before{transform:translateX(130%)}
.book-card{position:relative}
.book-card:after{content:"✦";position:absolute;right:7px;top:-8px;color:#f7c955;font-size:1.1rem;opacity:0;transform:scale(.2) rotate(-20deg);transition:.28s}
.book-card:hover:after{opacity:1;transform:scale(1) rotate(8deg)}

.music-confetti{position:absolute;inset:15% 3% auto;text-align:center;font-size:clamp(1rem,3vw,2rem);letter-spacing:clamp(1rem,4vw,4rem);color:rgba(109,65,155,.16);animation:confettiWave 8s ease-in-out infinite;white-space:nowrap}
@keyframes confettiWave{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}

.number-orbit a{position:relative;overflow:hidden}
.number-orbit a:before{content:"";position:absolute;inset:-30%;background:conic-gradient(transparent,rgba(255,255,255,.5),transparent 35%);animation:numberSpin 7s linear infinite}
.number-orbit a:nth-child(2n):before{animation-direction:reverse}
.number-orbit a{isolation:isolate}
.number-orbit a{z-index:0}.number-orbit a>*{position:relative;z-index:1}
@keyframes numberSpin{to{transform:rotate(360deg)}}

.lady{position:relative;overflow:hidden}
.lady:before,.lady:after{content:"✦";position:absolute;color:rgba(255,255,255,.2);font-size:6rem;animation:ladySpark 7s ease-in-out infinite}
.lady:before{left:3%;top:12%}.lady:after{right:4%;bottom:8%;animation-delay:2s}
@keyframes ladySpark{0%,100%{transform:scale(.8) rotate(0);opacity:.12}50%{transform:scale(1.25) rotate(18deg);opacity:.3}}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
@media(max-width:640px){
  .cloud{opacity:.35}
  .butterfly-one,.butterfly-two,.shooting-star,.paw-trail{display:none}
  .aurora{opacity:.12}
}

/* VERSION 7: Sahara Sparkle Music World */
.music-world{position:relative;overflow:hidden;background:radial-gradient(circle at 8% 15%,rgba(255,255,255,.9) 0 8%,transparent 21%),radial-gradient(circle at 92% 82%,rgba(255,255,255,.85) 0 9%,transparent 23%),linear-gradient(145deg,#e8faff 0%,#f6eaff 42%,#fff0c8 100%)}
.music-world:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle,#fff 0 2px,transparent 3px);background-size:52px 52px;animation:musicStars 18s linear infinite}
@keyframes musicStars{to{background-position:104px 52px}}
.music-world-intro{position:relative;z-index:2;max-width:860px;margin:0 auto 3rem;text-align:center}.music-world-intro p{max-width:680px;margin:1rem auto 1.5rem;line-height:1.8}
.music-cloud{position:absolute;color:rgba(255,255,255,.72);font-size:10rem;filter:drop-shadow(0 16px 22px rgba(84,50,112,.1));animation:musicCloudFloat 9s ease-in-out infinite}.cloud-left{left:-3rem;top:3rem}.cloud-right{right:-2rem;bottom:2rem;animation-delay:2.2s}
@keyframes musicCloudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.music-video-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.35rem;max-width:1400px;margin:0 auto}
.music-video-card{border:0;background:rgba(255,255,255,.92);padding:.75rem .75rem 1rem;border-radius:24px;text-align:left;color:var(--ink);cursor:pointer;box-shadow:0 18px 42px rgba(63,26,88,.14);transition:.28s;overflow:hidden}
.music-video-card:nth-child(odd){transform:rotate(-.45deg)}.music-video-card:nth-child(even){transform:rotate(.45deg)}
.music-video-card:hover{transform:translateY(-10px) scale(1.025);box-shadow:0 28px 60px rgba(63,26,88,.23)}
.music-thumb{position:relative;overflow:hidden;border-radius:17px;aspect-ratio:16/9;background:#5f2d7c}.music-thumb img{width:100%;height:100%;object-fit:cover;transition:.55s}.music-video-card:hover img{transform:scale(1.08)}
.music-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(38,10,55,.48));pointer-events:none}
.table-badge{position:absolute;z-index:2;left:.65rem;top:.65rem;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#7344a2,#ed60a8);color:white;font-family:"Playpen Sans";font-size:1.18rem;font-weight:800;box-shadow:0 8px 18px rgba(44,8,65,.24)}
.music-video-card:nth-child(3n+2) .table-badge{background:linear-gradient(135deg,#f2a927,#f46f87)}.music-video-card:nth-child(3n) .table-badge{background:linear-gradient(135deg,#22b4c2,#6967c8)}
.play-bubble{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;padding-left:4px;background:rgba(255,255,255,.94);color:#7b3ba1;font-size:1.3rem;box-shadow:0 12px 28px rgba(37,8,54,.3);transition:.25s}.music-video-card:hover .play-bubble{transform:scale(1.15)}
.music-sparkle{position:absolute;z-index:4;color:#ffe16d;opacity:0;transition:.3s}.sparkle-a{right:12%;top:14%;font-size:1.5rem}.sparkle-b{left:15%;bottom:13%;font-size:1.25rem}.music-video-card:hover .music-sparkle{opacity:1;transform:translateY(-8px) rotate(12deg)}
.music-card-title{display:block;font-family:"Playpen Sans";font-size:.98rem;font-weight:800;margin:.85rem .35rem .2rem}.music-card-subtitle{display:block;font-size:.66rem;font-weight:700;color:#846e90;margin:0 .35rem}
.music-coming-soon{position:relative;z-index:2;max-width:900px;margin:3rem auto 0;text-align:center;padding:1.35rem;border-radius:25px;background:rgba(255,255,255,.62)}
.music-coming-soon>span{font-family:"Playpen Sans";font-weight:800}.music-coming-soon div{display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem;margin-top:.85rem}.music-coming-soon b{font-size:.67rem;padding:.55rem .75rem;border-radius:999px;background:white;color:var(--purple)}
.video-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}.video-modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(29,7,42,.78);backdrop-filter:blur(10px)}
.modal-window{position:relative;z-index:2;width:min(1000px,94vw);padding:15px;border-radius:32px;background:linear-gradient(135deg,#fff,#f8eaff,#eaffff);box-shadow:0 30px 100px rgba(0,0,0,.38);animation:modalPop .3s ease-out}
@keyframes modalPop{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1)}}
.modal-close{position:absolute;right:-12px;top:-12px;z-index:4;width:44px;height:44px;border-radius:50%;border:0;background:#5e267b;color:white;font-size:1.8rem;cursor:pointer}.modal-sparkles{text-align:center;letter-spacing:2rem;color:#d184be;padding:.15rem 0 .7rem}
.modal-video-wrap{overflow:hidden;border-radius:21px;background:#1e082c;aspect-ratio:16/9}.modal-video-wrap iframe{width:100%;height:100%;border:0}.modal-youtube-link{display:block;text-align:center;margin:.85rem auto .2rem;font-size:.72rem;font-weight:800;color:var(--purple)}body.modal-open{overflow:hidden}
@media(max-width:1080px){.music-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.music-video-grid{grid-template-columns:1fr}.music-video-card:nth-child(n){transform:none}.music-cloud{font-size:6rem;opacity:.45}}


/* VERSION 8: merchandise and refreshed Lady Pie section */
.lady{grid-template-columns:minmax(300px,520px) 1fr;background:linear-gradient(135deg,#5c2b82,#9d4fa1);position:relative;overflow:hidden}
.lady-portrait{position:relative;display:grid;place-items:center}
.lady-portrait:before{content:"";position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff8df 0 55%,rgba(255,255,255,.2) 56% 70%,transparent 71%);filter:drop-shadow(0 24px 50px rgba(34,8,50,.22));animation:ladyHalo 8s ease-in-out infinite}
.lady-portrait img{position:relative;z-index:2;width:min(100%,480px);max-height:610px;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(35,8,51,.22));border-radius:0;background:transparent;box-shadow:none}
.lady-copy{position:relative;z-index:2}.lady-copy .lady-lead{font-family:"Playpen Sans";font-size:clamp(1.25rem,2vw,1.7rem);font-weight:800;line-height:1.4;margin-bottom:.8rem}.lady-copy .hero-actions{margin-top:1.5rem}.lady-copy .secondary{background:rgba(255,255,255,.92)}
@keyframes ladyHalo{0%,100%{transform:scale(.96) rotate(-2deg)}50%{transform:scale(1.04) rotate(2deg)}}

.chest-feature{max-width:1350px;margin:0 auto 2.4rem;display:grid;grid-template-columns:.72fr 1.28fr;gap:2rem;align-items:center;padding:clamp(25px,4vw,52px);border-radius:38px;background:linear-gradient(135deg,#fff7fd,#f1e5ff 55%,#fff3ca);box-shadow:var(--shadow);border:1px solid rgba(112,64,160,.09);overflow:hidden}
.chest-feature img{width:100%;border-radius:25px;box-shadow:0 18px 42px rgba(57,17,79,.18)}
.chest-copy h3{font-size:clamp(1.8rem,3.2vw,3.2rem);margin:.45rem 0 1rem}.chest-copy p{line-height:1.75}
.merch-grid{max-width:1350px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.merch-card{background:white;border-radius:27px;overflow:hidden;box-shadow:0 18px 42px rgba(63,26,88,.13);transition:transform .28s,box-shadow .28s;border:1px solid rgba(112,64,160,.08)}
.merch-card:hover{transform:translateY(-9px);box-shadow:0 28px 60px rgba(63,26,88,.22)}
.merch-card>img{width:100%;aspect-ratio:1.35/1;object-fit:cover;background:#fff7fc}
.merch-card:nth-child(1)>img{object-fit:contain;padding:1.2rem;background:linear-gradient(135deg,#fff,#fff2d8)}
.merch-card:nth-child(2)>img{object-position:center top}
.merch-card>div{padding:1.25rem 1.3rem 1.4rem}.merch-card span{display:inline-block;padding:.42rem .65rem;border-radius:999px;background:#f7eaff;color:var(--purple);font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.merch-card h3{font-size:1.2rem;margin:.7rem 0 .45rem}.merch-card p{font-size:.8rem;line-height:1.65;color:#705f7b}.merch-card a{font-size:.7rem;font-weight:800;color:var(--purple)}
@media(max-width:980px){.chest-feature{grid-template-columns:1fr}.merch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lady{grid-template-columns:1fr}.lady-portrait img{max-height:470px}}
@media(max-width:620px){.merch-grid{grid-template-columns:1fr}.chest-feature{border-radius:28px;padding:20px}.merch-card>img{aspect-ratio:1.2/1}}


/* VERSION 9: brighter storybook headings and a sweeter Lady Pie section */
:root{
  --heading-purple:#8237a7;
  --heading-pink:#ef5ca8;
  --heading-blue:#3baed0;
}
h1,h2,h3,
.character-title h3,
.music-card-title,
.chest-copy h3,
.merch-card h3,
.feature-grid b{
  font-family:"Fredoka","Playpen Sans",sans-serif;
}
h1,h2{
  color:var(--heading-purple);
  letter-spacing:-.035em;
  text-shadow:
    0 3px 0 rgba(255,255,255,.96),
    0 7px 16px rgba(161,87,185,.13);
}
h2{
  background:linear-gradient(105deg,#7438a0 0%,#ed5da8 48%,#e79532 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero h1{
  background:linear-gradient(105deg,#7438a0,#ed5da8 48%,#e89b34);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.character-title h3,
.lady h2,
.club h2{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:white;
}
.section-heading h2:after,
.music-world-intro h2:after{
  content:" ✦";
  display:inline-block;
  color:#f5c958;
  font-size:.48em;
  vertical-align:top;
  margin-left:.15em;
  text-shadow:0 0 12px rgba(255,215,89,.65);
  animation:headingTwinkle 2.8s ease-in-out infinite;
}
@keyframes headingTwinkle{
  0%,100%{transform:scale(.82) rotate(-5deg);opacity:.55}
  50%{transform:scale(1.18) rotate(8deg);opacity:1}
}
.eyebrow,.section-heading>span{
  color:#d94b99;
}
.world-content>p,.section-heading p,.music-world-intro p{
  color:#624f70;
}
.adventure-books{
  grid-template-columns:repeat(3,minmax(120px,190px))!important;
}

/* Lady Pie: soft, playful and character-first */
.lady{
  grid-template-columns:minmax(310px,520px) 1fr;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.82) 0 7%,transparent 18%),
    radial-gradient(circle at 88% 78%,rgba(255,255,255,.52) 0 6%,transparent 17%),
    linear-gradient(135deg,#f7d9f1 0%,#e9ddff 47%,#d7f7fb 100%);
  color:#593566;
  isolation:isolate;
}
.lady:before,.lady:after{display:none}
.lady-copy h2{
  color:#8b3ba5;
  text-shadow:0 3px 0 white,0 8px 18px rgba(133,62,155,.18);
  font-size:clamp(2.9rem,5vw,5.2rem);
}
.lady-copy .eyebrow{color:#d84e98}
.lady-copy .lady-lead{
  color:#684775;
  font-family:Lexend,sans-serif;
  font-size:clamp(1rem,1.5vw,1.18rem);
  font-weight:650;
  line-height:1.75;
}
.lady-portrait{position:relative;display:grid;place-items:center;padding-bottom:3.3rem}
.lady-heart-halo{
  position:absolute;
  width:90%;
  aspect-ratio:1;
  border-radius:46% 54% 52% 48%;
  background:
    radial-gradient(circle at 50% 45%,#fff9e8 0 45%,rgba(255,255,255,.62) 46% 62%,transparent 63%),
    linear-gradient(135deg,#ffd8ec,#e4d7ff);
  filter:drop-shadow(0 22px 45px rgba(118,65,142,.18));
  animation:ladyHeartFloat 7s ease-in-out infinite;
}
.lady-heart-halo:before,.lady-heart-halo:after{
  content:"♥";
  position:absolute;
  color:#ef81bd;
  opacity:.58;
  filter:drop-shadow(0 4px 7px rgba(130,49,137,.13));
  animation:littleHeart 4s ease-in-out infinite;
}
.lady-heart-halo:before{font-size:2.2rem;left:5%;top:18%}
.lady-heart-halo:after{font-size:1.45rem;right:7%;top:10%;animation-delay:1.4s}
.lady-portrait img{
  position:relative;
  z-index:2;
  width:min(100%,470px);
  max-height:600px;
  object-fit:contain;
  filter:drop-shadow(0 20px 25px rgba(91,50,105,.19));
  transition:transform .35s;
}
.lady-portrait:hover img{transform:translateY(-6px) rotate(-1deg)}
.lady-love-button{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:.25rem;
  transform:translateX(-50%);
  border:0;
  white-space:nowrap;
  border-radius:999px;
  padding:.9rem 1.1rem;
  background:linear-gradient(135deg,#fff,#fff0f8);
  color:#8c3a9e;
  font-weight:800;
  box-shadow:0 13px 28px rgba(111,57,130,.18);
  cursor:pointer;
  transition:.24s;
}
.lady-love-button:hover{transform:translateX(-50%) translateY(-4px) scale(1.03)}
.lady-love-button span{display:inline-block;transition:.25s}
.lady-love-button.loved span{animation:heartPop .55s ease-out}
.lady-speech{
  position:relative;
  max-width:670px;
  margin:1rem 0 1.3rem;
  padding:1.1rem 1.25rem;
  border-radius:25px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(238,112,178,.18);
  box-shadow:0 14px 32px rgba(112,57,131,.11);
}
.lady-speech:before{
  content:"";
  position:absolute;
  left:-17px;
  top:38px;
  width:34px;
  height:34px;
  background:rgba(255,255,255,.9);
  clip-path:polygon(100% 0,100% 100%,0 50%);
}
.lady-speech strong{
  display:block;
  font-family:"Fredoka",sans-serif;
  color:#a03c9f;
  font-size:1.35rem;
}
.lady-speech p{margin:.35rem 0 0;line-height:1.65}
.lady-favourites{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  margin:1.35rem 0;
}
.lady-favourites div{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.7rem;
  align-items:center;
  padding:.85rem;
  border-radius:20px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(138,64,158,.09);
  box-shadow:0 9px 22px rgba(109,56,126,.08);
  transition:.23s;
}
.lady-favourites div:hover{transform:translateY(-4px) rotate(-.5deg)}
.lady-favourites span{grid-row:1/3;font-size:1.7rem}
.lady-favourites b{font-family:"Fredoka",sans-serif;color:#7f3694;font-size:.88rem}
.lady-favourites small{font-size:.68rem;color:#7c667f;line-height:1.35}
.lady .secondary{background:rgba(255,255,255,.9);color:#7c3892;border-color:rgba(125,60,145,.12)}
.lady-doodle{
  position:absolute;
  z-index:-1;
  opacity:.2;
  font-size:3.3rem;
  animation:ladyDoodleFloat 7s ease-in-out infinite;
}
.paw-one{left:3%;top:8%;transform:rotate(-14deg)}
.paw-two{right:5%;bottom:8%;animation-delay:1.8s;transform:rotate(14deg)}
.heart-one-lady{right:8%;top:12%;color:#e956a5;animation-delay:.8s}
.lady-cuddle-heart{
  position:fixed;
  z-index:999;
  pointer-events:none;
  font-size:1.6rem;
  animation:cuddleHeart 1.25s ease-out forwards;
}
@keyframes ladyHeartFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes littleHeart{0%,100%{transform:translateY(0) scale(.85);opacity:.4}50%{transform:translateY(-12px) scale(1.1);opacity:.8}}
@keyframes ladyDoodleFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes heartPop{0%{transform:scale(.7)}55%{transform:scale(1.45) rotate(10deg)}100%{transform:scale(1)}}
@keyframes cuddleHeart{
  0%{opacity:0;transform:translate(-50%,-10%) scale(.5) rotate(-8deg)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-150px) scale(1.4) rotate(14deg)}
}
@media(max-width:980px){
  .lady{grid-template-columns:1fr}
  .lady-speech:before{display:none}
}
@media(max-width:620px){
  .adventure-books{grid-template-columns:none!important}
  .lady-favourites{grid-template-columns:1fr}
  .lady-love-button{font-size:.75rem}
}


/* VERSION 10 — Lady Pie becomes the Sahara Sparkle mascot */
.character-title h3,
.lady h2,
.club h2{
  color:#7a3db8!important;
  text-shadow:
    0 3px 0 rgba(255,255,255,.96),
    0 8px 20px rgba(105,48,144,.18)!important;
}
.purple-heading h3{color:#7a3db8!important}
.lady-v10{
  position:relative;
  overflow:hidden;
  grid-template-columns:minmax(380px,1.05fr) minmax(330px,.95fr);
  align-items:center;
  gap:clamp(1.5rem,4vw,4rem);
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.76),transparent 22%),
    linear-gradient(135deg,#fff3fb 0%,#efe7ff 48%,#e1f8fb 100%);
}
.lady-nook-wrap{
  position:relative;
  display:grid;
  justify-items:center;
  padding:1rem 0 4.2rem;
}
.lady-nook-frame{
  position:relative;
  width:min(100%,760px);
  border-radius:36px;
  padding:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,240,249,.88));
  box-shadow:
    0 28px 55px rgba(105,49,130,.19),
    inset 0 0 0 2px rgba(255,255,255,.8);
  transform:rotate(-.35deg);
}
.lady-nook-frame:before{
  content:"";
  position:absolute;
  inset:-11px;
  border-radius:44px;
  border:2px dashed rgba(177,100,200,.28);
  pointer-events:none;
}
.lady-nook-image{
  width:100%;
  display:block;
  border-radius:27px;
}
.lady-scene-badge{
  position:absolute;
  left:clamp(14px,3vw,28px);
  bottom:clamp(14px,3vw,28px);
  display:flex;
  align-items:center;
  gap:.75rem;
  max-width:min(84%,420px);
  padding:.8rem 1rem;
  border-radius:22px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  box-shadow:0 13px 30px rgba(78,39,94,.18);
  border:1px solid rgba(126,56,150,.11);
}
.lady-scene-badge .scene-icon{font-size:2rem}
.lady-scene-badge small{
  display:block;
  color:#d34c98;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:.62rem;
}
.lady-scene-badge strong{
  display:block;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  color:#773e99;
  font-size:1.05rem;
}
.lady-scene-badge p{
  margin:.12rem 0 0;
  color:#705b76;
  font-size:.72rem;
  line-height:1.35;
}
.lady-love-v10{
  bottom:.55rem;
  min-width:250px;
}
.lady-love-v10 b{font-family:"Fredoka","Playpen Sans",sans-serif}
.nook-easter-egg{
  position:absolute;
  z-index:4;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 4px 7px rgba(85,41,97,.22));
  transition:transform .24s,filter .24s;
}
.nook-easter-egg:hover{transform:scale(1.22) rotate(8deg);filter:drop-shadow(0 0 13px rgba(255,213,78,.8))}
.nook-star{top:5%;right:11%;font-size:2rem;color:#ffd152}
.nook-butterfly{left:5%;top:16%;font-size:2rem}
.nook-book{right:12%;bottom:17%;font-size:1.9rem}
.nook-magic-pop{
  position:fixed;
  z-index:1000;
  pointer-events:none;
  font-size:1.65rem;
  animation:nookPop 1.35s ease-out forwards;
}
@keyframes nookPop{
  0%{opacity:0;transform:translate(-50%,-20%) scale(.5) rotate(-15deg)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-170px) scale(1.45) rotate(18deg)}
}

/* Paw prints gently appear around the whole website */
.pawprint-layer{
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  overflow:hidden;
}
.site-paw{
  position:absolute;
  opacity:0;
  font-size:1.35rem;
  filter:drop-shadow(0 4px 5px rgba(95,41,112,.15));
  animation:pawAppear 3.8s ease-in-out forwards;
}
@keyframes pawAppear{
  0%{opacity:0;transform:translateY(8px) rotate(var(--paw-rotate)) scale(.65)}
  25%,72%{opacity:.28}
  100%{opacity:0;transform:translateY(-6px) rotate(var(--paw-rotate)) scale(1)}
}

/* Lady occasionally trots across the screen */
.lady-mascot-runner{
  position:fixed;
  z-index:70;
  left:-230px;
  bottom:8px;
  width:175px;
  pointer-events:none;
  opacity:0;
}
.lady-mascot-runner img{
  width:100%;
  display:block;
  filter:drop-shadow(0 10px 12px rgba(53,24,64,.2));
}
.runner-bubble{
  position:absolute;
  right:-10px;
  top:5px;
  padding:.45rem .65rem;
  border-radius:999px;
  background:white;
  color:#7a3d98;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  font-weight:800;
  box-shadow:0 7px 18px rgba(71,32,83,.14);
  transform:scale(0);
}
.lady-mascot-runner.running{
  opacity:1;
  animation:ladyRunAcross 8.5s linear forwards;
}
.lady-mascot-runner.running .runner-bubble{
  animation:bubbleHello 8.5s ease forwards;
}
@keyframes ladyRunAcross{
  0%{left:-220px;transform:translateY(0) rotate(-1deg)}
  12%{transform:translateY(-8px) rotate(1deg)}
  24%{transform:translateY(0) rotate(-1deg)}
  36%{transform:translateY(-8px) rotate(1deg)}
  48%{transform:translateY(0) rotate(-1deg)}
  60%{transform:translateY(-8px) rotate(1deg)}
  76%{transform:translateY(0) rotate(-1deg)}
  100%{left:calc(100vw + 40px);transform:translateY(-4px) rotate(1deg)}
}
@keyframes bubbleHello{
  0%,14%,78%,100%{transform:scale(0);opacity:0}
  20%,68%{transform:scale(1);opacity:1}
}

/* Five scene moods using small animated accents */
.lady-nook-frame.scene-nap:after,
.lady-nook-frame.scene-bake:after,
.lady-nook-frame.scene-butterfly:after,
.lady-nook-frame.scene-adventure:after{
  position:absolute;
  z-index:5;
  right:8%;
  top:11%;
  font-size:2.35rem;
  filter:drop-shadow(0 6px 10px rgba(75,35,84,.16));
  animation:sceneFloat 3.4s ease-in-out infinite;
}
.lady-nook-frame.scene-nap:after{content:"Zzz";font-family:"Fredoka",sans-serif;color:#8054a3}
.lady-nook-frame.scene-bake:after{content:"🧁"}
.lady-nook-frame.scene-butterfly:after{content:"🦋"}
.lady-nook-frame.scene-adventure:after{content:"🎒"}
@keyframes sceneFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(4deg)}}

@media(max-width:980px){
  .lady-v10{grid-template-columns:1fr}
}
@media(max-width:650px){
  .lady-nook-frame{border-radius:25px;padding:7px}
  .lady-nook-image{border-radius:19px}
  .lady-scene-badge{
    position:relative;
    left:auto;
    bottom:auto;
    margin:-1.2rem .7rem 0;
    max-width:none;
  }
  .nook-star{font-size:1.55rem}
  .nook-butterfly,.nook-book{font-size:1.4rem}
  .lady-mascot-runner{width:120px}
}
@media(prefers-reduced-motion:reduce){
  .site-paw,.lady-mascot-runner,.nook-easter-egg,
  .lady-nook-frame:after{animation:none!important}
  .lady-mascot-runner{display:none}
}


/* VERSION 11 — final Lady polish */

/* Make every visible heading purple, including headings that previously stayed white. */
h1,h2,h3,h4,h5,h6,
.hero h1,
.section-heading h2,
.music-world-intro h2,
.character-title h3,
.world-content h2,
.world-content h3,
.club h2,
.lady h2,
.chest-copy h3,
.merch-card h3,
.feature-grid b,
.music-card-title{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:#7a3db8!important;
  -webkit-text-fill-color:#7a3db8!important;
  text-shadow:
    0 3px 0 rgba(255,255,255,.96),
    0 8px 18px rgba(103,45,139,.16)!important;
}
.section-heading h2:after,
.music-world-intro h2:after{
  color:#f4c94d!important;
  -webkit-text-fill-color:#f4c94d!important;
}

/* Keep Lady's square picture card and add a glowing-window cuddle effect. */
.lady-nook-frame{
  overflow:hidden;
}
.lady-nook-frame.window-glow:before{
  content:"";
  position:absolute;
  z-index:3;
  left:44%;
  top:20%;
  width:17%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,245,157,.96) 0 18%,rgba(255,213,75,.72) 34%,rgba(255,196,58,.22) 58%,transparent 74%);
  filter:blur(2px);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:windowLoveGlow 2.8s ease-out forwards;
}
.lady-nook-frame.window-glow:after{
  content:"💜";
  position:absolute;
  z-index:6;
  left:49%;
  top:25%;
  font-size:2rem;
  filter:drop-shadow(0 0 12px rgba(255,227,95,.92));
  pointer-events:none;
  animation:windowHeartGlow 2.8s ease-out forwards;
}
@keyframes windowLoveGlow{
  0%{opacity:0;transform:scale(.55)}
  18%{opacity:1;transform:scale(1)}
  72%{opacity:.95;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.35)}
}
@keyframes windowHeartGlow{
  0%{opacity:0;transform:scale(.45)}
  20%{opacity:1;transform:scale(1.15)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:translateY(-20px) scale(1.25)}
}

/* Lady Pie Joke of the Day */
.lady-joke-card{
  position:absolute;
  z-index:8;
  right:clamp(14px,3vw,28px);
  bottom:clamp(14px,3vw,28px);
  width:min(42%,330px);
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.78rem .92rem;
  border:1px solid rgba(117,55,145,.13);
  border-radius:22px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  color:#6e4d76;
  box-shadow:0 13px 30px rgba(78,39,94,.18);
  cursor:pointer;
  text-align:left;
  transition:transform .24s,box-shadow .24s;
}
.lady-joke-card:hover{
  transform:translateY(-4px) rotate(.4deg);
  box-shadow:0 18px 35px rgba(78,39,94,.22);
}
.joke-book{
  flex:0 0 auto;
  font-size:2rem;
  animation:jokeBookWiggle 4s ease-in-out infinite;
}
.joke-text{display:block;min-width:0}
.joke-text small{
  display:block;
  color:#d64d99;
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.joke-question{
  display:block;
  margin-top:.12rem;
  color:#743b95;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  font-size:.82rem;
  line-height:1.25;
}
.joke-answer{
  display:block;
  margin-top:.2rem;
  color:#6f5c73;
  font-family:Lexend,sans-serif;
  font-size:.67rem;
  font-style:normal;
  line-height:1.3;
}
.lady-joke-card.revealed .joke-book{
  animation:jokeBookOpen .55s ease-out;
}
@keyframes jokeBookWiggle{
  0%,88%,100%{transform:rotate(0)}
  91%{transform:rotate(-8deg)}
  95%{transform:rotate(8deg)}
}
@keyframes jokeBookOpen{
  0%{transform:scale(.7) rotate(-12deg)}
  58%{transform:scale(1.35) rotate(8deg)}
  100%{transform:scale(1)}
}

/* Running Lady was removed; pawprints remain throughout the website. */
.lady-mascot-runner{display:none!important}

@media(max-width:650px){
  .lady-joke-card{
    position:relative;
    right:auto;
    bottom:auto;
    width:auto;
    margin:.7rem .7rem 0;
  }
  .lady-nook-frame.window-glow:before{
    left:43%;
    top:18%;
  }
}


/* VERSION 12 — Wobbly Words and “What your child may see” */
.wobbly-parent-feature{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(460px,1.28fr);
  gap:clamp(1rem,3vw,2rem);
  margin-top:clamp(2rem,5vw,4rem);
  align-items:stretch;
}
.wobbly-book-panel,
.children-see-panel{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:clamp(1.3rem,3vw,2.2rem);
  box-shadow:0 20px 45px rgba(95,48,122,.12);
}
.wobbly-book-panel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:
    radial-gradient(circle at 92% 10%,rgba(255,255,255,.8),transparent 22%),
    linear-gradient(145deg,#f7ddf0,#e9ddff);
}
.wobbly-book-panel:after{
  content:"✦";
  position:absolute;
  right:7%;
  top:5%;
  color:#f2c64f;
  font-size:2rem;
  animation:headingTwinkle 2.8s ease-in-out infinite;
}
.wobbly-book-panel h3,
.children-see-panel h3{
  margin:.25rem 0 .65rem;
  font-size:clamp(1.8rem,3vw,3rem);
}
.wobbly-book-panel p,
.children-see-intro{
  color:#695672;
  line-height:1.7;
}
.wobbly-book-panel img{
  width:min(100%,290px);
  margin:1.1rem auto 1.25rem;
  display:block;
  border-radius:20px;
  box-shadow:0 17px 30px rgba(77,39,92,.2);
  transform:rotate(-1deg);
}
.wobbly-book-panel .button{margin-top:auto}
.children-see-panel{
  background:
    radial-gradient(circle at 8% 8%,rgba(255,255,255,.9),transparent 20%),
    linear-gradient(135deg,#fff8fc,#f4efff 55%,#edfaff);
}
.child-sees-comparison{
  margin:1.2rem 0 1.15rem;
  padding:.65rem;
  border-radius:25px;
  background:rgba(255,255,255,.93);
  box-shadow:0 14px 30px rgba(83,43,102,.12);
  border:1px solid rgba(123,61,150,.09);
}
.child-sees-comparison img{
  width:100%;
  display:block;
  border-radius:18px;
}
.child-sees-comparison figcaption{
  padding:.75rem .65rem .35rem;
  color:#705b76;
  font-size:.72rem;
  line-height:1.5;
  text-align:center;
}
.wobble-demo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
  margin-top:1.2rem;
}
.wobble-demo-card{
  min-height:145px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1rem;
  border-radius:21px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(123,61,150,.09);
  box-shadow:0 9px 21px rgba(86,42,103,.08);
  text-align:center;
}
.wobble-demo-card p{
  margin:0 0 .65rem;
  color:#76577d;
  font-size:.76rem;
  font-weight:750;
}
.flip-demo{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.1rem .65rem;
  max-width:105px;
  margin:auto;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  color:#8242a1;
  font-size:2rem;
  line-height:.9;
}
.flip-demo span:nth-child(2){transform:rotateY(180deg)}
.flip-demo span:nth-child(3){transform:rotateX(180deg)}
.flip-demo span:nth-child(4){transform:rotate(180deg)}
.crowded-demo{
  font-family:"Fredoka",sans-serif;
  color:#a63c91;
  font-size:1.55rem;
  letter-spacing:-.24em;
  transform:scaleX(.96);
}
.swap-demo{
  display:flex;
  justify-content:center;
  gap:.45rem;
  font-family:"Fredoka",sans-serif;
  font-size:1.65rem;
  color:#7d42a1;
}
.swap-demo span:first-child{transform:translateX(13px) rotate(-5deg)}
.swap-demo span:last-child{transform:translateX(-13px) rotate(5deg);opacity:.65}
.blur-demo{
  position:relative;
  height:48px;
  font-family:"Fredoka",sans-serif;
  font-size:2rem;
  color:#78419a;
}
.blur-demo span{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.blur-demo span:first-child{filter:blur(1.2px);opacity:.68;translate:-7px 0}
.blur-demo span:last-child{filter:blur(.55px);opacity:.55;translate:7px 0}
.spacing-demo-v12{
  font-family:"Fredoka",sans-serif;
  color:#7b419d;
  font-size:1.25rem;
  letter-spacing:.36em;
  white-space:nowrap;
}
.ray-demo-v12{
  position:relative;
  display:inline-block;
  margin:auto;
  padding:.45rem .75rem;
  background:#fff;
  color:#5f4c66;
  font-family:Lexend,sans-serif;
  font-size:.84rem;
  line-height:1.55;
  border-radius:8px;
}
.ray-demo-v12:before{
  content:"";
  position:absolute;
  left:-5px;
  right:-5px;
  top:50%;
  height:1.2rem;
  transform:translateY(-50%);
  border-radius:5px;
  background:rgba(255,225,55,.52);
  border-bottom:4px solid rgba(57,137,198,.68);
  z-index:0;
}
.ray-demo-v12 span{position:relative;z-index:1}
.wobbly-reassurance{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  margin-top:1rem;
  padding:1rem 1.1rem;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(126,62,158,.1),rgba(239,91,169,.08));
}
.wobbly-reassurance>span{font-size:1.6rem}
.wobbly-reassurance p{
  margin:0;
  color:#664d70;
  line-height:1.55;
  font-size:.82rem;
}
.wobbly-reassurance strong{color:#793a98}
@media(max-width:980px){
  .wobbly-parent-feature{grid-template-columns:1fr}
  .wobbly-book-panel{
    display:grid;
    grid-template-columns:1fr minmax(180px,260px);
    column-gap:1.4rem;
    align-items:center;
  }
  .wobbly-book-panel .eyebrow,
  .wobbly-book-panel h3,
  .wobbly-book-panel p,
  .wobbly-book-panel .button{grid-column:1}
  .wobbly-book-panel img{grid-column:2;grid-row:1/6;margin:auto}
}
@media(max-width:680px){
  .wobble-demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wobbly-book-panel{display:flex}
  .wobbly-book-panel img{width:min(78%,280px)}
}
@media(max-width:430px){
  .wobble-demo-grid{grid-template-columns:1fr}
}


/* VERSION 13 — animated “What your child may see” experience */
.animated-child-view{
  background:
    radial-gradient(circle at 12% 10%,rgba(255,255,255,.12),transparent 18%),
    linear-gradient(145deg,#25104f,#431782 62%,#24104e);
  color:#fff;
}
.animated-child-view .eyebrow{
  color:#ffd36d;
}
.animated-child-view h3,
.animated-child-view h4{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:none!important;
}
.animated-child-view .children-see-intro{
  color:#fff;
  max-width:780px;
}
.animated-wobble-stage{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem;
  margin-top:1.35rem;
}
.animated-wobble-card{
  min-height:172px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:1rem;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  overflow:hidden;
}
.animated-wobble-card p{
  margin:0 0 .8rem;
  color:#fff;
  font-weight:800;
  font-size:.82rem;
  text-align:center;
}
.v13-flip{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.2rem 1rem;
  color:#ffb7df;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  font-size:2.45rem;
  line-height:.9;
}
.v13-flip span{
  display:inline-block;
  animation:v13FlipLetters 4.6s ease-in-out infinite;
}
.v13-flip span:nth-child(2){animation-delay:.28s}
.v13-flip span:nth-child(3){animation-delay:.56s}
.v13-flip span:nth-child(4){animation-delay:.84s}

.v13-crowd{
  color:#ffb7df;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  font-size:2rem;
  font-weight:900;
  animation:v13Crowd 4.6s ease-in-out infinite;
  white-space:nowrap;
}
.v13-swap{
  position:relative;
  width:120px;
  height:60px;
  color:#ffb7df;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  font-size:2.25rem;
  font-weight:900;
}
.v13-swap span{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.v13-saw{animation:v13Saw 4.8s ease-in-out infinite}
.v13-was{opacity:0;animation:v13Was 4.8s ease-in-out infinite}

.v13-merge{
  position:relative;
  width:120px;
  height:60px;
  color:#ffb7df;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  font-size:2.4rem;
  font-weight:900;
}
.v13-merge span{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.v13-rn{animation:v13Rn 4.5s ease-in-out infinite}
.v13-m{opacity:0;animation:v13M 4.5s ease-in-out infinite}

.v13-spacing{
  color:#ffb7df;
  font-family:"Fredoka","Playpen Sans",sans-serif;
  font-size:1.35rem;
  font-weight:900;
  white-space:nowrap;
  animation:v13Spacing 4.8s ease-in-out infinite;
}
.v13-ray{
  position:relative;
  display:inline-block;
  margin:auto;
  padding:.55rem .85rem;
  background:rgba(255,246,213,.74);
  color:#fff;
  border-radius:12px;
  font-family:Lexend,sans-serif;
  font-size:.95rem;
  line-height:1.45;
  overflow:hidden;
}
.v13-ray:before{
  content:"";
  position:absolute;
  left:-110%;
  width:100%;
  top:44%;
  height:1.35rem;
  transform:translateY(-50%);
  background:rgba(255,226,65,.55);
  border-bottom:4px solid #2493d0;
  animation:v13RayMove 4.6s ease-in-out infinite;
}
.v13-ray span{position:relative;z-index:1}

.v13-child-eyes-copy{
  margin-top:1.2rem;
  padding:1.1rem 1.2rem;
  border-radius:22px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
}
.v13-child-eyes-copy h4,
.v13-did-you-know h4{
  margin:0 0 .45rem;
  font-size:1.35rem;
}
.v13-child-eyes-copy p,
.v13-did-you-know p{
  margin:.25rem 0;
  color:#fff;
  line-height:1.6;
  font-size:.82rem;
}
.v13-did-you-know{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:1rem;
  align-items:center;
  margin-top:1rem;
  padding:1rem 1.15rem;
  border-radius:24px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,183,223,.42);
}
.v13-stat-bubble{
  width:82px;
  height:82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:2rem;
  background:
    radial-gradient(circle,#fff 0 35%,#ffd4eb 36% 62%,#7b42c8 63%);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.animated-child-view .wobbly-reassurance{
  background:rgba(255,255,255,.1);
}
.animated-child-view .wobbly-reassurance p{
  color:#fff;
}
.animated-child-view .wobbly-reassurance strong{
  color:#ffd36d;
}

@keyframes v13FlipLetters{
  0%,32%,100%{transform:rotateY(0) rotateX(0)}
  48%,64%{transform:rotateY(180deg)}
}
@keyframes v13Crowd{
  0%,28%,100%{letter-spacing:.02em;transform:scaleX(1)}
  48%,66%{letter-spacing:-.22em;transform:scaleX(.9)}
}
@keyframes v13Saw{
  0%,32%{opacity:1;letter-spacing:0}
  48%,66%{opacity:0;letter-spacing:.35em;transform:translate(-50%,-50%) rotate(7deg)}
  82%,100%{opacity:1;letter-spacing:0}
}
@keyframes v13Was{
  0%,32%{opacity:0;letter-spacing:.35em}
  48%,66%{opacity:1;letter-spacing:0}
  82%,100%{opacity:0;letter-spacing:.35em}
}
@keyframes v13Rn{
  0%,30%,100%{opacity:1;letter-spacing:.2em;filter:blur(0)}
  48%,66%{opacity:.18;letter-spacing:-.18em;filter:blur(2px)}
}
@keyframes v13M{
  0%,30%,100%{opacity:0;filter:blur(2px)}
  48%,66%{opacity:1;filter:blur(0)}
}
@keyframes v13Spacing{
  0%,28%,100%{letter-spacing:.02em}
  48%,66%{letter-spacing:.42em}
}
@keyframes v13RayMove{
  0%,12%{left:-110%}
  42%,68%{left:0}
  88%,100%{left:110%}
}
@media(max-width:900px){
  .animated-wobble-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .animated-wobble-stage{grid-template-columns:1fr}
  .v13-did-you-know{grid-template-columns:1fr;text-align:center}
  .v13-stat-bubble{margin:auto}
}
@media(prefers-reduced-motion:reduce){
  .v13-flip span,
  .v13-crowd,
  .v13-saw,
  .v13-was,
  .v13-rn,
  .v13-m,
  .v13-spacing,
  .v13-ray:before{
    animation:none!important;
  }
}


/* VERSION 14 — LAUNCH CANDIDATE */
:root{
  --launch-purple:#7a3db8;
  --launch-pink:#ef5aa7;
  --launch-gold:#f4c94d;
}
.skip-link{
  position:fixed;
  left:12px;
  top:-60px;
  z-index:10000;
  padding:.75rem 1rem;
  border-radius:12px;
  background:#fff;
  color:#5d2f7d;
  font-weight:800;
  box-shadow:0 10px 30px rgba(65,30,82,.22);
}
.skip-link:focus{top:12px}
.launch-ribbon{
  position:relative;
  z-index:80;
  padding:.58rem 1rem;
  text-align:center;
  background:linear-gradient(90deg,#6d33a5,#ef5aa7,#6d33a5);
  color:#fff;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 5px 18px rgba(75,31,98,.18);
}
.mobile-nav-toggle{
  display:none;
  border:0;
  border-radius:14px;
  padding:.55rem .75rem;
  background:linear-gradient(135deg,#ef5aa7,#7133a5);
  color:#fff;
  font-size:1.25rem;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(75,31,98,.18);
}
.book-filter-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem;
  margin:1.25rem 0 1.75rem;
}
.book-filter{
  border:1px solid rgba(122,61,184,.16);
  border-radius:999px;
  padding:.7rem 1rem;
  background:#fff;
  color:#703b94;
  font:800 .78rem Lexend,sans-serif;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(88,38,109,.08);
  transition:.22s ease;
}
.book-filter:hover,
.book-filter.active{
  color:#fff;
  background:linear-gradient(135deg,#ef5aa7,#7133a5);
  transform:translateY(-2px);
}
.book-card.launch-hidden{
  display:none!important;
}
.book-card{
  content-visibility:auto;
  contain-intrinsic-size:420px;
}
.book-card img,
.merch-card img{
  transition:transform .32s ease,filter .32s ease;
}
.book-card:hover img,
.merch-card:hover img{
  transform:scale(1.035);
  filter:saturate(1.04);
}
.realm-map-showcase,
.lady-nook-frame,
.wobbly-parent-feature{
  content-visibility:auto;
  contain-intrinsic-size:700px;
}
img{
  height:auto;
}
@media(max-width:900px){
  .mobile-nav-toggle{display:inline-flex}
  .site-nav,
  header nav,
  .main-nav{
    display:none;
  }
  body.mobile-menu-open .site-nav,
  body.mobile-menu-open header nav,
  body.mobile-menu-open .main-nav{
    display:flex;
    position:absolute;
    left:1rem;
    right:1rem;
    top:calc(100% + .5rem);
    flex-direction:column;
    gap:.4rem;
    padding:1rem;
    border-radius:20px;
    background:rgba(255,255,255,.97);
    box-shadow:0 18px 40px rgba(75,31,98,.18);
    z-index:100;
  }
}
@media(max-width:650px){
  .launch-ribbon{font-size:.64rem}
  .section{padding-left:1rem;padding-right:1rem}
  .book-filter-bar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.35rem}
  .book-filter{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

.launch-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease;
}
.launch-reveal.launch-visible{
  opacity:1;
  transform:none;
}


.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
.page-shell{padding:60px clamp(18px,7vw,110px)}
.page-card{max-width:1100px;margin:auto;padding:clamp(24px,5vw,56px);border-radius:34px;background:#fff;box-shadow:var(--shadow)}

/* Reserved blank space for the future YouTube intro */
.video-stage-empty{min-height:360px;}
.video-placeholder{width:100%;aspect-ratio:16/9;border-radius:inherit;background:transparent;}
@media(max-width:720px){.video-stage-empty{min-height:220px;}}

/* Version 2.0.2: lightweight YouTube intro */
.video-stage iframe{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:inherit;
}
.music-video-card{
  text-decoration:none;
  color:inherit;
}


/* VERSION 2.1 — tighter spacing without changing the design */
.section{padding-top:clamp(42px,5vw,68px)!important;padding-bottom:clamp(42px,5vw,68px)!important}
.section-heading{margin-bottom:clamp(22px,3vw,38px)!important}
.hero{min-height:auto!important;padding-top:clamp(34px,5vw,64px)!important;padding-bottom:clamp(34px,5vw,64px)!important}
.music-world-intro{margin-bottom:clamp(24px,3vw,40px)!important}
.music-video-grid,.feature-grid,.world-grid,.book-grid{gap:clamp(16px,2.2vw,28px)!important}
.music-coming-soon{margin-top:clamp(24px,3vw,38px)!important}
@media(max-width:640px){.section{padding-top:34px!important;padding-bottom:34px!important}.section-heading{margin-bottom:24px!important}.hero{padding-top:30px!important;padding-bottom:30px!important}}


/* SAHARA SPARKLE 2.2 — COMPACT SITE SPACING */
:root{
  --ss-section-y: clamp(38px, 4.5vw, 64px);
  --ss-small-section-y: clamp(26px, 3vw, 42px);
  --ss-grid-gap: clamp(16px, 2vw, 26px);
}
main > section,
.site-main > section,
section[class*="section"]{
  padding-top: var(--ss-section-y) !important;
  padding-bottom: var(--ss-section-y) !important;
}
.hero,
.hero-section,
.intro-section{
  min-height: auto !important;
  padding-top: clamp(34px, 4vw, 58px) !important;
  padding-bottom: clamp(34px, 4vw, 58px) !important;
}
.section-heading,
.section-header,
.title-wrap{
  margin-bottom: clamp(16px, 2vw, 26px) !important;
}
.music-video-grid,
.music-grid,
.books-grid,
.world-grid,
.card-grid,
.feature-grid,
.coming-grid{
  gap: var(--ss-grid-gap) !important;
}
main h1,
main h2,
main h3{
  margin-top: 0 !important;
}
main h2,
.section-title{
  margin-bottom: 12px !important;
}
main p{
  margin-top: 0;
  margin-bottom: .85em;
}
.cta-section,
.parent-section,
.newsletter-section,
.footer-cta{
  padding-top: var(--ss-small-section-y) !important;
  padding-bottom: var(--ss-small-section-y) !important;
}
@media (max-width: 767px){
  :root{
    --ss-section-y: 32px;
    --ss-small-section-y: 24px;
    --ss-grid-gap: 15px;
  }
  .hero,
  .hero-section,
  .intro-section{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}


/* ==========================================================
   SAHARA SPARKLE 2.3 — MOBILE STABILITY & RESPONSIVE LAYOUT
   Desktop appearance is preserved. These rules only strengthen
   tablet and phone behaviour and prevent image/layout overflow.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { min-width: 0; }
main, section, article, header, footer, nav, div { min-width: 0; }
img, picture, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}
iframe { display: block; }

/* Avoid off-screen decorative elements creating horizontal scroll */
.animated-sky,
.sparkle-layer,
.pawprint-layer,
.music-cloud,
.music-sparkle,
.cloud-left,
.cloud-right { max-width: 100vw; }

@media (max-width: 980px) {
  .site-header {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero,
  .music,
  .lady,
  .club,
  .chest-feature,
  .wobbly-parent-feature,
  .children-see-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero > *,
  .lady > *,
  .club > *,
  .chest-feature > *,
  .wobbly-parent-feature > *,
  .world-card > * {
    width: 100%;
    max-width: 100%;
  }

  .world-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .character-panel {
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
  }

  .character-panel img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .book-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .music-video-grid,
  .merch-grid,
  .coming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 15px;
  }

  .launch-ribbon {
    padding: 7px 34px 7px 10px;
    font-size: 10px !important;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
  }

  .site-header {
    height: 70px !important;
    padding: 8px 14px !important;
    gap: 10px;
  }

  .brand,
  .brand img {
    max-width: 190px;
  }

  .brand img {
    width: auto !important;
    height: 54px !important;
    object-fit: contain;
  }

  .menu-button {
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .site-header nav {
    top: 70px !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(48, 14, 68, .2);
  }

  .section,
  main > section,
  .site-main > section,
  section[class*="section"] {
    width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  h1,
  .hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.05rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
  }

  h2,
  .section-heading h2 {
    font-size: clamp(1.65rem, 8.5vw, 2.35rem) !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
  }

  h3 { overflow-wrap: anywhere; }

  .hero-copy,
  .section-heading,
  .music-world-intro,
  .lady-copy,
  .chest-copy {
    width: 100%;
    max-width: 100%;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .hero-actions .button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .trust-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px !important;
  }

  .video-stage {
    width: 100%;
    max-width: 100%;
    padding: 7px !important;
    border-radius: 24px !important;
    margin-top: 0 !important;
  }

  .video-stage iframe,
  .video-stage video {
    width: 100% !important;
    max-width: 100%;
    border-radius: 18px !important;
  }

  .video-glow { inset: -8px; filter: blur(20px); }

  .world-card {
    width: 100%;
    max-width: 100%;
    margin-bottom: 22px !important;
    border-radius: 24px !important;
  }

  .character-panel {
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
  }

  .world-content {
    padding: 20px 16px !important;
  }

  .book-rail,
  .book-rail.compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    overflow: visible !important;
    gap: 12px !important;
    padding-bottom: 0 !important;
  }

  .book-card,
  .book-rail.compact .book-card {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .book-card img {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 4 / 5;
  }

  .music-video-grid,
  .merch-grid,
  .coming-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .music-video-card,
  .merch-card,
  .coming-grid > div {
    width: 100%;
    max-width: 100%;
  }

  .music-thumb,
  .music-thumb img {
    width: 100% !important;
    max-width: 100%;
  }

  .lady {
    gap: 22px !important;
  }

  .lady-portrait,
  .lady-portrait img,
  .lady img,
  .lady-nook-frame,
  .lady-nook-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .lady-portrait img {
    max-height: none !important;
    object-fit: contain;
  }

  .chest-feature,
  .wobbly-parent-feature,
  .children-see-panel,
  .animated-wobble-stage {
    width: 100%;
    max-width: 100%;
    padding: 18px !important;
    border-radius: 24px !important;
    overflow: hidden;
  }

  .chest-feature img,
  .wobbly-book-panel img,
  .child-sees-comparison img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .club form {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .club input,
  .club button {
    width: 100%;
    min-width: 0;
  }

  .modal-window,
  .ss-video-dialog {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    padding: 7px !important;
    border-radius: 18px !important;
  }

  .modal-close,
  .ss-video-close {
    right: 2px !important;
    top: -16px !important;
  }

  footer {
    width: 100%;
    min-height: 0 !important;
    padding: 24px 16px !important;
  }

  footer img {
    max-width: 180px;
    height: auto !important;
  }

  /* Heavy desktop animations can cause mobile layout jumps */
  .world-card:hover .character-panel img,
  .book-card:hover img,
  .merch-card:hover img,
  .music-video-card:hover img,
  .button:hover {
    transform: none !important;
  }

  .book-card,
  .realm-map-showcase,
  .lady-nook-frame,
  .wobbly-parent-feature {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }
}

@media (max-width: 420px) {
  .section,
  main > section,
  section[class*="section"],
  .hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .brand,
  .brand img { max-width: 160px; }
  .brand img { height: 48px !important; }

  .book-rail,
  .book-rail.compact {
    gap: 9px !important;
  }

  .world-content { padding: 17px 13px !important; }
}