/* ============================================================
   Bhendo Games — Loading Screen
   Design tokens
   ============================================================ */
:root {
  --wood-dark:   #6b4226;
  --wood-mid:    #a56b35;
  --cream:       #f6e8c8;
  --green-deep:  #2f7a1e;
  --green-mid:   #5fb51c;
  --green-light: #9be34d;
  --gold:        #ffcc33;
  --blue-sky:    #4fb6f6;
  --pink:        #ff6fa5;
  --ink:         #1f3a1a;

  --font-display: 'Baloo 2', 'Segoe UI Rounded', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  --stage-w: 1600px;
  --stage-h: 900px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #123a26;
  overflow: hidden;
  font-family: var(--font-body);
}

/* Scaling stage: fixed-design canvas, scaled to fit viewport via JS-set --scale */
#bhendo-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 0 0 9999px #123a26;
  transition: opacity .6s ease, filter .6s ease;
}

#bhendo-loader.is-complete {
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
}

/* ---------- Background ---------- */
.bg-village {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.sky-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 40, 70, .18) 0%,
    rgba(10, 40, 70, .02) 22%,
    rgba(10, 40, 70, 0) 55%,
    rgba(6, 30, 18, .35) 100%);
  pointer-events: none;
}

/* ---------- Sky decoration ---------- */
.sky-layer { position: absolute; inset: 0; pointer-events: none; }

.deco { position: absolute; filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); }

.plane {
  width: 190px;
  top: 60px;
  left: -220px;
  animation: fly-across 22s linear infinite;
}

.balloon {
  width: 150px;
  top: 40px;
  right: 90px;
  animation: bob 6s ease-in-out infinite;
}

.bird { width: 64px; opacity: .95; }
.bird-a { top: 120px;  left: 12%;  animation: flap 3.4s ease-in-out infinite; }
.bird-b { top: 90px;   left: 24%;  width: 50px; animation: flap 2.8s ease-in-out infinite .3s; }
.bird-c { top: 180px;  left: 40%;  width: 46px; animation: flap 3.1s ease-in-out infinite .6s; }
.bird-d { top: 100px;  right: 26%; width: 52px; animation: flap 3.6s ease-in-out infinite .2s; }
.bird-e { top: 165px;  right: 14%; width: 46px; animation: flap 2.6s ease-in-out infinite .5s; }

@keyframes fly-across {
  0%   { transform: translateX(0) translateY(0) rotate(-2deg); }
  50%  { transform: translateX(1020px) translateY(-18px) rotate(1deg); }
  100% { transform: translateX(2040px) translateY(0) rotate(-2deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-16px) rotate(2deg); }
}

@keyframes flap {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-10px) rotate(4deg) scale(1.03); }
}

/* ---------- Brand ---------- */
.brand {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}

.tagline {
  width: 460px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.28));
  animation: logo-breathe 4.2s ease-in-out infinite;
}

@keyframes logo-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.02); }
}

/* ---------- Stage: mascots + plaque ---------- */
.stage {
  position: absolute;
  top: 372px;
  left: 50%;
  transform: translateX(-50%);
  width: 1360px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 4;
}

.mascot { width: 258px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.3)); flex: 0 0 auto; }
.mascot-buzz    { animation: mascot-bob-l 3.2s ease-in-out infinite; margin-right: -30px; }
.mascot-littleb { animation: mascot-bob-r 3.2s ease-in-out infinite .4s; margin-left: -30px; }

@keyframes mascot-bob-l {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
@keyframes mascot-bob-r {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%      { transform: translateY(-14px) rotate(-2deg); }
}

.plaque-wrap {
  position: relative;
  width: 700px;
  flex: 0 0 auto;
}

.plaque-panel {
  width: 100%;
  display: block;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.3));
}

.plaque-content {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 30%;
  bottom: 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.plaque-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--green-deep);
  text-align: center;
  text-shadow: 0 2px 0 rgba(255,255,255,.5);
}

/* Progress bar */
.progress-track {
  position: relative;
  width: 100%;
  height: 46px;
  background: linear-gradient(180deg, #4a2c15, #2c1a0d);
  border-radius: 999px;
  padding: 6px;
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.08);
}

.progress-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green-light), var(--green-mid) 55%, var(--green-deep));
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.35);
  overflow: hidden;
  transition: width .5s cubic-bezier(.22,.9,.32,1);
}

.progress-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -35deg,
    rgba(255,255,255,.28) 0 18px,
    rgba(255,255,255,0) 18px 36px
  );
  background-size: 200% 100%;
  animation: stripes-move 1.1s linear infinite;
}

@keyframes stripes-move {
  from { background-position: 0 0; }
  to   { background-position: -50px 0; }
}

.progress-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  text-shadow:
    -1.5px -1.5px 0 var(--blue-sky), 1.5px -1.5px 0 var(--blue-sky),
    -1.5px  1.5px 0 var(--blue-sky), 1.5px  1.5px 0 var(--blue-sky),
    0 2px 3px rgba(0,0,0,.25);
  pointer-events: none;
}

/* ---------- Tip box ---------- */
.tip-box {
  position: absolute;
  top: 742px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 820px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: rgba(255, 251, 235, .92);
  border: 3px solid var(--wood-mid);
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,.22);
  z-index: 4;
}

.tip-icon { font-size: 24px; flex: 0 0 auto; }

#tip-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: #5a3d1c;
  display: inline-block;
  transition: opacity .35s ease, transform .35s ease;
}

#tip-text.is-swapping { opacity: 0; transform: translateY(6px); }

/* ---------- Feature strip ---------- */
.feature-row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(10,45,20,.65), rgba(6,28,14,.88));
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 4;
  backdrop-filter: blur(2px);
}

.feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.3), inset 0 -3px 4px rgba(0,0,0,.15);
  flex: 0 0 auto;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-icon--gold   { background: linear-gradient(160deg, #ffdd6a, #e8a91a); }
.feature-icon--pink   { background: linear-gradient(160deg, #ff8fbd, #e8437f); }
.feature-icon--blue   { background: linear-gradient(160deg, #7cd4ff, #2f96e0); }
.feature-icon--orange { background: linear-gradient(160deg, #ffab6b, #e85f2b); }

.feature-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
  white-space: nowrap;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .plane, .balloon, .bird, .logo, .mascot-buzz, .mascot-littleb, .progress-fill::before {
    animation: none !important;
  }
}