/* Glimlings® — soft glowing alien world for kids */
:root{
  --ink:#0d0a1f;
  --panel:#1a1030;
  --panel-2:#141026;
  --cream:#fef3c7;
  --pink:#f9a8d4;
  --lavender:#a78bfa;
  --lavender-lt:#c4b5fd;
  --cyan:#67e8f9;
  --mint:#86efac;
  --gold:#fde68a;
  --blush:#f0abfc;
  --text:#f1ecfb;
  --muted:#b3a8d4;
  --display:'Baloo 2', system-ui, sans-serif;
  --body:'Quicksand', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(#0d0a1f,#231a4d 60%);
}
.scene{
  position:absolute;
  bottom:0;left:0;
  width:100%;
  height:64%;
  min-height:320px;
  z-index:1;
}
.hero-copy{
  position:relative;
  z-index:3;
  text-align:center;
  padding:13vh 1.25rem 0;
}
.kicker{
  color:var(--gold);
  letter-spacing:.35em;
  text-transform:uppercase;
  font-size:.75rem;
  margin-bottom:1rem;
}
.wordmark{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.8rem, 9vw, 6.5rem);
  line-height:1.02;
  letter-spacing:.04em;
  color:var(--cream);
  text-shadow:
    0 0 18px rgba(249,168,212,.6),
    0 0 60px rgba(167,139,250,.5),
    0 3px 0 #4c2a7a;
  animation:glimPulse 5s ease-in-out infinite;
}
.reg{font-size:.35em;vertical-align:super;opacity:.8}
.tagline{
  margin-top:1.1rem;
  color:var(--muted);
  letter-spacing:.24em;
  text-transform:lowercase;
  font-size:.95rem;
}
@keyframes glimPulse{
  0%,100%{text-shadow:0 0 18px rgba(249,168,212,.55),0 0 60px rgba(167,139,250,.45),0 3px 0 #4c2a7a}
  50%{text-shadow:0 0 32px rgba(249,168,212,.9),0 0 95px rgba(103,232,249,.55),0 3px 0 #4c2a7a}
}

/* fireflies */
.fireflies{position:absolute;inset:0;z-index:2;pointer-events:none}
.ff{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 10px 3px rgba(253,230,138,.7);
  animation:floatGlow 6s ease-in-out infinite;
}
@keyframes floatGlow{
  0%,100%{opacity:.2;transform:translateY(0) scale(.7)}
  50%{opacity:1;transform:translateY(-16px) scale(1.1)}
}
.f1{top:10%;left:12%}.f2{top:16%;left:80%;animation-delay:.7s}
.f3{top:6%;left:44%;animation-delay:1.3s}.f4{top:24%;left:28%;animation-delay:2s}
.f5{top:12%;left:62%;animation-delay:2.6s;background:var(--cyan);box-shadow:0 0 10px 3px rgba(103,232,249,.7)}
.f6{top:28%;left:90%;animation-delay:1s;background:var(--pink);box-shadow:0 0 10px 3px rgba(249,168,212,.7)}
.f7{top:20%;left:6%;animation-delay:3.2s;background:var(--cyan);box-shadow:0 0 10px 3px rgba(103,232,249,.7)}
.f8{top:32%;left:54%;animation-delay:.4s}
.f9{top:8%;left:92%;animation-delay:1.8s;background:var(--pink);box-shadow:0 0 10px 3px rgba(249,168,212,.7)}
.f10{top:35%;left:18%;animation-delay:2.4s}
.f11{top:27%;left:70%;animation-delay:3.6s;background:var(--mint);box-shadow:0 0 10px 3px rgba(134,239,172,.7)}
.f12{top:18%;left:38%;animation-delay:.9s}

/* SVG scene motion */
.aurora{animation:auroraShift 9s ease-in-out infinite}
.a2{animation-delay:2.5s}
@keyframes auroraShift{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:.9;transform:translateX(14px)}}
.drift{animation:isleDrift 8s ease-in-out infinite}
.d2{animation-delay:2s}.d3{animation-delay:4s}
@keyframes isleDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pike-hop{animation:hop 2.6s ease-in-out infinite;transform-origin:920px 468px}
@keyframes hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}55%{transform:translateY(0)}}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  margin-top:2rem;
  padding:.85rem 2.2rem;
  border-radius:999px;
  text-decoration:none;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  font-size:.85rem;
  font-family:var(--body);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-ghost{
  color:var(--pink);
  border:1px solid rgba(249,168,212,.5);
  box-shadow:0 0 18px rgba(249,168,212,.18) inset, 0 0 18px rgba(249,168,212,.15);
}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(249,168,212,.4)}
.btn-solid{
  color:var(--ink);
  background:linear-gradient(120deg,var(--gold),var(--pink) 55%,var(--lavender-lt));
  box-shadow:0 0 28px rgba(249,168,212,.45);
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(196,181,253,.65)}
.btn-play{font-size:1.35rem;padding:1.15rem 3.4rem;margin-right:1rem;letter-spacing:.18em}

/* ---------- SECTIONS ---------- */
.section{
  max-width:1080px;
  margin:0 auto;
  padding:5.5rem 1.5rem;
  text-align:center;
}
.section.alt{
  max-width:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(249,168,212,.07), transparent),
    var(--panel-2);
  border-top:1px solid rgba(167,139,250,.15);
  border-bottom:1px solid rgba(167,139,250,.15);
}
.section-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.8rem,4.5vw,2.7rem);
  color:var(--cream);
  margin-bottom:1.8rem;
}
.section-title span{position:relative;padding:0 .4em}
.section-title span::before,
.section-title span::after{
  content:"✦";
  color:var(--pink);
  font-size:.5em;
  vertical-align:middle;
  margin:0 .7em;
  text-shadow:0 0 10px var(--pink);
}
.section-sub{color:var(--muted);margin:-1rem 0 2.5rem;letter-spacing:.08em}

.lede{max-width:640px;margin:0 auto;color:#ddd4f2;font-size:1.1rem;text-align:left}
.lede strong{color:var(--gold)}
.lede em{color:var(--blush);font-style:normal;text-shadow:0 0 12px rgba(240,171,252,.55)}

.stat-row{
  display:flex;justify-content:center;gap:2.5rem;
  flex-wrap:wrap;margin-top:3rem;
}
.stat{display:flex;flex-direction:column;min-width:140px}
.stat-n{
  font-family:var(--display);font-weight:800;
  font-size:2.3rem;color:var(--cyan);
  text-shadow:0 0 16px rgba(103,232,249,.6);
}
.stat-l{color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- CARDS ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem;
  max-width:1080px;
  margin:0 auto;
}
.card{
  background:var(--panel);
  border:1px solid rgba(167,139,250,.18);
  border-radius:22px;
  padding:1.6rem 1.4rem;
  text-align:center;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover{transform:translateY(-6px)}
.c-pip:hover{border-color:rgba(249,168,212,.6);box-shadow:0 10px 40px rgba(249,168,212,.18)}
.c-glo:hover{border-color:rgba(196,181,253,.6);box-shadow:0 10px 40px rgba(196,181,253,.18)}
.c-moss:hover{border-color:rgba(134,239,172,.6);box-shadow:0 10px 40px rgba(134,239,172,.16)}
.c-sol:hover{border-color:rgba(253,230,138,.6);box-shadow:0 10px 40px rgba(253,230,138,.16)}
.c-luna:hover{border-color:rgba(165,243,252,.6);box-shadow:0 10px 40px rgba(165,243,252,.16)}
.c-pike:hover{border-color:rgba(250,204,21,.6);box-shadow:0 10px 40px rgba(250,204,21,.16)}
.card img{
  width:104px;height:104px;border-radius:26px;
  margin-bottom:1rem;
  filter:drop-shadow(0 0 16px rgba(167,139,250,.4));
  transition:transform .3s ease;
}
.card:hover img{transform:scale(1.06) rotate(-2deg)}
.card h3{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.02em;color:var(--cream)}
.card .role{
  color:var(--pink);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
  margin:.3rem 0 .7rem;
}
.card .bio{color:var(--muted);font-size:.93rem}

/* ---------- WORLDS LIST ---------- */
.worlds-list{
  list-style:none;
  max-width:640px;margin:0 auto;
  text-align:left;
}
.world{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.2rem 0;
  border-bottom:1px dashed rgba(167,139,250,.22);
}
.world:last-child{border-bottom:none}
.world h3{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--cream)}
.world p{color:var(--muted);font-size:.95rem}
.w-dot{
  flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  margin-top:.45rem;
  animation:dotBreathe 4s ease-in-out infinite;
}
.w-petal .w-dot{background:var(--pink);box-shadow:0 0 14px rgba(249,168,212,.8)}
.w-forest .w-dot{background:var(--mint);box-shadow:0 0 14px rgba(134,239,172,.8);animation-delay:.8s}
.w-cave .w-dot{background:var(--cyan);box-shadow:0 0 14px rgba(103,232,249,.8);animation-delay:1.6s}
.w-cloud .w-dot{background:var(--gold);box-shadow:0 0 14px rgba(253,230,138,.8);animation-delay:2.4s}
.w-star .w-dot{background:var(--lavender-lt);box-shadow:0 0 14px rgba(196,181,253,.8);animation-delay:3.2s}
@keyframes dotBreathe{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

/* ---------- STORE ---------- */
.store{padding-bottom:6.5rem}
.store-sign{width:150px;margin-bottom:.6rem;animation:dotBreathe 4.5s ease-in-out infinite}
.store-copy{max-width:560px;margin:0 auto;color:#ddd4f2}
.store-fine{
  margin-top:1.6rem;color:var(--muted);
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
}

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid rgba(167,139,250,.15);
  padding:2.5rem 1.5rem 3rem;
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  background:var(--panel-2);
}
.foot-mark{
  font-family:var(--display);
  font-weight:800;
  color:var(--cream);
  letter-spacing:.3em;
  font-size:1rem;
  margin-bottom:.5rem;
  text-shadow:0 0 14px rgba(249,168,212,.4);
}

/* ---------- VIDEO GALLERY ---------- */
.gallery-heading{
  font-family:var(--ff-head);font-weight:700;font-size:1.3rem;
  color:var(--pink);margin:2.5rem 0 1rem;text-align:center;
  text-shadow:0 0 12px rgba(249,168,212,.3);
}
.video-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.5rem;max-width:1100px;margin:0 auto;
}
.video-card{
  background:rgba(255,255,255,.04);border-radius:1rem;overflow:hidden;
  border:1px solid rgba(167,139,250,.15);
  transition:border-color .3s,box-shadow .3s;
}
.video-card:hover{
  border-color:rgba(103,232,249,.3);box-shadow:0 0 20px rgba(103,232,249,.1);
}
.video-card video{
  width:100%;aspect-ratio:9/16;object-fit:cover;background:#0d0a1f;
  display:block;
}
.video-card.wide video{aspect-ratio:16/9}
.video-card p{
  padding:.7rem 1rem;font-family:var(--ff-head);font-size:.9rem;
  color:var(--cream);text-align:center;margin:0;
}

/* ---------- MOTION / MOBILE ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media (max-width:640px){
  .hero-copy{padding-top:10vh}
  .scene{height:54%}
  .section{padding:4rem 1.1rem}
  .stat-row{gap:1.4rem}
}