/* landing.css */
:root{ --ink:#3a3a3a; --bg:#ffffff; }

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Press Start 2P', monospace;
}

.screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  padding:4rem 1rem 6rem;
}

.title{
  text-align:center;
  font-size:clamp(2.2rem,8vw,6rem);
  line-height:0.9;
  margin:0;
}
.subtitle{
  margin:.8rem 0 1.6rem;
  text-align:center;
  font-size:clamp(.9rem,2.5vw,1.4rem);
  color:#6e6e6e;
}

.start{
  display:inline-block;
  text-decoration:none;
  color:var(--ink);
  border:4px solid var(--ink);
  padding:.9rem 1.2rem;
  box-shadow:0 0 0 6px var(--bg), 0 0 0 10px var(--ink);
  animation:blink 1s steps(2,end) infinite;
}
.start:hover{transform:translateY(-2px)}
@keyframes blink{50%{opacity:.35}}

.sky .cloud{
  position:absolute;width:180px;height:auto;opacity:.7;
  animation:cloud 28s linear infinite;
}
.sky .c1{top:12%; left:-200px; animation-delay:0s;}
.sky .c2{top:14%; left:-260px; animation-delay:10s;}
@keyframes cloud{ from{ transform:translateX(0);} to{ transform:translateX(120vw);} }

.ground{
  position:absolute; left:0; right:0; bottom:48px; height:64px;
  border-top:6px solid var(--ink);
  background:
    radial-gradient(var(--ink) 18%, transparent 19%) 0 52px/14px 14px,
    radial-gradient(var(--ink) 18%, transparent 19%) 7px 59px/14px 14px;
  opacity:.95;
}

.bump{
  position:absolute; left:50%; bottom:58px; width:80px; height:18px;
  border:6px solid var(--ink); border-bottom:none; border-radius:90px 90px 0 0;
  transform:translateX(-50%); background:var(--bg);
}

/* === Dino como sprite de fondo (evita el aire del GIF) === */
.dino-sprite{
  position:absolute;
  left:15%;
  bottom:64px;         /* justo sobre el suelo */
  width:150px;         /* tamaño visible del dino */
  height:110px;        /* “marco” que recorta el GIF */
  background-image:url("assets/dinosaur.gif");
  background-repeat:no-repeat;
  background-position:bottom left;  /* alinea al borde inferior-izquierdo del marco */
  background-size:contain;          /* escala el dino dentro del marco */
  image-rendering: pixelated;
  animation:bob 1.1s ease-in-out infinite alternate;
}
@keyframes bob{ from{ transform:translateY(0);} to{ transform:translateY(-10px);} }

/* Cactus */
.cactus{
  position:absolute; right:18%; bottom:64px; width:18px; height:60px; background:var(--ink);
}
.cactus::before,.cactus::after{ content:""; position:absolute; background:var(--ink); }
.cactus.tall::before{ width:12px; height:32px; left:-18px; top:8px; border-radius:12px; }
.cactus.tall::after{ width:12px; height:24px; right:-18px; top:18px; border-radius:12px; }
.cactus.small{ right:26%; height:38px; width:12px; }
.cactus.small::before{ width:8px; height:18px; left:-12px; top:6px; border-radius:10px; }
.cactus.small::after{ display:none; }

/* Responsive: dino un poco más pequeño en pantallas estrechas */
@media (max-width:600px){
  .dino-sprite{ left:10%; width:120px; height:88px; }
}