/* Base: variables, utilidades y animaciones */
/* 1. Variables y base -------------------------------------------------- */
:root {
  --accent: #72D69B;
  --bg: #0C0F14;
  --bg-alt: #0F131A;
  --surface: #12171E;
  --text: #E6EDF3;
  --text-soft: #B4BDC7;
  --text-muted: #9DA7B3;
  --text-faint: #8B949E;
  --border: #30363D;
  --border-soft: #262C34;
  --border-faint: #1C2128;
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --container: 1200px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  min-height: 100dvh;
  position: relative;
  overflow-x: clip;
}

a { color: var(--text); }
a:hover { color: #FFFFFF; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: rgba(114, 214, 155, 0.3); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.mono { font-family: var(--font-mono); }

/* 2. Utilidades y accesibilidad ---------------------------------------- */
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  z-index: 20;
  transition: transform 160ms var(--ease-out);
}
.skip:focus { transform: translateY(76px); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

/* 3. Animaciones ------------------------------------------------------- */
/* Entrada del hero: escalonada, una sola vez */
.rise {
  opacity: 0;
  transform: translateY(12px);
  animation: rise 700ms var(--ease-out) forwards;
}
.d1 { animation-delay: 60ms; }
.d2 { animation-delay: 120ms; }
.d3 { animation-delay: 180ms; }
.d4 { animation-delay: 240ms; }
.d5 { animation-delay: 320ms; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.photo {
  opacity: 0;
  transform: scale(0.96);
  animation: photo 900ms var(--ease-out) 200ms forwards;
}
@keyframes photo { to { opacity: 1; transform: scale(1); } }

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }

/* Revelado al hacer scroll (CSS puro, una sola vez) */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
}