/* ==========================================================
   DELTA landing – colour theme layer
   Load AFTER nimastyle.css (index.html already does).
   Left  / MTA:SA : white-gray, grid + square look
   Right / VMP    : same look as before, in blue
   ========================================================== */

:root {
  --delta-gray: #d4d4d8;          /* white-gray */
  --delta-gray-dim: rgba(212, 212, 216, 0.72);
  --delta-gray-line: rgba(212, 212, 216, 0.09);
  --delta-gray-line-strong: rgba(212, 212, 216, 0.16);
  --delta-blue: #0380c1;
  --delta-blue-glow: rgba(3, 128, 193, 0.45);
}

/* keep text/logo above the decorative layers */
.landing .panel-mta .content,
.landing .panel-vmp .content {
  position: relative;
  z-index: 3;
}

/* logo above the title (same size on both sides) */
.landing .panel-logo {
  display: block;
  width: clamp(84px, 9vw, 132px);
  height: auto;
  margin: 0 auto 22px;
  pointer-events: none;
  user-select: none;
}

/* ---------------- LEFT : MTA:SA – gray, lines & squares ---------------- */

/* graph-paper grid: fine lines every 40px, stronger every 200px */
.landing .panel-mta .grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--delta-gray-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--delta-gray-line-strong) 1px, transparent 1px),
    linear-gradient(var(--delta-gray-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--delta-gray-line) 1px, transparent 1px);
  background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
}

/* thin square frame with four corner brackets */
.landing .panel-mta .grid-frame {
  position: absolute;
  inset: 28px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid var(--delta-gray-line-strong);
}
.landing .panel-mta .grid-frame i {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--delta-gray);
}
.landing .panel-mta .grid-frame i:nth-child(1) { top: -1px;    left: -1px;  border-top-width: 2px;    border-left-width: 2px; }
.landing .panel-mta .grid-frame i:nth-child(2) { top: -1px;    right: -1px; border-top-width: 2px;    border-right-width: 2px; }
.landing .panel-mta .grid-frame i:nth-child(3) { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }
.landing .panel-mta .grid-frame i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.landing .panel-mta .panel-logo {
  filter: brightness(1.35) drop-shadow(0 0 18px rgba(212, 212, 216, 0.22));
  transition: filter 0.4s ease, transform 0.4s ease;
}
.landing .panel-mta:hover .panel-logo {
  filter: brightness(1.6) drop-shadow(0 0 26px rgba(212, 212, 216, 0.35));
  transform: scale(1.04);
}

.landing .panel-mta .content h1,
.landing .panel-mta:hover .content h1 {
  color: var(--delta-gray);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-shadow: none;
}
.landing .panel-mta .content p,
.landing .panel-mta:hover .content p {
  color: var(--delta-gray-dim);
}

/* square button (no rounding) */
.landing .panel-mta .content .btn {
  color: var(--delta-gray);
  background: transparent;
  border: 1px solid var(--delta-gray);
  border-radius: 0;
  box-shadow: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.landing .panel-mta:hover .content .btn {
  background: var(--delta-gray);
  color: #0b0b0d;
  border-color: var(--delta-gray);
}

/* ---------------- RIGHT : VMP – same look, blue ---------------- */

.landing .panel-vmp .tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(3, 128, 193, 0.22), transparent 62%);
}

.landing .panel-vmp .panel-logo {
  filter: drop-shadow(0 0 22px var(--delta-blue-glow));
  transition: filter 0.4s ease, transform 0.4s ease;
}
.landing .panel-vmp:hover .panel-logo {
  filter: drop-shadow(0 0 32px rgba(3, 128, 193, 0.7));
  transform: scale(1.04);
}

.landing .panel-vmp .content h1,
.landing .panel-vmp:hover .content h1 {
  color: var(--delta-blue);
  text-shadow: 0 0 24px var(--delta-blue-glow);
}
.landing .panel-vmp .content p,
.landing .panel-vmp:hover .content p {
  color: var(--delta-blue);
}
.landing .panel-vmp .content .btn {
  color: var(--delta-blue);
  border-color: var(--delta-blue);
  box-shadow: 0 0 14px rgba(3, 128, 193, 0.25);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.landing .panel-vmp:hover .content .btn {
  background: var(--delta-blue);
  color: #fff;
  border-color: var(--delta-blue);
  box-shadow: 0 0 26px rgba(3, 128, 193, 0.55);
}

/* small screens: stacked panels get a tighter frame */
@media (max-width: 720px) {
  .landing .panel-mta .grid-frame { inset: 16px; }
  .landing .panel-logo { width: 72px; margin-bottom: 14px; }
}

/* ---------------- MTA:SA hover -> everything stays gray ----------------
   Uses a grayscale filter, so whatever colour the base stylesheet applies on
   hover (background photo, overlay tint, glow ...) is turned gray. */
.landing .panel-mta:hover {
  filter: grayscale(1);
}
/* cursor light + page fade also go gray while the mouse is over MTA:SA
   (mouse is still over the panel when you click it, so the fade stays gray too) */
body:has(.panel-mta:hover) .flashlight,
body:has(.panel-mta:hover) .page-fade {
  filter: grayscale(1);
}