/* ==========================================================================
   Noctara — Próximamente
   ========================================================================== */

:root {
  /* Proporciones de back_index.png (1671 × 941) */
  --ratio: 1.7758;
  --w: max(100vw, 100vh * var(--ratio));
  --h: max(100vh, 100vw / var(--ratio));

  /* Posición de la llama dentro de la imagen */
  --fx: 55.09%;
  --fy: 40.6%;

  /* Nivel de luz de la vela (lo anima main.js: encendido + parpadeo) */
  --L: 1;
  --sway: 0px;

  --void: #040308;
  --silver: #e8e5e0;
  --silver-dim: #a9a5a0;
  --line: rgba(214, 210, 204, 0.42);
  --line-soft: rgba(214, 210, 204, 0.2);
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--void);
  color: var(--silver);
  font-family: "EB Garamond", Georgia, serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Escena: se escala como background-size: cover, pero intentando centrar
   la llama en pantallas estrechas (móvil en vertical).
   -------------------------------------------------------------------------- */
.stage {
  position: fixed;
  width: var(--w);
  height: var(--h);
  top: 50%;
  left: clamp(100vw - var(--w), 50vw - var(--w) * 0.5509, 0px);
  transform: translateY(-50%);
  pointer-events: none;
}

.stage > * {
  position: absolute;
  inset: 0;
}

.stage__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  user-select: none;
}

/* Oscuridad: un velo casi negro con un "hueco" de luz alrededor de la vela */
.stage__darkness {
  background: radial-gradient(circle at var(--fx) var(--fy),
    rgba(3, 2, 8, 0)    0,
    rgba(3, 2, 8, 0.18) calc(var(--w) * 0.045 * var(--L)),
    rgba(3, 2, 8, 0.55) calc(var(--w) * 0.14  * var(--L)),
    rgba(3, 2, 8, 0.82) calc(var(--w) * 0.28  * var(--L)),
    rgba(3, 2, 8, 0.93) calc(var(--w) * 0.50  * var(--L)),
    rgba(3, 2, 8, 0.97) calc(var(--w) * 0.80  * var(--L)));
}

/* Luz cálida que "tiñe" la escena alrededor de la llama */
.stage__glow {
  mix-blend-mode: screen;
  background: radial-gradient(circle at calc(var(--fx) + var(--sway)) var(--fy),
    rgba(255, 196, 120, calc(0.55 * var(--L))) 0,
    rgba(255, 150, 70,  calc(0.22 * var(--L))) calc(var(--w) * 0.025),
    rgba(214, 100, 40,  calc(0.09 * var(--L))) calc(var(--w) * 0.10),
    rgba(150, 60, 25,   calc(0.04 * var(--L))) calc(var(--w) * 0.22),
    rgba(0, 0, 0, 0) calc(var(--w) * 0.36));
}

/* Reflejo de la vela sobre el suelo mojado */
.stage__reflection {
  mix-blend-mode: screen;
  opacity: calc(var(--L) * 0.9);
  background: radial-gradient(ellipse calc(var(--w) * 0.05) calc(var(--h) * 0.12) at 54.2% 88%,
    rgba(255, 170, 90, 0.22) 0,
    rgba(255, 130, 60, 0.07) 55%,
    rgba(0, 0, 0, 0) 100%);
}

/* Núcleo brillante de la llama */
.stage__flame {
  inset: auto;
  left: calc(var(--fx) + var(--sway) * 0.4);
  top: var(--fy);
  width: calc(var(--w) * 0.018);
  height: calc(var(--w) * 0.03);
  transform: translate(-50%, -56%) scale(calc(0.6 + 0.4 * var(--L)));
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 62%,
    rgba(255, 252, 235, 0.95) 0,
    rgba(255, 214, 140, 0.7) 28%,
    rgba(255, 150, 60, 0.25) 58%,
    rgba(255, 120, 40, 0) 75%);
  filter: blur(calc(var(--w) * 0.0022));
  mix-blend-mode: screen;
  opacity: var(--L);
}

/* --------------------------------------------------------------------------
   Atmósfera
   -------------------------------------------------------------------------- */
.motes {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(3, 2, 8, 0.75) 0%, rgba(3, 2, 8, 0) 22%),
    linear-gradient(to top, rgba(3, 2, 8, 0.9) 0%, rgba(3, 2, 8, 0) 30%);
}

.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */
.content {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: clamp(28px, 5.5vh, 64px) 16px clamp(24px, 5vh, 56px);
  text-align: center;
}

.heading,
.signup {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 2.2s ease, transform 2.2s ease;
}

.is-lit .heading { opacity: 1; transform: none; }
.is-lit .signup  { opacity: 1; transform: none; transition-delay: 0.6s; }

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heading__brand {
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(0.8rem, 1.25vw, 1.05rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--silver);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.heading__title {
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 7.2vw, 6rem);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: clamp(10px, 2vh, 22px) 0 clamp(8px, 1.6vh, 18px);
  background: linear-gradient(to bottom, #ffffff 0%, #ecebe8 38%, #c4c1bc 68%, #8f8b86 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 calc(18px * var(--L)) rgba(255, 244, 228, calc(0.14 * var(--L))))
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.9));
}

/* Adornos: líneas que se desvanecen con una mira o un rombo en el centro */
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ornament {
  display: block;
  color: var(--silver-dim);
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  overflow: visible;
}

.ornament rect { stroke: none; }
.ornament__solid { fill: currentColor; stroke: none; }

.ornament--brand   { width: clamp(120px, 12vw, 180px); height: auto; margin-top: clamp(6px, 1.2vh, 12px); }
.ornament--title   { width: min(360px, 70vw); height: auto; }
.ornament--diamond { width: min(300px, 80%); height: auto; margin: 18px auto 10px; opacity: 0.8; }
.ornament--tail    { width: 10px; height: 10px; margin: 6px auto 0; opacity: 0.6; }

/* Formulario */
.signup {
  width: min(560px, 100%);
}

.signup__label {
  display: block;
  font-family: "Cinzel", serif;
  font-size: clamp(0.74rem, 1vw, 0.88rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 1);
}

/* Marco doble: línea exterior fina y línea interior alrededor del campo */
.signup__frame {
  position: relative;
  padding: 4px;
  border: 1px solid var(--line-soft);
  background: rgba(5, 5, 7, 0.55);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.signup__frame::before,
.signup__frame::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line);
  pointer-events: none;
}

.signup__frame::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.signup__frame::after  { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

.signup__row {
  display: flex;
  border: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(14, 14, 18, 0.88), rgba(6, 6, 9, 0.92));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.signup__frame:focus-within {
  border-color: var(--line);
  box-shadow: 0 0 28px rgba(255, 244, 228, 0.07);
}

.signup__frame:focus-within .signup__row { border-color: rgba(232, 229, 224, 0.6); }

.signup__input {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  color: var(--silver);
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}

.signup__input::placeholder {
  color: rgba(169, 165, 160, 0.55);
  font-style: italic;
}

.signup__button {
  padding: 0 clamp(20px, 3vw, 34px);
  border: 0;
  border-left: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(24, 24, 28, 0.9), rgba(10, 10, 13, 0.95));
  color: var(--silver);
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.signup__button:hover,
.signup__button:focus-visible {
  background: linear-gradient(to bottom, rgba(44, 43, 48, 0.95), rgba(18, 18, 22, 0.95));
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 244, 228, 0.35);
  outline: none;
}

.signup__button:disabled { cursor: wait; opacity: 0.6; }

.signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.signup__status {
  min-height: 1.5em;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--silver-dim);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.signup__status.is-error   { color: #c9a2a2; }
.signup__status.is-success { color: var(--silver); }

.signup.is-done .signup__row { border-color: rgba(232, 229, 224, 0.5); }

/* Botón de sonido */
.sound {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  outline: 1px solid var(--line-soft);
  outline-offset: 3px;
  background: rgba(8, 8, 11, 0.7);
  color: #c9c5c0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 2s ease 1.2s, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.is-lit .sound { opacity: 1; }

.sound:hover,
.sound:focus-visible {
  color: var(--silver);
  border-color: var(--line);
}

.sound:focus-visible { outline-color: var(--line); }

.sound[aria-pressed="true"] {
  color: var(--silver);
  border-color: var(--line);
  box-shadow: 0 0 16px rgba(255, 244, 228, calc(0.08 * var(--L)));
}

.sound__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound__icon path:first-child { fill: currentColor; fill-opacity: 0.2; }
.sound__waves { display: none; }
.sound[aria-pressed="true"] .sound__waves { display: inline; }
.sound[aria-pressed="true"] .sound__mute  { display: none; }

@media (max-width: 600px) {
  .content { padding-bottom: 72px; }
}

@media (max-width: 420px) {
  .signup__input  { padding: 14px 14px; }
  .signup__button { padding: 0 14px; letter-spacing: 0.16em; text-indent: 0.16em; }
}