/* =========================================================
   Peruvian Wizard - interactive stage
   Scoped entirely under .wizard-stage-wrapper so it can't
   leak into or be affected by the shared site stylesheet.
   ========================================================= */

.wizard-stage-wrapper {
    container-type: inline-size; /* lets the welcome box scale with the stage (cqw units) */
    position: relative;
    width: 1024px;
    max-width: 100%;
    aspect-ratio: 1024 / 768;
    margin: 0 auto;
    overflow: hidden; /* clips the inner stage's zoom transform to this frame */
    background: #000;
}

/* The stage holds four layer groups. Splitting them lets us blur
   "everything except the helmet" as a unit when the helmet is active. */
.wizard-stage {
    position: absolute;
    inset: 0;
    z-index: 0; /* own stacking context so the group z-indexes stay below the panels */
}

.stage-group {
    position: absolute;
    inset: 0;
    transform-origin: 39.36% 61.26%; /* banner bounding-box center */
    transition: transform 0.6s ease, filter 0.4s ease;
}

/* idle stacking, bottom to top */
.sg-bg     { z-index: 10; }
.sg-banner { z-index: 20; }
.sg-casco  { z-index: 30; }
.sg-front  { z-index: 40; } /* stool, wizard, newspaper, newspaper shadows */

/* B: camera zoom - every group zooms together, helmet included */
.wizard-stage-wrapper.zoom-banner .stage-group {
    transform: scale(1.8);
}

/* D: camera zoom toward the newspaper (anchored on newspaper_01.png bounding-box center).
   Everything zooms here, helmet included. 0.4s - keep in sync with ZOOM_MS in wizard-stage.js */
.wizard-stage-wrapper.zoom-newspaper .stage-group {
    transform-origin: 84.77% 46.16%;
    transform: scale(1.7);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.stage-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* hit-testing is done manually in JS via pixel alpha */
    user-select: none;
    -webkit-user-drag: none;
}

/* ---------- A: Helmet ---------- */

#layer-casco {
    transform-origin: 17.5% 75.65%; /* center of the helmet body (not its long shadow) */
}

/* When A opens, the 2D helmet flies in a straight line (0.2s, linear) toward the
   middle of the 3D helmet area (27.5% / 50% of the frame) and grows. It stays
   parked there until the 3D helmet is ready, then the 3D one takes over.
   No transition on the way back, so it snaps to its idle spot on close. */
.wizard-stage-wrapper.helmet-active #layer-casco {
    transform: translate(10%, -25.65%) scale(2.2);
    transition: transform 0.2s linear;
}

/* The 2D helmet fades to 0 over the very tail of its 0.2s fly-in (the last 0.06s,
   ease-out), right as the 3D helmet takes over. Only when the 3D helmet module is
   running and hasn't failed - otherwise the 2D helmet just stays parked. */
.wizard-stage-wrapper.splat-enabled.helmet-active:not(.splat-failed) #layer-casco {
    opacity: 0;
    transition: transform 0.2s linear, opacity 0.06s ease-out 0.14s;
}

/* A: everything except the helmet gets the same blur, and the helmet moves to the top */
.wizard-stage-wrapper.helmet-active .sg-bg,
.wizard-stage-wrapper.helmet-active .sg-banner,
.wizard-stage-wrapper.helmet-active .sg-front {
    filter: blur(8px);
}

.wizard-stage-wrapper.helmet-active .sg-casco {
    z-index: 50;
}

/* A: once the 3D helmet is revealed (helmet-splat.js adds .splat-visible) it
   replaces the 2D one. If the 3D helmet never loads, the 2D helmet just stays. */
.wizard-stage-wrapper.splat-visible .sg-casco {
    visibility: hidden;
}

/* A: 3D helmet canvas, front-left of the frame (left ~55%, ~80% of the height,
   vertically centered). Sits above the blurred scene, below the text panel. */
.splat-canvas {
    position: absolute;
    left: 0;
    top: 10%;
    width: 55%;
    height: 80%;
    display: none;
    z-index: 12;
    cursor: grab;
    touch-action: none;
}

.splat-canvas.active {
    display: block;
    opacity: 0; /* rendering, but not shown yet */
}

.splat-canvas.revealed {
    opacity: 1;
}

.splat-canvas:active {
    cursor: grabbing;
}

.helmet-panel {
    position: absolute;
    top: 50%;                     /* vertically centered... */
    transform: translateY(-50%);
    right: calc(5% + 30px);       /* ...on the right side, moved 30px to the left */
    width: 38%;
    max-width: 320px;
    background: #fff;
    color: #1a1a1a;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 15;
    font-size: 0.9em;
    font-family: Verdana, Geneva, sans-serif;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.helmet-panel.active {
    display: block;
}

/* ---------- B: Banner ---------- */

#layer-banner {
    transform-origin: 39.36% 61.26%; /* banner bounding-box center */
    transition: transform 0.6s ease;
}

#layer-banner.enlarged {
    transform: scale(1.3);
}

#exit-banner {
    display: none;
}

/* ---------- C: Wizard ---------- */

/* wizard and the newspaper shadows layer appear/disappear together */
#layer-wizard,
#layer-newspaper-shadows {
    opacity: 0;
    transition: opacity 0.2s linear; /* short fade while the smoke covers the swap */
}

#layer-wizard.visible,
#layer-newspaper-shadows.visible {
    opacity: 1;
}

#layer-stool.hover-glow,
#layer-wizard.hover-glow,
#layer-casco.hover-glow,
#layer-banner.hover-glow,
#layer-newspaper.hover-glow,
#layer-newspaper-shadows.hover-glow {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85))
            drop-shadow(0 0 18px rgba(255, 230, 150, 0.6));
}

/* ---------- D: Newspaper ---------- */

.newspaper-panel {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
    display: none;
    z-index: 25;
}

.newspaper-panel.active {
    display: block;
}

/* The scrolling happens on this inner layer (not the panel) so the
   X button stays pinned in the corner instead of scrolling away. */
.newspaper-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Fit to frame width at its natural aspect ratio - no stretching.
   Taller than the frame, so it scrolls vertically. */
.newspaper-page {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* nudged left so the X clears the scrollbar on the right edge */
.newspaper-panel .exit-btn {
    right: 28px;
}

/* black layer for the cut-to-black / fade-in (0.25s each way) */
.fade-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s linear;
    z-index: 35;
}

.fade-overlay.on {
    opacity: 1;
    pointer-events: auto; /* blocks stray clicks while black */
}

/* ---------- shared exit button ---------- */

/* No circular background; 72px box / 45px glyph (two 50% increases over the original 32px / 20px).
   White with a soft dark outline so it stays readable over light and dark areas. */
.exit-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 45px;
    line-height: 1;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: 30;
}

.exit-btn:hover {
    opacity: 0.7;
}


/* ---------- C: smoke (wizard-smoke.js spawns the puffs) ---------- */

.smoke-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Each puff is a soft blurred circle. Position, size, drift, growth, peak
   opacity, duration and delay are set per puff by the script (as CSS
   variables); distances are in multiples of the puff's own size so
   everything scales with the stage. Only transform and opacity animate. */
.smoke-puff {
    position: absolute;
    width: var(--size, 8%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(var(--smoke-rgb), 0.95) 0%,
        rgba(var(--smoke-rgb), 0.55) 40%,
        rgba(var(--smoke-rgb), 0) 72%);
    filter: blur(4px);
    opacity: 0;
    will-change: transform, opacity;
    animation: smoke-puff var(--dur, 800ms) ease-out var(--delay, 0ms) both;
}

.smoke-behind { --smoke-rgb: 196, 184, 170; } /* slightly darker, reads as depth */
.smoke-front  { --smoke-rgb: 238, 230, 216; } /* warm cream */

@keyframes smoke-puff {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0, 0) scale(0.3);
    }
    30% {
        opacity: var(--peak, 0.7);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%)
                   translate(calc(var(--dx) * 100%), calc(var(--dy) * 100%))
                   scale(var(--grow, 2));
    }
}

/* ---------- A: helmet exit (top-right of the stage, shown only while A is open) ---------- */

#exit-helmet {
    display: none;
}

.wizard-stage-wrapper.helmet-active #exit-helmet {
    display: block;
}

/* ---------- Welcome splash (shown on load) ---------- */

/* everything on the stage is blurred (same 8px as the helmet state) until ENTER SITE */
.wizard-stage-wrapper.splash-open .stage-group {
    filter: blur(8px);
}

.splash {
    position: absolute;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash[hidden] {
    display: none;
}

/* Early-2000s "welcome" box. All sizes are in em and the font-size follows the
   stage width (14px at the full 1024px), so the whole box scales with the stage. */
.splash-box {
    box-sizing: border-box;
    width: 37.14em;
    font-family: Verdana, Geneva, sans-serif;
    letter-spacing: 0.01em;
    font-size: 14px;
    font-size: 1.3672cqw;
    line-height: 1.35;
    text-align: left;
    color: #222;
    background: #fff;
    border: 0.15em dashed #cfcfcf;
    padding: 0.6em;
    box-shadow: 0 0.5em 2.2em rgba(0, 0, 0, 0.35);
}

.splash-banner {
    position: relative;
    height: 11.5em;
    overflow: hidden;
    /* sky colours sampled from background_01.png: dusty pink -> peach -> pale gold */
    background: linear-gradient(to bottom, #e5a094 0%, #fdc3a1 48%, #fef4b8 100%);
}

.splash-art {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.splash-logo {
    position: absolute;
    top: 0.85em;
    left: 1.1em;
    font-size: 1.55em;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #322118;
}

.splash-text {
    padding: 1.1em 0.5em 0.4em;
}

.splash-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #e8641c;
    margin-bottom: 0.8em;
}

.splash-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.2em 0.4em 0.1em;
}

.splash-enter {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    color: #c4c4c4;
}

.splash-enter-label {
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.05;
    text-align: right;
}

.splash-enter-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1em;
    height: 2.1em;
    border-radius: 0.15em;
    background: #bdbdbd;
}

.splash-enter-arrow svg {
    width: 70%;
    height: 70%;
}

.splash-enter:hover {
    color: #e8641c;
}

.splash-enter:hover .splash-enter-arrow {
    background: #e8641c;
}

/* the button is focused on load so Enter works; keep it looking like the idle (grey) state */
.splash-enter:focus {
    outline: none;
}