/**
 * Home page-specific styles.
 * Shared hero/content/card primitives live in components.css.
 */

.page-home {
  --hero-grid-opacity: .12;
  --hero-grid-line-alpha: .04;
  --hero-grid-size: 70px;
  --hero-title-max: 1100px;
  --hero-title-size: clamp(4.4rem, 10.5vw, 9.7rem);
  --hero-title-line-height: .79;
  --hero-copy-max: 670px;
  --hero-copy-margin: 35px;
  --hero-copy-color: rgba(255,255,255,.62);
  --hero-copy-size: 1rem;
}

/**
 * [RS] Rogue Soldiers - Home Page
 * Only styles specific to the home page belong here.
 */

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

    .hero {

      position: relative;

      min-height: 100vh;

      display: flex;

      align-items: flex-end;

      overflow: hidden;

      background:
        url("/assets/images/rs-hero-fallback.webp")
        center center /
        cover
        no-repeat;

    }


    .hero-video-wrap {

      position: absolute;

      inset: 0;

      z-index: 0;

      overflow: hidden;

      pointer-events: none;

    }


    .hero-video {

      position: absolute;

      top: 50%;
      left: 50%;

      width: 100%;
      height: 100%;

      min-width: 100%;
      min-height: 100%;

      transform:
        translate(-50%, -50%);

      object-fit: cover;

      object-position: center;

      filter:
        brightness(.60)
        saturate(.85)
        contrast(1.04);

    }


    .hero::before {

      content: "";

      position: absolute;

      inset: 0;

      z-index: 1;

      pointer-events: none;

      background:

        linear-gradient(
          to bottom,
          rgba(6,6,6,.08) 0%,
          rgba(6,6,6,.18) 48%,
          rgba(6,6,6,.90) 90%,
          #0c0c0c 100%
        ),

        linear-gradient(
          to right,
          rgba(0,0,0,.76),
          rgba(0,0,0,.26) 55%,
          rgba(0,0,0,.43)
        );

    }


    .hero::after {

      content: "";

      position: absolute;

      inset: 0;

      z-index: 1;

      pointer-events: none;

      background:

        radial-gradient(
          circle at 30% 60%,
          rgba(189,0,0,.13),
          transparent 42%
        );

    }
.hero-content {

      position: relative;

      z-index: 3;

      padding-top: 160px;

      padding-bottom: 88px;

    }
/* =====================================================
       STATS
    ====================================================== */

    .stat-strip {

      border-top:
        1px solid
        var(--border-soft);

      border-bottom:
        1px solid
        var(--border-soft);

      background:
        #0b0b0b;

    }


    .stat-cell {

      padding: 32px;

      border-right:
        1px solid
        var(--border-soft);

    }


    .stat-cell:last-child {
      border-right: 0;
    }


    .stat-value {

      color: #fff;

      font-size: 1.85rem;

      font-weight: 800;

    }


    .stat-label {

      margin-top: 5px;

      color:
        rgba(255,255,255,.27);

      font-size: .60rem;

      font-weight: 700;

      letter-spacing: .22em;

      text-transform: uppercase;

    }


    /* =====================================================
       GAMES
    ====================================================== */

    .games-showcase {
      overflow: hidden;
    }


    .games-intro-note {

      max-width: 560px;

      color:
        rgba(255,255,255,.44);

      font-size: .92rem;

      line-height: 1.8;

    }


    /* -----------------------------------------------------
       EQUAL GAME GRID
    ------------------------------------------------------ */

    .game-showcase-card {

      position: relative;

      display: block;

      height: 430px;

      overflow: hidden;

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

      background:
        #0e0e0e;

      transition:
        transform .28s ease,
        border-color .28s ease;

    }


    .game-showcase-card:hover {

      transform:
        translateY(-4px);

      border-color:
        rgba(189,0,0,.48);

    }


    .game-showcase-image {

      position: absolute;

      inset: 0;

    }


    .game-showcase-image img {

      width: 100%;
      height: 100%;

      object-fit: cover;

      filter:
        brightness(.64)
        saturate(.78)
        contrast(1.03);

      transition:
        transform .65s ease,
        filter .65s ease;

    }


    .game-showcase-card:hover
    .game-showcase-image img {

      transform:
        scale(1.055);

      filter:
        brightness(.73)
        saturate(.95)
        contrast(1.03);

    }


    .game-showcase-overlay {

      position: absolute;

      inset: 0;

      z-index: 1;

      background:

        linear-gradient(
          to bottom,
          rgba(0,0,0,.09) 0%,
          rgba(0,0,0,.16) 34%,
          rgba(0,0,0,.88) 78%,
          rgba(0,0,0,.98) 100%
        ),

        linear-gradient(
          to right,
          rgba(0,0,0,.30),
          transparent 72%
        );

    }


    .game-showcase-card::after {

      content: "";

      position: absolute;

      top: 0;
      left: 0;

      z-index: 2;

      width: 0;
      height: 2px;

      background:
        var(--red-bright);

      transition:
        width .30s ease;

    }


    .game-showcase-card:hover::after {
      width: 100%;
    }


    .game-showcase-content {

      position: absolute;

      inset: 0;

      z-index: 3;

      display: flex;

      flex-direction: column;

      justify-content:
        space-between;

      padding: 24px;

    }


    .game-showcase-top {

      display: flex;

      align-items: flex-start;

      justify-content:
        space-between;

      gap: 20px;

    }


    .game-showcase-status {

      display: inline-flex;

      align-items: center;

      gap: 7px;

      min-height: 28px;

      padding:
        0
        9px;

      border:
        1px solid
        rgba(189,0,0,.48);

      color: #fff;

      background:
        rgba(0,0,0,.47);

      backdrop-filter:
        blur(8px);

      font-size: .50rem;

      font-weight: 800;

      letter-spacing: .10em;

      text-transform: uppercase;

    }


    .game-showcase-status::before {

      content: "";

      width: 5px;
      height: 5px;

      border-radius: 50%;

      background:
        var(--red-bright);

      box-shadow:
        0 0 8px
        rgba(224,0,0,.62);

    }


    .game-showcase-arrow {

      width: 37px;
      height: 37px;

      flex-shrink: 0;

      display: flex;

      align-items: center;
      justify-content: center;

      border:
        1px solid
        rgba(255,255,255,.15);

      color:
        rgba(255,255,255,.64);

      background:
        rgba(0,0,0,.34);

      transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease;

    }


    .game-showcase-card:hover
    .game-showcase-arrow {

      transform:
        translate(2px, -2px);

      border-color:
        var(--red);

      color: #fff;

      background:
        var(--red);

    }


    .game-showcase-category {

      margin-bottom: 8px;

      color:
        var(--red-bright);

      font-size: .53rem;

      font-weight: 800;

      letter-spacing: .16em;

      text-transform: uppercase;

    }


    .game-showcase-title {

      margin: 0;

      color: #fff;

      font-size:
        clamp(
          1.65rem,
          2.3vw,
          2.45rem
        );

      font-weight: 900;

      line-height: .95;

      letter-spacing: -.04em;

      text-transform: uppercase;

    }


    .game-showcase-copy {

      max-width: 400px;

      margin:
        13px
        0
        0;

      color:
        rgba(255,255,255,.48);

      font-size: .76rem;

      line-height: 1.65;

    }


    /* -----------------------------------------------------
       EXPLORE CARD
    ------------------------------------------------------ */

    .game-showcase-explore {

      background:

        radial-gradient(
          circle at 80% 20%,
          rgba(189,0,0,.19),
          transparent 35%
        ),

        linear-gradient(
          145deg,
          #111,
          #090909
        );

      border-color:
        var(--red-border);

    }


    .game-showcase-explore
    .game-showcase-overlay {

      background:

        linear-gradient(
          to bottom,
          rgba(189,0,0,.035),
          rgba(0,0,0,.76)
        );

    }


    .game-showcase-explore
    .game-showcase-image {

      opacity: .12;

      background-image:

        linear-gradient(
          rgba(255,255,255,.07) 1px,
          transparent 1px
        ),

        linear-gradient(
          90deg,
          rgba(255,255,255,.07) 1px,
          transparent 1px
        );

      background-size:
        38px
        38px;

    }


    .game-explore-icon {

      width: 52px;
      height: 52px;

      display: flex;

      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--red-border);

      color:
        var(--red-bright);

      background:
        rgba(189,0,0,.08);

      font-size: 1rem;

    }


    /* -----------------------------------------------------
       GAMES FOOTER
    ------------------------------------------------------ */

    .games-footer {

      display: flex;

      align-items: center;

      justify-content:
        space-between;

      gap: 30px;

      margin-top: 40px;

    }


    .games-footer-copy {

      display: flex;

      align-items: center;

      gap: 14px;

      color:
        rgba(255,255,255,.30);

      font-size: .66rem;

      font-weight: 700;

      letter-spacing: .14em;

      text-transform:
        uppercase;

    }


    .games-footer-line {

      display: block;

      width: 42px;
      height: 1px;

      background:

        linear-gradient(
          to right,
          var(--red-bright),
          transparent
        );

    }


    /* =====================================================
       COMMUNITY
    ====================================================== */

    .community-section {

      background:

        linear-gradient(
          to right,
          rgba(10,10,10,.94),
          rgba(10,10,10,.68),
          rgba(10,10,10,.40)
        ),

        url(
          "https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=2200&q=85"
        )
        center /
        cover
        no-repeat;

    }


    .community-panel {

      max-width: 720px;

      padding: 44px;

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

      background:
        rgba(8,8,8,.78);

      backdrop-filter:
        blur(20px);

    }


    .community-point {

      display: flex;

      gap: 15px;

      margin-top: 26px;

    }


    .community-icon {

      flex: 0 0 auto;

      color:
        var(--red-bright);

    }


    .community-point-title {

      color: #fff;

      font-size: .94rem;

      font-weight: 700;

    }


    .community-point-copy {

      margin-top: 4px;

      color:
        rgba(255,255,255,.37);

      font-size: .83rem;

      line-height: 1.7;

    }


    /* =====================================================
       REDUCED MOTION
    ====================================================== */

    @media (prefers-reduced-motion: reduce) {

      .hero-video-wrap {
        display: none;
      }


      .game-showcase-card,
      .game-showcase-image img,
      .game-showcase-arrow {

        transition: none;

      }

    }


    /* =====================================================
       TABLET
    ====================================================== */

    @media (max-width: 991.98px) {

      .game-showcase-card {
        height: 410px;
      }

    }


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

    @media (max-width: 767.98px) {

      .hero-content {

        padding-bottom:
          58px;

      }


      .hero-title {

        font-size:
          clamp(
            4rem,
            20vw,
            6rem
          );

      }


      .stat-cell {

        border-right: 0;

        border-bottom:
          1px solid
          var(--border-soft);

      }


      .community-panel {

        padding:
          30px
          24px;

      }


      .game-showcase-card {

        height: 420px;

      }


      .game-showcase-content {

        padding: 22px;

      }


      .game-showcase-title {

        font-size:
          2rem;

      }


      .games-footer {

        align-items:
          flex-start;

        flex-direction:
          column;

      }

    }