/* ============================================================
   BILLU — landing prelude (simple single-video version)
   One baked clip (cat + room) loops fullscreen; a bubble sits
   beside Billu and advances on click; a loader holds until the
   clip is buffered in full quality.
   ============================================================ */
:root { --b-ease: cubic-bezier(.22,.61,.36,1); }
html.billu-lock, html.billu-lock body { overflow: hidden !important; height: 100%; }

#billuLanding {
  position: fixed; inset: 0; z-index: 99999; overflow: hidden;
  background: #070604;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 1; animation: b-in 1s ease forwards;
}
@keyframes b-in { from { opacity: 0; } to { opacity: 1; } }
#billuLanding.is-gone { display: none; }

.billu-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
  opacity: 0;
  transform-origin: 50% 46%;
  transition: opacity 1s ease, transform 1.7s cubic-bezier(0.32, 0, 0.18, 1);
}
/* wide screens: bias the crop right so the wall logo isn't cut off */
@media (min-width: 821px) {
  .billu-vid { object-position: 100% 50%; }
  /* track Billu: with the video right-pinned, his centre sits at
     calc(100vw - 116.7vh); park the bubble just right of his head */
  .billu-bubble { left: calc(100vw - 104vh); top: 37%; }
}
/* dolly-in: the camera pushes into the studio as we enter the site */
#billuLanding.is-entering .billu-vid { transform: scale(1.3); }
#billuLanding.video-ready .billu-vid { opacity: 1; }
.billu-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 52%, rgba(7,5,3,0) 44%, rgba(7,5,3,.32) 82%, rgba(7,5,3,.58) 100%);
}

/* ---------- loader (holds until the clip is buffered) ---------- */
.billu-loader {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(120% 120% at 50% 40%, #1a120b 0%, #0a0705 72%);
  color: #f7f0e4; transition: opacity .6s ease;
}
#billuLanding.video-ready .billu-loader { opacity: 0; pointer-events: none; }
.bl-orbit { position: relative; width: 64px; height: 64px; }
.bl-orbit > span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #e0531f;
  animation: bl-spin 1.1s linear infinite;
}
.bl-orbit > span:nth-child(2){ inset: 8px; border-top-color: #d99a1c; animation-duration: 1.5s; animation-direction: reverse; }
.bl-orbit > span:nth-child(3){ inset: 16px; border-top-color: #b0491d; animation-duration: 2s; }
@keyframes bl-spin { to { transform: rotate(360deg); } }
.bl-paw { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: #f7f0e4; animation: bl-pulse 1.4s ease-in-out infinite; }
@keyframes bl-pulse { 0%,100%{ opacity:.5; transform: scale(.82); } 50%{ opacity:1; transform: scale(1); } }
.bl-text { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(247,240,228,.72); }
.bl-bar { width: min(240px, 60vw); height: 3px; border-radius: 3px; background: rgba(247,240,228,.14); overflow: hidden; }
.bl-bar > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#e0531f,#d99a1c); border-radius: 3px; transition: width .35s ease; }

/* ---------- conversation bubble (beside the centred cat) ---------- */
.billu-bubble {
  position: absolute; z-index: 6;
  left: 56%; top: 39%;
  max-width: 340px;
  padding: 16px 20px 15px;
  background: #fdf6ea; color: #1b1206;
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.6) inset;
  font-size: 16px; line-height: 1.45;
  opacity: 0; pointer-events: none;
}
.billu-bubble.show { animation: b-bubble .6s var(--b-ease) forwards; pointer-events: auto; }
.billu-bubble.hide { animation: b-bubble-out .34s var(--b-ease) forwards; }
@keyframes b-bubble { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes b-bubble-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8px) scale(.96); } }
.billu-bubble .who { display: flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #c0341f; margin-bottom: 7px; }
.billu-bubble .who .paw { width: 13px; height: 13px; }
.billu-bubble .tail { position: absolute; top: 26px; width: 16px; height: 20px; background: #fdf6ea; }
.billu-bubble[data-tail="left"] .tail { left: -8px; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.billu-bubble[data-tail="right"] .tail { right: -8px; clip-path: polygon(0 0, 0 100%, 100% 50%); }
.billu-bubble[data-tail="none"] .tail { display: none; }
.billu-bubble .nudge { margin-top: 11px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #9a8f7d; display: flex; align-items: center; gap: 7px; }
.billu-bubble .nudge .k { color:#1b1206; border:1px solid rgba(0,0,0,.2); border-radius:4px; padding:1px 6px; background:rgba(0,0,0,.04); }

/* ---------- skip + fade ---------- */
.billu-skip { position: absolute; right: 26px; top: 22px; z-index: 7; background: rgba(14,10,6,.46); border: 1px solid rgba(247,240,228,.22); color: rgba(247,240,228,.82); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: color .3s, border-color .3s, background .3s; }
.billu-skip:hover { color: #fff; border-color: rgba(247,240,228,.5); background: rgba(14,10,6,.72); }
.billu-fade { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: radial-gradient(120% 100% at 50% 58%, rgba(8,6,3,.15), #050402 82%); opacity: 0; transition: opacity 1.4s ease; }
#billuLanding.is-entering .billu-skip, #billuLanding.is-entering .billu-bubble { opacity: 0 !important; }

@media (max-width: 820px) {
  /* dramatic full-bleed Billu; give the bottom a scrim so the bubble reads */
  .billu-vignette {
    background:
      radial-gradient(120% 78% at 50% 42%, rgba(7,5,3,0) 46%, rgba(7,5,3,.30) 82%),
      linear-gradient(to bottom, rgba(7,5,3,.72) 0%, rgba(7,5,3,.34) 15%, rgba(7,5,3,0) 34%);
  }
  /* compact card up top — never covers Billu (he sits centre/bottom) */
  .billu-bubble {
    left: 50%; right: auto; bottom: auto; top: calc(64px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    width: min(84vw, 340px); max-width: none;
    padding: 13px 16px 12px; font-size: 14px; line-height: 1.42;
    border-radius: 13px;
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.6);
  }
  .billu-bubble.show { animation: none; opacity: 1; pointer-events: auto; }
  .billu-bubble.hide { animation: none; opacity: 0; }
  .billu-bubble .tail { display: none; }
  .billu-bubble .nudge { margin-top: 9px; font-size: 9px; }
  .billu-bubble .who { font-size: 10px; margin-bottom: 5px; }
  .billu-skip { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; padding: 8px 14px; }
  .bl-text { font-size: 11px; text-align: center; padding: 0 24px; }
}