/* ============================================================================
   EDEN REVERIE — pages.css
   Añadidos para el sitio MULTIPÁGINA (banner compacto de páginas internas,
   accesos del home, accesibilidad). El design system base está en style.css.
   ========================================================================== */

/* Botón "Próximamente": no interactivo, apagado (juego aún no disponible). */
.btn.is-soon { opacity: 0.6; cursor: default; pointer-events: none; }
.btn-gold.is-soon { background: transparent; color: var(--gold); border-color: var(--gold-deep); box-shadow: none; }

/* Subtexto del CTA de cierre. */
.cta-final .cta-lead { max-width: 46ch; margin: 0 auto 30px; color: var(--ink-dim); font-size: clamp(15px, 1.6vw, 18px); }

/* Foto del equipo (Estudio): retrato grande enmarcado. */
.staff-card .staff-photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
.staff-card .staff-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; transition: transform 0.5s var(--ease); }
.staff-card:hover .staff-photo img { transform: scale(1.04); }

/* Salto de accesibilidad al contenido. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  padding: 10px 16px; border-radius: 4px;
  background: var(--gold); color: #12100a; font-weight: 700; font-size: 13px;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---- Banner de página interna (Historia, Personajes, Estudio, Devblog) ---- */
.page-hero {
  position: relative;
  padding: clamp(140px, 22vh, 230px) 0 clamp(44px, 8vh, 88px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero-art {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 35%;
  transform: scale(1.05);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 6, 12, 0.72) 0%, rgba(5, 6, 12, 0.5) 42%, var(--bg) 100%),
    radial-gradient(120% 90% at 50% 30%, transparent 45%, rgba(5, 6, 12, 0.7) 100%);
}
.page-hero .vtext.kana-side {
  position: absolute; top: 16%; right: clamp(12px, 4vw, 56px); height: 60%;
  font-size: clamp(20px, 2.2vw, 32px); color: rgba(232, 230, 227, 0.14); letter-spacing: 0.5em;
}
.page-hero h1 {
  font-size: clamp(38px, 7vw, 88px); letter-spacing: 0.04em; color: var(--ink);
  margin-top: 16px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.page-hero h1 .light { color: var(--gold); }
.page-hero .kanji-sub {
  display: block; margin-top: 10px; font-family: var(--font-display);
  font-size: 15px; letter-spacing: 0.34em; color: var(--muted);
}
.page-hero .lead {
  max-width: 56ch; margin-top: 20px; font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-dim);
}
.page-hero--min { padding: clamp(150px, 26vh, 260px) 0 clamp(80px, 14vh, 150px); text-align: center; }
.page-hero--min .lead { margin-inline: auto; }
.page-hero--min .btn { margin-top: 28px; }

/* ---- Accesos del home a cada sección (portal, no landing de scroll) ---- */
.teasers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
}
.teaser {
  position: relative; display: block; min-height: 300px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.teaser:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55); }
.teaser .t-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; transform: scale(1.05);
  transition: transform 0.6s var(--ease);
}
.teaser:hover .t-bg { transform: scale(1.13); }
.teaser::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5, 6, 12, 0.15) 0%, rgba(5, 6, 12, 0.55) 55%, rgba(5, 6, 12, 0.92) 100%);
}
.teaser .t-body {
  position: relative; z-index: 2; height: 100%; min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 24px;
}
.teaser .t-num {
  font-family: var(--font-display); font-size: 15px; color: transparent;
  -webkit-text-stroke: 1px var(--gold-deep); letter-spacing: 0.1em;
}
.teaser .t-title { font-family: var(--font-display); font-size: 26px; color: var(--ink); }
.teaser:hover .t-title { color: var(--gold); }
.teaser .t-desc { color: var(--ink-dim); font-size: 14px; }
.teaser .t-go { margin-top: 8px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

/* Intro corta del home antes de los accesos. */
.home-intro { max-width: 760px; }

/* Rejilla de posts en el índice del devblog (reusa .news del base pero añade
   una variante en tarjetas por si se quiere; aquí mantenemos el feed .news). */
.post-back {
  display: inline-block; margin-bottom: 18px; color: var(--gold);
  font-family: var(--font-display); letter-spacing: 0.14em; font-size: 13px;
}
.post-back:hover { color: var(--gold-warm); }

@media (max-width: 900px) {
  .page-hero .vtext.kana-side { display: none; }
}