/* =============================================
   BLOOMING BUDZZ — JOURNEY MAP
   ============================================= */

/* ── SECTION ── */
.journey-section {
  position: relative;
  overflow: hidden;
  padding-bottom: 60px;
}

/* ── BACKGROUND ── */
.jny-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.jny-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.03) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  z-index: 1;
}

[data-program="playgroup"]  .jny-bg { background: linear-gradient(150deg,#fff9f0 0%,#fff3e0 45%,#ffeaf3 100%); }
[data-program="nursery"]    .jny-bg { background: linear-gradient(150deg,#fdf4fb 0%,#f3e7ff 45%,#e8f0ff 100%); }
[data-program="lower-kg"]   .jny-bg { background: linear-gradient(150deg,#f0f8ff 0%,#e8f5fe 45%,#e0fff7 100%); }
[data-program="upper-kg"]   .jny-bg { background: linear-gradient(150deg,#f5f0ff 0%,#ede7ff 45%,#fff8e1 100%); }
[data-program="daycare"]    .jny-bg { background: linear-gradient(150deg,#fdf4fb 0%,#e8f0ff 45%,#fff9f0 100%); }

/* Decorative blobs */
.jny-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}
[data-program="playgroup"]  .jny-blob-1 { width:400px;height:400px;top:-80px;left:-80px;background:#ffcc80; }
[data-program="playgroup"]  .jny-blob-2 { width:320px;height:320px;bottom:-60px;right:-60px;background:#f48fb1; }
[data-program="nursery"]    .jny-blob-1 { width:420px;height:420px;top:-80px;right:-80px;background:#ce93d8; }
[data-program="nursery"]    .jny-blob-2 { width:300px;height:300px;bottom:-60px;left:-60px;background:#f48fb1; }
[data-program="lower-kg"]   .jny-blob-1 { width:380px;height:380px;top:-80px;left:-80px;background:#81d4fa; }
[data-program="lower-kg"]   .jny-blob-2 { width:340px;height:340px;bottom:-60px;right:-60px;background:#80cbc4; }
[data-program="upper-kg"]   .jny-blob-1 { width:400px;height:400px;top:-80px;right:-80px;background:#b39ddb; }
[data-program="upper-kg"]   .jny-blob-2 { width:360px;height:360px;bottom:-60px;left:-60px;background:#ffe082; }
[data-program="daycare"]    .jny-blob-1 { width:420px;height:420px;top:-80px;left:-80px;background:#ce93d8; }
[data-program="daycare"]    .jny-blob-2 { width:300px;height:300px;bottom:-60px;right:-60px;background:#90caf9; }

/* ── WAVE DIVIDERS ── */
.jny-wave-top, .jny-wave-bottom {
  position: absolute;
  left: 0; right: 0;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.jny-wave-top  { top: -1px; }
.jny-wave-bottom { bottom: -1px; }
.jny-wave-top svg, .jny-wave-bottom svg { display: block; width: 100%; height: 56px; }

/* ── FLOATING EMOJI ELEMENTS ── */
.jny-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.jny-float {
  position: absolute;
  user-select: none;
  animation: jny-drift 5s ease-in-out infinite;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.1));
  will-change: transform;
}
@keyframes jny-drift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-18px) rotate(7deg); }
  70%      { transform: translateY(-8px) rotate(-4deg); }
}

/* ── HEADER ── */
.jny-header {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 88px 24px 54px;
  max-width: 700px;
  margin: 0 auto;
}
.jny-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.3rem);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.18;
  margin-bottom: 14px;
}
.jny-header h2 .jny-accent { color: var(--coral); }
.jny-header p { color: var(--body); font-size: 1.05rem; line-height: 1.78; }

/* ── MAP WRAP ── */
.jny-map-wrap {
  position: relative;
  z-index: 4;
  max-width: 1060px;
  margin: 0 auto;
  padding: 10px 40px 80px;
}


/* ── STOPS CONTAINER ── */
.jny-stops { display: flex; flex-direction: column; position: relative; z-index: 2; }

/* ── INDIVIDUAL STOP ── */
.jny-stop {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 48px 0;
}
.jny-stop:nth-child(even) { flex-direction: row-reverse; }

/* ── NODE ── */
.jny-stop-node {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jny-bubble {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  position: relative;
  z-index: 2;
  cursor: default;
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease;
  animation: jny-bob 4s ease-in-out infinite;
}
.jny-bubble:hover { transform: scale(1.18) translateY(-5px) !important; animation-play-state: paused; }

@keyframes jny-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* stagger bobs */
.jny-stop:nth-child(1)  .jny-bubble { animation-delay:   0s; }
.jny-stop:nth-child(2)  .jny-bubble { animation-delay: .5s; }
.jny-stop:nth-child(3)  .jny-bubble { animation-delay: 1s; }
.jny-stop:nth-child(4)  .jny-bubble { animation-delay: 1.5s; }
.jny-stop:nth-child(5)  .jny-bubble { animation-delay: 2s; }
.jny-stop:nth-child(6)  .jny-bubble { animation-delay: 2.5s; }
.jny-stop:nth-child(7)  .jny-bubble { animation-delay: 3s; }
.jny-stop:nth-child(8)  .jny-bubble { animation-delay: 3.5s; }
.jny-stop:nth-child(9)  .jny-bubble { animation-delay: 4s; }

/* Pulse ring around bubble */
.jny-bubble::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  animation: jny-ring 3s ease-out infinite;
  opacity: 0;
}
@keyframes jny-ring {
  0%   { transform: scale(.85); opacity: .5; }
  100% { transform: scale(1.6);  opacity: 0; }
}
.jny-stop:nth-child(1)  .jny-bubble::after { animation-delay:   0s; }
.jny-stop:nth-child(2)  .jny-bubble::after { animation-delay: .5s; }
.jny-stop:nth-child(3)  .jny-bubble::after { animation-delay: 1s; }
.jny-stop:nth-child(4)  .jny-bubble::after { animation-delay: 1.5s; }
.jny-stop:nth-child(5)  .jny-bubble::after { animation-delay: 2s; }
.jny-stop:nth-child(6)  .jny-bubble::after { animation-delay: 2.5s; }
.jny-stop:nth-child(7)  .jny-bubble::after { animation-delay: 3s; }
.jny-stop:nth-child(8)  .jny-bubble::after { animation-delay: 3.5s; }
.jny-stop:nth-child(9)  .jny-bubble::after { animation-delay: 4s; }

/* Program bubble gradients + ring colors */
[data-program="playgroup"]  .jny-bubble { background:linear-gradient(135deg,#ff9f43,#ffd32a); box-shadow:0 12px 36px rgba(255,159,67,.38); }
[data-program="playgroup"]  .jny-bubble::after { border-color:#ff9f43; }
[data-program="nursery"]    .jny-bubble { background:linear-gradient(135deg,#ea479b,#b11ca2); box-shadow:0 12px 36px rgba(234,71,155,.38); }
[data-program="nursery"]    .jny-bubble::after { border-color:#ea479b; }
[data-program="lower-kg"]   .jny-bubble { background:linear-gradient(135deg,#3678bd,#26a69a); box-shadow:0 12px 36px rgba(54,120,189,.38); }
[data-program="lower-kg"]   .jny-bubble::after { border-color:#3678bd; }
[data-program="upper-kg"]   .jny-bubble { background:linear-gradient(135deg,#6c5ce7,#a855f7); box-shadow:0 12px 36px rgba(108,92,231,.38); }
[data-program="upper-kg"]   .jny-bubble::after { border-color:#6c5ce7; }
[data-program="daycare"]    .jny-bubble { background:linear-gradient(135deg,#b11ca2,#74b9ff); box-shadow:0 12px 36px rgba(177,28,162,.38); }
[data-program="daycare"]    .jny-bubble::after { border-color:#b11ca2; }

/* ── CARD ── */
.jny-card {
  flex: 1;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 24px;
  padding: 26px 30px;
  box-shadow: 0 8px 40px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.75);
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease;
}
.jny-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 22px 64px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Top accent stripe */
.jny-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 24px 24px 0 0;
}
/* Background circle accent */
.jny-card::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  opacity: .055;
  pointer-events: none;
}

[data-program="playgroup"]  .jny-card::before { background:linear-gradient(90deg,#ff9f43,#ffd32a); }
[data-program="playgroup"]  .jny-card::after  { background:#ff9f43; }
[data-program="nursery"]    .jny-card::before { background:linear-gradient(90deg,#ea479b,#b11ca2); }
[data-program="nursery"]    .jny-card::after  { background:#ea479b; }
[data-program="lower-kg"]   .jny-card::before { background:linear-gradient(90deg,#3678bd,#26a69a); }
[data-program="lower-kg"]   .jny-card::after  { background:#3678bd; }
[data-program="upper-kg"]   .jny-card::before { background:linear-gradient(90deg,#6c5ce7,#fdcb6e); }
[data-program="upper-kg"]   .jny-card::after  { background:#6c5ce7; }
[data-program="daycare"]    .jny-card::before { background:linear-gradient(90deg,#b11ca2,#74b9ff); }
[data-program="daycare"]    .jny-card::after  { background:#b11ca2; }

/* ── TIME CHIP ── */
.jny-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 11px;
}
[data-program="playgroup"]  .jny-chip { background:linear-gradient(135deg,#ff9f43,#ffcb69); }
[data-program="nursery"]    .jny-chip { background:linear-gradient(135deg,#ea479b,#b11ca2); }
[data-program="lower-kg"]   .jny-chip { background:linear-gradient(135deg,#3678bd,#26a69a); }
[data-program="upper-kg"]   .jny-chip { background:linear-gradient(135deg,#6c5ce7,#a855f7); }
[data-program="daycare"]    .jny-chip { background:linear-gradient(135deg,#b11ca2,#74b9ff); }

/* ── STOP TITLE ── */
.jny-stop-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.13rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 8px;
}

/* ── STOP DESC ── */
.jny-stop-desc {
  font-size: .88rem;
  color: var(--body);
  line-height: 1.68;
  margin-bottom: 14px;
}

/* ── STOP TAG ── */
.jny-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(0,0,0,.05);
  color: var(--dark);
}

/* ── ENTRANCE ANIMATIONS — scale + fade from below ── */
.jny-stop .jny-card,
.jny-stop .jny-stop-node {
  opacity: 0;
  transform: scale(0.86) translateY(32px);
  transition: opacity 0.52s ease, transform 0.52s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.jny-stop .jny-stop-node {
  transition-delay: 0.1s;
}

.jny-stop.jny-in .jny-card,
.jny-stop.jny-in .jny-stop-node {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .jny-map-wrap { padding: 10px 24px 60px; }

  /* Collapse to single-direction on tablets */
  .jny-stop,
  .jny-stop:nth-child(even) {
    flex-direction: row;
    gap: 20px;
  }
  /* Hide path on smaller screens */
  .jny-path-svg { display: none; }

  /* Override entrance transforms to come from left for all */
  .jny-stop:nth-child(even) .jny-card { transform:translateX(44px); }
  .jny-stop.jny-in .jny-card { transform:translateX(0); }

  .jny-bubble { width: 64px; height: 64px; font-size: 1.7rem; }
}

@media (max-width: 600px) {
  .jny-header { padding: 64px 20px 40px; }
  .jny-card { padding: 18px 20px; border-radius: 18px; }
  .jny-stop-title { font-size: 1rem; }
  .jny-stop-desc { font-size: .835rem; }
  .jny-bubble { width: 56px; height: 56px; font-size: 1.5rem; }
  .jny-stop { gap: 14px; padding: 22px 0; }
}