@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  font-family: "DM Sans", system-ui, sans-serif;
  background: #090e09;
  color: #f3e4cc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(ellipse at 50% 12%, #282619, #0b110d 64%);
}

.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 940px);
  min-height: 100svh;
  margin-inline: auto;
  padding-bottom: clamp(84px, 14vw, 160px);
  background: #11150b;
  container-type: inline-size;
}

.scene {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0 0 50%);
  pointer-events: none;
}

.scene-ground {
  position: absolute;
  z-index: -1;
  inset: 75cqw 0 0;
  background: url("selva-gamerats.webp") center bottom / 100% 200% no-repeat;
  pointer-events: none;
}

.masthead {
  position: relative;
  padding-top: 77%;
  text-align: center;
}

.tagline {
  position: relative;
  margin: -4px 16px 0;
  color: #e4d7ba;
  font-size: .95rem;
  font-weight: 500;
  text-shadow: 0 2px 8px #000, 0 0 14px #000;
}

section {
  position: relative;
  z-index: 1;
  width: min(77%, 510px);
  max-width: 510px;
  margin: 27px auto 0;
}

h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0 0 18px;
  color: #ffe2b2;
  font: 400 clamp(1.18rem, 4vw, 1.65rem)/1.2 "Archivo Black", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .11em;
  text-shadow: 0 3px #332015, 0 4px 14px #000;
}

h2::before, h2::after {
  content: "";
  height: 1px;
  width: clamp(20px, 8vw, 58px);
  background: linear-gradient(90deg, transparent, #dcab66);
}

h2::after { transform: rotate(180deg); }

.links {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.links li {
  min-width: 0;
  animation: reveal .55s cubic-bezier(.22,.7,.35,1) both;
  animation-delay: calc(var(--step) * 85ms);
}

.card {
  --edge: polygon(3% 0, 28% 3%, 36% 0, 97% 0, 100% 18%, 99% 83%, 96% 100%, 68% 96%, 53% 100%, 4% 100%, 0 81%, 1% 17%);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px clamp(13px, 4vw, 24px);
  color: inherit;
  text-decoration: none;
  filter: drop-shadow(0 5px 3px #050705);
  transition: transform .2s, filter .2s;
}

.card::before, .card::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--edge);
}

.card::before {
  inset: 0;
  background: linear-gradient(165deg, #e0af73 0%, #70664c 28%, #788353 53%, #343523 75%, #a57849);
}

.card::after {
  inset: 2px;
  background:
    linear-gradient(100deg, #29251eb8, #241f18c4 64%, #26331786),
    url("piedra.webp") var(--stone-x, 50%) var(--stone-y, 50%) / 520px auto;
  box-shadow: inset 0 3px 4px #f2c78e61, inset 0 -7px 8px #000b;
}

li:nth-child(even) .card { --stone-x: 25%; --stone-y: 80%; }
li:nth-child(3n) .card { --stone-x: 80%; --stone-y: 12%; }
li:first-child .card::before { background: linear-gradient(155deg, #f0bb78, #86603a 48%, #583517 74%, #b67e45); }
li:first-child .card::after { background-image: linear-gradient(105deg, #48291dbc, #36241aa8 62%, #3a311bb0), url("piedra.webp"); }

.card:hover, .card:focus-visible {
  transform: translateY(-3px);
  filter: drop-shadow(0 3px 9px #dc924d69) brightness(1.16);
}

.card:focus-visible { outline: 2px solid #ffdcaa; outline-offset: 4px; }

.icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px 7px 10px 7px;
  background: var(--brand);
  color: white;
  box-shadow: 0 2px 5px #0009, inset 0 0 0 1px #ffffff38;
}

.icon svg { width: 22px; height: 22px; fill: currentColor; }
.label { display: grid; gap: 4px; }

.label strong {
  color: #ead1a6;
  font: 400 clamp(1.05rem, 4.6vw, 1.52rem)/1 "Archivo Black", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.015em;
  transform: skew(-5deg);
  filter: drop-shadow(0 2px 0 #25140d) drop-shadow(0 3px 2px #080602);
}

@supports (background-clip: text) {
  .label strong {
    background:
      linear-gradient(180deg, #fff4db8f, #e6c69c22 42%, #9b4e1485),
      url("piedra.webp") center 34% / 160px auto;
    background-clip: text;
    color: transparent;
  }
}

.label small { font-size: .77rem; font-weight: 600; color: #f0d6b5; }
.arrow { margin-left: auto; color: #f8d29f; font-size: 1.25rem; }

.embers { position: absolute; z-index: 2; inset: 23% 0 0; pointer-events: none; }

.embers i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #ffd495;
  box-shadow: 0 0 7px 2px #ff832e9c;
  animation: rise var(--speed) var(--delay) infinite linear;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rise {
  0% { opacity: 0; transform: translate(0,28px); }
  20% { opacity: .72; }
  65% { opacity: .35; }
  100% { opacity: 0; transform: translate(24px,-82px); }
}

@media (prefers-reduced-motion: reduce) {
  .links li, .embers i { animation: none; }
  .embers { display: none; }
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
}