/* =====================================================================
   Bella's Lil Laboratory  —  public site
   style.css  ·  shared visual system (lab theme, leaned in)
   ===================================================================== */

:root {
  /* brand palette */
  --pink:     #ef5093;
  --pink-dk:  #d63b7c;
  --yellow:   #ffda25;
  --cream:    #fff8ec;
  --blush:    #ffe0ec;
  --lavender: #e6def7;
  --mint:     #d6f5e3;
  --plum:     #6b4673;
  --ink:      #3a2b40;
  --glass:    #cfeaf2;

  --shadow: 0 8px 0 rgba(58, 43, 64, .12);
  --soft:   0 10px 30px rgba(107, 70, 115, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  /* faint lab-paper grid */
  background-image:
    linear-gradient(rgba(107,70,115,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,70,115,.045) 1px, transparent 1px);
  background-size: 26px 26px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---- typography helpers ---- */
.display { font-family: 'Fredoka', sans-serif; font-weight: 600; line-height: 1.05; }
.label   { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .14em; }
.accent  { color: var(--pink); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 5vw, 56px);
  background: rgba(255, 248, 236, .82);
  backdrop-filter: blur(8px);
  border-bottom: 2px dashed rgba(107, 70, 115, .18);
}
.brand-mark {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 19px; color: var(--plum); text-decoration: none;
}
.brand-mark .flask-mini {
  width: 26px; height: 26px; flex: none;
}
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a {
  font-family: 'Space Mono', monospace; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--plum); text-decoration: none;
  padding: 8px 13px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--blush); color: var(--pink-dk); }
.nav-links a.soon { opacity: .5; }
.nav-links a.soon::after {
  content: "soon"; font-size: 8px; vertical-align: super;
  margin-left: 4px; color: var(--pink);
}

/* =====================================================================
   HERO  ·  the lab door
   ===================================================================== */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 70px 20px 90px;
  overflow: hidden;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lavender); color: var(--plum);
  padding: 7px 16px; border-radius: 999px;
  font-family: 'Space Mono', monospace; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .16em;
  border: 1.5px solid rgba(107,70,115,.18);
  margin-bottom: 26px;
}
.hero-tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink); animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.7)} }

.hero h1 {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: clamp(40px, 9vw, 92px); color: var(--plum);
  letter-spacing: -.01em;
}
.hero h1 .lil {
  display: inline-block; color: var(--pink);
  transform: rotate(-3deg);
}
.hero-sub {
  max-width: 580px; margin: 24px auto 0;
  font-size: clamp(16px, 2.4vw, 20px); color: var(--ink);
}
.hero-sub b { color: var(--pink-dk); }

.does-everything {
  margin-top: 34px;
  font-family: 'Space Mono', monospace;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--plum);
  border: 2px dashed var(--pink); border-radius: 14px;
  padding: 12px 22px; background: rgba(255,255,255,.5);
  transform: rotate(-1.2deg);
}

/* hero flask centrepiece */
.flask-stage {
  position: relative; width: 150px; height: 170px; margin-bottom: 8px;
}
.bubble {
  position: absolute; bottom: 54px; left: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(239, 80, 147, .55);
  animation: rise 3.2s ease-in infinite;
}
.bubble:nth-child(2){ left: 42%; width: 8px;  animation-delay: .6s;  background: rgba(255,218,37,.7); }
.bubble:nth-child(3){ left: 58%; width: 10px; animation-delay: 1.2s; background: rgba(107,70,115,.4); }
.bubble:nth-child(4){ left: 50%; width: 7px;  animation-delay: 1.9s; }
@keyframes rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-92px) scale(1); opacity: 0; }
}

/* floating ambient blobs */
.ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ambient span {
  position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5;
  animation: float 9s ease-in-out infinite;
}
.ambient span:nth-child(1){ width:90px;height:90px;background:var(--blush);   top:14%; left:10%; }
.ambient span:nth-child(2){ width:60px;height:60px;background:var(--mint);    top:24%; right:14%; animation-delay:1.5s; }
.ambient span:nth-child(3){ width:120px;height:120px;background:var(--lavender);bottom:16%;left:16%; animation-delay:3s; }
.ambient span:nth-child(4){ width:50px;height:50px;background:var(--yellow);  bottom:22%;right:20%; opacity:.4; animation-delay:.8s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-22px)} }

/* =====================================================================
   SECTIONS
   ===================================================================== */
.section { padding: clamp(56px, 9vw, 110px) clamp(18px, 6vw, 80px); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.section-head .label { color: var(--pink); font-size: 12.5px; }
.section-head h2 {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: clamp(28px, 5vw, 46px); color: var(--plum); margin-top: 8px;
}
.section-head p { margin-top: 14px; font-size: 17px; }

/* ---- the heart / manifesto ---- */
.heart { background: var(--plum); color: var(--cream); position: relative; }
.heart .section-head h2 { color: var(--yellow); }
.heart-lines {
  max-width: 640px; margin: 0 auto; text-align: center;
  font-size: clamp(20px, 3.4vw, 30px);
  font-family: 'Fredoka', sans-serif; font-weight: 400; line-height: 1.45;
}
.heart-lines b { color: var(--pink); font-weight: 600; }
.heart-foot {
  text-align: center; margin-top: 34px;
  font-family: 'Space Mono', monospace; font-size: 13px;
  letter-spacing: .1em; color: rgba(255,248,236,.7);
}

/* =====================================================================
   SPECIMENS  ·  the cast as jars
   ===================================================================== */
.shelf {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px);
  justify-content: center; align-items: flex-end;
  max-width: 1000px; margin: 0 auto;
  padding-bottom: 24px;
  position: relative;
}
.shelf::after { /* the wooden shelf line */
  content: ""; position: absolute; left: -4%; right: -4%; bottom: 0;
  height: 14px; border-radius: 8px;
  background: linear-gradient(var(--pink), var(--pink-dk));
  box-shadow: 0 8px 0 rgba(107,70,115,.18);
}
.jar { width: 200px; display: flex; flex-direction: column; align-items: center; }

.jar-glass {
  position: relative; width: 150px; height: 200px;
  border: 3px solid rgba(107,70,115,.25);
  border-top: none;
  border-radius: 18px 18px 50px 50px / 14px 14px 60px 60px;
  background: linear-gradient(180deg, rgba(207,234,242,.35), rgba(207,234,242,.6));
  box-shadow: inset 0 -22px 30px rgba(255,255,255,.5), var(--soft);
  overflow: hidden;
  transition: transform .25s ease;
}
.jar:hover .jar-glass { transform: translateY(-8px) rotate(-1deg); }
.jar-lid {
  width: 162px; height: 22px; margin-bottom: -3px; z-index: 2;
  border-radius: 8px;
  background: linear-gradient(var(--lavender), #cdbff0);
  border: 3px solid rgba(107,70,115,.25);
  box-shadow: var(--shadow);
}
.jar-liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: rgba(239,80,147,.16);
  border-radius: 0 0 50px 50px / 0 0 60px 60px;
}

/* character blobs (placeholders until art arrives) */
.critter { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); }

/* mouse */
.c-mouse .body { width: 64px; height: 58px; background: var(--pink); border-radius: 50%; position: relative; box-shadow: inset -6px -8px 0 rgba(0,0,0,.06); }
.c-mouse .body::before, .c-mouse .body::after {
  content:""; position:absolute; top:-14px; width:30px; height:30px;
  background: var(--pink); border-radius:50%; box-shadow: inset 0 0 0 6px var(--blush);
}
.c-mouse .body::before{ left:-6px; } .c-mouse .body::after{ right:-6px; }
.c-mouse .eye { position:absolute; top:24px; width:7px; height:7px; background:var(--ink); border-radius:50%; }
.c-mouse .eye.l{ left:18px;} .c-mouse .eye.r{ right:18px; }

/* robot */
.c-bot .body { width: 60px; height: 56px; background: var(--yellow); border-radius: 14px; position: relative; box-shadow: inset -6px -8px 0 rgba(0,0,0,.07); }
.c-bot .body::before { content:""; position:absolute; top:-18px; left:50%; transform:translateX(-50%); width:4px; height:14px; background:var(--plum); }
.c-bot .body::after  { content:""; position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:10px; height:10px; background:var(--pink); border-radius:50%; }
.c-bot .eye { position:absolute; top:18px; width:12px; height:12px; background:var(--mint); border:2px solid var(--ink); border-radius:50%; }
.c-bot .eye.l{ left:12px;} .c-bot .eye.r{ right:12px; }

/* owl */
.c-owl .body { width: 60px; height: 66px; background: #c0445a; border-radius: 50% 50% 46% 46%; position: relative; box-shadow: inset -6px -8px 0 rgba(0,0,0,.08); }
.c-owl .body::before { content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:12px solid #8f2f42; } /* tuft */
.c-owl .eye { position:absolute; top:14px; width:20px; height:20px; background:#fff; border-radius:50%; }
.c-owl .eye::after { content:""; position:absolute; top:5px; left:5px; width:9px; height:9px; background:var(--ink); border-radius:50%; }
.c-owl .eye.l{ left:6px;} .c-owl .eye.r{ right:6px; }
.c-owl .beak { position:absolute; top:34px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid var(--yellow); }
.c-owl .wing { position:absolute; bottom:6px; right:-2px; width:14px; height:22px; background:#8f2f42; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; } /* the small wing */

/* specimen label tag */
.jar-tag {
  margin-top: 18px; text-align: center;
  background: #fff; padding: 12px 14px 14px; width: 184px;
  border-radius: 10px; box-shadow: var(--shadow);
  border: 1.5px solid rgba(107,70,115,.12);
  transform: rotate(-1.5deg);
  position: relative;
}
.jar:nth-child(even) .jar-tag { transform: rotate(1.5deg); }
.jar-tag::before { /* tape */
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:46px; height:16px; background: rgba(255,218,37,.7);
  border:1px dashed rgba(107,70,115,.25);
}
.jar-tag .sid { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.12em; color:var(--pink); text-transform:uppercase; }
.jar-tag .name { font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px; color:var(--plum); margin:2px 0 6px; }
.jar-tag .feeling { font-size:13.5px; color:var(--ink); line-height:1.45; }
.jar-tag .pending {
  margin-top:10px; display:inline-block;
  font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--plum);
  background: var(--mint); padding:3px 8px; border-radius:999px;
}

.shelf-cta { text-align:center; margin-top:54px; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Fredoka',sans-serif; font-weight:500; font-size:16px;
  padding:13px 26px; border-radius:999px; border:none; cursor:pointer;
  text-decoration:none; transition: transform .12s, box-shadow .12s;
}
.btn-primary { background:var(--pink); color:#fff; box-shadow:0 5px 0 var(--pink-dk); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 7px 0 var(--pink-dk); }
.btn-primary:active { transform:translateY(2px); box-shadow:0 3px 0 var(--pink-dk); }
.btn-ghost { background:#fff; color:var(--plum); box-shadow:var(--shadow); border:2px solid rgba(107,70,115,.15); }
.btn-ghost:hover { transform:translateY(-2px); }
.btn .soon-pill { font-family:'Space Mono',monospace; font-size:9px; background:var(--yellow); color:var(--ink); padding:2px 7px; border-radius:999px; letter-spacing:.08em; }

/* =====================================================================
   FOOTER  ·  the quiet shelf
   ===================================================================== */
.foot {
  background: var(--blush);
  border-top: 2px dashed rgba(107,70,115,.2);
  padding: clamp(48px,7vw,80px) 20px 40px; text-align:center;
}
.foot h3 { font-family:'Fredoka',sans-serif; font-weight:600; font-size:26px; color:var(--plum); }
.foot p { max-width:460px; margin:12px auto 22px; color:var(--ink); }
.foot-links { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:34px; }
.foot-note {
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--plum); opacity:.65;
}
.build-note {
  display:inline-block; margin-bottom:26px;
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.08em;
  color:var(--plum); background:rgba(255,255,255,.6);
  padding:8px 16px; border-radius:999px; border:1.5px dashed rgba(107,70,115,.3);
}

@media (max-width: 560px) {
  .nav-links a { padding:7px 9px; font-size:11px; }
  .jar { width: 46%; }
}