/* Hallmark · shape: single-screen horizon · genre: modern-minimal · theme: brand (redesign: full) · job: visit · idea: "el eje horizontal del Inti de InkaNode es el horizonte: medio sol arriba, su reflejo abajo" · vibe: "amanecer andino, nocturno, sobrio, técnico"
 * paper: oklch(16.3% 0.012 261) · accent: oklch(76.9% 0.128 78) · display: Space Grotesk · body: Manrope · hero: titular a la izquierda apoyado en el horizonte, el Inti a la derecha con el centro sobre la línea · nav: wordmark solo · footer: una línea bajo el horizonte, nombre y año · imagery: none · signature: el Inti a medio salir, sus nodos laterales sobre el horizonte y su reflejo en el suelo
 * axes: dark/grotesk-heavy/warm · posture: still with one reveal · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H5 E4 S5 R5 V4 · weakest: P, una página de "próximamente" no discute nada; todo descansa en la marca */
/* waive 85: no aplica, la página no tiene formulario */
@import url("./tokens.css");
@import url("./base.css");

:root { --sun: clamp(300px, 44vw, 600px); --sun-right: 4%; }

body { min-height: 100svh; display: flex; flex-direction: column; }

.nav { padding-block: var(--space-lg); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; font: 700 var(--text-lg)/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); border-radius: 6px; }
.wordmark svg { width: 32px; height: 32px; color: var(--color-accent); --node: var(--color-node); }
.wordmark b { font-weight: inherit; color: var(--color-accent); }

/* Sky: dawn light gathers at the horizon, under the sun. */
.sky { flex: 1; display: flex; background: radial-gradient(calc(var(--sun) * 0.9) calc(var(--sun) * 0.55) at calc(100% - var(--sun-right) - var(--sun) / 2) 100%, color-mix(in oklab, var(--color-accent) 16%, transparent), transparent), linear-gradient(to bottom, var(--color-paper), var(--color-paper-3)); }
.sky-inner { position: relative; display: flex; align-items: flex-end; overflow: clip; min-height: calc(var(--sun) / 2 + var(--space-2xl)); }
.hero-copy { position: relative; z-index: var(--z-raised); display: flex; flex-direction: column; gap: var(--space-lg); padding-block: var(--space-2xl) var(--space-2xl); }
.hero-copy h1 { font-size: var(--text-display); font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: var(--color-ink); max-width: 11ch; }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 32ch; }

.button { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.button:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); transform: translateY(-1px); }
.button:active { transform: translateY(0); background: color-mix(in oklab, var(--color-accent) 85%, var(--color-paper)); }
.button:focus-visible { outline-offset: 3px; transition: none; }

/* The mark's horizontal axis sits on the horizon; each half lives in its own clipped band. */
.sun { position: absolute; right: calc(var(--sun-right) + var(--gutter)); width: var(--sun); aspect-ratio: 1; color: var(--color-accent); --node: var(--color-node); }
.sky .sun { bottom: 0; translate: 0 50%; animation: rise 1.8s var(--ease-out) both; }
@keyframes rise { from { transform: translateY(12%); opacity: 0; } to { transform: none; opacity: 1; } }

.ground { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.ground-inner { position: relative; overflow: clip; display: flex; align-items: flex-end; min-height: clamp(120px, 22svh, 220px); }
.sun-reflection { top: 0; translate: 0 -50%; scale: 1 -1; opacity: 0.16; -webkit-mask-image: linear-gradient(to bottom, transparent 0 15%, var(--color-paper) 50%); mask-image: linear-gradient(to bottom, transparent 0 15%, var(--color-paper) 50%); }

.foot { position: relative; flex: 1; display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 40rem) {
  :root { --sun: 84vw; }
  .sky-inner { align-items: flex-start; }
  .hero-copy { padding-block: var(--space-xl) calc(var(--sun) / 2 + var(--space-xl)); }
  .sun { right: 50%; translate: 50% 0; }
  .sky .sun { translate: 50% 50%; }
  .sun-reflection { translate: 50% -50%; }
}