/* ============================================================
   TechVervo brand loader — the lightning-bolt mark performs as
   a splash loader for 3s before every page reveals its content.
   Markup is injected by /assets/tv-loader.js (static pages) or
   included via the tv-loader Blade partial (portal layouts).
   ============================================================ */

.tv-loader {
  --tvl-green: #0e9f6e;
  --tvl-green-hi: #39ff88;
  --tvl-tile: 96px;
  --tvl-dur: 3000ms;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 42%, #10201a 0%, #070d0a 58%, #040706 100%);
  cursor: progress;
  transition: opacity 450ms ease 120ms, visibility 0s linear 570ms;
}

.tv-loader--out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms ease, visibility 0s linear 450ms;
}

/* faint drifting glow behind the tile */
.tv-loader::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(38% 38% at 42% 40%, rgba(14, 159, 110, 0.16), transparent 70%),
    radial-gradient(30% 30% at 60% 58%, rgba(57, 255, 136, 0.10), transparent 70%);
  animation: tvl-drift 6s ease-in-out infinite alternate;
}

.tv-loader__stage {
  position: relative;
  width: calc(var(--tvl-tile) * 2.1);
  height: calc(var(--tvl-tile) * 2.1);
  display: grid;
  place-items: center;
}

/* ---- the brand mark itself ---- */
.tv-loader__svg {
  width: var(--tvl-tile);
  height: var(--tvl-tile);
  overflow: visible;
  animation: tvl-pop 620ms cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.tv-loader__tile { fill: var(--tvl-green); }

/* bolt is drawn on as a stroke, then the solid fill ignites */
.tv-loader__bolt-stroke {
  fill: none;
  stroke: var(--tvl-green-hi);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: tvl-draw 1500ms cubic-bezier(0.65, 0, 0.35, 1) 450ms forwards;
}

.tv-loader__bolt-fill {
  fill: #fff;
  opacity: 0;
  animation: tvl-ignite 180ms ease-out 1850ms forwards;
}

/* lightning flash: full-tile glow pulses */
.tv-loader__flash {
  fill: var(--tvl-green-hi);
  opacity: 0;
  filter: blur(14px);
  animation: tvl-flash 1100ms ease-out 1900ms infinite;
}

/* orbiting electric arc around the tile */
.tv-loader__orbit {
  position: absolute;
  inset: 0;
  width: 84%;
  height: 84%;
  margin: auto;
  border-radius: 50%;
  animation: tvl-spin 1.6s linear infinite;
}

.tv-loader__orbitArc {
  fill: none;
  stroke: var(--tvl-green-hi);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 56 215; /* ~120° arc on r=44 (≈276 circumference) */
  opacity: 0.85;
}

.tv-loader__orbitTrail {
  fill: none;
  stroke: var(--tvl-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 14 262;
  opacity: 0.5;
  transform: rotate(-26deg);
}

/* spark particles radiating out of the bolt */
.tv-loader__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 999px;
  background: var(--tvl-green-hi);
  box-shadow: 0 0 8px 2px rgba(57, 255, 136, 0.55);
  opacity: 0;
  animation: tvl-spark 1300ms ease-out infinite;
}

/* the six sparks are children 3–8 of the stage (after the two SVGs) */
.tv-loader__spark:nth-child(3) { --tvl-x: -78px;  --tvl-y: -54px; animation-delay: 2.0s; }
.tv-loader__spark:nth-child(4) { --tvl-x:  84px;  --tvl-y: -40px; animation-delay: 2.3s; }
.tv-loader__spark:nth-child(5) { --tvl-x: -60px;  --tvl-y:  72px; animation-delay: 2.55s; }
.tv-loader__spark:nth-child(6) { --tvl-x:  70px;  --tvl-y:  64px; animation-delay: 2.15s; }
.tv-loader__spark:nth-child(7) { --tvl-x:   4px;  --tvl-y: -92px; animation-delay: 2.75s; }
.tv-loader__spark:nth-child(8) { --tvl-x: -94px;  --tvl-y:  18px; animation-delay: 2.95s; }

/* ---- wordmark + charge bar ---- */
.tv-loader__label {
  position: absolute;
  bottom: -4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tv-loader__name {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-transform: uppercase;
  color: rgba(228, 244, 236, 0.78);
  opacity: 0;
  animation: tvl-reveal 500ms ease-out 1400ms forwards;
}

.tv-loader__bar {
  width: 148px;
  height: 2px;
  border-radius: 2px;
  background: rgba(57, 255, 136, 0.14);
  overflow: hidden;
}

.tv-loader__barFill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--tvl-green) 0%, var(--tvl-green-hi) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  animation: tvl-charge var(--tvl-dur) cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}

/* ---- exit: the mark zaps away ---- */
.tv-loader--out .tv-loader__svg {
  animation: tvl-zap-out 420ms cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
}

@keyframes tvl-drift {
  from { transform: translate(-2%, -1%) scale(1); }
  to   { transform: translate(3%, 2%) scale(1.06); }
}

@keyframes tvl-pop {
  0%   { transform: scale(0.5) rotate(-7deg); opacity: 0; }
  60%  { transform: scale(1.06) rotate(1.5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes tvl-draw { to { stroke-dashoffset: 0; } }

@keyframes tvl-ignite {
  0%   { opacity: 0; }
  55%  { opacity: 1; filter: drop-shadow(0 0 10px var(--tvl-green-hi)); }
  100% { opacity: 1; }
}

@keyframes tvl-flash {
  0%   { opacity: 0; }
  12%  { opacity: 0.5; }
  28%  { opacity: 0.08; }
  40%  { opacity: 0.42; }
  100% { opacity: 0; }
}

@keyframes tvl-spin {
  to { transform: rotate(360deg); }
}

@keyframes tvl-spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: translate(var(--tvl-x), var(--tvl-y)) scale(0.2); opacity: 0; }
}

@keyframes tvl-reveal {
  from { opacity: 0; letter-spacing: 0.24em; }
  to   { opacity: 1; letter-spacing: 0.38em; }
}

@keyframes tvl-charge {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes tvl-zap-out {
  0%   { transform: scale(1); opacity: 1; }
  55%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(0.82); opacity: 0; }
}

/* Mobile: slightly smaller stage, same choreography */
@media (max-width: 480px) {
  .tv-loader { --tvl-tile: 78px; }
}

/* Reduced motion: no performance, just a calm hold then reveal */
@media (prefers-reduced-motion: reduce) {
  .tv-loader::before,
  .tv-loader__svg,
  .tv-loader__orbit,
  .tv-loader__flash,
  .tv-loader__spark,
  .tv-loader__bolt-stroke {
    animation: none;
  }
  .tv-loader__bolt-stroke { stroke-dashoffset: 0; opacity: 0; }
  .tv-loader__bolt-fill { opacity: 1; animation: none; }
  .tv-loader__name { animation: none; opacity: 1; }
  .tv-loader__barFill { animation-duration: var(--tvl-dur); animation-timing-function: linear; }
  .tv-loader--out .tv-loader__svg { animation: none; }
}