/*
 * Virelia cosmic visual system
 * VIRELIA_COSMIC_SITE_V1
 *
 * Content and layout semantics are intentionally preserved.
 */

:root {
  --cosmic-bg: #010613;
  --cosmic-bg-soft: #020b20;
  --cosmic-panel: rgba(3, 15, 38, .82);
  --cosmic-panel-strong: rgba(2, 11, 29, .94);

  --cosmic-line: rgba(116, 202, 246, .14);
  --cosmic-line-strong: rgba(122, 211, 255, .25);

  --cosmic-glow: rgba(72, 184, 241, .14);
  --cosmic-glow-strong: rgba(95, 207, 255, .25);

  --cosmic-text: #f1f7fb;
  --cosmic-muted: rgba(203, 224, 238, .68);

  --cosmic-radius: 34px;
}


/* =========================================================
   WORLD / BACKGROUND
   ========================================================= */

html {
  background: var(--cosmic-bg);
}

body {
  min-height: 100vh;

  color: var(--cosmic-text);

  background-color: var(--cosmic-bg);

  background-image:
    radial-gradient(
      circle at 8% 8%,
      rgba(174, 232, 255, .45) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 18% 31%,
      rgba(110, 206, 252, .35) 0 1px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 27% 76%,
      rgba(202, 241, 255, .35) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 43% 15%,
      rgba(121, 211, 255, .34) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 57% 59%,
      rgba(198, 240, 255, .26) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 69% 22%,
      rgba(117, 206, 255, .42) 0 1px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 79% 73%,
      rgba(194, 239, 255, .31) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 91% 37%,
      rgba(129, 212, 255, .34) 0 1px,
      transparent 1.8px
    ),

    radial-gradient(
      circle at 51% 7%,
      rgba(17, 90, 149, .27),
      transparent 30%
    ),

    radial-gradient(
      circle at 12% 55%,
      rgba(9, 72, 128, .18),
      transparent 32%
    ),

    radial-gradient(
      circle at 86% 72%,
      rgba(8, 71, 129, .18),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #010612 0%,
      #020a1c 36%,
      #02122c 69%,
      #02091a 100%
    );

  background-attachment: fixed;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  border-bottom:
    1px solid rgba(127, 202, 242, .10);

  background:
    linear-gradient(
      180deg,
      rgba(1, 7, 21, .95),
      rgba(2, 10, 27, .86)
    );

  box-shadow:
    0 18px 50px rgba(0, 4, 17, .18);

  backdrop-filter:
    blur(18px)
    saturate(120%);
}

.site-header img {
  filter:
    drop-shadow(
      0 0 11px rgba(105, 210, 255, .14)
    );
}

.site-header a {
  transition:
    color .18s ease,
    text-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.site-header a:hover,
.site-header a:focus-visible {
  text-shadow:
    0 0 14px rgba(114, 215, 255, .30);
}


/* =========================================================
   TOP-LEVEL COSMIC PANELS
   ========================================================= */

main {
  position: relative;

  padding-top: 28px;
  padding-bottom: 24px;
}

main > section:not(.ecosystem-section) {
  position: relative;
  isolation: isolate;

  width: min(
    1440px,
    calc(100% - 40px)
  );

  margin-left: auto;
  margin-right: auto;

  overflow: hidden;

  border:
    1px solid var(--cosmic-line);

  border-radius:
    var(--cosmic-radius);

  background:
    radial-gradient(
      circle at 74% 24%,
      rgba(31, 123, 185, .12),
      transparent 31%
    ),
    radial-gradient(
      circle at 18% 80%,
      rgba(17, 88, 146, .08),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(4, 20, 49, .80),
      rgba(1, 8, 25, .94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 28px 90px rgba(0, 4, 20, .18);
}


/* faint orbit per major section */

main > section:not(.ecosystem-section)::before {
  content: "";

  position: absolute;
  z-index: -2;

  width: 92%;
  height: 125%;

  top: -40%;
  right: -24%;

  pointer-events: none;

  border:
    1px solid rgba(106, 195, 240, .08);

  border-radius: 50%;

  transform: rotate(-17deg);
}

main > section:not(.ecosystem-section)::after {
  content: "";

  position: absolute;
  z-index: -1;

  width: 58%;
  height: 135%;

  left: -22%;
  bottom: -63%;

  pointer-events: none;

  border:
    1px dashed rgba(106, 195, 240, .075);

  border-radius: 50%;

  transform: rotate(20deg);
}


/* =========================================================
   HERO
   ========================================================= */

main > .hero {
  background:
    radial-gradient(
      circle at 73% 41%,
      rgba(36, 126, 190, .22),
      transparent 31%
    ),
    radial-gradient(
      circle at 54% 42%,
      rgba(19, 85, 145, .08),
      transparent 43%
    ),
    linear-gradient(
      132deg,
      rgba(2, 10, 28, .97),
      rgba(3, 21, 54, .85)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 36px 110px rgba(0, 4, 22, .25);
}

.hero h1 {
  text-shadow:
    0 4px 30px rgba(0, 0, 0, .40),
    0 0 45px rgba(62, 159, 217, .07);
}

.hero img {
  filter:
    drop-shadow(
      0 0 28px rgba(80, 191, 245, .14)
    );
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.kicker {
  color: #8bd6fa !important;

  letter-spacing: .16em;

  text-shadow:
    0 0 18px rgba(98, 208, 255, .13);
}

.section h2,
.section h3,
.hero h1 {
  color: #f3f7fb;
}

.section-copy,
.section p,
.info-card p,
.site-footer p,
.fineprint {
  color: var(--cosmic-muted);
}


/* =========================================================
   INNER CARDS
   ========================================================= */

.info-card,
.flag-panel,
.emblem-panel,
.palette-panel,
.section article {
  border-color:
    rgba(121, 201, 242, .15) !important;

  background:
    linear-gradient(
      145deg,
      rgba(11, 35, 68, .65),
      rgba(3, 17, 42, .78)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 18px 48px rgba(0, 3, 17, .12);

  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.info-card:hover,
.flag-panel:hover,
.emblem-panel:hover,
.palette-panel:hover {
  border-color:
    rgba(122, 211, 255, .26) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 58px rgba(0, 4, 22, .20),
    0 0 38px rgba(52, 157, 216, .035);
}


/* numbered chips */

.icon {
  border:
    1px solid rgba(130, 215, 255, .20);

  background:
    rgba(17, 91, 144, .42) !important;

  color: #e5f7ff;

  box-shadow:
    0 0 20px rgba(76, 181, 237, .10);
}


/* =========================================================
   FOUNDING
   ========================================================= */

.founding {
  border:
    1px solid rgba(125, 205, 245, .14);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 22% 50%,
      rgba(41, 142, 202, .12),
      transparent 28%
    ),
    rgba(4, 18, 44, .48);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}

.founding-art img {
  filter:
    drop-shadow(
      0 0 25px rgba(104, 210, 255, .12)
    );
}

.number strong {
  text-shadow:
    0 0 28px rgba(98, 207, 255, .13);
}


/* =========================================================
   FLAG / SYMBOLS
   ========================================================= */

.flag-frame {
  position: relative;

  overflow: hidden;

  border-color:
    rgba(133, 210, 248, .17) !important;

  background:
    rgba(5, 25, 52, .68) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}


/*
 * Hides the tiny white source-edge artefact in the
 * upper-left corner without recompressing flag.webp.
 */

.flag-frame img {
  display: block;

  clip-path:
    inset(3px);

  transform:
    scale(1.012);

  transform-origin:
    center;

  filter:
    saturate(.96)
    contrast(1.02);
}

.emblem-panel img {
  filter:
    drop-shadow(
      0 0 22px rgba(100, 205, 255, .12)
    );
}


/* palette */

.swatch {
  border:
    1px solid rgba(142, 211, 245, .16);

  box-shadow:
    0 8px 26px rgba(0, 3, 18, .14);
}


/* =========================================================
   LINKS / BUTTONS
   ========================================================= */

.button,
a.button,
button {
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.button:hover,
a.button:hover,
button:hover {
  box-shadow:
    0 0 24px rgba(87, 193, 246, .10);
}

.button:focus-visible,
a:focus-visible,
button:focus-visible {
  outline:
    2px solid rgba(135, 222, 255, .75);

  outline-offset: 3px;
}


/* =========================================================
   ECOSYSTEM INTEGRATION
   ========================================================= */

.ecosystem-section {
  margin-top: 54px;
  margin-bottom: 54px;
}

.orbit-map {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 32px 100px rgba(0, 4, 20, .24),
    0 0 70px rgba(23, 108, 165, .035);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  width: min(
    1440px,
    calc(100% - 40px)
  );

  margin:
    22px auto 26px;

  overflow: hidden;

  border:
    1px solid rgba(122, 205, 247, .12);

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 86% 35%,
      rgba(28, 119, 181, .10),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(4, 20, 48, .78),
      rgba(1, 9, 27, .94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 22px 70px rgba(0, 3, 18, .16);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  :root {
    --cosmic-radius: 25px;
  }

  main {
    padding-top: 14px;
  }

  main > section:not(.ecosystem-section) {
    width:
      calc(100% - 20px);

    border-radius:
      var(--cosmic-radius);
  }

  main > section:not(.ecosystem-section)::before {
    width: 125%;
    right: -62%;
  }

  main > section:not(.ecosystem-section)::after {
    width: 95%;
    left: -58%;
  }

  .founding {
    border-radius: 22px;
  }

  .site-footer {
    width:
      calc(100% - 20px);

    margin-bottom: 10px;

    border-radius: 22px;
  }

  .flag-frame img {
    clip-path:
      inset(2px);

    transform:
      scale(1.01);
  }
}


@media (prefers-reduced-motion: reduce) {
  .info-card,
  .flag-panel,
  .emblem-panel,
  .palette-panel,
  .button,
  a.button,
  button {
    transition: none !important;
  }
}


/* =========================================================
   COSMIC SPACING PASS V2
   Consistent breathing room across the entire page.
   ========================================================= */

main > .section:not(.ecosystem-section) {
  box-sizing: border-box;

  padding:
    clamp(48px, 5vw, 76px)
    clamp(42px, 5.2vw, 78px);
}


/*
 * section-tight used to mean visually compact.
 * Inside the new framed design it still needs a safe area,
 * just slightly smaller than a normal section.
 */

main > .section.section-tight:not(.ecosystem-section) {
  padding:
    clamp(42px, 4.5vw, 66px)
    clamp(42px, 5.2vw, 78px);
}


/* Give headings their own breathing room. */

main > .section:not(.ecosystem-section) > .section-head,
main > .section:not(.ecosystem-section) > header {
  margin-bottom:
    clamp(30px, 3vw, 46px);
}


/*
 * Large editorial headings should not visually touch
 * either the frame or the content below them.
 */

main > .section:not(.ecosystem-section) h2 {
  margin-top: 0;

  margin-bottom:
    clamp(26px, 2.7vw, 40px);

  line-height: .98;
}


/* Kicker → heading spacing */

main > .section:not(.ecosystem-section) .kicker {
  display: block;

  margin-bottom: 18px;
}


/* =========================================================
   CARD AIR
   ========================================================= */

.info-card {
  box-sizing: border-box;

  padding:
    clamp(26px, 2.6vw, 36px);
}

.info-card .icon {
  margin-bottom: 24px;
}

.info-card h3 {
  margin-top: 0;
  margin-bottom: 14px;
}

.info-card p {
  margin-bottom: 0;

  max-width: 38ch;

  line-height: 1.65;
}


/*
 * Generic editorial cards used further down the homepage.
 * Avoid touching dedicated symbol panels.
 */

.section article:not(.flag-panel):not(.emblem-panel) {
  box-sizing: border-box;
}


/* =========================================================
   NATIONAL IDENTITY
   ========================================================= */

.flag-panel,
.emblem-panel {
  box-sizing: border-box;

  padding:
    clamp(28px, 3vw, 42px);
}

.flag-panel h3,
.emblem-panel h3 {
  margin-top: 0;

  margin-bottom:
    clamp(22px, 2vw, 30px);
}


/* More space between text intro and the symbol panels. */

.symbols-grid,
.identity-grid {
  margin-top:
    clamp(34px, 3vw, 48px);
}


/* =========================================================
   FOUNDING BLOCK
   ========================================================= */

.founding {
  box-sizing: border-box;

  overflow: hidden;
}


/*
 * Prevent a nested founding card from visually merging
 * with the border of its parent section.
 */

main > .section.section-tight > .founding {
  margin: 0;
}


/* =========================================================
   SECTION-TO-SECTION RHYTHM
   ========================================================= */

main > section:not(.ecosystem-section) + section:not(.ecosystem-section) {
  margin-top: 22px;
}

main > .ecosystem-section {
  margin-top:
    clamp(42px, 5vw, 72px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  main > .section:not(.ecosystem-section),
  main > .section.section-tight:not(.ecosystem-section) {
    padding:
      34px
      22px;
  }

  main > .section:not(.ecosystem-section) h2 {
    margin-bottom: 26px;
  }

  main > .section:not(.ecosystem-section) .kicker {
    margin-bottom: 13px;
  }

  .info-card,
  .flag-panel,
  .emblem-panel {
    padding: 24px;
  }

  .info-card .icon {
    margin-bottom: 19px;
  }

  main > section:not(.ecosystem-section)
  + section:not(.ecosystem-section) {
    margin-top: 14px;
  }
}


/* =========================================================
   STATUS BRIDGE V3
   Center the online-status card across both section borders.
   ========================================================= */

.status-wrap {
  position: relative;
  z-index: 30;

  /*
   * Keep its original layout position,
   * but visually move it down so approximately
   * half overlaps Hero and half overlaps About.
   */
  transform: translateY(28px);
}

.status-card {
  position: relative;
  z-index: 31;

  box-shadow:
    0 16px 44px rgba(0, 3, 18, .34),
    0 0 30px rgba(54, 162, 221, .045),
    inset 0 1px 0 rgba(255,255,255,.045);
}


/* =========================================================
   CLEAN FLAG V3
   The replacement asset has no corner artefact,
   so remove the previous crop workaround.
   ========================================================= */

.flag-frame img {
  clip-path: none !important;

  transform: none !important;

  width: 100%;
  height: auto;

  object-fit: contain;
}


@media (max-width: 760px) {
  .status-wrap {
    transform: translateY(20px);
  }
}


/* =========================================================
   FOOTER CLEANUP V4
   ========================================================= */

html,
body {
  margin-bottom: 0;
  padding-bottom: 0;
}

.site-footer {
  margin-bottom: 0 !important;
}

/*
 * No dark empty strip after the footer.
 * Extend the page background cleanly to the viewport edge.
 */
body {
  min-height: 100vh;
}