/* =====================================================================
   LOADING SCREEN + GEO GATE
   ===================================================================== */
#loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:radial-gradient(circle at 50% 40%, #2a0a0c 0%, #0c0304 70%, #060102 100%);
  transition:opacity .7s ease, visibility .7s ease;
}
body.loaded #loader{opacity:0;visibility:hidden;pointer-events:none}

/* logo entrance — cartoon-style bounce in */
.loader-logo{
  width:170px;height:170px;border-radius:40px;object-fit:contain;
  box-shadow:0 30px 80px rgba(225,10,23,.55);
  animation:logoIn 1s cubic-bezier(.2,1.3,.4,1) both;
  position:relative;
}
.loader-logo::after{
  content:"";position:absolute;inset:-6px;border-radius:46px;z-index:-1;
  background:conic-gradient(from 0deg,#e10a17,#ff3b46,#ff8a8a,#e10a17);
  filter:blur(28px);opacity:.6;animation:spin 4s linear infinite;
}
@keyframes logoIn{
  0%{opacity:0;transform:scale(.3) translateY(40px) rotate(-12deg)}
  60%{opacity:1;transform:scale(1.12) translateY(0) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

/* progress dots */
.loader-dots{display:flex;gap:10px}
.loader-dots i{width:12px;height:12px;border-radius:50%;background:#e10a17;display:inline-block;animation:bounce 1.1s ease-in-out infinite}
.loader-dots i:nth-child(2){animation-delay:.16s}
.loader-dots i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-14px);opacity:1}}

.loader-title{font-family:var(--font);color:#ffe9ea;font-weight:800;font-size:24px;letter-spacing:.5px;
  animation:fadeUp .8s .3s both}
.loader-sub{color:#e79aa0;font-size:14px;animation:fadeUp .8s .5s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- exit: logo flies up & away (cartoon) ---- */
body.gate-checking .loader-dots{opacity:.5}

/* ---- GEO-BLOCK state: logo floats up, message reveals word by word ---- */
#loader.blocked{
  justify-content:flex-start;padding-top:16vh;
}
/* hide the normal loading logo, show the dedicated geo logo that floats up */
#loader.blocked .loader-logo{display:none}
.geo-logo{
  width:130px;height:130px;border-radius:34px;object-fit:contain;display:none;
  margin-bottom:30px;
  box-shadow:0 26px 70px rgba(225,10,23,.5);
}
#loader.blocked .geo-logo{
  display:block;
  animation:logoFloatUp 1.1s cubic-bezier(.25,1,.3,1) both;
}
.geo-logo::after{content:""}
@keyframes logoFloatUp{
  0%{opacity:0;transform:translateY(90px) scale(1.05)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(.95)}
}
.geo-msg{
  max-width:600px;text-align:center;padding:0 24px;
}
.geo-msg h2{color:#ffe9ea;font-family:var(--font);font-size:28px;font-weight:800;margin-bottom:14px}
.geo-msg p{color:#e79aa0;font-family:var(--font);font-size:18px;line-height:1.9}
.geo-flag{font-size:13px;color:#7a5a5c;margin-top:26px;letter-spacing:.5px}
.geo-msg .line{width:60px;height:3px;background:#e10a17;border-radius:2px;margin:18px auto;opacity:.7}

/* per-word reveal: each word wrapped in <span class="gw"> by JS */
.geo-msg .gw{display:inline-block;opacity:0;transform:translateY(14px) rotateX(40deg);transform-origin:bottom}
.geo-msg.reveal-on .gw{animation:gwIn .5s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes gwIn{to{opacity:1;transform:none}}
/* h2 and flag fade in as blocks, slightly after the paragraph words */
.geo-msg h2{opacity:0;transform:translateY(10px)}
.geo-msg .line{opacity:0}
.geo-msg .geo-flag{opacity:0;transform:translateY(8px)}
.geo-msg.reveal-on h2{animation:gwIn .6s .1s forwards}
.geo-msg.reveal-on .line{animation:gwIn .6s .35s forwards}
.geo-msg.reveal-on .geo-flag{animation:gwIn .6s forwards;animation-delay:var(--flag-delay,1.4s)}

/* hidden until needed */
.geo-msg{display:none}
#loader.blocked .geo-msg{display:block}
#loader.blocked .loader-dots,#loader.blocked .loader-title,#loader.blocked .loader-sub{display:none}