/* HIVE loading page — "Soft Halo"
   Used by the first-paint placeholder in index.html and by the opening overlay (#hive-intro) built in hive-ux.js.
   Everything is namespaced with hl- so nothing else in the app is affected. */

.hl-screen{
  --hl-bg:#f7f3e9;--hl-fg:#172b4d;--hl-accent:#e0b548;--hl-ring:rgba(23,43,77,.24);--hl-glow:rgba(224,181,72,.14);
  position:relative;width:100%;min-height:100vh;min-height:100svh;box-sizing:border-box;overflow:hidden;isolation:isolate;
  background:var(--hl-bg);font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
:root[data-theme="dark"] .hl-screen{
  --hl-bg:#101d32;--hl-fg:#f8f3e8;--hl-accent:#edc45a;--hl-ring:rgba(248,243,232,.22);--hl-glow:rgba(237,196,90,.14);
}
.hl-screen *{box-sizing:border-box}

/* Backdrop */
.hl-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,var(--hl-glow),transparent 42%),var(--hl-bg)}
.hl-honey{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(circle at center,transparent 0 24px,var(--hl-ring) 25px 26px,transparent 27px);background-size:60px 52px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 70%);mask-image:radial-gradient(ellipse at center,#000,transparent 70%);
}
.hl-softglow{
  position:absolute;left:50%;top:50%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;z-index:0;pointer-events:none;
  background:var(--hl-accent);opacity:.12;filter:blur(36px);animation:hlBreathe 3s ease-in-out infinite;
}
.hl-particle{
  position:absolute;z-index:1;width:5px;height:5px;border-radius:50%;pointer-events:none;
  background:var(--hl-accent);box-shadow:0 0 12px var(--hl-accent);animation:hlFloat 4s ease-in-out infinite;
}
.hl-p1{top:23%;left:25%}
.hl-p2{top:33%;right:24%;animation-delay:-1.2s}
.hl-p3{bottom:25%;left:28%;animation-delay:-2.2s}
.hl-p4{bottom:31%;right:27%;animation-delay:-.8s}

/* Content */
.hl-content{position:absolute;inset:0;z-index:2;width:100%;height:100%;text-align:center}
.hl-zone{position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%)}
.hl-halo{
  position:absolute;inset:20px;border:1px solid var(--hl-ring);border-radius:50%;pointer-events:none;
  animation:hlHalo 2.8s ease-out infinite;
}
.hl-halo:nth-of-type(2){animation-delay:1.4s}
.hl-screen .hl-logo,#hive-intro.hl-screen .hl-logo{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  width:138px;height:132px;max-width:150px;max-height:145px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  object-fit:contain;display:block;filter:drop-shadow(0 10px 18px rgba(9,26,52,.125));
  animation:hlBreathe 2.7s ease-in-out infinite;
}
.hl-wordmark{
  position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);z-index:3;margin:0;
  white-space:nowrap;font-family:'Sora','DM Sans',system-ui,sans-serif;font-weight:800;
  font-size:clamp(16px,2.5vw,24px);line-height:1.25;letter-spacing:.32em;text-indent:.32em;color:var(--hl-fg);
}
.hl-status{
  position:absolute;left:20px;right:20px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:3;margin:0;
  font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.19em;text-transform:uppercase;text-indent:.19em;
  color:var(--hl-fg);opacity:.65;overflow-wrap:anywhere;
}
.hl-line{
  position:absolute;left:50%;bottom:calc(62px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;margin:0;
  width:170px;max-width:calc(100% - 48px);height:3px;border-radius:10px;overflow:hidden;background:var(--hl-ring);
}
.hl-line i{display:block;height:100%;width:35%;border-radius:10px;background:var(--hl-accent);animation:hlProgress 2.4s ease-in-out infinite}
.hl-dots{
  position:absolute;left:50%;bottom:calc(36px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;margin:0;
  display:flex;gap:6px;
}
.hl-dots i{width:5px;height:5px;border-radius:50%;background:var(--hl-accent);animation:hlDot 1.1s ease-in-out infinite}
.hl-dots i:nth-child(2){animation-delay:.15s}
.hl-dots i:nth-child(3){animation-delay:.3s}
.hl-beam{
  position:absolute;left:50%;bottom:calc(15px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;margin:0;
  width:240px;max-width:calc(100% - 48px);height:1px;overflow:hidden;
  background:linear-gradient(90deg,transparent,var(--hl-accent),transparent);
}
.hl-beam:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--hl-fg),transparent);animation:hlBeam 2s ease-in-out infinite}

@media(max-width:600px){
  .hl-zone{width:190px;height:190px}
  .hl-screen .hl-logo,#hive-intro.hl-screen .hl-logo{max-width:132px;max-height:126px}
  .hl-wordmark{font-size:18px;top:calc(100% + 8px)}
  .hl-status{left:14px;right:14px;font-size:12px}
}
@media(max-height:480px){
  .hl-zone{top:44%}
  .hl-status,.hl-dots,.hl-beam{display:none}
  .hl-line{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
}

@keyframes hlHalo{0%{transform:scale(.68);opacity:.8}100%{transform:scale(1.25);opacity:0}}
@keyframes hlBreathe{0%,100%{transform:scale(.96)}50%{transform:scale(1.045)}}
@keyframes hlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hlProgress{0%{transform:translateX(-110%);width:32%}50%{width:55%}100%{transform:translateX(310%);width:32%}}
@keyframes hlDot{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-5px);opacity:1}}
@keyframes hlBeam{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Slow, gentle motion (instead of none) for people who prefer reduced motion. */
@media(prefers-reduced-motion:reduce){
  .hl-screen,.hl-screen *{animation-duration:8s!important;animation-iteration-count:infinite!important}
}