/* AiterionLab.com — Rev 0.6
   Rev 0.6 changes:
   - Repositioned the badge/logo from bottom-right back to top-center.
   - Desktop logo doubled from 1.500in to 3.000in.
   - Added a 3-second initialization boot / flash sequence in the center.
   - Preserved 0.375in fixed top and bottom banners.
   - Preserved black metallic main section with random shine.
   - Added stronger chrome edge, controlled glow, and floating shadow.
*/

:root {
  --banner-height: 0.375in;

  /* User-requested doubled size */
  --badge-height: 3.000in;

  --page-black: #000000;
  --dark-panel: #020307;
  --blue: #008cff;
  --red: #ff1f2f;

  --shine-angle: 108deg;
  --shine-opacity: 0.20;
  --shine-duration: 950ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html {
  background: var(--page-black);
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--page-black);
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}

body.loading {
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   3-second initialization / flash screen
   ───────────────────────────────────────────────────────────── */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 420ms ease;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.03), transparent 28%),
    linear-gradient(135deg, #030408 0%, #000000 55%, #05070d 100%);
}

.boot-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,140,255,0.06), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255,31,47,0.05), transparent 34%);
  mix-blend-mode: screen;
}

.boot-screen.is-exiting {
  opacity: 0;
  visibility: hidden;
}

.boot-logo {
  position: relative;
  z-index: 2;
  height: min(3.35in, 44vh);
  width: auto;
  max-width: 92vw;
  user-select: none;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.22))
    drop-shadow(-4px 0 16px rgba(0,140,255,0.30))
    drop-shadow(4px 0 16px rgba(255,31,47,0.28))
    drop-shadow(0 12px 20px rgba(0,0,0,0.65));
  animation: bootFlash 3s linear 1;
}

@keyframes bootFlash {
  0%   { opacity: 0;   transform: scale(0.92); filter: brightness(0.7) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  8%   { opacity: 1;   transform: scale(1.00); filter: brightness(1.20) drop-shadow(0 0 10px rgba(255,255,255,0.22)) drop-shadow(-4px 0 16px rgba(0,140,255,0.30)) drop-shadow(4px 0 16px rgba(255,31,47,0.28)) drop-shadow(0 12px 20px rgba(0,0,0,0.65)); }
  16%  { opacity: 0.55; transform: scale(0.99); }
  24%  { opacity: 1;   transform: scale(1.02); filter: brightness(1.28) drop-shadow(0 0 16px rgba(255,255,255,0.35)) drop-shadow(-4px 0 20px rgba(0,140,255,0.34)) drop-shadow(4px 0 20px rgba(255,31,47,0.32)) drop-shadow(0 12px 20px rgba(0,0,0,0.65)); }
  32%  { opacity: 0.62; transform: scale(1.00); }
  40%  { opacity: 1;   transform: scale(1.03); filter: brightness(1.35) drop-shadow(0 0 20px rgba(255,255,255,0.45)) drop-shadow(-5px 0 24px rgba(0,140,255,0.40)) drop-shadow(5px 0 24px rgba(255,31,47,0.38)) drop-shadow(0 12px 20px rgba(0,0,0,0.65)); }
  55%  { opacity: 0.86; transform: scale(1.01); }
  70%  { opacity: 1;   transform: scale(1.02); filter: brightness(1.18) drop-shadow(0 0 11px rgba(255,255,255,0.24)) drop-shadow(-4px 0 16px rgba(0,140,255,0.32)) drop-shadow(4px 0 16px rgba(255,31,47,0.30)) drop-shadow(0 12px 20px rgba(0,0,0,0.65)); }
  100% { opacity: 1;   transform: scale(1.00); }
}

/* ─────────────────────────────────────────────────────────────
   Fixed top / bottom banners — exactly 0.375in
   ───────────────────────────────────────────────────────────── */
.site-banner {
  position: fixed;
  left: 0;
  width: 100%;
  height: var(--banner-height);
  z-index: 1000;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(0, 95, 190, 0.34) 0%,
      rgba(2, 5, 11, 0.98) 31%,
      rgba(2, 4, 9, 1) 50%,
      rgba(17, 3, 7, 0.98) 69%,
      rgba(180, 0, 18, 0.34) 100%),
    var(--dark-panel);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.045),
    inset 0 4px 12px rgba(255,255,255,0.025),
    0 0 12px rgba(0,0,0,0.45);
}

.site-banner::before,
.site-banner::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 50%;
  pointer-events: none;
  opacity: 0.80;
}

.site-banner::before {
  left: 0;
  background:
    linear-gradient(90deg, rgba(0,140,255,0.30), transparent 72%),
    repeating-linear-gradient(
      0deg,
      transparent 0 6px,
      rgba(0,140,255,0.13) 6px 7px,
      transparent 7px 13px
    );
}

.site-banner::after {
  right: 0;
  background:
    linear-gradient(270deg, rgba(255,31,47,0.30), transparent 72%),
    repeating-linear-gradient(
      0deg,
      transparent 0 6px,
      rgba(255,31,47,0.13) 6px 7px,
      transparent 7px 13px
    );
}

.site-banner--top {
  top: 0;
  border-bottom: 1px solid rgba(80, 162, 255, 0.46);
}

.site-banner--bottom {
  bottom: 0;
  border-top: 1px solid rgba(255, 68, 86, 0.46);
}

/* ─────────────────────────────────────────────────────────────
   Main section — true black metallic welcome area
   ───────────────────────────────────────────────────────────── */
.site-main {
  position: fixed;
  top: var(--banner-height);
  right: 0;
  bottom: var(--banner-height);
  left: 0;
  z-index: 10;
  overflow: hidden;
  background-color: #000000;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,0.040), transparent 22%),
    radial-gradient(circle at 82% 68%, rgba(255,255,255,0.026), transparent 26%),
    linear-gradient(
      115deg,
      rgba(255,255,255,0.000) 0%,
      rgba(255,255,255,0.025) 18%,
      rgba(255,255,255,0.000) 34%,
      rgba(255,255,255,0.038) 50%,
      rgba(255,255,255,0.000) 66%,
      rgba(255,255,255,0.020) 84%,
      rgba(255,255,255,0.000) 100%
    );
}

.site-main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.014) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.008) 0 1px,
      transparent 1px 9px
    );
}

/* Random metallic shine blade, always behind the logo */
.site-main::before {
  content: "";
  position: absolute;
  top: -32%;
  bottom: -32%;
  left: -46vw;
  width: 34vw;
  min-width: 240px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(0) skewX(-11deg);
  background:
    linear-gradient(
      var(--shine-angle),
      transparent 0%,
      rgba(255,255,255,0.015) 26%,
      rgba(255,255,255,0.14) 44%,
      rgba(255,255,255,0.42) 50%,
      rgba(255,255,255,0.12) 56%,
      rgba(255,255,255,0.018) 72%,
      transparent 100%
    );
  filter: blur(1.2px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.site-main.shine-active::before {
  animation: metallicShine var(--shine-duration) cubic-bezier(.22,.68,.25,1) 1;
}

@keyframes metallicShine {
  0% {
    opacity: 0;
    transform: translateX(-8vw) skewX(-11deg);
  }
  12% {
    opacity: var(--shine-opacity);
  }
  55% {
    opacity: var(--shine-opacity);
  }
  100% {
    opacity: 0;
    transform: translateX(190vw) skewX(-11deg);
  }
}

/* ─────────────────────────────────────────────────────────────
   Top-centered stationary logo
   The logo is centered horizontally and overlaps the top banner
   and the main section, staying on the highest visual layer.
   ───────────────────────────────────────────────────────────── */
.site-badge {
  position: fixed;
  top: 0;
  left: 50%;
  height: var(--badge-height);
  width: auto;
  max-width: min(96vw, 17in);
  display: block;
  z-index: 2500;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.55))
    drop-shadow(0 0 12px rgba(255,255,255,0.18))
    drop-shadow(-5px 4px 13px rgba(0, 113, 255, 0.28))
    drop-shadow(5px 4px 13px rgba(255, 20, 44, 0.26))
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.82));
}

.site-badge::selection {
  background: transparent;
}

/* Supporting tech highlight rails around the centered badge */
body::before,
body::after {
  content: "";
  position: fixed;
  top: calc(var(--banner-height) + 0.20in);
  width: clamp(50px, 16vw, 240px);
  height: 1px;
  z-index: 1800;
  pointer-events: none;
  opacity: 0.70;
}

body::before {
  left: calc(50% - min(48vw, 8.5in));
  background: linear-gradient(90deg, rgba(0,140,255,0), rgba(0,140,255,0.95), rgba(0,140,255,0));
  box-shadow: 0 0 10px rgba(0,140,255,0.45);
}

body::after {
  right: calc(50% - min(48vw, 8.5in));
  background: linear-gradient(90deg, rgba(255,31,47,0), rgba(255,31,47,0.95), rgba(255,31,47,0));
  box-shadow: 0 0 10px rgba(255,31,47,0.45);
}

/* Responsive logo scaling */
@media (max-width: 1200px) {
  :root {
    --badge-height: 2.500in;
  }
}

@media (max-width: 900px) {
  :root {
    --badge-height: 2.050in;
  }

  .boot-logo {
    height: min(2.60in, 34vh);
  }
}

@media (max-width: 640px) {
  :root {
    --badge-height: 1.500in;
  }

  .boot-logo {
    height: min(2.00in, 28vh);
  }
}

/* Reduced motion: disable boot flashing and random shine motion. */
@media (prefers-reduced-motion: reduce) {
  .boot-logo {
    animation: none;
  }

  .site-main::before {
    display: none;
  }

  .boot-screen {
    transition: none;
  }
}