/* =========================================================
   loader.css — FINAL (HOLLOW LETTERS + TIGHT BOX)
   - Fullscreen overlay centers a compact framed box
   - Letters are transparent with a thin, crisp outline
   - 3D logo sized to match the compact box (no snap/jitter)
   ========================================================= */

/* ---------- Overlay (centers content) ---------- */
#v2-loading-outer,
#v2-loading-outer * {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}

#v2-loading-outer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;

  /* Backdrop stays fullscreen; tight frame is on .v2-box */
  background: linear-gradient(180deg,#1a2332 0%,#2d3f52 20%,#3d5166 40%,#e85d2f 80%,#ff6b35 100%);
  z-index: 99999;
  color: rgba(255,255,255,0.15);  /* non-critical, just for selection/fallback */

  /* Typographic base (compact scale) */
  font-size: 60px;    /* overall letter size; adjust if needed */
  font-weight: 900;

  /* Performance & stability */
  contain: layout style paint;
  transform: translateZ(0);
  backface-visibility: hidden;

  /* Letter outline tunables */
  --letter-stroke: rgba(255,255,255,0.95);
  --stroke-w: 1.4px;  /* try 1.25–1.6 for taste */
}

/* ---------- Compact framed box that hugs content ---------- */
.v2-box{
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);                 /* spacing between letters & logo */
  padding: clamp(16px, 2.2vw, 28px) clamp(20px, 3vw, 36px);
  width: max-content;
  max-width: 92vw;

  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 12px 36px rgba(0,0,0,0.35),
    0 0 40px rgba(255,107,53,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  isolation: isolate;
}

/* Subtle animated sheen along the border */
.v2-box::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.35) 50%,
      rgba(255,255,255,0) 100%) 0 0 / 200% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: v2-sheen 3.75s linear infinite;
  opacity:.55;
}
@keyframes v2-sheen{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

/* ---------- Hollow letters (transparent fill + thin outline) ---------- */
.v2-letter{
  /* Blocky/system stack (no webfonts = no swap) */
  font-family: "Segoe UI Black","Arial Black","Impact",
               ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .06em;                 /* more spacing for the block look */

  /* HOLLOW: ensure no fill */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;  /* Chrome/Safari */
  -moz-text-fill-color: transparent;

  /* Thin, crisp outline in Chromium/WebKit */
  -webkit-text-stroke: var(--stroke-w) var(--letter-stroke);
  text-shadow: none !important;  /* prevents faux fill illusion */

  /* Stability & subtle pulse */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: filter;
  animation: v2-letterGlow 2s ease-in-out infinite;
  opacity: 1;
}
@keyframes v2-letterGlow{
  0%,100%{ filter: brightness(0.95); }
  50%    { filter: brightness(1.10); }
}

/* Stagger pulses — order: L,O,A,D,I,[logo],G */
.v2-box .v2-letter:nth-child(1){ animation-delay: 0s;  } /* L */
.v2-box .v2-letter:nth-child(2){ animation-delay: .1s; } /* O */
.v2-box .v2-letter:nth-child(3){ animation-delay: .2s; } /* A */
.v2-box .v2-letter:nth-child(4){ animation-delay: .3s; } /* D */
.v2-box .v2-letter:nth-child(5){ animation-delay: .4s; } /* I */
/* child(6) = #v2-logo-container */
.v2-box .v2-letter:nth-child(7){ animation-delay: .6s; } /* G */

/* Firefox fallback (simulate outline with minimal halo) */
@supports not (-webkit-text-stroke: 1px black) {
  .v2-letter{
    text-shadow:
      0 1px 0 var(--letter-stroke),
      1px 0 0 var(--letter-stroke),
      0 -1px 0 var(--letter-stroke),
      -1px 0 0 var(--letter-stroke);
  }
}

/* ---------- 3D Logo (compact, no initial snap) ---------- */
#v2-logo-container {
  display: inline-block;
  position: relative;
  width: 60px;   /* smaller to match reduced text size */
  height: 68px;
  perspective: 1200px;
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#v2-logo-3d {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 50px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translateZ(0);
  will-change: transform;
  animation: v2-logoRotate 8s linear infinite;
  backface-visibility: hidden;
}
@keyframes v2-logoRotate {
  0%   { transform: translate(-50%, -50%) rotateY(0deg)   translateZ(0); }
  100% { transform: translate(-50%, -50%) rotateY(360deg) translateZ(0); }
}

.v2-logo-face {
  position: absolute;
  width: 58px;
  height: 50px;
  backface-visibility: hidden;
  will-change: transform;
  contain: strict;
}
.v2-logo-face svg {
  width: 100%;
  height: 100%;
  display: block;
}

#v2-front  { transform: translate3d(0, 0, 25px); }
#v2-back   { transform: rotateY(180deg) translate3d(0, 0, 25px); }
#v2-top    { transform: rotateX( 90deg) translate3d(0, 0, 25px); }
#v2-bottom { transform: rotateX(-90deg) translate3d(0, 0, 25px); }
#v2-left   { transform: rotateY(-90deg) translate3d(0, 0, 34px); }
#v2-right  { transform: rotateY( 90deg) translate3d(0, 0, 34px); }

/* Soft radial glow behind the logo (kept subtle inside the box) */
#v2-logo-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(255, 96, 25, 0.28) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  z-index: -1;
  will-change: opacity;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #v2-logo-3d { animation: v2-logoRotateSimple 6s ease-in-out infinite; }
  @keyframes v2-logoRotateSimple {
    0%, 100% { transform: translate(-50%, -50%) rotateY(0deg)   translateZ(0); }
    50%      { transform: translate(-50%, -50%) rotateY(180deg) translateZ(0); }
  }
  .v2-letter { animation: none; filter: none; }
}

/* ---------- Responsive (box stays tight; scale type & logo) ---------- */
@media (max-width: 768px){
  #v2-loading-outer { font-size: 42px; --stroke-w: 1.2px; }
  .v2-box{ gap: 10px; padding: 16px 22px; border-radius: 12px; }

  #v2-logo-container { width: 50px; height: 56px; }
  #v2-logo-3d{ width: 46px; height: 40px; }
  .v2-logo-face{ width: 46px; height: 40px; }

  #v2-front  { transform: translate3d(0, 0, 20px); }
  #v2-back   { transform: rotateY(180deg) translate3d(0, 0, 20px); }
  #v2-top    { transform: rotateX(90deg)  translate3d(0, 0, 20px); }
  #v2-bottom { transform: rotateX(-90deg) translate3d(0, 0, 20px); }
  #v2-left   { transform: rotateY(-90deg) translate3d(0, 0, 27px); }
  #v2-right  { transform: rotateY( 90deg) translate3d(0, 0, 27px); }

  #v2-logo-container::before{ width: 70px; height: 70px; }
}

@media (max-width: 480px){
  #v2-loading-outer { font-size: 30px; --stroke-w: 1px; }
  .v2-box{ gap: 8px; padding: 12px 16px; border-radius: 10px; }

  #v2-logo-container { width: 38px; height: 42px; }
  #v2-logo-3d{ width: 34px; height: 30px; }
  .v2-logo-face{ width: 34px; height: 30px; }

  #v2-front  { transform: translate3d(0, 0, 15px); }
  #v2-back   { transform: rotateY(180deg) translate3d(0, 0, 15px); }
  #v2-top    { transform: rotateX(90deg)  translate3d(0, 0, 15px); }
  #v2-bottom { transform: rotateX(-90deg) translate3d(0, 0, 15px); }
  #v2-left   { transform: rotateY(-90deg) translate3d(0, 0, 21px); }
  #v2-right  { transform: rotateY( 90deg) translate3d(0, 0, 21px); }

  #v2-logo-container::before{ width: 56px; height: 56px; }
}

/* ---------- Pause animations when tab hidden ---------- */
.v2-paused #v2-logo-3d,
.v2-paused .v2-letter { animation-play-state: paused; }