/* ══════════════════════════════════════════════════════════════════
   BIBBLI WORLD — Mascot system, section atmospheres, wave dividers
   ══════════════════════════════════════════════════════════════════

   MASCOT IMAGES:
   Place transparent PNG files in images/mascots/ using these names:
     sam.png      rusty.png      shelly.png      coco.png
     sam-teaching.png   (Sam with pointer stick + students)
     rusty-dancing.png  (Rusty dancing fox)
     coco-handstand.png (Coco upside-down celebration)

   TEMPORARY: mix-blend-mode:multiply is applied to .mascot-img so
   white-background PNGs look transparent on light sections.
   Remove the mix-blend-mode line once you have transparent PNGs.

   Per-section mascot sizes are set with data-size="lg|md|sm" attrs.
   ══════════════════════════════════════════════════════════════════ */

/* ── CUSTOM PROPERTY OVERRIDES ────────────────────────────────── */
:root {
  --sam-primary:    #E8A020;
  --sam-secondary:  #F5C430;
  --sam-dark:       #C07010;
  --rusty-primary:  #FF6B35;
  --rusty-secondary:#FF9E7D;
  --rusty-dark:     #C94010;
  --shelly-primary: #5DC03D;
  --shelly-secondary:#8ED864;
  --shelly-dark:    #2E6A18;
  --coco-primary:   #9C27B0;
  --coco-secondary: #CE93D8;
  --coco-dark:      #6A1B9A;
  --world-wave-h:   56px;
}

/* ── SECTION POSITION CONTEXT ─────────────────────────────────── */
.section { position: relative; overflow: visible; }

/* ── WAVE DIVIDERS ────────────────────────────────────────────── */
.world-wave {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  display: block;
  /* Remove any default divider styles */
  height: auto !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
}
.world-wave svg { display: block; width: 100%; }

/* ── MASCOT SYSTEM ────────────────────────────────────────────── */
.mascot-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* Size variants */
.mascot-wrap[data-size="lg"]  { width: 200px; }
.mascot-wrap[data-size="md"]  { width: 140px; }
.mascot-wrap[data-size="sm"]  { width:  90px; }
.mascot-wrap[data-size="xs"]  { width:  60px; }
/* Override for landscape/wide scene images */
.mascot-wrap[data-wide]       { width: 300px; max-width: 45vw; }

/* ── MASCOT IMAGES ──────────────────────────────────────────────── */
/* The actual <img> tag inside .mascot-wrap */
.mascot-img {
  display: block;
  width: 100%;
  height: auto;
  /* Backgrounds are now transparent — no blend mode needed */
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.15));
}


/* ── SPEECH BUBBLES ───────────────────────────────────────────── */
.speech-bubble {
  background: white;
  border: 2.5px solid #E8D9B0;
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.35;
  max-width: 180px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,.07);
  animation: sb-appear .5s cubic-bezier(.34,1.4,.64,1) both;
  animation-delay: .6s;
  opacity: 0;
  animation-fill-mode: forwards;
}
@keyframes sb-appear {
  from { opacity: 0; transform: scale(.85) translateY(6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Tail pointing up (bubble is below mascot) */
.speech-bubble::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: #E8D9B0;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: white;
}
/* Tail on left side */
.speech-bubble.sb-right::before { top: 50%; left: -12px; transform: translateY(-50%); border: 7px solid transparent; border-right-color: #E8D9B0; }
.speech-bubble.sb-right::after  { top: 50%; left: -8px;  transform: translateY(-50%); border: 6px solid transparent; border-right-color: white; }
/* Tail on right side */
.speech-bubble.sb-left::before { top: 50%; right: -12px; left: auto; transform: translateY(-50%); border: 7px solid transparent; border-left-color: #E8D9B0; }
.speech-bubble.sb-left::after  { top: 50%; right: -8px;  left: auto; transform: translateY(-50%); border: 6px solid transparent; border-left-color: white; }

/* ── ANIMATIONS ───────────────────────────────────────────────── */
@keyframes world-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes world-wave-hand {
  0%, 100% { transform-origin: bottom center; transform: rotate(0deg); }
  30%       { transform-origin: bottom center; transform: rotate(-18deg); }
  60%       { transform-origin: bottom center; transform: rotate(12deg); }
}
@keyframes world-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%       { transform: translateY(-14px) scale(1.03); }
  70%       { transform: translateY(-4px) scale(.99); }
}
@keyframes world-spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes world-pulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%       { transform: scale(1.08); opacity: 1; }
}

.float       { animation: world-float       3.2s ease-in-out infinite; }
.float-slow  { animation: world-float       4.5s ease-in-out infinite; }
.float-delay { animation: world-float       3.2s ease-in-out .9s infinite; }
.wave-hand   { animation: world-wave-hand   1.4s ease-in-out 1.2s 4 both; }
.bounce      { animation: world-bounce      2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .float, .float-slow, .float-delay, .wave-hand, .bounce,
  .world-blob, .world-star, .world-dot { animation: none !important; }
}

/* ── FLOATING DECORATIONS ─────────────────────────────────────── */
.world-blob {
  position: absolute;
  border-radius: 60% 40% 55% 45%;
  pointer-events: none;
  z-index: 0;
  animation: world-float 5s ease-in-out infinite;
}
.world-star {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: world-spin-slow 9s linear infinite;
}
.world-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: world-pulse 3s ease-in-out infinite;
}
.world-squiggle {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* ── MASCOT SCENE LAYOUT HELPERS ──────────────────────────────── */

/* Side-by-side: mascot + content */
.mascot-intro {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 1.6rem;
}
.mascot-intro .mascot-wrap { flex-shrink: 0; }
.mascot-intro .mascot-text { flex: 1; }

/* Edge peekers — only visible on wide screens */
.mascot-edge {
  position: absolute;
  bottom: 20px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mascot-edge.left  { left:  calc(50% - 580px); }
.mascot-edge.right { right: calc(50% - 580px); }

/* ── SECTION: VIDEOS (Rusty) ──────────────────────────────────── */
#videos {
  padding-top: 2rem;
}
.rusty-intro {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 2;
}
.rusty-intro .mascot-wrap { flex-shrink: 0; }
.rusty-intro .section-text { flex: 1; }
.rusty-intro .section-head { margin-bottom: .6rem; }

/* ── SECTION: TESTIMONIALS (Shelly) ──────────────────────────── */
.shelly-intro {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 2;
}
.shelly-intro .mascot-wrap { flex-shrink: 0; order: 2; }
.shelly-intro .mascot-speech-block { order: 1; flex: 1; }
.shelly-speech-text {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--brown);
  letter-spacing: -.3px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.shelly-speech-sub {
  font-size: 15px;
  font-weight: 600;
  color: var(--brown-mid);
  line-height: 1.6;
}

/* ── SECTION: ABOUT (Sam) ─────────────────────────────────────── */
.sam-intro {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 1.2rem;
}
.sam-intro .mascot-col   { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 2rem; }
.sam-intro .content-col  { flex: 1; }
.sam-eyebrow-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sam-dark);
  text-align: center;
  margin-top: 4px;
}

/* ── SECTION: NEWSLETTER (Coco) ──────────────────────────────── */
.coco-nl-wrap {
  position: relative;
  z-index: 2;
}
.coco-celebration {
  position: absolute;
  right: -20px;
  bottom: -30px;
  z-index: 3;
  pointer-events: none;
}
.coco-confetti {
  position: absolute;
  pointer-events: none;
}

/* ── SECTION: PARENTS (Shelly tip) ───────────────────────────── */
.shelly-parent-tip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.7);
  border: 2px solid var(--shelly-secondary);
  border-radius: 20px;
  padding: 14px 18px;
  margin-top: 1.8rem;
  position: relative;
  z-index: 2;
}
.shelly-tip-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--shelly-dark);
  font-style: italic;
  line-height: 1.5;
}

/* ── SECTION: SUNDAY SCHOOL (Rusty) ──────────────────────────── */
.rusty-school-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: .8rem;
  position: relative;
  z-index: 2;
}
.rusty-school-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--rusty-dark);
}

/* ── FOOTER MASCOT SCENE ──────────────────────────────────────── */
.footer-world {
  background: var(--brown);
  padding-top: 0;
  position: relative;
  overflow: hidden;
}
.footer-mascot-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 3vw, 32px);
  padding: 2rem 2rem 0;
  position: relative;
  z-index: 2;
}
.footer-mascot-stage .mascot-wrap { opacity: 0; animation: footer-appear .5s ease both; }
.footer-mascot-stage .mascot-wrap:nth-child(1) { animation-delay: .1s; }
.footer-mascot-stage .mascot-wrap:nth-child(2) { animation-delay: .25s; }
.footer-mascot-stage .mascot-wrap:nth-child(3) { animation-delay: .4s; }
.footer-mascot-stage .mascot-wrap:nth-child(4) { animation-delay: .55s; }
@keyframes footer-appear {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.footer-mascot-name {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(200,180,138,.55);
  text-align: center;
  margin-top: 4px;
}
.footer-ground {
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(200,180,138,.15), transparent);
  margin: 0 2rem;
}
.footer-goodbye {
  text-align: center;
  padding: 1.2rem 2rem .8rem;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 600;
  color: rgba(200,180,138,.75);
  font-style: italic;
  position: relative;
  z-index: 2;
}

/* ── SECTION ATMOSPHERE BACKGROUNDS ──────────────────────────── */
/* Each section gets a tiny personality tint and floating decorations */

.section-atmosphere {
  position: relative;
}
/* Videos: warm adventurous (Rusty's orange world) */
.atm-rusty::before {
  content: '';
  position: absolute;
  top: -20px; right: -80px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,107,53,.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Testimonials: warm green (Shelly's world) */
.atm-shelly::before {
  content: '';
  position: absolute;
  top: 0; left: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(93,192,61,.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* About: golden warmth (Sam's world) */
.atm-sam::before {
  content: '';
  position: absolute;
  top: 0; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(232,160,32,.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Newsletter: purple joy (Coco's world) — applied inside .newsletter-block */
.atm-coco::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(156,39,176,.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mascot-edge { display: none; }
  .sam-intro { flex-direction: column; gap: 0; }
  .sam-intro .mascot-col { flex-direction: row; gap: 16px; padding-top: 0; margin-bottom: 1rem; }
}
@media (max-width: 680px) {
  .rusty-intro,
  .shelly-intro { flex-direction: column; align-items: center; gap: 8px; }
  .shelly-intro .mascot-wrap { order: 1; }
  .shelly-intro .mascot-speech-block { order: 2; text-align: center; }
  .shelly-speech-text { font-size: 22px; text-align: center; }
  .mascot-wrap[data-size="lg"] { width: 110px; }
  .mascot-wrap[data-size="md"] { width:  90px; }
  .footer-mascot-name { font-size: 10px; }
  .coco-celebration { right: 0; bottom: -20px; }
  .coco-celebration .mascot-wrap[data-size="sm"] { width: 60px; }
  .shelly-parent-tip,
  .rusty-school-cta { flex-direction: column; text-align: center; }
  .footer-mascot-stage { gap: 8px; padding: 1.2rem 1rem 0; }
}
@media (max-width: 420px) {
  .footer-mascot-stage .mascot-wrap[data-size="sm"] { width: 52px; }
}

/* ══════════════════════════════════════════════════════════════
   WORLD DECO — Hero visual language distributed across sections
   Every element reuses the hero's palette, organic forms, and
   saturation. Max 2 moments per section; all are pointer-events:
   none so they never interfere with content interaction.
   ══════════════════════════════════════════════════════════════ */

/* Base helpers shared by all decorative types */
.wd-dot {
  position: absolute; border-radius: 50%;
  pointer-events: none; user-select: none; z-index: 0;
}
.wd-star {
  position: absolute;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  pointer-events: none; user-select: none; z-index: 0;
}
.wd-ring {
  position: absolute; border-radius: 50%; background: transparent;
  pointer-events: none; user-select: none; z-index: 0;
}
/* SVG blob / squiggle / flower containers */
.wd-scene {
  position: absolute; pointer-events: none;
  user-select: none; z-index: 0; overflow: visible;
}

/* Animation tie-ins — reuse existing keyframes */
.wd-float  { animation: world-float      3.2s ease-in-out          infinite; }
.wd-floatA { animation: world-float      3.9s ease-in-out .55s     infinite; }
.wd-floatB { animation: world-float      4.5s ease-in-out 1.1s     infinite; }
.wd-spin   { animation: world-spin-slow 10s  linear                infinite; }
.wd-spinR  { animation: world-spin-slow 14s  linear                infinite reverse; }
.wd-pulse  { animation: world-pulse      3.8s ease-in-out          infinite; }

@media (prefers-reduced-motion: reduce) {
  .wd-float, .wd-floatA, .wd-floatB,
  .wd-spin, .wd-spinR, .wd-pulse { animation: none !important; }
}