/* ========================================================================
   HL2MP — Gameplay Modes (hover/tilt cards)
   ===================================================================== */

.gm-section{
  /* Local easing tokens (inherited by descendants) */
  --gm-hover-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --gm-return-ease: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.gm-section h2{ margin-bottom:8px; }

/* Container stays flex to keep equal heights and easy wrapping */
.gm-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

/* Exactly 3 per row on desktop; wrapper is the hit-area */
.gm-wrap{
  flex: 0 1 calc((100% - 28px) / 3);  /* 3 across with 14px gaps */
  max-width: 360px;
  height: auto;
  display:flex;                       /* lets inner card size itself */
  perspective:800px;
  cursor:pointer;
}

/* Animated inner card (pointer events handled by wrapper) */
.gm-card{
  position:relative;
  width:100%; height:auto;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow:hidden;
  background:#111;
  border:1px solid rgba(150,180,210,.22);
  box-shadow: 0 16px 32px rgba(0,0,0,.35),
              inset #333 0 0 0 5px,
              inset rgba(255,255,255,.4) 0 0 0 6px;
  transform-style: preserve-3d;

  /* Default: slow, elegant return (CodePen vibe) */
  transition: transform 1000ms var(--gm-return-ease),
              box-shadow 2000ms var(--gm-hover-ease);
  will-change: transform;
  pointer-events: none;
}

/* Background layer (moves with the mouse) */
.gm-bg{
  position:absolute; inset:-20px;
  background-image: var(--gm-bg);
  background-size: cover; background-position: center;
  opacity:.55;

  /* Default: slow return; long, delayed opacity */
  transition: transform 1000ms var(--gm-return-ease),
              opacity 5000ms 1000ms var(--gm-return-ease);
  will-change: transform;
  pointer-events:none;
}

/* HUD info at the bottom */
.gm-info{
  position:absolute; inset:auto 0 0 0;
  padding:20px; color:#fff;
  transform: translateY(40%);
  transition: transform 450ms var(--gm-hover-ease);
}
.gm-info p{
  margin:10px 0 0;
  color:#e6eefc; opacity:0;
  text-shadow: rgba(0,0,0,1) 0 2px 3px;
  transition: opacity 350ms var(--gm-hover-ease),
              transform 350ms var(--gm-hover-ease);
}
.gm-info::after{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.65) 100%);
  opacity:0; transform: translateY(100%);
  transition: 900ms var(--gm-hover-ease);
}

/* Hover/focus via WRAPPER (keeps pointer events simple) */
@media (hover:hover){
  .gm-wrap:hover .gm-info{ transform: translateY(0); }
  .gm-wrap:hover .gm-info p{ opacity:1; transform:none; }
  .gm-wrap:hover .gm-info::after{ opacity:1; transform: translateY(0); }
  .gm-wrap:hover .gm-bg{ opacity:.82; }
  .gm-wrap:hover .gm-card{
    box-shadow:
      rgba(255,255,255,.2) 0 0 40px 5px,
      rgba(255,255,255,1) 0 0 0 1px,
      rgba(0,0,0,.66) 0 30px 60px 0,
      inset #333 0 0 0 5px,
      inset #fff 0 0 0 6px;
  }
}

/* Keyboard focus parity */
.gm-wrap:focus-within .gm-info{ transform: translateY(0); }
.gm-wrap:focus-within .gm-info p{ opacity:1; transform:none; }

/* Make the wrapper itself focusable-friendly if tabbed */
.gm-wrap:focus{
  outline:2px solid #8fd7ff;
  outline-offset:2px;
}

/* Tablet: 2 per row */
@media (max-width: 900px){
  .gm-wrap{
    flex-basis: clamp(320px, 48%, 420px);
  }
}

/* Phones: 1 per row */
@media (max-width: 560px){
  .gm-wrap{ flex-basis: 100%; }
}