/* ─────────────────────────────────────────────────────────
   KinderCub – Coming Soon  |  style.css
   ───────────────────────────────────────────────────────── */

/* ─── Reset & Tokens ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --yellow:   #FFD93D;
  --orange:   #FF6B35;
  --pink:     #FF4D8D;
  --purple:   #A855F7;
  --blue:     #3B82F6;
  --teal:     #06B6D4;
  --green:    #22C55E;
  --white:    #ffffff;
  --text-dark:#2D1B69;
  --text-mid: #6B5A8E;
  --text-soft:#9D8EBD;
}

html, body {
  height: 100%;
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
}

/* ─── Ambient Background Shapes ─────────────────────────── */
.bg-shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.13;
  animation: drift linear infinite;
}

.shape.s1 { width:200px; height:200px; background:var(--yellow);  top:-6%;    left:-4%;  animation-duration:20s; }
.shape.s2 { width:150px; height:150px; background:var(--pink);    top:8%;     right:-3%; animation-duration:17s; animation-delay:-5s; }
.shape.s3 { width:100px; height:100px; background:var(--purple);  top:55%;    left:0%;   animation-duration:24s; animation-delay:-10s; }
.shape.s4 { width:170px; height:170px; background:var(--teal);    bottom:-5%; right:12%; animation-duration:21s; animation-delay:-4s; }
.shape.s5 { width:80px;  height:80px;  background:var(--orange);  top:42%;    left:46%;  animation-duration:14s; animation-delay:-8s; }
.shape.s6 { width:120px; height:120px; background:var(--green);   bottom:10%; left:22%;  animation-duration:18s; animation-delay:-2s; }

@keyframes drift {
  0%   { transform: translateY(0px)   rotate(0deg)   scale(1); }
  33%  { transform: translateY(-28px) rotate(120deg) scale(1.05); }
  66%  { transform: translateY(14px)  rotate(240deg) scale(0.97); }
  100% { transform: translateY(0px)   rotate(360deg) scale(1); }
}

/* ─── Stars (global fixed layer) ────────────────────── */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  animation: twinkle ease-in-out infinite;
  opacity: 0;
  user-select: none;
}

/* Stars scoped inside the left panel */
.lp-star {
  position: absolute !important;
  z-index: 1;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%       { opacity: 1; transform: scale(1.2); }
}

/* ─── Floating Toy Icons (global fixed layer) ─────── */
.floating-icons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ficon {
  position: absolute;
  animation: floatIcon ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.1));
  user-select: none;
}

/* Icons scoped inside the left panel */
.lp-ficon {
  position: absolute !important;
  z-index: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.08));
}

@keyframes floatIcon {
  0%   { transform: translateY(0)     rotate(-5deg); }
  50%  { transform: translateY(-16px) rotate(6deg);  }
  100% { transform: translateY(0)     rotate(-5deg); }
}

/* ═══════════════════════════════════════════════
   PAGE — two-column full-height layout
═══════════════════════════════════════════════ */
.page {
  display: flex;
  height: 100vh;
  width: 100%;
}

/* ─── LEFT PANEL ─────────────────────────────── */
.left-panel {
  flex: 0 0 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, #FFF0F9 0%, #EDE9FE 100%);
  position: relative;
  overflow: hidden;
}

/* Soft radial glow */
.left-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(168,85,247,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.left-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 32px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
}

/* ── Hero image ─────────────────────────────── */
.hero-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2.5px dashed rgba(168,85,247,0.28);
  animation: spinRing 18s linear infinite;
}

@keyframes spinRing {
  to { transform: rotate(360deg); }
}

.hero-img {
  width: clamp(220px, 28vw, 380px);
  border-radius: 36px;
  filter: drop-shadow(0 24px 48px rgba(168,85,247,0.22));
  animation: heroFloat 5s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0);      }
  50%       { transform: translateY(-14px); }
}

/* ── Launch badge ───────────────────────────── */
.launch-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: #fff;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  padding: 12px 28px;
  border-radius: 50px;
  box-shadow: 0 10px 32px rgba(255,107,53,0.38), 0 0 0 3px rgba(255,255,255,0.4);
  animation: badgePulse 2.2s ease-in-out infinite;
  white-space: nowrap;
}

.badge-dot {
  width: 9px; height: 9px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: dotBlink 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1)    rotate(-1deg); box-shadow: 0 10px 32px rgba(255,107,53,0.38), 0 0 0 3px rgba(255,255,255,0.4); }
  50%       { transform: scale(1.04) rotate(1deg); box-shadow: 0 14px 40px rgba(255,107,53,0.52), 0 0 0 6px rgba(255,255,255,0.2); }
}

@keyframes dotBlink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.2; }
}

/* ── Left-panel decorative corner blobs ────────────── */
.lp-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.lp-blob.b1 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,77,141,0.18), transparent 70%);
  top: -40px; left: -40px;
  animation: blobPulse 6s ease-in-out infinite;
}
.lp-blob.b2 {
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(168,85,247,0.16), transparent 70%);
  bottom: -30px; right: -30px;
  animation: blobPulse 8s ease-in-out infinite reverse;
}
.lp-blob.b3 {
  width: 90px; height: 90px;
  background: radial-gradient(circle, rgba(6,182,212,0.18), transparent 70%);
  top: 50%; left: -20px;
  transform: translateY(-50%);
  animation: blobPulse 7s ease-in-out infinite 2s;
}

@keyframes blobPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%       { transform: scale(1.25); opacity: 1; }
}
.lp-blob.b3 { animation: blobPulseV 7s ease-in-out infinite 2s; }
@keyframes blobPulseV {
  0%, 100% { transform: translateY(-50%) scale(1);    opacity: 0.7; }
  50%       { transform: translateY(-50%) scale(1.25); opacity: 1; }
}

/* ── Left-panel floating mini chips ─────────────────── */
.lp-chip {
  position: absolute;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 50px;
  padding: 6px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-dark);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.lp-chip.c1 { top: 14%; left: 6%;  animation: chipFloat 4.5s ease-in-out infinite; }
.lp-chip.c2 { top: 14%; right: 6%; animation: chipFloat 5s   ease-in-out infinite 1s; }
.lp-chip.c3 { bottom: 28%; left: 5%;  animation: chipFloat 4s   ease-in-out infinite 0.5s; }
.lp-chip.c4 { bottom: 28%; right: 5%; animation: chipFloat 5.5s ease-in-out infinite 1.5s; }

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Left-panel progress bar ─────────────────────────── */
.lp-progress {
  width: 100%;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 6px 24px rgba(168,85,247,0.1);
}

.lp-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.lp-progress-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-dark);
}

.lp-progress-pct {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--pink), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lp-progress-track {
  height: 10px;
  background: rgba(0,0,0,0.07);
  border-radius: 40px;
  overflow: hidden;
  position: relative;
}

.lp-progress-fill {
  width: 0%;   /* set dynamically via JS from aria-valuenow */
  height: 100%;
  border-radius: 40px;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow));
  background-size: 200% 100%;
  animation: progressShine 2.5s linear infinite;
  position: relative;
}

.lp-progress-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
  animation: shimmer 1.6s ease-in-out infinite;
}

@keyframes progressShine {
  0%   { background-position: 200% center; }
  100% { background-position: 0%   center; }
}

@keyframes shimmer {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* ─── RIGHT PANEL ────────────────────────────── */
.right-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFAFE;
  overflow-y: auto;
  padding: 40px 32px;
}

/* Slim scrollbar */
.right-panel::-webkit-scrollbar { width: 4px; }
.right-panel::-webkit-scrollbar-track { background: transparent; }
.right-panel::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.22); border-radius: 4px; }

.right-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ─── Brand ──────────────────────────────────── */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.brand-logo {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  box-shadow: 0 10px 28px rgba(255,107,53,0.30), 0 0 0 4px #fff, 0 0 0 7px rgba(255,107,53,0.12);
  animation: logoBounce 2.4s ease-in-out infinite;
}

@keyframes logoBounce {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%       { transform: translateY(-8px) rotate(2.5deg); }
}

.brand-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
  line-height: 1.1;
}

.brand-tagline {
  font-size: 0.8rem;
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ─── Headline ───────────────────────────────── */
.headline { text-align: center; }

.headline-sub {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.05rem, 2.4vw, 1.9rem);
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 10px;
  white-space: nowrap;
}

.highlight {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.headline-body {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.75;
  font-weight: 600;
}

/* ─── Countdown Section ────────────────────────── */
.countdown-section {
  width: 100%;
}

.countdown-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.countdown-card {
  background: var(--white);
  border-radius: 18px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06), 0 2px 6px rgba(168,85,247,0.06);
  border: 1.5px solid rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.countdown-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(168,85,247,0.12);
}

.countdown-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.countdown-card:nth-child(1)::before { background: linear-gradient(90deg, var(--pink), var(--orange)); }
.countdown-card:nth-child(2)::before { background: linear-gradient(90deg, var(--purple), var(--blue)); }
.countdown-card:nth-child(3)::before { background: linear-gradient(90deg, var(--teal), var(--green)); }
.countdown-card:nth-child(4)::before { background: linear-gradient(90deg, var(--yellow), var(--orange)); }

.countdown-number {
  display: inline-block;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.8rem, 3.5vw, 2.3rem);
  line-height: 1.1;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.2s ease-out;
}

.pop-anim {
  animation: numPop 0.3s ease-out;
}

@keyframes numPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.countdown-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

/* ─── Categories ─────────────────────────────── */
.section-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cat-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border-radius: 50px;
  padding: 8px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-dark);
  box-shadow: 0 3px 14px rgba(0,0,0,0.07);
  cursor: default;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  z-index: 0;
  text-align: center;
  white-space: nowrap;
}

/* Gradient border on hover */
.cat-pill::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--pink), var(--purple), var(--teal));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s;
}

.cat-pill:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(168,85,247,0.18); }
.cat-pill:hover::before { opacity: 1; }
.cat-pill span { font-size: 1.1rem; }

/* ─── Social Links ───────────────────────────── */
.social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-link {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(0,0,0,0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}

.social-link:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.20);
}

.social-link.fb  { background: linear-gradient(135deg, #1877F2, #0C5DC7); }
.social-link.ig  { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
.social-link.tw  { background: linear-gradient(135deg, #1DA1F2, #0D8BD9); }
.social-link.yt  { background: linear-gradient(135deg, #FF0000, #C4302B); }

/* ─── Footer ─────────────────────────────────── */
.footer {
  font-size: 0.75rem;
  color: var(--text-soft);
  font-weight: 600;
  text-align: center;
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 900px)
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .left-panel  { flex: 0 0 42%; }
  .right-panel { padding: 28px 24px; }
  .right-inner { gap: 24px; max-width: 400px; }
  .brand-logo  { width: 64px; height: 64px; font-size: 2.2rem; border-radius: 18px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 640px)
   Stack: image top → content bottom
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  html, body { overflow: auto; }

  .page {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .left-panel {
    flex: none;
    width: 100%;
    padding: 40px 20px 32px;
  }

  .left-inner   { gap: 16px; padding: 0; max-width: 280px; }
  .hero-img     { width: clamp(160px, 50vw, 240px); border-radius: 28px; }
  .hero-ring    { inset: -10px; }
  .launch-badge { font-size: 0.88rem; padding: 9px 20px; }
  .lp-chip      { display: none; }
  .lp-progress  { padding: 12px 14px; }

  .right-panel {
    flex: 1;
    width: 100%;
    overflow-y: unset;
    padding: 32px 20px 48px;
    align-items: flex-start;
  }

  .right-inner { max-width: 100%; gap: 24px; }

  .brand     { align-items: flex-start; text-align: left; }
  .headline  { text-align: left; }
  .cat-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer    { text-align: left; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤ 380px)
═══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero-img     { width: 160px; }
  .brand-name   { font-size: 2rem; }
  .cat-pill     { font-size: 0.8rem; padding: 7px 13px; }
  .brand-logo   { width: 58px; height: 58px; font-size: 2rem; }
  .cat-grid     { grid-template-columns: repeat(2, 1fr); }
  .countdown-wrapper { gap: 8px; }
  .countdown-card { padding: 8px 4px; }
  .countdown-number { font-size: 1.4rem; }
}