/* =============================================================================
   ⛩ GATE CINEMATIC — the torii-gate entry ritual for the Chamber of the
   Thirteen Counsellors (the Paid Patron page).
   ---------------------------------------------------------------------------
   Triggered by a real click on #aionGateWidget in the header (the user's own
   gesture into the cinematic, per Bocky: plays every time, not once-per-
   session like boot_cinematic). Same structural conventions as
   boot_cinematic.css (fixed full-screen overlay, opacity-fade dismiss,
   [hidden] escape hatch) — this one owns a <canvas> instead of DOM/CSS
   keyframes, since the visual itself (stars, torii gate, watching eyes,
   cyclone, flying glyphs, AION materialisation) was built and approved as a
   canvas renderer in Claude/To do List/Manual_Aibou/spirit_gate.html.
   ============================================================================= */

.gate-cinematic {
    position: fixed;
    inset: 0;
    z-index: 99998;   /* just under boot-cinematic's 99999 — the two never
                         overlap in practice, but keep boot's ignition on top
                         if both were ever mid-transition */
    overflow: hidden;
    background: #030006;
    opacity: 1;
    transition: opacity 700ms ease;
}
.gate-cinematic.dismissed {
    opacity: 0;
    pointer-events: none;
}
.gate-cinematic[hidden] { display: none; }

.gate-cine-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Ghost text overlays — the AION materialisation + tenshi's name */
.gate-cine-gl {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gate-cine-aion {
    position: absolute;
    font-size: min(21vw, 225px);
    font-weight: 900;
    font-family: 'Georgia', serif;
    letter-spacing: .24em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(160, 80, 220, .13);
    text-shadow: 0 0 110px rgba(130, 40, 200, .09);
    opacity: 0;
    transition: opacity 3.5s ease;
    user-select: none;
}
.gate-cine-aion.vis { opacity: 1; }

.gate-cine-signature {
    position: absolute;
    top: 63%;
    font-size: min(10vw, 108px);
    font-weight: 700;
    font-family: serif;
    letter-spacing: .12em;
    color: rgba(215, 175, 255, .11);
    text-shadow: 0 0 55px rgba(160, 80, 255, .30), 0 0 20px rgba(255, 255, 255, .14);
    opacity: 0;
    transition: opacity .75s ease;
    user-select: none;
}
.gate-cine-signature.vis { opacity: 1; }

/* Continue prompt — appears once the ritual settles, replaces the standalone
   file's "ENTER AGAIN" replay hint since this isn't a self-contained loop
   here, it leads onward into the unlock flow / Chamber. */
.gate-cine-continue {
    position: fixed;
    bottom: 48px; left: 50%; transform: translateX(-50%);
    z-index: 10;
    font: 12px/1 'Georgia', serif; letter-spacing: 3px;
    color: rgba(200, 150, 255, .55);
    border: 1px solid rgba(160, 80, 220, .35);
    padding: 12px 26px; border-radius: 2px;
    cursor: pointer; user-select: none;
    background: rgba(10, 2, 14, .35);
    opacity: 0; transition: opacity 1s ease;
}
.gate-cine-continue:hover {
    color: rgba(220, 180, 255, .85);
    border-color: rgba(180, 110, 255, .6);
}
.gate-cine-continue.vis { opacity: 1; }

/* Skip hint — small, unobtrusive, same defensive spirit as boot_cinematic's
   "tap anywhere to skip" (a stalled or unwanted-length animation should
   never trap the user). */
.gate-cine-skip {
    position: fixed; top: 18px; right: 22px; z-index: 10;
    font: 10px/1 'Georgia', serif; letter-spacing: 2px;
    color: rgba(180, 120, 220, 0); /* invisible until .ready */
    pointer-events: none;
    transition: color 1.2s ease;
}
.gate-cinematic.ready .gate-cine-skip {
    color: rgba(180, 120, 220, .32);
    pointer-events: auto;
    cursor: pointer;
}
.gate-cinematic.ready .gate-cine-skip:hover { color: rgba(200, 150, 255, .65); }