/* ==========================================================================
   The homepage (Default.aspx): sk-frontend's HomeContent laid out with sk-
   components. Only what the components do not already do lives here: the
   content measure, the hero, the phase cards and a few sizes.
   ========================================================================== */

/* sk-frontend's max-w-5xl: the landing page reads as one centred column. */
.sk-page.sk-home {
  max-width: 64rem;
}

/* ---- Backdrop ------------------------------------------------------------ */

/* The homepage paints its own space scene, so the body's (general.css) is dropped:
   body is positioned, so its background would cover the backdrop's negative layer. */
body {
  background: none;
}

.sk-home-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--sk-surface-on-image-solid) url("../images/home/nebula-base.webp") center / cover no-repeat;
}

.sk-home-clouds {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
  mix-blend-mode: screen;
  will-change: translate;
}

.sk-home-clouds--far {
  background-image: url("../images/home/clouds-far.webp");
  opacity: 0.5;
  filter: blur(1px);
  transform: scale(1.2);
  animation: sk-home-drift-far 90s ease-in-out infinite;
}

.sk-home-clouds--near {
  background-image: url("../images/home/clouds-near.webp");
  opacity: 0.4;
  transform: scale(1.3);
  animation: sk-home-drift-near 70s ease-in-out infinite;
}

/* sk-frontend's drift: far ±120px / ±40px, near ±180px / ±60px, as an ellipse. */
@keyframes sk-home-drift-far {
  0%, 100% { translate: 0 40px; }
  25% { translate: 120px 0; }
  50% { translate: 0 -40px; }
  75% { translate: -120px 0; }
}

@keyframes sk-home-drift-near {
  0%, 100% { translate: 180px 0; }
  25% { translate: 0 60px; }
  50% { translate: -180px 0; }
  75% { translate: 0 -60px; }
}

/* The four corner pieces, at sk-frontend's sizes: the top pair 38vw clamped
   340-620px, the bottom pair 42vw clamped 360-720px and screened. */
.sk-home-corner {
  position: absolute;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-size: contain;
}

.sk-home-corner--tl,
.sk-home-corner--tr {
  top: 0;
  width: clamp(340px, 38vw, 620px);
  opacity: 0.95;
  transform: scale(1.05);
}

.sk-home-corner--bl,
.sk-home-corner--br {
  bottom: 0;
  width: clamp(360px, 42vw, 720px);
  opacity: 0.9;
  mix-blend-mode: screen;
  transform: scale(1.08);
}

.sk-home-corner--tl {
  left: clamp(14px, 2.2vw, 32px);
  background-image: url("../images/home/corner-tl.png");
  background-position: top left;
}

.sk-home-corner--tr {
  right: clamp(14px, 2.2vw, 32px);
  background-image: url("../images/home/corner-tr.png");
  background-position: top right;
}

.sk-home-corner--bl {
  left: clamp(14px, 2.2vw, 32px);
  background-image: url("../images/home/corner-bl.png");
  background-position: bottom left;
}

.sk-home-corner--br {
  right: clamp(14px, 2.2vw, 32px);
  background-image: url("../images/home/corner-br.png");
  background-position: bottom right;
}

/* sk-frontend's three readability overlays as one element's layers, top first:
   the top-and-bottom gradient, the radial vignette, the flat 10% black. Literal
   black on purpose: no --sk-* token is a black at these strengths, and these are
   shades over art, not colours of the interface. */
.sk-home-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.9) 100%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%),
    rgba(0, 0, 0, 0.1);
}

/* ---- Hero ---------------------------------------------------------------- */

.sk-home-hero {
  max-width: 48rem;
  margin: 0 auto var(--sk-stack);
  text-align: center;
}

.sk-home-hero-title {
  margin: 0 0 var(--sk-space-2);
  color: var(--sk-text);
  font-family: var(--sk-font-heading);
  font-size: var(--sk-text-2xl);
  font-weight: var(--sk-weight-bold);
  letter-spacing: -0.02em;
}

.sk-home-hero-tagline {
  margin: 0 0 var(--sk-space-3);
  color: var(--sk-accent-hover);
  font-family: var(--sk-font);
  font-size: var(--sk-text-lg);
  font-weight: var(--sk-weight-medium);
  letter-spacing: 0.02em;
}

.sk-home-hero-lede {
  max-width: 42rem;
  margin-bottom: var(--sk-space-4);
  font-size: var(--sk-text-base);
  line-height: 1.6;
}

.sk-home-hero-actions {
  gap: var(--sk-space-3);
}

/* ---- World Status -------------------------------------------------------- */

.sk-home-status {
  position: relative;
  overflow: hidden;
}

/* The faint globe in the corner. (0,2,0) beats general.css's `body .fa-globe`. */
.sk-home-status .sk-home-status-watermark {
  position: absolute;
  right: calc(-1 * var(--sk-space-3));
  bottom: calc(-1 * var(--sk-space-3));
  color: var(--sk-accent);
  font-size: 96px;
  opacity: 0.06;
  transform: rotate(12deg);
  pointer-events: none;
}

/* The two strips sit a compact row's top margin apart, and the card's padding
   closes the last one, not the pill row's page-block margin as well. */
.sk-home-status > .sk-pill-row {
  margin-bottom: 0;
}

/* ---- The Path to Supremacy ----------------------------------------------- */

.sk-home-path {
  margin-bottom: var(--sk-stack);
}

.sk-home-section-title {
  margin: 0 0 var(--sk-space-4);
  color: var(--sk-text);
  font-family: var(--sk-font-heading);
  font-size: var(--sk-text-xl);
  text-align: center;
}

.sk-home-phases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sk-space-4);
}

@media (min-width: 576px) {
  .sk-home-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .sk-home-phases {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sk-card.sk-home-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  transition:
    border-color var(--sk-transition-slow),
    box-shadow var(--sk-transition-slow),
    transform var(--sk-transition-slow);
}

.sk-card.sk-home-phase:hover {
  border-color: var(--sk-border-accent);
  box-shadow: var(--sk-glow-accent);
  transform: translateY(-3px);
}

/* The big faint number in the top-right corner. */
.sk-home-phase-number {
  position: absolute;
  top: var(--sk-space-1);
  right: var(--sk-space-3);
  color: var(--sk-text);
  font-family: var(--sk-font-heading);
  font-size: 48px;
  font-style: italic;
  font-weight: var(--sk-weight-bold);
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.sk-home-phase-head {
  display: flex;
  align-items: center;
  gap: var(--sk-space-2);
  margin-bottom: var(--sk-space-3);
}

.sk-home-phase-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sk-radius);
  background: var(--sk-wash-accent);
  color: var(--sk-accent-hover);
  font-size: var(--sk-text-base);
  transition: background-color var(--sk-transition-slow);
}

.sk-home-phase:hover .sk-home-phase-icon {
  background: var(--sk-wash-accent-strong);
}

/* The icon takes the tile's colour, whatever general.css gives the glyph. */
.sk-home-phase-icon i {
  color: inherit;
}

.sk-home-phase-label {
  display: block;
  color: var(--sk-accent-hover);
  font-size: var(--sk-text-min);
  font-style: italic;
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sk-home-phase-title {
  margin: 0;
  color: var(--sk-text);
  font-family: var(--sk-font-heading);
  font-size: var(--sk-text-base);
  line-height: 1.25;
}

.sk-home-phase-text {
  margin: auto 0 0;
  color: var(--sk-text-muted);
  font-size: var(--sk-text-sm);
  line-height: 1.45;
  transition: color var(--sk-transition-slow);
}

.sk-home-phase:hover .sk-home-phase-text {
  color: var(--sk-neutral-5);
}

/* ---- Hall of Fame and the Vanguard --------------------------------------- */

.sk-home-community > .sk-card {
  margin-bottom: 0;
}

.sk-home-community {
  margin-bottom: var(--sk-stack);
}

.sk-home-note {
  margin: 0 0 var(--sk-space-3);
  color: var(--sk-text-muted);
  font-size: var(--sk-text-sm);
  line-height: 1.5;
}

/* Fixed at every width, not only on a phone (sk-table--fit's own rule): a 50-letter
   name with no space otherwise sets the table's minimum width and, beside the
   Vanguard card, ran ~270px out of its card at 800-1000px. */
.sk-table.sk-home-leaders {
  margin-top: 0;
  table-layout: fixed;
}

/* Rank and the two figures take what they need; the kingdom name takes the
   rest and wraps, breaking inside a long word rather than widening the table. */
.sk-home-leaders .sk-home-leaders-rank {
  width: 2.5em;
}

.sk-home-leaders .sk-home-leaders-figure {
  width: 28%;
}

.sk-home-discord {
  display: flex;
  align-items: center;
  gap: var(--sk-space-3);
  margin-bottom: var(--sk-space-3);
}

.sk-home-discord-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sk-radius);
  background: var(--sk-wash-accent);
  color: var(--sk-accent-hover);
  font-size: var(--sk-text-lg);
}

.sk-home-discord-icon i {
  color: inherit;
}

.sk-home-discord-title {
  color: var(--sk-text);
  font-size: var(--sk-text-sm);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.02em;
}

.sk-home-discord-sub {
  color: var(--sk-text-muted);
  font-size: var(--sk-text-xs);
}

/* ---- Phone ---------------------------------------------------------------- */

/* Labels read as written on a phone, never upper-case (house rule). */
@media (max-width: 768px) {
  .sk-home .sk-card-subtitle,
  .sk-home-phase-label {
    letter-spacing: 0.02em;
    text-transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-home-clouds {
    animation: none;
  }

  .sk-card.sk-home-phase,
  .sk-home-phase-icon,
  .sk-home-phase-text {
    transition: none;
  }

  .sk-card.sk-home-phase:hover {
    transform: none;
  }
}