/* ============================================================
   PREMIUM BRAND LOADER — VisionForge Technologies
   "Forge Reveal" — fragments converge into the mark, the
   wordmark unmasks, then the loader retracts to reveal the site.
   Isolated component. GPU-friendly: only opacity/transform/clip-path.
   ============================================================ */

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-base);
  pointer-events: none;
}

/* ─── Split panels (exit transition) ───
   Two halves sit behind the atmosphere/stage and retract
   vertically to reveal the page underneath. ─── */
.loader__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--color-bg-base);
  transition: transform var(--duration-slower) var(--ease-in-out);
}
.loader__panel--top { top: 0; }
.loader__panel--bottom { bottom: 0; }

/* ─── Atmosphere: subtle grid + glow + particles ─── */
.loader__atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity var(--duration-slower) var(--ease-in-out);
}

.loader__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 0, 0, 0.9) 0%, transparent 75%);
}

.loader__glow {
  position: absolute;
  inset: 0;
  background: var(--gradient-glow);
}

.loader__particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  opacity: 0;
}
.loader__particle--1 { top: 32%; left: 28%; animation: vf-particle-float 4.5s var(--ease-in-out) 0.2s infinite; }
.loader__particle--2 { top: 64%; left: 68%; animation: vf-particle-float 5.2s var(--ease-in-out) 0.6s infinite; }
.loader__particle--3 { top: 24%; left: 70%; animation: vf-particle-float 4s   var(--ease-in-out) 1s   infinite; }
.loader__particle--4 { top: 70%; left: 32%; animation: vf-particle-float 4.8s var(--ease-in-out) 1.4s infinite; }

/* ─── Stage: logo mark + loading line ─── */
.loader__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  transition: opacity var(--duration-slower) var(--ease-in-out), transform var(--duration-slower) var(--ease-in-out);
}

.loader__mark {
  position: relative;
  width: clamp(200px, 26vw, 300px);
  aspect-ratio: 2304 / 1536;
}

.loader__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(0 60% 0 0);
  opacity: 0;
  will-change: opacity, transform, clip-path;
  animation:
    vf-logo-in 420ms var(--ease-out) 260ms both,
    vf-wordmark-reveal 480ms var(--ease-smooth) 620ms both;
}

/* Light sweep across the forming mark */
.loader__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
  clip-path: inset(0 60% 0 0);
  transform: translateX(-120%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: vf-sweep 460ms var(--ease-smooth) 620ms 1;
}

/* Fragments — small forged chevrons that converge into the mark */
.loader__fragment {
  position: absolute;
  top: 42%;
  left: 20%;
  width: 16px;
  height: 5px;
  border-radius: 2px;
  background: var(--gradient-brand);
  opacity: 0;
  will-change: opacity, transform;
  animation: vf-fragment-converge 420ms var(--ease-smooth) both;
}
.loader__fragment--1 { --fx: -70px; --fy: -60px; --fr: -35deg; animation-delay: 0ms; }
.loader__fragment--2 { --fx: 80px;  --fy: -50px; --fr: 28deg;  animation-delay: 50ms; }
.loader__fragment--3 { --fx: -90px; --fy: 40px;  --fr: 20deg;  animation-delay: 90ms; }
.loader__fragment--4 { --fx: 70px;  --fy: 55px;  --fr: -22deg; animation-delay: 70ms; }
.loader__fragment--5 { --fx: 0px;   --fy: -80px; --fr: 8deg;   animation-delay: 110ms; }
.loader__fragment--6 { --fx: 10px;  --fy: 75px;  --fr: -10deg; animation-delay: 30ms; }

/* Loading indicator — "forge line" */
.loader__line {
  position: relative;
  width: clamp(160px, 18vw, 220px);
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-border-subtle);
  overflow: hidden;
  opacity: 0;
  animation: vf-fade-in var(--duration-slow) var(--ease-out) 450ms both;
}

.loader__line-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--gradient-brand);
  transition: transform var(--duration-normal) var(--ease-out);
}

/* ─── Keyframes ─── */
@keyframes vf-fragment-converge {
  0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(0.6); }
  45%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes vf-logo-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes vf-wordmark-reveal {
  from { clip-path: inset(0 60% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes vf-sweep {
  from { opacity: 0.9; transform: translateX(-120%); }
  60%  { opacity: 0.9; }
  to   { opacity: 0; transform: translateX(120%); }
}

@keyframes vf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vf-particle-float {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50%      { opacity: 0.55; transform: translateY(-10px); }
}

/* ─── Exit transition ─── */
.loader.is-hidden {
  pointer-events: none;
}
.loader.is-hidden .loader__panel--top {
  transform: translateY(-100%);
}
.loader.is-hidden .loader__panel--bottom {
  transform: translateY(100%);
}
.loader.is-hidden .loader__atmosphere,
.loader.is-hidden .loader__stage {
  opacity: 0;
  transform: scale(0.98);
}

/* ─── Reduced motion: simple, calm fade — no travel, no sweep ─── */
@media (prefers-reduced-motion: reduce) {
  .loader__fragment,
  .loader__mark::after,
  .loader__particle {
    display: none;
  }
  .loader__logo {
    clip-path: inset(0 0 0 0);
    animation: vf-fade-in var(--duration-slow) var(--ease-out) both;
  }
  .loader__line {
    animation: vf-fade-in var(--duration-slow) var(--ease-out) both;
  }
  .loader__panel,
  .loader__stage,
  .loader__atmosphere {
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  .loader.is-hidden .loader__panel--top,
  .loader.is-hidden .loader__panel--bottom {
    transform: none;
    opacity: 0;
  }
  .loader.is-hidden .loader__stage,
  .loader.is-hidden .loader__atmosphere {
    transform: none;
  }
}

@media (max-width: 480px) {
  .loader__stage { gap: var(--space-3); }
}