/* Pichorta — landing de una pantalla.
   Los tokens vienen de styles.css (design system "Industry"). Acá sólo vive
   el hero: fondo, título, avatares y rail de íconos. */

html, body { height: 100%; }
body { overflow: hidden; }

/* ── Escenario ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* iOS: evita que la barra del navegador recorte el avatar */
  overflow: hidden;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text);
}

/* ── Fondo: halos y líneas ─────────────────────────────────────────────── */
.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.halo-1 {
  top: -20vh; left: -10vw;
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, var(--color-accent-200), transparent 65%);
  opacity: 0.6;
  animation: drift1 18s ease-in-out infinite;
}
.halo-2 {
  bottom: -25vh; right: -8vw;
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, var(--color-accent-100), transparent 65%);
  opacity: 0.8;
  animation: drift2 22s ease-in-out infinite;
}

.rule {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-divider) 20%, var(--color-divider) 80%, transparent);
  pointer-events: none;
}
.rule-top { top: 20%; }
.rule-bottom { bottom: 12%; }

/* ── Anotaciones de esquina ────────────────────────────────────────────── */
.corner-note {
  position: absolute;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  animation: fadeIn 1s ease 0.9s both;
}
.note-tl { top: 24px; left: 32px; }
.note-tr {
  top: 24px; right: 32px;
  display: flex; align-items: center; gap: 8px;
}
.note-dot {
  width: 7px; height: 7px;
  background: var(--color-accent);
  animation: blink 2.4s ease-in-out infinite;
}
.note-esc { bottom: 24px; right: 32px; }

/* ── Anillo decorativo ─────────────────────────────────────────────────── */
.ring {
  --ring-size: min(78vh, 620px);
  position: absolute;
  top: 50%; left: 50%;
  width: var(--ring-size); height: var(--ring-size);
  margin: calc(var(--ring-size) / -2) 0 0 calc(var(--ring-size) / -2);
  border: 1px dashed color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: 50%;
  animation: spin 60s linear infinite;
  pointer-events: none;
}

/* ── Título ────────────────────────────────────────────────────────────── */
.hero-title {
  position: absolute;
  top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(120px, 21vw, 300px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Faro de auto: la franja clara recorre el texto vía background-clip */
  color: transparent;
  background-image: linear-gradient(105deg, var(--color-text) 42%, var(--color-accent-200) 50%, var(--color-text) 58%);
  background-size: 220% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: trackIn 1.2s ease 0.1s both, shine 10s ease-in-out 5s infinite;
  pointer-events: none;
}

/* ── Avatares ──────────────────────────────────────────────────────────── */
.avatar-stage {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
.avatar-box {
  position: relative;
  height: min(74vh, 684px);
  max-height: calc(100% - 20px);
  width: min(60vh, 560px);
  max-width: 90vw;
  animation: riseIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
.avatar-float {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  animation: floatY 7s ease-in-out 1.6s infinite;
}
.avatar {
  position: absolute;
  bottom: 0; left: 50%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px color-mix(in srgb, var(--color-accent-900) 25%, transparent));
  opacity: 0;
  transform: translateX(-50%) translateY(24px) scale(0.97);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.avatar.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Rail de íconos ────────────────────────────────────────────────────── */
.icon-rail {
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeIn 1s ease 1.1s both;
}
.rail-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.icon-rail .btn-icon {
  width: 44px;
  height: 44px;
  background: var(--color-bg);
}
.icon-rail button.btn-icon { cursor: pointer; font: inherit; }

/* Aviso de "copiado". Arriba y centrado: no choca con el rail, que en desktop
   esta a la derecha y en movil abajo. */
.rail-toast {
  position: fixed;
  top: 64px; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}
.rail-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.rail-divider {
  width: 24px; height: 1px;
  background: var(--color-divider);
  align-self: center;
  margin: 4px 0;
}

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes riseIn   { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes trackIn  { from { opacity: 0; letter-spacing: 0.5em; } to { opacity: 1; letter-spacing: 0.06em; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatY   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes blink    { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes shine    { 0% { background-position: 130% 0; } 12% { background-position: -30% 0; } 100% { background-position: -30% 0; } }
@keyframes drift1   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6vw, -4vh); } }
@keyframes drift2   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5vw, 5vh); } }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-title { font-size: clamp(88px, 17vw, 200px); }
}

@media (max-width: 700px) {
  .hero-title { font-size: clamp(56px, 19vw, 110px); top: 26%; }
  .avatar-stage { padding-bottom: 132px; }
  .avatar-box { height: min(calc(70vh - 120px), 504px); }
  .corner-note { font-size: 10px; }
  .note-tl { left: 16px; }
  .note-tr { right: 16px; }
  .note-esc { display: none; }
  .icon-rail {
    top: auto;
    bottom: 14px;
    left: 0;
    right: 0;
    transform: none;
    align-items: center;
    gap: 8px;
  }
  /* 44x44 es el minimo tactil recomendado (WCAG 2.5.5). Importa desde que
     estos botones dejaron de ser decorativos. */
  .icon-rail .btn-icon { width: 44px; height: 44px; }
  .rail-group {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .rail-divider { display: none; }
  .rail-toast { top: 52px; font-size: 10px; }
}

/* ── Movimiento reducido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .halo, .ring, .note-dot, .avatar-float, .hero-title, .avatar-box,
  .corner-note, .icon-rail {
    animation: none !important;
  }
  .hero-title { background-position: -30% 0; }
  .avatar { transition-duration: 0.2s; }
  .rail-toast { transition-duration: 0.01s; }
}

/* Salto inicial sin fundido (lo aplica app.js por un frame) */
.avatar-float.no-transition .avatar { transition: none; }