/* SY-G «Libro vivo» · el Gate es el cuarto de las princesas y su libro de cuentos.
   Carga después de core-structure y theme-esmeralda: todo va con #kc-gate para ganarles sin tocarlos.
   Regla WebKit: nada de filter / mix-blend-mode / drop-shadow en libro, hoja o stage (tesela transparente); sombras horneadas o degradados. */
#kc-gate {
  --gate-w: max(100vw, 56.25vh);
  --gate-w: max(100vw, 56.25svh);
  --bw: min(88vw, 44.8vh);
  --bw: min(88vw, 44.8svh);
  --book-cy: 44%;
  --night: #2A1521;
  --rose-ink: #6B3A3F;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: var(--night);
  color: #F6EDDD;
  opacity: 1;
  visibility: visible;
}
#kc-gate[hidden] { display: none; }
/* después del commit el core oculta el Gate; durante la entrada al Hero sigue pintado (inerte, aria-hidden) */
#kc-gate.sy-book-exit[hidden] { display: block !important; }
#kc-gate.sy-book-exit.kc-gate-opened { opacity: 1; visibility: visible; pointer-events: none; animation: sy-exit-safety 3s linear forwards; }
@keyframes sy-exit-safety { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
#kc-gate.kc-gate-opening { opacity: 1; visibility: visible; transition: none; animation: none; }

#kc-gate .kc-gate-bg {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, #4A2233, var(--night) 72%);
  transition: opacity .7s ease .05s;
}
#kc-gate .sy-book-stage { position: absolute; inset: 0; }

/* ── el cuarto ── */
#kc-gate .sy-room {
  position: absolute; top: 50%; left: 50%;
  width: var(--gate-w); aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
  transform-origin: 50% 73.85%;           /* el puf: la cámara entra hacia el libro */
  overflow: hidden;
  background: #F6EEE0;
  will-change: transform;
}
#kc-gate .sy-room-plate,
#kc-gate .sy-room-ink,
#kc-gate .sy-room-wash { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#kc-gate .sy-room-ink[hidden], #kc-gate .sy-room-wash[hidden] { display: none; }
#kc-gate .sy-room-plate { opacity: 0; transition: opacity .45s ease; }
#kc-gate.sy-room-painted .sy-room-plate { opacity: 1; }
#kc-gate.sy-room-fallback .sy-room { background: linear-gradient(180deg, #B9566E, #8B3550 70%, #5E2236); }
/* el haz de luna cae de la ventana al libro */
#kc-gate .sy-room-beam {
  position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(45% 44.6%, 63% 44.6%, 76% 73.5%, 24% 73.5%);
  background: linear-gradient(180deg, rgba(236, 240, 255, .34), rgba(236, 240, 255, .12) 72%, rgba(236, 240, 255, 0));
  opacity: 0; transition: opacity 1.4s ease;
}
#kc-gate.sy-room-painted .sy-room-beam { opacity: 1; animation: sy-beam 5.5s ease-in-out 1.4s infinite alternate; }
@keyframes sy-beam { from { opacity: 1; } to { opacity: .62; } }
#kc-gate .sy-room-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 46% at 50% var(--book-cy), rgba(42, 21, 33, 0) 38%, rgba(30, 10, 22, .62) 100%);
  opacity: 0; transition: opacity 1.4s ease;
}
#kc-gate.sy-pushed .sy-room-veil { opacity: 1; }

/* ── el libro ── */
#kc-gate .sy-book {
  position: absolute; left: 50%; top: var(--book-cy);
  width: var(--bw); aspect-ratio: 1000 / 1428;
  transform: translate(-50%, -50%);
  perspective: 1800px;
  opacity: 0; transition: opacity .38s ease;
}
#kc-gate.sy-book-in .sy-book { opacity: 1; }
#kc-gate .sy-book-shadow { position: absolute; left: -9%; right: -12%; bottom: -7%; height: 18%; background: radial-gradient(closest-side, rgba(18, 5, 12, .55), rgba(18, 5, 12, 0)); }
/* el bloque es la contratapa, la bisagra y el canto de las hojas detrás de la página */
#kc-gate .sy-book-block {
  position: absolute; top: -2.4%; left: -3.6%; right: -1.8%; bottom: -2.4%;
  border-radius: 2px 7px 7px 2px;
  background:
    url("../../assets/book/case.webp?v=syr3") center / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 2.15%, #9C7835 2.35%, #E9CF7A 2.5%, #A37C39 2.65%, transparent 2.85%) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 3.05%, #9C7835 3.2%, #F0D98D 3.32%, #A37C39 3.45%, transparent 3.6%) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, #263A1F 0, #3E5A32 58%, #263A1F 100%) 0 0 / 5% 100% no-repeat,
    linear-gradient(105deg, #7E2A45 0, #A8405F 48%, #8E3352 72%, #7E2A45 100%);
}
#kc-gate .sy-book-block::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #F2E6CF 0 2px, #D6C3A2 2px 3px) right 1.1% top 1% / 1.8% 98% no-repeat,
    repeating-linear-gradient(0deg, #F2E6CF 0 2px, #D6C3A2 2px 3px) left 1% bottom 1.1% / 97% 1.4% no-repeat,
    linear-gradient(90deg, rgba(38, 14, 25, 0), rgba(38, 14, 25, .18)) 0 2.4% / 3.5% 95.2% no-repeat,
    linear-gradient(180deg, rgba(38, 14, 25, .02), rgba(38, 14, 25, .24)) 3.4% 0 / 94.8% 2.35% no-repeat,
    linear-gradient(90deg, rgba(38, 14, 25, .18), rgba(38, 14, 25, 0)) 98.1% 2.4% / 1.5% 95.2% no-repeat,
    linear-gradient(180deg, rgba(38, 14, 25, .2), rgba(38, 14, 25, 0)) 3.4% 97.65% / 94.8% 2.35% no-repeat;
}
#kc-gate .sy-page { position: absolute; inset: 0; overflow: hidden; background: #F6EDDD; border-radius: 1px 4px 4px 1px; }
#kc-gate .sy-leaf { position: absolute; z-index: 2; transform-origin: 0 50%; }
#kc-gate:not(.sy-leaf-is-page) .sy-leaf { inset: -2.4% -1.8% -2.4% -3.6%; }
#kc-gate.sy-leaf-is-page .sy-leaf { inset: 0; }
#kc-gate .sy-page-bg,
#kc-gate .sy-page-ink,
#kc-gate .sy-page-wash { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#kc-gate .sy-page-cap,
#kc-gate .sy-leaf-cap {
  position: absolute; left: 11%; right: 11%; top: 63%; margin: 0;
  text-align: center; color: var(--rose-ink);
  font-family: var(--sy-font-script); font-size: calc(var(--bw) * .08); line-height: 1.12;
  opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease;
}
#kc-gate .sy-page-cap.is-in { opacity: 1; transform: none; }
/* la página 3 terminada como imágenes durante la entrada al Hero (WebKit pierde los canvas bajo el escenario animado) */
#kc-gate .sy-page-still { position: absolute; display: block; max-width: none; pointer-events: none; }
#kc-gate .sy-leaf-cap { opacity: 1; transform: none; transition: none; }
/* mientras la hoja gira, su sombra barre la página de abajo desde el lomo */
#kc-gate .sy-page::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(40, 14, 22, .34), rgba(40, 14, 22, .12) 40%, rgba(40, 14, 22, 0) 70%);
  opacity: 0; transform-origin: 0 50%;
}
#kc-gate.sy-turning .sy-page::before { animation: sy-turn-shadow var(--turn, .8s) cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes sy-turn-shadow { 0% { opacity: 0; transform: scaleX(1); } 45% { opacity: 1; transform: scaleX(.75); } 100% { opacity: 0; transform: scaleX(.1); } }
/* la hoja que da vuelta: portada primero, después cada página terminada */
#kc-gate .sy-leaf[hidden] { display: none; }
#kc-gate .sy-leaf-front,
#kc-gate .sy-leaf-back { position: absolute; inset: 0; overflow: hidden; border-radius: 1px 4px 4px 1px; }
#kc-gate .sy-leaf-front[hidden], #kc-gate .sy-leaf-back[hidden] { display: none; }
#kc-gate .sy-leaf-back { transform: scaleX(-1); background: #F3E8D6; }
#kc-gate .sy-leaf-back img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#kc-gate .sy-cover,
#kc-gate .sy-title,
#kc-gate .sy-leaf-bg,
#kc-gate .sy-leaf-snap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#kc-gate .sy-cover { background: linear-gradient(90deg, #3E5A32 0 10.4%, #A8405F 10.4%); }   /* portada CSS si la imagen no llega */
#kc-gate .sy-leaf-bg,
#kc-gate .sy-leaf-snap,
#kc-gate .sy-leaf-cap { display: none; }
#kc-gate.sy-leaf-is-page .sy-cover,
#kc-gate.sy-leaf-is-page .sy-title,
#kc-gate.sy-leaf-is-page .sy-pen { display: none; }
#kc-gate.sy-leaf-is-page .sy-leaf-bg,
#kc-gate.sy-leaf-is-page .sy-leaf-snap,
#kc-gate.sy-leaf-is-page .sy-leaf-cap { display: block; }
#kc-gate .sy-leaf-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(40, 14, 22, .22), rgba(40, 14, 22, 0) 18%); }
/* la punta de la varita que escribe la portada: una sola luz, no partículas */
#kc-gate .sy-pen {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFDF2 0 18%, rgba(255, 236, 178, .8) 36%, rgba(255, 222, 150, 0) 70%);
  opacity: 0; transition: opacity .35s ease;
}
#kc-gate .sy-pen.is-on { opacity: 1; }

/* ── «Abre el libro» ── */
#kc-gate .kc-gate-content {
  position: absolute; left: 0; right: 0; z-index: 3;
  bottom: max(3.4vh, calc(env(safe-area-inset-bottom) + 14px));
  bottom: max(3.4svh, calc(env(safe-area-inset-bottom) + 14px));
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  pointer-events: none;
}
#kc-gate .kc-gate-cta {
  pointer-events: auto; position: relative; isolation: isolate;
  width: auto; height: auto; min-height: 48px; min-width: 12.5rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; background: transparent; color: #FFF5E6;
  transition: opacity .25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* las colas del listón: asoman detrás y abajo de la banda, con su doblez oscuro */
#kc-gate .kc-gate-cta::before,
#kc-gate .kc-gate-cta::after {
  content: ""; position: absolute; z-index: 0; top: 13px; bottom: -11px; width: 46px;
  background: linear-gradient(180deg, rgba(255, 236, 228, .22), rgba(255, 236, 228, 0) 40%), linear-gradient(180deg, #A9476A, #8A3150);
  pointer-events: none;
}
#kc-gate .kc-gate-cta::before { left: -30px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
#kc-gate .kc-gate-cta::after { right: -30px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
/* el doblez: un triángulo oscuro une cada cola con la banda */
#kc-gate .kc-gate-cta-band::before,
#kc-gate .kc-gate-cta-band::after { content: none; }
#kc-gate .kc-gate-cta-fold { position: absolute; z-index: 0; bottom: -11px; width: 16px; height: 11px; background: #5A1C35; pointer-events: none; }
#kc-gate .kc-gate-cta-fold--l { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
#kc-gate .kc-gate-cta-fold--r { right: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
#kc-gate .kc-gate-cta-band {
  position: relative; z-index: 1; box-sizing: border-box; min-width: 200px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .55rem 1.4rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 232, 225, .3) 0, rgba(255, 232, 225, .12) 1px, transparent 5px), linear-gradient(105deg, #B5506F 0, #9D3D5D 52%, #8E3352 100%);
  box-shadow: 0 9px 20px rgba(18, 5, 12, .38), inset 0 1px 0 rgba(255, 245, 230, .32);
  transition: transform .25s ease;
}
#kc-gate .kc-gate-cta-stitch { position: absolute; z-index: 3; inset: 4px; border: 1px dashed #E9CF7A; pointer-events: none; }
#kc-gate .kc-gate-cta-sheen {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: -58%; width: 58%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 239, 188, .42) 48%, rgba(255, 250, 224, .16) 56%, transparent);
  opacity: 0; transform: translateX(-120%);
}
@keyframes sy-cta-sheen {
  0%, 12% { opacity: 0; transform: translateX(-120%); }
  17% { opacity: .85; }
  38% { opacity: .6; transform: translateX(310%); }
  43%, 100% { opacity: 0; transform: translateX(310%); }
}
#kc-gate .sy-cta-crown, #kc-gate .kc-gate-cta-text { position: relative; z-index: 4; flex: 0 0 auto; }
#kc-gate .sy-cta-crown { width: 1.25rem; height: .95rem; overflow: visible; }
#kc-gate .kc-gate-cta-text { font-family: var(--sy-font-script); font-size: 1.25rem; font-weight: 400; letter-spacing: 0; color: #FFF5E6; padding: 0; line-height: 1.1; text-transform: none; white-space: nowrap; }
#kc-gate .kc-gate-cta:hover .kc-gate-cta-band { transform: translateY(-1px); }
#kc-gate .kc-gate-cta:focus-visible { outline: 3px solid #F4D68A; outline-offset: 4px; }
/* el botón nace cuando la portada termina de escribirse (inerte y fuera del tab order hasta gate-ready) */
#kc-gate.gate-await:not(.gate-ready) #kc-gate-cta { opacity: 0; visibility: hidden; pointer-events: none; }
#kc-gate.gate-ready #kc-gate-cta { animation: sy-cta-born .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sy-cta-born { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#kc-gate .kc-gate-credit { margin: 0; font-family: var(--sy-font-text); font-size: .72rem; letter-spacing: .22em; color: rgba(246, 237, 221, .72); text-transform: none; }
#kc-gate.kc-gate-opening .kc-gate-content { opacity: 0; transition: opacity .25s ease; }
#kc-gate .sy-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* estático (reduced-motion / save-data): el cuarto ya enfocado, la portada escrita, el botón listo */
#kc-gate.sy-static .sy-room { transform: translate(-50%, -50%) translateY(-9%) scale(1.55); }
#kc-gate.sy-static .sy-book { transition: none; }
#kc-gate.sy-doc-hidden *,
#kc-gate.sy-doc-hidden *::after { animation-play-state: paused !important; }

@media (min-aspect-ratio: 4/5) {
  #kc-gate { --gate-w: 56.25vh; --gate-w: 56.25svh; }
  #kc-gate .sy-room { box-shadow: 0 0 90px rgba(10, 3, 8, .65); }
}
@media (prefers-reduced-motion: reduce) {
  #kc-gate .sy-room-beam, #kc-gate .kc-gate-cta-sheen { animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  #kc-gate.gate-ready:not(.kc-gate-opening):not(.sy-static) .kc-gate-cta-sheen { animation: sy-cta-sheen 6.4s ease-in-out 1s infinite; }
}
/* pantallas bajas (360x640): el libro con su tapa cede un poco para que el listón respire */
@media (max-height: 700px) and (max-aspect-ratio: 4/5) {
  #kc-gate { --bw: min(82vw, 41.5vh); --bw: min(82vw, 41.5svh); }
}