/* ============================================================
   HOME.CSS — Homepage-only: floating hero bubbles + the
   scroll-synced "trickle" system that drips into project cards.
   Loaded only by index.html. Depends on tokens.css / main.css
   (project accent tokens, wobble filter, radii, spacing).
   ============================================================ */

/* ── shared bubble mark (logo circle) ─────────────────────── */
.bubble-mark {
  border-radius: 50%;
  /* Glossy water-drop sheen: a faint specular highlight tucked into the
     upper-left rim (the "light catching the bead" spot), kept small and
     soft so it doesn't wash out the mostly-transparent logo art sitting
     on top of the wash color. */
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.5) 0%, transparent 26%),
    var(--wash);
  color: var(--ink-c);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 8px 20px rgba(0,0,0,.12),
    inset 0 -6px 10px rgba(0,0,0,.08),
    inset 0 2px 4px rgba(255,255,255,.35);
}
.bubble-mark::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  filter: url(#wobble);
  opacity: .6;
  pointer-events: none;
}
.bubble-mark img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

/* The Sip Well logo file itself is a square badge (rounded corners baked
   into the PNG), unlike the other three project marks which are
   transparent icon cutouts — so at the shared 62%/contain sizing it reads
   as a square tile floating inside the round bubble. Fill the bubble and
   clip the image itself into a circle so only the round badge shows. */
.hero-bubble--sip img,
.trickle-track--sip .dripper img {
  width: 92%;
  height: 92%;
  border-radius: 50%;
  object-fit: cover;
}
.bubble-mark span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.05;
  text-align: center;
}

/* ── hero: resting, gently bobbing bubbles ────────────────── */
.hero__bubbles {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(44%, 520px);
  pointer-events: none;
  z-index: 1;
}

.hero .hero__inner { z-index: 2; }

.hero-bubble {
  position: absolute;
  animation: bob 6s ease-in-out infinite;
}
.hero-bubble--sip {
  width: 135px; height: 135px; right: 14%; top: 14%; animation-delay: 0s;
  --wash: var(--project-sip-well-bg); --ink-c: var(--project-sip-well);
}
.hero-bubble--scoop {
  width: 109px; height: 109px; right: 62%; top: 4%; animation-delay: .7s;
  --wash: var(--project-scoops-bg); --ink-c: var(--project-scoops);
}
.hero-bubble--muscle {
  width: 99px; height: 99px; right: 68%; top: 52%; animation-delay: 1.3s;
  --wash: var(--project-muscle-bg); --ink-c: var(--project-muscle);
}
.hero-bubble--skull {
  width: 120px; height: 120px; right: 8%; top: 58%; animation-delay: 1.9s;
  --wash: var(--project-skull-bg); --ink-c: var(--project-skull);
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-16px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bubble { animation: none; }
}
@media (max-width: 900px) {
  .hero__bubbles { display: none; }
}

/* ── section blob washes (behind hero / work / about / contact) */
.hero .blobwash.b1     { width: 280px; height: 280px; background: var(--project-blush);      top: -90px; right: -60px; }
.hero .blobwash.b2     { width: 220px; height: 220px; background: var(--project-sip-well);    bottom: -100px; right: 22%; }
.work-section .blobwash.b1  { width: 260px; height: 260px; background: var(--project-scoops); top: -60px; left: -80px; }
.about-strip .blobwash.b1   { width: 240px; height: 240px; background: var(--project-skull);  bottom: -90px; left: -70px; }
.contact-cta .blobwash.b1   { width: 260px; height: 260px; background: var(--accent);          top: -100px; left: 8%; opacity: .12; filter: blur(60px); }

/* ── trickle track: wraps each project-card ───────────────── */
.trickle-track {
  position: relative;
  overflow: visible;
}
.trickle-track--sip    { --wash: var(--project-sip-well-bg); --ink-c: var(--project-sip-well); }
.trickle-track--scoop  { --wash: var(--project-scoops-bg);   --ink-c: var(--project-scoops); }
.trickle-track--muscle { --wash: var(--project-muscle-bg);   --ink-c: var(--project-muscle); }
.trickle-track--skull  { --wash: var(--project-skull-bg);    --ink-c: var(--project-skull); }

.dripper {
  position: absolute;
  top: -70px;
  left: 34px;
  width: 81px;
  height: 81px;
  will-change: transform, opacity;
  z-index: 3;
}
.trickle-track--sip .dripper { width: 96px; height: 96px; top: -95px; }

/* Secondary row collapses to a single column under 900px (see main.css
   .work-grid__row breakpoint) — the wide desktop runway no longer exists
   between stacked cards, so give drips in that row a much shorter throw. */
@media (max-width: 900px) {
  .work-grid__row--secondary .dripper { top: -30px; }
}

.drip-trail {
  position: absolute;
  top: -60px;
  left: 12px;
  width: 56px;
  height: 130px;
  color: var(--ink-c);
  opacity: .7;
  pointer-events: none;
  filter: url(#smudge);
  z-index: 2;
}
.trickle-track--sip .drip-trail { top: -72px; height: 150px; }

@media (max-width: 900px) {
  .work-grid__row--secondary .drip-trail { top: -20px; }
}

.drip-trail svg { display: block; overflow: visible; }
.smudge-path { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; opacity: .5; }
.smudge-dab { fill: currentColor; opacity: .38; }

.bloom {
  position: absolute;
  left: 6px;
  top: -16px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ink-c) 0%, transparent 72%);
  filter: blur(16px);
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
  z-index: 1;
}

/* project-card is JS-driven (opacity/transform set per scroll frame);
   this initial state only applies when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .trickle-track .project-card {
    opacity: 0;
    will-change: transform, opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dripper, .drip-trail, .bloom { display: none; }
}