/* ==========================================================================
   Luseki · página de próximamente
   Paleta y tipografía tomadas del manual de identidad, versión 1.
   La animación es una sola secuencia de carga: se enciende la luz,
   se dibuja la mesa, aparece el nombre. Nada se mueve después.
   ========================================================================== */

:root{
  --noche:#0F1B2D;
  --vigilia:#1C2E4A;
  --ambar:#F5B53F;
  --marfil:#F2F1ED;
  --gris-mesa:#8794A8;

  --borde:rgba(242,241,237,.13);
  --borde-vivo:rgba(245,181,63,.34);

  --serif:"Bodoni Moda",Didot,Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  /* Curva de salida larga: arranca rápido y se asienta sin rebote. */
  --salida:cubic-bezier(.22,1,.36,1);
  --suave:cubic-bezier(.4,0,.2,1);

  --ancho:64rem;
  --medida:36rem;

  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-sizing:border-box;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}

body{
  margin:0;
  min-height:100vh;
  background:var(--noche);
  color:var(--marfil);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%}

:focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:4px;
  border-radius:3px;
}

/* --------------------------------------------------------------------------
   Halo: la fuente de luz detrás de todo. Se enciende primero.
   -------------------------------------------------------------------------- */
.halo{
  position:fixed;
  top:-18vh;
  left:50%;
  width:min(1100px,150vw);
  height:min(900px,120vh);
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  background:
    radial-gradient(ellipse 52% 44% at 50% 18%,rgba(245,181,63,.17),rgba(245,181,63,0) 70%),
    radial-gradient(ellipse 80% 60% at 50% 10%,rgba(28,46,74,.85),rgba(15,27,45,0) 72%);
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */
.escena{
  position:relative;
  z-index:1;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 1.5rem;
}

.marca{
  min-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 0 4rem;
}

/* --------------------------------------------------------------------------
   Isotipo
   -------------------------------------------------------------------------- */
.isotipo{
  width:clamp(108px,20vw,148px);
  height:auto;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 0 28px rgba(245,181,63,.16));
}

.isotipo .rayo{
  opacity:0;
  transform-box:view-box;
  transform-origin:50% 6.6%;   /* vértice superior del haz, y=8 de 120 */
  transform:scaleY(.55);
}

.isotipo .mesa{
  stroke-dasharray:163.4;
  transform-box:view-box;
  stroke-dashoffset:163.4;
  transform-origin:50% 70%;
  transform:rotate(-90deg);    /* el trazo arranca arriba, no a la derecha */
}

.isotipo .lugar{
  opacity:0;
  transform-box:view-box;
  transform-origin:50% 70%;
  transform:scale(.2);
}

/* --------------------------------------------------------------------------
   Nombre
   -------------------------------------------------------------------------- */
.nombre{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.9rem,13vw,5.6rem);
  letter-spacing:.14em;
  line-height:1;
  margin:1.6rem 0 0;
  /* compensa el espaciado de la última letra para centrar ópticamente */
  padding-left:.14em;
  display:flex;
  justify-content:center;
}

.nombre span{
  display:inline-block;
  opacity:0;
  transform:translateY(.4em);
  filter:blur(7px);
  will-change:transform,opacity,filter;
}

.firma{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,3.6vw,1.4rem);
  color:var(--ambar);
  margin:1.1rem 0 0;
  opacity:0;
  transform:translateY(10px);
}

/* --------------------------------------------------------------------------
   Estado: próximamente
   -------------------------------------------------------------------------- */
.pendiente{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:2.6rem 0 0;
  padding:.5rem 1.1rem .5rem .9rem;
  border:1px solid var(--borde-vivo);
  border-radius:999px;
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--marfil);
  background:rgba(245,181,63,.05);
  opacity:0;
  transform:translateY(10px);
}

.punto{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ambar);
  flex:none;
}

.promesa{
  max-width:30rem;
  margin:1.6rem auto 0;
  color:var(--gris-mesa);
  font-size:clamp(.95rem,2.6vw,1.02rem);
  line-height:1.65;
  opacity:0;
  transform:translateY(10px);
}

/* --------------------------------------------------------------------------
   Origen del nombre
   -------------------------------------------------------------------------- */
.origen{
  padding:1rem 0 5rem;
}

.titulo{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,5vw,2.1rem);
  line-height:1.2;
  margin:0 0 2rem;
  text-align:center;
  color:var(--marfil);
  opacity:0;
  transform:translateY(12px);
}

.tarjetas{
  display:grid;
  gap:1rem;
}

@media(min-width:780px){
  .tarjetas{grid-template-columns:repeat(3,1fr);gap:1.1rem}
}

.tarjeta{
  border:1px solid var(--borde);
  border-radius:8px;
  padding:1.6rem 1.4rem 1.7rem;
  background:linear-gradient(180deg,rgba(28,46,74,.55) 0%,rgba(28,46,74,.22) 100%);
  opacity:0;
  transform:translateY(20px);
  will-change:transform,opacity;
}

.tarjeta.destacada{
  border-color:var(--borde-vivo);
  background:linear-gradient(180deg,rgba(245,181,63,.09) 0%,rgba(28,46,74,.28) 100%);
}

.glifo{
  display:block;
  font-family:var(--serif);
  font-size:2.1rem;
  line-height:1;
  color:var(--ambar);
  margin-bottom:.9rem;
}

.glifo.jp{
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",var(--serif);
  font-size:2.5rem;
}

.tarjeta h3{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  margin:0 0 .5rem;
  color:var(--marfil);
  letter-spacing:.005em;
}

.tarjeta h3 em{font-style:italic;font-weight:500}

.tarjeta p{
  margin:0;
  font-size:.92rem;
  line-height:1.62;
  color:var(--gris-mesa);
  max-width:var(--medida);
}

.tarjeta em{color:var(--marfil);font-style:italic}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie{
  border-top:1px solid var(--borde);
  padding:2rem 0 3rem;
  text-align:center;
  opacity:0;
}

.pie p{
  margin:0;
  font-size:.82rem;
  color:#5D6B80;
  letter-spacing:.03em;
}

/* ==========================================================================
   Secuencia de entrada. Se dispara cuando el documento marca .listo,
   una vez que las tipografías están cargadas, para que nada salte.
   ========================================================================== */

.listo .halo{
  animation:enciende 2s var(--suave) both;
}

.listo .isotipo .rayo{
  animation:cae-luz 1.3s var(--salida) .18s both;
}

.listo .isotipo .mesa{
  animation:traza 1.15s var(--salida) .52s both;
}

.listo .isotipo .lugar{
  animation:posa .7s var(--salida) 1.22s both;
}

.listo .nombre span{
  animation:asciende .95s var(--salida) both;
}
.listo .nombre span:nth-child(1){animation-delay:1.42s}
.listo .nombre span:nth-child(2){animation-delay:1.49s}
.listo .nombre span:nth-child(3){animation-delay:1.56s}
.listo .nombre span:nth-child(4){animation-delay:1.63s}
.listo .nombre span:nth-child(5){animation-delay:1.70s}
.listo .nombre span:nth-child(6){animation-delay:1.77s}

.listo .firma{animation:sube .8s var(--salida) 2.10s both}
.listo .pendiente{animation:sube .8s var(--salida) 2.34s both}
.listo .promesa{animation:sube .8s var(--salida) 2.50s both}

.listo .punto{animation:late 2.6s var(--suave) 3.1s infinite}

.listo .titulo{animation:sube .85s var(--salida) 2.72s both}

.listo .tarjeta{animation:sube-carta .95s var(--salida) both}
.listo .tarjeta:nth-child(1){animation-delay:2.88s}
.listo .tarjeta:nth-child(2){animation-delay:3.00s}
.listo .tarjeta:nth-child(3){animation-delay:3.12s}

.listo .pie{animation:aparece 1s var(--suave) 3.5s both}

@keyframes enciende{
  from{opacity:0}
  to{opacity:1}
}

@keyframes cae-luz{
  from{opacity:0;transform:scaleY(.55)}
  to{opacity:1;transform:scaleY(1)}
}

@keyframes traza{
  from{stroke-dashoffset:163.4}
  to{stroke-dashoffset:0}
}

@keyframes posa{
  0%{opacity:0;transform:scale(.2)}
  60%{opacity:1;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes asciende{
  from{opacity:0;transform:translateY(.4em);filter:blur(7px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

@keyframes sube{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes sube-carta{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes aparece{
  from{opacity:0}
  to{opacity:1}
}

@keyframes late{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,181,63,.42)}
  55%{opacity:.85;box-shadow:0 0 0 7px rgba(245,181,63,0)}
}

/* ==========================================================================
   Sin animación: todo visible desde el primer cuadro.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .halo,
  .isotipo .rayo,
  .isotipo .lugar,
  .nombre span,
  .firma,
  .pendiente,
  .promesa,
  .titulo,
  .tarjeta,
  .pie{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }
  .isotipo .mesa{
    stroke-dashoffset:0 !important;
    animation:none !important;
  }
  .punto{animation:none !important}
}

/* Red de seguridad: si el JavaScript no corre, nada queda invisible. */
html:not(.js) .halo,
html:not(.js) .isotipo .rayo,
html:not(.js) .isotipo .lugar,
html:not(.js) .nombre span,
html:not(.js) .firma,
html:not(.js) .pendiente,
html:not(.js) .promesa,
html:not(.js) .titulo,
html:not(.js) .tarjeta,
html:not(.js) .pie{
  opacity:1;
  transform:none;
  filter:none;
}
html:not(.js) .isotipo .mesa{stroke-dashoffset:0}