/* ══ Bamio Cinematic 5-beat splash (exact spec) ══ */
.bamio-splash{
  position:relative; width:400px; height:480px;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d; perspective:1200px; perspective-origin:50% 60%;
  margin-bottom:20px;
}
.bamio-stage{
  position:relative; width:400px; height:480px; transform-style:preserve-3d;
  animation: bsCamera 5.4s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes bsCamera{
  0%  { transform: translateZ(-120px) translateY(40px); }
  55% { transform: translateZ(60px)   translateY(-20px); }
  70% { transform: translateZ(0px)    translateY(0px); }
  100%{ transform: translateZ(0px)    translateY(0px); }
}
.soil{
  position:absolute; left:50%; bottom:180px; transform:translateX(-50%);
  width:280px; height:30px;
  background: radial-gradient(ellipse at center, rgba(15,110,86,0.5), transparent 70%);
  opacity:0; animation: bsSoil 0.8s ease-out 0s forwards;
}
@keyframes bsSoil{ to{ opacity:1 } }
.seed{
  position:absolute; left:50%; bottom:180px; transform:translate(-50%,50%);
  width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle, #F4D78A 0%, #C8A24B 60%, transparent 100%);
  opacity:0; animation: bsSeed 1.2s ease-out 0.2s forwards;
}
@keyframes bsSeed{
  0%  { opacity:0; transform:translate(-50%,50%) scale(0.3); box-shadow:0 0 0 rgba(200,162,75,0); }
  50% { opacity:1; transform:translate(-50%,50%) scale(1);   box-shadow:0 0 30px 8px rgba(200,162,75,0.7); }
  100%{ opacity:0; transform:translate(-50%,50%) scale(1.6); box-shadow:0 0 60px 14px rgba(200,162,75,0); }
}
.grove{
  position:absolute; left:50%; bottom:180px; transform:translateX(-50%);
  width:280px; height:260px;
  display:flex; align-items:flex-end; justify-content:center; gap:18px;
  animation: bsGroveOut 0.6s ease-in-out 4.6s forwards;
}
@keyframes bsGroveOut{ 0%{opacity:1} 100%{opacity:0} }
.culm{
  position:relative; width:32px; height:0;
  background: linear-gradient(180deg, #F6F1E7 0%, #EDE3C8 50%, #C8B98E 100%);
  border-radius: 4px 4px 2px 2px; transform-origin: bottom center;
  box-shadow: inset 4px 0 8px rgba(15,59,46,0.15), inset -2px 0 4px rgba(255,255,255,0.2), 0 8px 24px rgba(0,0,0,0.35);
}
.culm.left   { animation: bsGrowL 1.2s cubic-bezier(0.34,1.56,0.64,1) 1.4s forwards; }
.culm.center { animation: bsGrowC 1.4s cubic-bezier(0.34,1.56,0.64,1) 2.0s forwards; z-index:2; }
.culm.right  { animation: bsGrowR 1.0s cubic-bezier(0.34,1.56,0.64,1) 1.7s forwards; }
@keyframes bsGrowL{ 0%{height:0} 100%{height:160px} }
@keyframes bsGrowC{ 0%{height:0} 100%{height:240px} }
@keyframes bsGrowR{ 0%{height:0} 100%{height:140px} }
.culm::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, transparent 0%, rgba(15,59,46,0.35) 50%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(15,59,46,0.35) 50%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(15,59,46,0.35) 50%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(15,59,46,0.35) 50%, transparent 100%);
  background-size: 100% 1.5px; background-repeat: no-repeat;
  background-position: 0 25%, 0 50%, 0 75%, 0 95%;
}
.culm::after{
  content:''; position:absolute; left:35%; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05));
  border-radius:2px;
}
.leaf{
  position:absolute; bottom:86%; left:60%; transform-origin:bottom left; width:48px; height:64px; opacity:0;
  animation: bsLeaf 1.0s cubic-bezier(0.34,1.56,0.64,1) 3.0s forwards, bsLeafOut 0.6s ease-in-out 4.6s forwards;
  filter: drop-shadow(0 4px 12px rgba(200,162,75,0.6));
}
@keyframes bsLeaf{
  0%{opacity:0; transform:scale(0) rotate(-30deg)}
  60%{opacity:1; transform:scale(1.15) rotate(15deg)}
  100%{opacity:1; transform:scale(1) rotate(8deg)}
}
@keyframes bsLeafOut{ 0%{opacity:1} 100%{opacity:0} }
.leaf-glow{
  position:absolute; left:50%; bottom:300px; transform:translate(-50%,0);
  width:200px; height:200px;
  background: radial-gradient(circle, rgba(200,162,75,0.35), transparent 60%);
  opacity:0; pointer-events:none;
  animation: bsLeafGlow 1.4s ease-out 3.0s forwards;
}
@keyframes bsLeafGlow{
  0%{opacity:0; transform:translate(-50%,0) scale(0.4)}
  40%{opacity:1; transform:translate(-50%,0) scale(1)}
  100%{opacity:0; transform:translate(-50%,0) scale(2)}
}
.final-mark{
  position:absolute; left:50%; bottom:180px; transform:translateX(-50%);
  opacity:0; animation: bsFinal 0.8s ease-out 4.7s forwards;
}
@keyframes bsFinal{
  0%{opacity:0; transform:translateX(-50%) translateY(8px) scale(0.9)}
  100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
}
.text-group{
  position:absolute; left:0; right:0; top:324px;
  display:flex; flex-direction:column; align-items:center;
  opacity:0; animation: bsWord 0.8s ease-out 3.6s forwards;
}
@keyframes bsWord{ 0%{opacity:0; transform:translateY(20px)} 100%{opacity:1; transform:translateY(0)} }
.wordmark{
  font-family: 'Fraunces', serif; font-size:54px; font-weight:400;
  color:#F6F1E7; letter-spacing:-0.02em; line-height:0.9;
  font-variation-settings: "SOFT" 50, "opsz" 48;
  position:relative; display:inline-flex;
}
.wm-letter{ opacity:0; display:inline-block; animation: bsLetter 0.5s ease-out forwards; }
.wm-letter:nth-child(1){ animation-delay:3.70s; }
.wm-letter:nth-child(2){ animation-delay:3.82s; }
.wm-letter:nth-child(3){ animation-delay:3.94s; }
.wm-letter:nth-child(4){ animation-delay:4.06s; }
.wm-letter:nth-child(5){ animation-delay:4.18s; }
@keyframes bsLetter{ 0%{opacity:0; transform:translateY(8px)} 100%{opacity:1; transform:translateY(0)} }
.wm-dot{
  position:absolute; left:50%; top:-15px;
  transform: translateX(-50%) rotate(-30deg) scale(0);
  width:6.5px; height:9.8px;
  background: linear-gradient(135deg, #F4D78A, #C8A24B);
  border-radius: 3px 3px 3px 0; transform-origin: bottom center;
  opacity:0; animation: bsDot 0.5s cubic-bezier(0.34,1.56,0.64,1) 4.3s forwards;
}
@keyframes bsDot{
  0%{opacity:0; transform:translateX(-50%) scale(0) rotate(-30deg)}
  100%{opacity:1; transform:translateX(-50%) scale(1) rotate(35deg)}
}
.hero-tagline{
  font-family: 'Inter', sans-serif; font-size:12px; letter-spacing:0.32em;
  text-transform:uppercase; color: rgba(246,241,231,0.7);
  font-weight:400; opacity:0; margin-top:10px;
  animation: bsTag 0.9s ease-out 4.5s forwards;
}
.hero-tagline em{
  color:#C8A24B; font-style:italic; font-family:'Fraunces',serif;
  text-transform:none; letter-spacing:0.02em; font-size:14px;
}
@keyframes bsTag{
  0%{opacity:0; transform:translateY(8px); letter-spacing:0.5em}
  100%{opacity:1; transform:translateY(0); letter-spacing:0.32em}
}

@media(max-width:520px){
  .bamio-splash, .bamio-stage{ width:300px; height:420px; }
  .grove{ width:220px; }
  .wordmark{ font-size:44px; }
}