:root{--night:#010711;--cream:#f6e7c6;--gold:#eeaa3c;--ink:#07111f;--blue:#0b2746}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--cream);font-family:"Space Grotesk",Arial,sans-serif;overflow-x:clip}
body{min-height:820vh}
button{font:inherit}
.journey{height:820vh;position:relative}
.stage{position:fixed;inset:0;height:100vh;overflow:hidden;isolation:isolate;background:#06111d}
.nav{position:fixed;inset:0 0 auto 0;height:52px;padding:0 clamp(14px,2.3vw,38px);display:flex;align-items:center;justify-content:space-between;z-index:160;pointer-events:none;background:linear-gradient(#020914bd,#02091400)}
.brand{font-family:Georgia,serif;letter-spacing:.15em;font-size:clamp(12px,1.05vw,17px);text-shadow:0 2px 10px #000}.brand span{color:var(--gold)}
.nav-note{font:clamp(8px,.7vw,11px)/1 "Permanent Marker",cursive;letter-spacing:.08em;color:var(--gold);opacity:.72}

/* The complete 9:16 master plate stays intact and is panned from its cosmic top to its beautiful final bottom. */
.world{position:absolute;z-index:0;left:50%;top:0;width:100vw;height:auto;min-height:100vh;transform:translateX(-50%);will-change:transform;filter:saturate(1.08) contrast(1.035)}
.sky-haze{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,rgba(31,155,221,.025) 0 28%,transparent 60%),linear-gradient(to bottom,rgba(1,5,10,.09),transparent 18%,transparent 84%,rgba(1,5,10,.12))}

/* LOCKED CENTER: the approved Bantu placement never moves sideways. */
.hero-logo{position:absolute;z-index:90;left:50%;top:.7vh;width:min(38vw,560px);max-height:28vh;object-fit:contain;transform:translateX(-50%) rotate(-1deg);filter:drop-shadow(0 11px 14px rgba(0,0,0,.34));will-change:transform;pointer-events:none}
.time-bubble{position:absolute;z-index:88;left:2.3vw;top:10.5vh;width:min(18.3vw,280px);height:auto;filter:drop-shadow(0 11px 15px rgba(0,0,0,.25));transform:rotate(-5deg);will-change:transform;pointer-events:none}
.reminds-bubble{position:absolute;z-index:88;right:2.5vw;top:15.5vh;width:min(21.4vw,330px);height:auto;filter:drop-shadow(0 11px 15px rgba(0,0,0,.25));transform:rotate(4deg);will-change:transform;pointer-events:none}
.bantu{position:absolute;z-index:80;left:50%;top:49%;height:min(82vh,880px);width:min(44vw,630px);margin:0;transform:translate(-50%,-43%);transform-origin:50% 7%;pointer-events:none;will-change:transform}
.bantu video{width:100%;height:100%;object-fit:contain;display:block;opacity:1;filter:drop-shadow(0 22px 25px rgba(0,0,0,.25))}

/* Scroll-distributed side lanes. Every major object owns a clear slot; nothing sits on top of another. */
.object{position:absolute;margin:0;opacity:0;will-change:transform,opacity;pointer-events:none}
.object video{display:block;width:100%;height:100%;object-fit:contain;opacity:1;filter:drop-shadow(0 18px 24px rgba(0,0,0,.34))}
.temple{z-index:28;right:.8vw;top:29vh;width:min(28vw,460px);height:59vh}
.useless{z-index:52;left:2vw;top:35vh;width:min(17.5vw,285px);pointer-events:none}.useless button{border:0;background:none;padding:0;width:100%;cursor:pointer}.useless img{display:block;width:100%;height:auto;filter:drop-shadow(0 17px 21px rgba(0,0,0,.38));transition:transform .25s ease}.useless button:hover img{transform:rotate(-2deg) scale(1.035)}
.laughter{z-index:47;left:2.5vw;right:auto;bottom:-1vh;width:min(42vw,760px);height:66vh}
.beast{z-index:46;right:2.5vw;left:auto;bottom:-1vh;width:min(42vw,760px);height:66vh}

/* Labels occupy their own sky bands, never the animation surfaces. */
.floating-label{position:absolute;z-index:72;height:auto;filter:drop-shadow(0 8px 13px rgba(0,0,0,.3));pointer-events:none;will-change:transform,opacity;opacity:0}
.label-laughter{left:4.8vw;right:auto;bottom:61vh;width:min(10vw,165px);transform:rotate(-4deg)}
.label-temple{right:1.6vw;top:20vh;width:min(12vw,190px);transform:rotate(4deg)}
.label-beast{right:4.8vw;left:auto;bottom:61vh;width:min(10vw,165px);transform:rotate(4deg)}
.label-gospel{left:2vw;top:34vh;width:min(13vw,205px);transform:rotate(-5deg)}
.black-music{position:absolute;z-index:70;right:2vw;top:30vh;width:min(14vw,220px);height:auto;filter:drop-shadow(0 9px 15px #0007);transform:rotate(4deg);will-change:transform,opacity;pointer-events:none;opacity:0}
.why{position:absolute;z-index:70;left:3vw;top:31vh;bottom:auto;width:min(10.5vw,165px);filter:drop-shadow(0 9px 15px #0007);transform:rotate(-5deg);will-change:transform,opacity;pointer-events:none;opacity:0}

.gospel{position:absolute;z-index:54;inset:0;pointer-events:none;will-change:transform,opacity;opacity:0}
.gospel span{position:absolute;padding:.52em .78em;font:clamp(9px,.78vw,13px)/1 "Permanent Marker",cursive;box-shadow:0 6px 15px #0007;border:1.5px solid rgba(238,170,60,.62);border-radius:46% 54% 51% 49%/56% 43% 57% 44%;transform-origin:center;white-space:nowrap}
.g1{left:7%;top:42%;background:var(--cream);color:#111;transform:rotate(-7deg)}.g2{left:13%;top:55%;background:#0d395d;color:var(--cream);transform:rotate(5deg)}.g3{left:7%;top:68%;background:#07111f;color:var(--gold);transform:rotate(4deg)}.g4{right:7%;top:42%;background:var(--cream);color:#111;transform:rotate(-5deg)}.g5{right:11%;top:55%;background:#183664;color:var(--cream);transform:rotate(-4deg)}.g6{right:7%;top:68%;background:#07111f;color:var(--cream);transform:rotate(7deg)}.g7{left:16%;bottom:10%;background:#d99d34;color:#111;transform:rotate(3deg)}.g8{right:16%;bottom:10%;background:#07111f;color:var(--gold);transform:rotate(-8deg)}

/* The two clickable Bantu films get their own chapter after the creature pair. */
.video-portal{position:absolute;z-index:105;width:min(13vw,195px);aspect-ratio:1;border:0;padding:0;background:#08111d;border-radius:48% 52% 45% 55%/54% 43% 57% 46%;overflow:hidden;box-shadow:0 0 0 2px rgba(238,170,60,.9),0 12px 24px rgba(0,0,0,.42);opacity:0;transform:scale(.82);pointer-events:none;cursor:pointer;transition:box-shadow .25s ease}
.video-portal:hover{box-shadow:0 0 0 3px #f1b348,0 0 28px rgba(238,170,60,.45),0 12px 30px rgba(0,0,0,.55)}
.video-portal video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.06) contrast(1.04)}
.portal-left{left:3vw;top:34vh}.portal-right{right:3vw;top:34vh}
.portal-ring{position:absolute;inset:5%;border:1px dashed rgba(246,231,198,.8);border-radius:50%;pointer-events:none}.portal-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#07111fcc;color:var(--gold);font-size:15px;box-shadow:0 4px 12px #0008}



/* A wandering text ribbon that moves around the page perimeter like a swinging snake.
   It lives behind Bantu/creatures, so it can never cover their faces or bodies. */
.swing-snake{position:absolute;z-index:20;inset:1.5vh 1vw 2vh 1vw;width:98vw;height:96vh;overflow:visible;pointer-events:none;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45));will-change:transform,opacity}
.swing-snake path{fill:none;stroke:none}
.snake-copy{font-family:"Permanent Marker",cursive;font-size:21px;font-weight:400;letter-spacing:3.2px;fill:#f3c15a;paint-order:stroke fill;stroke:#07111f;stroke-width:5px;stroke-linejoin:round;opacity:.86}

.final-mantra{position:absolute;z-index:118;left:50%;bottom:1.8vh;width:min(82vw,1050px);transform:translateX(-50%);text-align:center;font:clamp(18px,2vw,34px)/1.08 "Permanent Marker",cursive;color:var(--cream);text-transform:uppercase;letter-spacing:.035em;text-shadow:0 3px 0 #07111f,0 8px 20px rgba(0,0,0,.75);opacity:0;pointer-events:none;will-change:opacity,transform}

.scroll-mark{position:absolute;z-index:115;left:50%;bottom:11px;transform:translateX(-50%);font-size:8px;letter-spacing:.28em;opacity:.56}.scroll-mark i{display:inline-block;width:26px;height:1px;margin:0 0 3px 8px;background:var(--gold)}

.useless-overlay{position:fixed;inset:0;z-index:220;background:#01050bf2;color:var(--cream);backdrop-filter:blur(7px)}.useless-overlay[hidden]{display:none}.useless-overlay>div{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}.useless-overlay p{font:clamp(23px,3vw,46px)/1 "Permanent Marker",cursive;margin:0}.useless-overlay strong{font-size:clamp(100px,20vw,280px);line-height:.9;color:var(--gold);font-variant-numeric:tabular-nums}.useless-overlay span{max-width:620px;font-size:clamp(16px,1.6vw,23px)}.useless-overlay small{margin-top:2rem;opacity:.45}
.video-modal{position:fixed;inset:0;z-index:230;background:#01050bf2;display:grid;place-items:center;padding:5vh 6vw;backdrop-filter:blur(9px)}.video-modal[hidden]{display:none}.video-modal video{max-width:min(92vw,1100px);max-height:88vh;border-radius:24px;box-shadow:0 0 0 2px rgba(238,170,60,.8),0 30px 70px #000c;background:#000}.video-close{position:fixed;right:2vw;top:2vh;z-index:232;border:0;background:#07111f;color:var(--cream);width:46px;height:46px;border-radius:50%;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 0 0 1px rgba(238,170,60,.7)}

/* Bigger cursor: exaggerated Black-power afro, with sound waves radiating around the head. */
.sound-cursor{position:fixed;left:0;top:0;z-index:400;width:112px;height:112px;pointer-events:none;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:normal}.sound-cursor svg{width:100%;height:100%;overflow:visible}.wave{fill:none;stroke:rgba(238,170,60,.96);stroke-width:1.9;transform-origin:50% 50%;animation:wave 1.55s ease-out infinite}.w2{animation-delay:.3s;opacity:.72}.w3{animation-delay:.6s;opacity:.48}.w4{animation-delay:.9s;opacity:.26}.afro circle{fill:#070707;stroke:#16100c;stroke-width:.8}.face{fill:#6e3b29;stroke:#d79b39;stroke-width:1.1}.neck{fill:#6e3b29}.eye,.smile,.nose{fill:none;stroke:#150b08;stroke-width:2;stroke-linecap:round}.hoop{fill:none;stroke:#f0b245;stroke-width:2.4}.ear{fill:#6e3b29;stroke:#d79b39;stroke-width:.8}.spark{fill:#f0b245}
@keyframes wave{0%{transform:scale(.35);opacity:.95}100%{transform:scale(1.22);opacity:0}}
@media(pointer:fine){body{cursor:none}.sound-cursor{opacity:1}button,a{cursor:none}}

@media(max-width:900px){
 body{min-height:720vh}.journey{height:720vh}
 .hero-logo{width:70vw;top:1vh}.time-bubble{width:32vw;left:-2vw;top:14vh}.reminds-bubble{width:37vw;right:-4vw;top:17vh}.bantu{width:80vw;height:70vh;top:48%}
 .temple{width:36vw;height:45vh;right:-2vw;top:37vh}.useless{width:28vw;left:1vw;top:43vh}.laughter{width:58vw;height:43vh;left:-1vw;right:auto;bottom:0}.beast{width:58vw;height:43vh;right:-1vw;left:auto;bottom:0}
 .floating-label{display:none}.black-music,.why,.gospel{display:none}.video-portal{width:22vw;min-width:94px}.portal-left{left:2vw;top:58vh}.portal-right{right:2vw;top:58vh}.nav-note{display:none}
 .sound-cursor{width:96px;height:96px}.final-mantra{width:88vw;font-size:clamp(15px,4vw,24px);bottom:1.2vh}
}
@media(pointer:coarse){.sound-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.world,.bantu,.object,.hero-logo,.time-bubble,.reminds-bubble,.black-music,.why,.gospel,.video-portal{will-change:auto}.wave{animation:none}}



/* V16 — bubble-only atmosphere. No cloud overlays.
   Small rendered soap bubbles continuously rise through the world behind the main actors. */
.bubble-field{
  position:absolute;
  inset:0;
  z-index:24;
  overflow:hidden;
  pointer-events:none;
}
.real-bubble{
  position:absolute;
  left:0;
  top:0;
  width:48px;
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  will-change:transform,opacity;
  transform-origin:50% 50%;
  opacity:.80;
  filter:drop-shadow(0 2px 4px rgba(45,90,135,.18));
  isolation:isolate;
}
.real-bubble img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:50%;
  opacity:.94;
  mix-blend-mode:screen;
  filter:saturate(1.42) brightness(1.16) contrast(1.08);
}
/* Small specular accents make the rendered rings read more like real soap bubbles. */
.real-bubble::before{
  content:"";
  position:absolute;
  z-index:2;
  left:18%;
  top:15%;
  width:31%;
  height:18%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.88) 0 18%,rgba(255,255,255,.42) 30%,rgba(255,255,255,0) 72%);
  transform:rotate(-28deg);
  filter:blur(.35px);
  opacity:.78;
}
.real-bubble::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:6%;
  border-radius:50%;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.28),
    inset -2px 0 3px rgba(96,221,255,.12),
    inset 1px -2px 3px rgba(255,89,222,.10);
  opacity:.72;
}
@media(max-width:900px){
  .real-bubble{opacity:.74}
}
@media(prefers-reduced-motion:reduce){
  .real-bubble{will-change:auto}
}