/* TRUCCO — minimal */

:root {
  --bg: #000;
  --ink: #e8e4dc;          /* bone */
  --mute: #75716b;
  --line: #262523;
  --red: #bd0a0a;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --roman: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --pad: max(16px, 3vw);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* dos pantallas: el scroll engancha en cada una */
html { background: var(--bg); scroll-behavior: smooth; scroll-snap-type: y mandatory; -webkit-text-size-adjust: 100%; }
.hero, .about { scroll-snap-align: start; scroll-snap-stop: always; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 13px/1.5 var(--mono);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--red); color: var(--ink); }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }

.label { font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: var(--mute); }

/* ── llegada ─────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.hero__reel, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__reel { object-fit: cover; pointer-events: none; }
/* iOS: sin el botón de play encima del poster */
.hero__reel::-webkit-media-controls, .hero__reel::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero__shade {
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 75%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, #000);
}
.wordmark {
  position: relative;
  font: 400 clamp(56px, 13vw, 220px)/1 var(--roman);
  letter-spacing: .08em;
  margin-right: -.08em;     /* compensa el tracking del último caracter */
  text-shadow: 0 0 60px rgba(0,0,0,.35);
  animation: rise 1.6s var(--ease) both;
}
.hero__caption {
  position: absolute; left: 0; right: 0; bottom: calc(var(--pad) + 44px);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .28em;
  animation: rise 1.6s .3s var(--ease) both;
}
.hero__caption i { width: 36px; height: 1px; background: var(--red); }
.hero__down {
  position: absolute; bottom: var(--pad); left: 50%; translate: -50% 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: .3em; color: var(--mute);
  padding: 6px 0 6px .3em;
  transition: color .3s;
}
.hero__down:hover { color: var(--ink); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ── about + contacto ────────────────────────────────────── */
.about {
  max-width: 1800px; margin: 0 auto;
  height: 100vh; height: 100svh;
  padding: 9vh var(--pad) 4vh;
  display: flex; flex-direction: column;
}
/* statement: palabras clave en Geist pesada, conectores en mono chica */
.statement {
  margin-top: 3.4vh;
  font: 800 clamp(30px, min(7.6vw, 8vh), 136px)/.9 var(--sans);
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.statement .line { display: block; white-space: nowrap; }
.statement i {
  font: 300 .26em/1 var(--mono);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--mute);
  vertical-align: .95em;
  padding: 0 .5em 0 .2em;
}
.statement .line:first-child i { padding-left: 0; }
/* contorno con sombras: el relleno negro tapa las superposiciones internas de la tipo */
.statement .hollow {
  --o: max(1px, .014em);
  color: var(--bg);
  letter-spacing: -.03em;
  text-shadow:
    calc(var(--o) * -1) 0 var(--ink), var(--o) 0 var(--ink), 0 calc(var(--o) * -1) var(--ink), 0 var(--o) var(--ink),
    calc(var(--o) * -.7) calc(var(--o) * -.7) var(--ink), calc(var(--o) * .7) calc(var(--o) * -.7) var(--ink),
    calc(var(--o) * -.7) calc(var(--o) * .7) var(--ink), calc(var(--o) * .7) calc(var(--o) * .7) var(--ink);
}

/* people: uno a cada lado */
.people {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4vw;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.person { position: relative; --accent: var(--red); }
.person--1 { --accent: #16e0ff; text-align: right; justify-self: end; }
.person__name {
  position: relative; isolation: isolate;
  font: 800 clamp(26px, min(4vw, 6.4vh), 68px)/.88 var(--sans);
  letter-spacing: -.045em;
  text-transform: uppercase;
  transition: color .45s var(--ease);
}
/* el gemelo fuera de foco detrás del nombre (hover) */
.person__name::after {
  content: attr(data-name);
  position: absolute; inset: 0; z-index: -1;
  white-space: pre;
  color: var(--accent);
  opacity: 0;
  transform: scale(1.03);
  filter: blur(.085em);
  pointer-events: none;
  transition: opacity .55s var(--ease);
  -webkit-mask-image: linear-gradient(104deg, transparent 26%, #000 44%, #000 56%, transparent 74%);
          mask-image: linear-gradient(104deg, transparent 26%, #000 44%, #000 56%, transparent 74%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-position: 125% 0; mask-position: 125% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@keyframes defocus {
  from { -webkit-mask-position: 125% 0; mask-position: 125% 0; }
  to { -webkit-mask-position: -25% 0; mask-position: -25% 0; }
}
.person__role { margin: 14px 0 16px; color: var(--mute); }
.person__link {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  padding-bottom: .5em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size .5s var(--ease), color .45s var(--ease);
}
.person--1 .person__link { background-position: 100% 100%; }
.person__link::after { content: ''; position: absolute; inset: 0; }   /* todo el bloque es el link */
.person:hover .person__name, .person:focus-within .person__name { color: var(--accent); }
.person:hover .person__link, .person:focus-within .person__link { color: var(--accent); background-size: 100% 1px; }
@media (hover: hover) {
  .person:hover .person__name::after { opacity: 1; animation: defocus 3.4s linear infinite; }
}
.arrow { display: inline-block; width: .62em; height: .62em; margin-left: .15em; vertical-align: .05em; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: square; overflow: visible; transition: transform .4s var(--ease); }
a:hover .arrow, .person:hover .arrow { transform: translate(2px, -2px); }

/* contacto: una línea al pie */
.contact {
  margin-top: 5vh; padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 4vw;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--mute);
}
.contact__mail {
  margin-right: auto;
  font: 300 clamp(20px, 2.4vw, 34px)/1 var(--sans);
  letter-spacing: -.02em; text-transform: none;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.contact__mail:hover { color: var(--red); }

/* aparición */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .about { padding-top: 7vh; }
  .statement { font-size: 9.4vw; }
  .people { gap: 16px; }
  .person__name { font-size: 26px; }
  .contact { flex-wrap: wrap; row-gap: 10px; }
  .contact__mail { width: 100%; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark, .hero__caption { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}