/* SpecEnvoy hex loading screen — the logo assembles from its six triangles,
   then the pink rim draws itself around the hexagon. Pure CSS animation.
   Markup: a .se-loader overlay containing the inline hex SVG (see homepage). */

.se-loader {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(1200px 700px at 50% -10%, #16224a 0%, transparent 60%),
              linear-gradient(180deg, #0e1730, #060a16);
  opacity: 1; transition: opacity .6s ease;
}
.se-loader.hide { opacity: 0; pointer-events: none; }

.se-loader-mark { width: 132px; height: 132px; filter: drop-shadow(0 10px 34px rgba(0,0,0,.45));
  animation: se-settle .8s cubic-bezier(.5,0,.25,1) both; }
@keyframes se-settle { 0% { transform: rotate(-20deg) scale(.86); } 100% { transform: rotate(0) scale(1); } }

/* each triangle pops + folds into place, staggered */
.se-loader .t { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: se-pop .55s cubic-bezier(.5,0,.25,1) forwards; }
.se-loader .t0 { animation-delay: .06s; }
.se-loader .t1 { animation-delay: .15s; }
.se-loader .t2 { animation-delay: .24s; }
.se-loader .t3 { animation-delay: .33s; }
.se-loader .t4 { animation-delay: .42s; }
.se-loader .t5 { animation-delay: .51s; }
@keyframes se-pop { 0% { opacity: 0; transform: scale(.35) rotate(-35deg); } 100% { opacity: 1; transform: none; } }

/* pink rim draws on after the triangles land */
.se-loader .rim { stroke-dasharray: 252; stroke-dashoffset: 252;
  animation: se-draw .7s ease-out .62s forwards; }
@keyframes se-draw { to { stroke-dashoffset: 0; } }

/* faint inner facet edges fade in last */
.se-loader .seam { opacity: 0; animation: se-fade .5s ease .8s forwards; }
@keyframes se-fade { to { opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  .se-loader-mark, .se-loader .t, .se-loader .rim, .se-loader .seam { animation: none; }
  .se-loader .t { opacity: 1; } .se-loader .rim { stroke-dashoffset: 0; } .se-loader .seam { opacity: .2; }
}