/* =========================================================
   HEENESIS — pantalla de inicio
   ========================================================= */

/* Propiedades animables: el resplandor cambia entre blanco y turquesa */
@property --glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(236, 250, 255, .5);
}
@property --glow-far {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(210, 240, 255, .16);
}

.landing {
  display: grid;
  place-items: center;
  padding: 24px 16px;
  text-align: center;
}

.landing__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  transform: translateY(-2vh);
}

/* ---------- Título ---------- */
.title {
  margin: 0;
  font-weight: 100;
  font-size: clamp(2.7rem, 11.5vw, 9.5rem);
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  animation: glow-shift 11s ease-in-out infinite;
}

.title__glyphs {
  display: inline-flex;
  padding-left: .24em;               /* compensa el espacio final de la última letra */
  filter:
    drop-shadow(0 0 1.5px var(--glow))
    drop-shadow(0 0 10px var(--glow))
    drop-shadow(0 0 34px var(--glow-far));
  transition: opacity 1.4s var(--ease-soft);
}

@keyframes glow-shift {
  0%, 100% { --glow: rgba(236, 250, 255, .6);  --glow-far: rgba(210, 240, 255, .2); }
  50%      { --glow: rgba(110, 236, 222, .72); --glow-far: rgba(60, 214, 200, .3); }
}

.glyph {
  --i: 0;
  position: relative;
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(105deg,
    #dff6ff 0%, #ffffff 20%, #a6f4e9 36%, #ffffff 52%,
    #cdeefc 68%, #9cefe5 84%, #dff6ff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    energy-flow 16s linear infinite,
    breathe 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.4s), calc(var(--i) * -.85s);
  transition: transform .7s var(--ease-soft);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: default;
}

/* 162.5% = ciclo exacto del degradado (sin saltos) */
@keyframes energy-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 162.5% 50%; }
}
@keyframes breathe {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}

.glyph:hover { transform: translateY(-.015em); }

/* Halo y anillo al tocar una letra */
.glyph::before,
.glyph::after {
  content: '';
  position: absolute;
  left: calc(50% - .12em);
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.glyph::before {
  width: 1.1em; height: 1.1em;
  margin: -.55em 0 0 -.55em;
  background: radial-gradient(circle, rgba(210, 255, 248, .32), rgba(var(--energy-rgb), .08) 45%, transparent 70%);
}
.glyph::after {
  width: .7em; height: .7em;
  margin: -.35em 0 0 -.35em;
  border: 1px solid rgba(200, 252, 246, .55);
}
.glyph.is-struck { transform: translateY(-.03em) scale(1.035); }
.glyph.is-struck::before { animation: halo 1.5s var(--ease-soft); }
.glyph.is-struck::after  { animation: ring 1.7s var(--ease-soft); }

@keyframes halo {
  0%   { opacity: 0; transform: scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes ring {
  0%   { opacity: .9; transform: scale(.5); }
  100% { opacity: 0;  transform: scale(2.4); }
}

/* ---------- Línea y subtítulo ---------- */
.title__line {
  display: block;
  width: min(46vw, 420px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 246, 240, .55), transparent);
  animation: line-breathe 9s ease-in-out infinite;
}
@keyframes line-breathe {
  0%, 100% { opacity: .45; transform: scaleX(.82); }
  50%      { opacity: .9;  transform: scaleX(1); }
}

.subtitle {
  margin: 0;
  font-weight: 300;
  font-size: clamp(.64rem, 1.45vw, .9rem);
  letter-spacing: .42em;
  padding-left: .42em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 0 0 14px rgba(var(--energy-rgb), .22);
  text-wrap: balance;
}

/* ---------- Pista de sonido ---------- */
/* ---------- Fecha (arriba) ---------- */
.landing__date {
  position: absolute;
  left: 0; right: 0;
  top: max(28px, calc(env(safe-area-inset-top) + 12px));
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: .64rem;
  font-weight: 300;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 0 0 12px rgba(var(--energy-rgb), .25);
  pointer-events: none;
}
.landing__date span { padding-left: .5em; }
.landing__date::before,
.landing__date::after {
  content: '';
  width: clamp(18px, 5vw, 44px);
  height: 1px;
}
.landing__date::before { background: linear-gradient(90deg, transparent, rgba(var(--energy-rgb), .5)); }
.landing__date::after  { background: linear-gradient(90deg, rgba(var(--energy-rgb), .5), transparent); }

/* ---------- Instagram (abajo) ---------- */
.landing__social {
  position: absolute;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 10px));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: .72rem;
  letter-spacing: .16em;
  text-decoration: none;
  transition: color .5s var(--ease-soft), text-shadow .5s var(--ease-soft);
}
.landing__social svg { flex: none; transition: filter .5s var(--ease-soft); }
.landing__social:hover,
.landing__social:focus-visible {
  color: var(--ink);
  text-shadow: 0 0 14px rgba(var(--energy-rgb), .45);
  outline: none;
}
.landing__social:hover svg,
.landing__social:focus-visible svg { filter: drop-shadow(0 0 6px rgba(var(--energy-rgb), .6)); }

/* ---------- Pista de sonido ---------- */
.landing__hint {
  position: absolute;
  left: 0; right: 0;
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 64px));
  margin: 0;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  animation: hint-pulse 4.5s ease-in-out infinite;
  transition: opacity 1.4s var(--ease-soft);
  pointer-events: none;
}
.landing__hint.is-hidden { opacity: 0; animation: none; }
@keyframes hint-pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: .8; }
}

/* ---------- Entrada y salida ---------- */
.landing.is-intro .title__glyphs { animation: intro-title 3.4s var(--ease-soft) both; }
.landing.is-intro .title__line   { animation: intro-fade 2.4s 1.2s var(--ease-soft) both, line-breathe 9s 3.6s ease-in-out infinite; }
.landing.is-intro .subtitle      { animation: intro-fade 2.4s 1.7s var(--ease-soft) both; }
.landing.is-intro .landing__date  { animation: intro-fade 2.4s 2.2s var(--ease-soft) both; }
.landing.is-intro .landing__social { animation: intro-fade-x 2.4s 2.6s var(--ease-soft) both; }

@keyframes intro-fade-x {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes intro-title {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Salida: viajamos a través de las letras.
   Cada letra crece hacia nosotros y se abre hacia su lado (--spread:
   negativo a la izquierda, positivo a la derecha) hasta quedar atrás.
   Solo transform/opacity/blur: fluido en la tarjeta gráfica. */
.landing.is-leaving .glyph {
  animation:
    energy-flow 16s linear infinite,
    pass-through 1.6s cubic-bezier(.5, 0, .9, .45) forwards;
  animation-delay: calc(var(--i) * -1.4s), 0s;
  will-change: transform, opacity, filter;
}
.landing.is-leaving .glyph::before,
.landing.is-leaving .glyph::after { animation: none; opacity: 0; }

@keyframes pass-through {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  45% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    /* perspectiva real: se separan tanto como crecen (+ un poco más para abrir el paso) */
    transform: translate3d(calc(var(--spread) * 7em), calc(var(--lift) * 1em), 0) scale(7);
    opacity: 0;
    filter: blur(5px);
  }
}

.landing.is-leaving .title__line,
.landing.is-leaving .subtitle,
.landing.is-leaving .landing__hint,
.landing.is-leaving .landing__date,
.landing.is-leaving .landing__social {
  /* reemplaza la animación de entrada (que retiene la opacidad) por un desvanecido */
  animation: leave-fade .7s var(--ease-soft) forwards;
}
@keyframes leave-fade {
  to { opacity: 0; }
}

@media (max-width: 520px) {
  .title { font-size: 13.5vw; letter-spacing: .16em; }
  .title__glyphs { padding-left: .16em; }
  .glyph::before, .glyph::after { left: calc(50% - .08em); }
  .subtitle { letter-spacing: .26em; padding-left: .26em; }
}