/* ============================================================
   LAYOUT.CSS
   Persistent chrome (navbar/footer) + marketing page sections
   (hero, moods, game grid, philosophy, support, about).
   ============================================================ */

/* ---------- NAVBAR (persistent) ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,239,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(51,54,59,0.06);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1120px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:'Quicksand',sans-serif;font-weight:700;font-size:19px;color:var(--ink);}
.brand-dot{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 30% 30%, var(--mint), var(--mint-deep));animation:pulse-dot 4s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{transform:scale(1);}50%{transform:scale(1.3);}}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:600;}
.nav-links a{text-decoration:none;color:var(--ink);opacity:0.75;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-support{background:var(--ink);color:var(--bg)!important;opacity:1!important;padding:9px 18px;border-radius:var(--radius-pill);font-size:14px;transition:background .2s var(--ease-bounce), transform .2s var(--ease-bounce);}
.nav-support:hover{background:var(--mint-deep);transform:translateY(-2px);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s;}
.nav-toggle span::before{transform:translateY(-6px);}
.nav-toggle span::after{transform:translateY(4px);}
@media(max-width:720px){
  .nav-links{position:fixed;top:64px;left:0;right:0;background:var(--bg);flex-direction:column;align-items:flex-start;gap:4px;padding:14px 20px 22px;border-bottom:1px solid rgba(51,54,59,0.08);transform:translateY(-8px);opacity:0;pointer-events:none;transition:.22s var(--ease);z-index:49;}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:10px 4px;width:100%;}
  .nav-toggle{display:block;}
}

/* ---------- HERO ---------- */
.hero{position:relative;padding:86px 0 70px;overflow:hidden;}
.hero-blob{
  position:absolute;top:50%;left:50%;
  width:1366px;height:560px;
  transform:translate(-50%,-52%);
  background:conic-gradient(from 120deg at 40% 35%, var(--mint), var(--sky), var(--violet), var(--coral), var(--sun), var(--mint));
  filter:blur(100px);
  opacity:0.5;
  border-radius:58% 42% 38% 62% / 58% 36% 64% 42%;
  animation:blob-breathe 7s ease-in-out infinite;
  z-index:0;
}
@keyframes blob-breathe{
  0%,100%{border-radius:58% 42% 38% 62% / 58% 36% 64% 42%; transform:translate(-50%,-52%) scale(0.92); opacity:0.46;}
  50%{border-radius:42% 58% 62% 38% / 40% 62% 38% 60%; transform:translate(-50%,-52%) scale(1.08); opacity:0.64;}
}
.floaties{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.floaty{position:absolute;bottom:-30px;border-radius:50%;background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.92), rgba(255,255,255,0.15) 55%, var(--c, var(--mint)) 100%);opacity:0;animation:drift-up linear infinite;}
.floaty:nth-child(1){--c:var(--mint);width:26px;height:26px;left:8%;animation-duration:9s;animation-delay:0s;}
.floaty:nth-child(2){--c:var(--coral);width:18px;height:18px;left:22%;animation-duration:11s;animation-delay:1.5s;}
.floaty:nth-child(3){--c:var(--sky);width:32px;height:32px;left:78%;animation-duration:8s;animation-delay:0.8s;}
.floaty:nth-child(4){--c:var(--sun);width:20px;height:20px;left:88%;animation-duration:10s;animation-delay:2.4s;}
.floaty:nth-child(5){--c:var(--violet);width:24px;height:24px;left:50%;animation-duration:12s;animation-delay:3s;}
.floaty:nth-child(6){--c:var(--coral);width:14px;height:14px;left:65%;animation-duration:9.5s;animation-delay:1s;}
@keyframes drift-up{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  12%{opacity:0.6;}
  88%{opacity:0.35;}
  100%{transform:translateY(-360px) translateX(16px);opacity:0;}
}
@media(max-width:640px){
  .floaty:nth-child(n+5){display:none;}
  .hero-blob{width:420px;height:420px;}
}
.hero-inner{position:relative;z-index:1;text-align:center;max-width:640px;margin:0 auto;}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:18px;}
.hero h1{font-size:clamp(42px,8vw,68px);line-height:1.02;}

/* ---------- ANIMATED BREAK DULU TITLE ---------- */
.break-title{
  font-family:'Fredoka', sans-serif;
  font-size:clamp(56px,10vw,92px)!important;
  font-weight:700;
  line-height:1;
  margin:16px 0;
  display:inline-block;
  letter-spacing:-0.03em;

  background:linear-gradient(
    90deg,
    var(--mint-deep),
    var(--sky-deep),
    var(--violet-deep),
    var(--coral-deep),
    var(--sun),
    var(--mint-deep)
  );
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  animation:break-title-animation 4s ease-in-out infinite;
  filter:drop-shadow(0 8px 16px rgba(51,54,59,0.10));
  will-change:transform, background-position;
}

@keyframes break-title-animation{
  0%,100%{
    transform:scale(1);
    background-position:0% 50%;
  }
  50%{
    transform:scale(1.08);
    background-position:100% 50%;
  }
}

.hero .tagline{font-size:clamp(17px,2.6vw,20px);color:var(--ink-soft);margin-top:16px;font-weight:500;}
.hero .prompt{font-size:16px;margin-top:10px;color:var(--ink);opacity:0.85;}
.cta-row{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.breathe-caption{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);opacity:0.7;height:16px;}

/* ---------- MOOD SELECTOR ---------- */
.moods{padding:0 0 44px;}
.moods h2{text-align:center;font-size:clamp(24px,3.4vw,30px);margin-bottom:22px;font-weight:600;}
.mood-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1.5px solid rgba(51,54,59,0.1);
  padding:11px 20px;border-radius:var(--radius-pill);
  font-size:14.5px;font-weight:600;cursor:pointer;
  transition:transform .25s var(--ease-bounce), border-color .2s, background .2s, color .2s;
}
.chip:hover{border-color:var(--mint-deep);transform:translateY(-2px) rotate(-1deg);}
.chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.chip.chip-pop{animation:chip-pop .38s var(--ease-bounce);}
@keyframes chip-pop{0%{transform:scale(1);}40%{transform:scale(0.86);}75%{transform:scale(1.08);}100%{transform:scale(1);}}

/* ---------- GAME GRID ---------- */
.section-head{text-align:center;max-width:520px;margin:0 auto 36px;}
.section-head h2{font-size:clamp(26px,3.6vw,32px);font-weight:600;}
.games{padding:44px 0 30px;}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:860px){.game-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.game-grid{grid-template-columns:1fr;}}
.card{
  background:var(--white);border-radius:var(--radius-lg);
  padding:26px 24px 24px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .4s var(--ease-bounce), box-shadow .3s var(--ease);
  text-decoration:none;color:inherit;
}
.card:hover{transform:translateY(-6px) rotate(-0.6deg);box-shadow:var(--shadow);}
.card:active{transform:translateY(-2px) scale(0.98);}
.card.hidden{display:none;}
.card.coming-soon{opacity:0.6;}
.card-icon{
  width:56px;height:56px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  transition:transform .35s var(--ease-bounce);
}
.card:hover .card-icon{transform:scale(1.12) rotate(-8deg);}
.card-title{font-family:'Quicksand',sans-serif;font-size:21px;font-weight:700;}
.card-desc{color:var(--ink-soft);font-size:14.5px;line-height:1.5;flex-grow:1;}
.card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.card-time{font-size:12.5px;color:var(--ink-soft);font-weight:600;}
.card-play{
  background:var(--bg-soft);padding:8px 16px;border-radius:var(--radius-pill);
  font-size:13.5px;font-weight:700;
  transition:background .2s, color .2s;
}
.card:hover .card-play{background:var(--mint);color:var(--ink);}
.icon-sky{background:linear-gradient(135deg, var(--sky), #eaf5fc);}
.icon-peach{background:linear-gradient(135deg, var(--coral), #ffe6d5);}
.icon-lav{background:linear-gradient(135deg, var(--violet), #ece7fb);}
.icon-sage{background:linear-gradient(135deg, var(--mint), #e2f5ec);}
.icon-rose{background:linear-gradient(135deg, var(--coral), var(--sun));}
.icon-amber{background:linear-gradient(135deg, var(--sun), #fff0c9);}
.icon-cream{background:linear-gradient(135deg, #fdf3e2, var(--sun));}
.icon-dusty{background:linear-gradient(135deg, var(--coral), #f0ddc8);}
.card-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--mint-deep);background:var(--bg-soft);padding:4px 11px;border-radius:var(--radius-pill);}
.surprise-row{text-align:center;margin-top:34px;}

/* ---------- PHILOSOPHY ---------- */
.philosophy{padding:80px 0;background:var(--bg-soft);margin-top:64px;position:relative;}
.philosophy-inner{max-width:640px;margin:0 auto;text-align:center;}
.philosophy h2{font-size:clamp(26px,4vw,36px);line-height:1.35;font-weight:600;}
.philosophy p{margin-top:18px;color:var(--ink-soft);font-size:16px;line-height:1.7;}
.rule{margin-top:26px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;font-weight:700;color:var(--mint-deep);}

/* ---------- SUPPORT ---------- */
.support{padding:70px 0;}
.support-card{
  max-width:640px;margin:0 auto;background:var(--white);
  border-radius:var(--radius-lg);padding:44px 36px;text-align:center;
  box-shadow:var(--shadow-sm);
}
.support-card h3{font-size:24px;margin-bottom:10px;}
.support-card p{color:var(--ink-soft);font-size:15px;line-height:1.6;max-width:420px;margin:0 auto 22px;}

/* ---------- FOOTER (persistent) ---------- */
footer.site-footer{padding:44px 0 34px;border-top:1px solid rgba(51,54,59,0.08);}
.footer-inner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;}
.footer-brand{display:flex;flex-direction:column;gap:4px;}
.footer-brand .brand{font-size:17px;}
.footer-tag{font-size:13px;color:var(--ink-soft);}
.footer-links{display:flex;gap:22px;list-style:none;padding:0;margin:0;font-size:14px;font-weight:600;}
.footer-links a{text-decoration:none;opacity:0.75;transition:opacity .2s;}
.footer-links a:hover{opacity:1;}
.copyright{width:100%;text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:26px;}

/* ---------- ABOUT PAGE ---------- */
.page{padding:64px 0 90px;}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;text-decoration:none;color:var(--ink-soft);margin-bottom:30px;transition:transform .2s var(--ease-bounce), color .2s;}
.back-link:hover{color:var(--ink);transform:translateX(-3px);}
.about-hero h1{font-size:clamp(32px,5vw,46px);max-width:560px;}
.about-body{max-width:600px;margin-top:26px;color:var(--ink-soft);font-size:16px;line-height:1.8;}
.about-body strong{color:var(--ink);}
.about-support{margin-top:40px;background:var(--bg-soft);border-radius:var(--radius-lg);padding:32px;max-width:600px;}

/* ---------- 404 ---------- */
.not-found{padding:100px 0;text-align:center;}
.not-found h1{font-size:64px;}
.not-found p{color:var(--ink-soft);margin:12px 0 24px;}