:root {
  --kelly: #12af45;
  --kelly-bright: #39e66e;
  --kelly-deep: #057b2c;
  --ice: #f7fff8;
  --ink: #020703;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--ink);
  color: var(--ice);
  font-family: 'DM Sans', Arial, sans-serif;
}

.intro {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 50% 47%, rgba(18, 175, 69, .19), transparent 18rem),
    radial-gradient(circle at 84% 14%, rgba(57, 230, 110, .1), transparent 22rem),
    radial-gradient(circle at 14% 83%, rgba(5, 123, 44, .16), transparent 27rem),
    linear-gradient(145deg, #010301 0%, #061308 50%, #010402 100%);
}

.intro::before,
.intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.intro::before {
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,.03) 12%, transparent 12.5%, transparent 87%, rgba(18,175,69,.05) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,.02) 12%, transparent 12.5%, transparent 87%, rgba(18,175,69,.04) 87.5%);
  background-size: 70px 122px, 70px 122px;
  mask-image: radial-gradient(circle at center, black 0 45%, transparent 90%);
}
.intro::after {
  width: min(980px, 140vw);
  height: min(980px, 140vw);
  border: 1px solid rgba(57,230,110,.11);
  border-radius: 50%;
  transform: rotate(24deg);
  box-shadow: 0 0 70px rgba(18,175,69,.11), inset 0 0 80px rgba(18,175,69,.05);
}

.aurora { position: absolute; z-index: -2; border-radius: 50%; filter: blur(55px); pointer-events: none; opacity: .38; }
.aurora-one { width: 40rem; height: 18rem; top: -9rem; left: -12rem; background: rgba(18,175,69,.2); transform: rotate(-18deg); animation: floatOne 7s ease-in-out infinite alternate; }
.aurora-two { width: 38rem; height: 22rem; right: -16rem; bottom: -9rem; background: rgba(5,123,44,.25); transform: rotate(28deg); animation: floatTwo 8.5s ease-in-out infinite alternate; }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .13; background-image: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(255,255,255,.1) 1px, transparent 2px, transparent 4px); background-size: 6px 6px; mix-blend-mode: soft-light; }

.intro-content { display: flex; flex-direction: column; align-items: center; width: min(920px, calc(100vw - 36px)); padding: 32px 0 26px; text-align: center; }
.intro-kicker {
  margin: 0 0 clamp(10px, 2vh, 18px);
  color: #86f6a4;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(13px, 1.8vw, 18px);
  letter-spacing: .29em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn .55s ease .35s forwards;
}

.logo-stage {
  position: relative;
  display: grid;
  width: min(720px, 88vw);
  aspect-ratio: 1.1 / 1;
  place-items: center;
}
.intro-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: min(700px, 84vw);
  max-height: 66svh;
  object-fit: contain;
  opacity: 0;
  transform: translateY(5vh) scale(.14) rotate(-4deg);
  transform-origin: center;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.85)) drop-shadow(0 0 18px rgba(18,175,69,.34));
  animation: logoArrival 1.7s cubic-bezier(.17,.82,.23,1.12) .08s forwards;
}
.orbit, .pulse-ring { position: absolute; display: block; border-radius: 50%; pointer-events: none; }
.orbit { z-index: 0; border: 1px solid rgba(57,230,110,.22); opacity: 0; }
.orbit-one { width: 68%; height: 68%; animation: orbitReveal 1.3s ease .92s forwards, orbitSpin 12s linear 2.15s infinite; }
.orbit-two { width: 88%; height: 88%; border-style: dashed; border-color: rgba(18,175,69,.18); animation: orbitReveal 1.3s ease 1.03s forwards, orbitSpinReverse 16s linear 2.3s infinite; }
.pulse-ring { z-index: 1; width: 40%; height: 40%; border: 1px solid rgba(57,230,110,.62); opacity: 0; }
.pulse-one { animation: pulseOut 1.85s ease 1.4s infinite; }
.pulse-two { animation: pulseOut 1.85s ease .48s infinite; }

.intro-message {
  margin: clamp(2px, 1vh, 8px) 0 17px;
  color: rgba(247,255,248,.88);
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: .055em;
  opacity: 0;
  transform: translateY(8px);
  animation: riseFade .6s ease 1.62s forwards;
}
.loading-wrap { width: min(300px, 74vw); opacity: 0; animation: fadeIn .45s ease 1.82s forwards; }
.loading-label { display: block; margin-bottom: 8px; color: rgba(183,248,198,.7); font-family: 'Bebas Neue', Impact, sans-serif; font-size: 12px; letter-spacing: .19em; text-transform: uppercase; }
.loading-bar { display: block; height: 4px; overflow: hidden; border: 1px solid rgba(57,230,110,.28); border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: 0 0 18px rgba(18,175,69,.12); }
.loading-bar > span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--kelly-deep), var(--kelly-bright), #d8ffe0); box-shadow: 0 0 14px rgba(57,230,110,.82); transition: width 6.7s linear; }

.skip-button {
  margin-top: 18px;
  padding: 8px 13px;
  color: rgba(247,255,248,.88);
  background: transparent;
  border: 1px solid rgba(57,230,110,.22);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(8px);
  animation: riseFade .45s ease 2.05s forwards;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.skip-button:hover, .skip-button:focus-visible { color: #fff; background: rgba(18,175,69,.14); border-color: rgba(57,230,110,.65); outline: none; transform: translateY(-2px); }
.intro-footer { position: absolute; bottom: 17px; left: 0; right: 0; margin: 0; color: rgba(183,248,198,.36); font-family: 'Bebas Neue', Impact, sans-serif; font-size: 11px; letter-spacing: .19em; text-align: center; text-transform: uppercase; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }

body.is-leaving .intro { animation: fadeOut .42s ease forwards; }

@keyframes logoArrival {
  0% { opacity: 0; transform: translateY(5vh) scale(.14) rotate(-4deg); }
  58% { opacity: 1; transform: translateY(-1vh) scale(1.065) rotate(.6deg); }
  78% { transform: translateY(.25vh) scale(.98) rotate(-.18deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes orbitReveal { from { opacity: 0; transform: scale(.35) rotate(0deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbitSpinReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes pulseOut { 0% { opacity: .82; transform: scale(.45); } 75%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes riseFade { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { to { opacity: 0; transform: scale(1.02); filter: blur(2px); } }
@keyframes floatOne { to { transform: translate(5rem, 2rem) rotate(-10deg); } }
@keyframes floatTwo { to { transform: translate(-4rem, -3rem) rotate(18deg); } }

@media (max-width: 600px) {
  .intro-content { padding-top: 18px; }
  .logo-stage { width: min(700px, 95vw); }
  .intro-logo { width: min(670px, 94vw); max-height: 56svh; }
  .intro-kicker { margin-bottom: 4px; }
  .intro-message { margin-top: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .intro-logo, .intro-kicker, .intro-message, .loading-wrap, .skip-button { opacity: 1; transform: none; }
  .loading-bar > span { width: 100%; }
}

/* Clean-logo intro: keep the opening screen focused entirely on Aiden's Army. */
.intro-content {
  width: min(920px, calc(100vw - 36px));
  padding: 0;
  transform: translateY(-6vh);
}

.logo-stage {
  width: min(820px, 92vw);
  aspect-ratio: 1.1 / 1;
}

.intro-logo {
  width: min(790px, 88vw);
  max-height: 76svh;
}

@media (max-width: 600px) {
  .intro-content {
    width: min(100%, calc(100vw - 20px));
    transform: translateY(-4vh);
  }
  .logo-stage { width: min(760px, 98vw); }
  .intro-logo { width: min(720px, 95vw); max-height: 67svh; }
}