/* =====================================================================
   MALGOODI — gate.css
   The scroll-driven "gate opens and the boy walks through" scene.
   A single custom property --gate (0 → 1) drives everything; scene.js sets
   it from the hero's scroll progress. All layers are positioned as % of the
   .hero-art box, matching the coordinates measured from the illustration.
   =====================================================================*/

/* The art box becomes the positioning context for the gate layers. */
.hero-art {
    position: absolute;
    top: 0;
    right: 0;
    width: 72%;
    max-width: 1100px;
    z-index: 0;
    pointer-events: none;
    --gate: 0;                 /* 0 = closed, 1 = fully open + boy gone */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
}
.hero-art .scene-plate,
.hero-art .scene-plate img { display: block; width: 100%; }

/* Every overlay layer is absolutely placed over the plate. */
.scene-gate {
    position: absolute;
    pointer-events: none;
}

/* ---- The two gate leaves ----
   Measured opening: x 0.6255 → 0.7870 of the plate, y 0.3657 → 0.7611.
   Each leaf is half that width; hinge on its OUTER edge. */
.scene-gate {
    top: 36.57%;
    width: 8.075%;             /* half of (0.7870-0.6255) = 0.08075 */
    height: 39.54%;            /* 0.7611 - 0.3657 */
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.scene-gate-left {
    left: 62.55%;
    transform-origin: left center;
    /* swing inward-to-open: rotate around the left hinge up to ~-105deg */
    transform: perspective(900px) rotateY(calc(var(--gate) * -105deg));
    /* slight fade as it turns edge-on */
    opacity: calc(1 - var(--gate) * 0.15);
}
.scene-gate-right {
    left: 70.62%;              /* meets left leaf at the seam (0.7062) */
    transform-origin: right center;
    transform: perspective(900px) rotateY(calc(var(--gate) * 105deg));
    opacity: calc(1 - var(--gate) * 0.15);
}

/* ------------------------------------------------------------------
   Scroll-hint chip under the hero art
   ------------------------------------------------------------------*/
.scene-hint {
    position: absolute;
    right: 8%;
    top: 74%;
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--malgoodi-muted);
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .85;
    transition: opacity .5s ease;
}
.scene-hint.hidden { opacity: 0; }
.scene-hint-arrow {
    font-size: 1rem;
    animation: hintBob 1.8s ease-in-out infinite;
}
@keyframes hintBob {
    0%,100% { transform: translateY(0); opacity: .6; }
    50%     { transform: translateY(5px); opacity: 1; }
}

/* ------------------------------------------------------------------
   Reduced motion: gate rests closed, faithful to the approved PDF hero.
   ------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    .scene-gate-left,
    .scene-gate-right { transform: none !important; opacity: 1 !important; }
    .scene-hint-arrow { animation: none !important; }
}

/* ------------------------------------------------------------------
   Responsive: on narrow screens the hero art becomes a soft backdrop
   (see responsive.css). Keep the gate layers aligned to it there too.
   ------------------------------------------------------------------*/
@media (max-width: 900px) {
    .scene-hint { display: none; }
}