/* ===================================================================
   FLOWTRIG — preloader.css
   Brand boot: real bot mark locked inside a circular badge that floats
   as one unit (nothing detaches), centered glow, rotating ring,
   typing dots, wordmark wipe, time-based progress. Theme-aware.
   =================================================================== */

#preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  background:var(--bg, #05080A);
  transition:opacity .7s ease, transform .7s cubic-bezier(.7,0,.3,1), background-color .9s ease;
  overflow:hidden;
}
/* dark->light morph: a green light-burst radiates from the badge (decorative, non-occluding) */
#preloader .pl-burst{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  --bx:50%; --by:42%;
  background:radial-gradient(circle at var(--bx) var(--by),
     rgba(111,247,182,.6) 0%, rgba(43,232,129,.3) 12%, rgba(43,232,129,0) 34%); }
#preloader .pl-burst.go{ animation:pl-burst 1.25s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes pl-burst{ 0%{ opacity:0; transform:scale(.15);} 28%{ opacity:1;} 100%{ opacity:0; transform:scale(2.6);} }
/* smooth colour morph for the inner pieces when the overlay flips to light */
#preloader, #preloader .pl-badge, #preloader .pl-bar, #preloader .pl-msg, #preloader .pl-wm path{ transition:background-color .9s ease, color .9s ease, fill .9s ease, border-color .9s ease, box-shadow .9s ease; }
/* faint symmetric dot-grid backdrop */
#preloader::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(43,232,129,.10) 1px, transparent 1.5px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 6%, transparent 46%);
  mask-image:radial-gradient(circle at 50% 42%, #000 6%, transparent 46%); }
#preloader.pl-done{ opacity:0; transform:translateY(-14px); pointer-events:none; }

.pl-core{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:28px; }

/* app-tile (squircle) holding the mark — deliberate, not a circle */
@property --pl-a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.pl-badge{
  position:relative; width:126px; height:126px; border-radius:32px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 28%,
      color-mix(in oklab, var(--neon, #2BE881) 13%, var(--surface, #0C1113)) 0%,
      var(--surface, #0C1113) 72%,
      color-mix(in oklab, #000 16%, var(--surface, #0C1113)) 100%);
  border:1px solid var(--line, rgba(255,255,255,.08));
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.15),
    inset 0 -10px 20px rgba(0,0,0,.30),
    0 24px 50px -22px rgba(0,0,0,.6),
    0 0 60px -20px rgba(43,232,129,.45);
  animation:pl-float 3.8s ease-in-out infinite;
}
[data-theme="light"] .pl-badge{
  background:radial-gradient(circle at 50% 28%, #ffffff 0%,
      color-mix(in oklab, var(--neon) 8%, #ffffff) 70%,
      color-mix(in oklab, var(--neon) 16%, #ffffff) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.95),
    inset 0 -10px 20px rgba(16,46,32,.08),
    0 22px 46px -24px rgba(16,46,32,.30),
    0 0 52px -22px rgba(15,162,80,.4);
}
/* soft glow behind the tile (breathing) */
.pl-badge::before{ content:""; position:absolute; inset:-22px; border-radius:48px; z-index:-1;
  background:radial-gradient(circle, rgba(43,232,129,.30), transparent 68%); filter:blur(16px);
  animation:pl-breathe 3.4s ease-in-out infinite; }
/* glowing gradient border that travels the tile edge */
.pl-badge::after{ content:""; position:absolute; inset:-1.5px; border-radius:33.5px; padding:1.6px; pointer-events:none;
  background:conic-gradient(from var(--pl-a), transparent 0 56%, rgba(43,232,129,.95) 80%, rgba(111,247,182,1) 86%, transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:pl-rot 2.8s linear infinite; }
@keyframes pl-rot{ to{ --pl-a:360deg; } }
@keyframes pl-breathe{ 0%,100%{ transform:scale(.94); opacity:.7;} 50%{ transform:scale(1.06); opacity:1;} }
@keyframes pl-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* the real bot mark — free-floating, 3D bevel + scale-in pop */
.pl-bot{ position:relative; z-index:2; width:62px; height:auto; overflow:visible;
  transform-box:fill-box; transform-origin:center; transform:scale(0); opacity:0;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 3px 5px rgba(0,0,0,.5));
  animation:pl-pop .7s cubic-bezier(.3,1.3,.4,1) forwards .15s; }
[data-theme="light"] .pl-bot{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 2px 4px rgba(16,46,32,.3)); }
@keyframes pl-pop{ 0%{ transform:scale(0); opacity:0;} 55%{ opacity:1;} 100%{ transform:scale(1); opacity:1;} }

/* sub-pieces stay composed; only micro-motion */
.pl-ant{ transform-box:fill-box; transform-origin:center; animation:pl-tip 2s ease-in-out infinite 1s; }
@keyframes pl-tip{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(43,232,129,0)); } 50%{ filter:drop-shadow(0 0 3px rgba(43,232,129,.95)); } }
.pl-dot{ transform-box:fill-box; transform-origin:center; animation:pl-type 1.3s ease-in-out infinite .9s; }
.pl-dot.dc{ animation-delay:1.05s; }
.pl-dot.d3{ animation-delay:1.2s; }
@keyframes pl-type{ 0%,65%,100%{ transform:translateY(0) scale(1);} 30%{ transform:translateY(-1.1px) scale(1.22);} }

/* wordmark reveal — two theme images crossfade in sync with the dark→light morph */
.pl-word{ position:relative; z-index:2; overflow:hidden; display:grid; }
.pl-word .pl-wm{ grid-area:1/1; height:26px; width:auto; display:block !important;
  clip-path:inset(0 100% 0 0); animation:pl-wipe .8s cubic-bezier(.7,0,.2,1) forwards .85s;
  transition:opacity .9s ease; }
@keyframes pl-wipe{ to{ clip-path:inset(0 0 0 0); } }
/* dark phase: show dark-mode wordmark · light phase: crossfade to light-mode wordmark */
#preloader .pl-word .logo-white{ opacity:1; }
#preloader .pl-word .logo-dark{ opacity:0; }
[data-theme="light"] #preloader .pl-word .logo-white{ opacity:0; }
[data-theme="light"] #preloader .pl-word .logo-dark{ opacity:1; }

/* progress + microcopy */
.pl-foot{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:13px;
  opacity:0; animation:pl-fade .6s ease forwards 1s; }
.pl-bar{ width:200px; height:3px; border-radius:3px; overflow:hidden;
  background:color-mix(in oklab, var(--tx, #fff) 13%, transparent); }
.pl-bar i{ display:block; height:100%; width:0%; border-radius:3px;
  background:linear-gradient(90deg, var(--green, #1FA855), var(--neon, #2BE881)); box-shadow:0 0 12px rgba(43,232,129,.6); }
.pl-msg{ font-family:var(--font-m, monospace); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-mute, #6E7E75); display:flex; align-items:center; gap:9px; }
.pl-msg .pct{ color:var(--neon, #2BE881); font-weight:700; font-variant-numeric:tabular-nums; }
.pl-msg b{ color:var(--tx-soft, #A7B6AD); font-weight:500; }

@keyframes pl-fade{ to{ opacity:1; } }

@media(prefers-reduced-motion: reduce){
  #preloader .pl-badge, .pl-badge::before, .pl-badge::after, .pl-ring,
  .pl-bot, .pl-ant, .pl-dot, .pl-word img, .pl-foot{ animation:none !important; }
  .pl-bot{ transform:scale(1) !important; opacity:1 !important; }
  .pl-foot{ opacity:1 !important; }
  .pl-word img{ clip-path:inset(0 0 0 0) !important; }
}