/* --- Styles for the Intro Cutscene --- */

body.cutscene-active {
    overflow: hidden;
}

#intro-prompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
}

#intro-prompt h1 {
    font-size: 5rem;
    margin: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

#intro-prompt h1:hover {
    color: #f5e8c9;
    text-shadow: 0 0 15px #f5e8c9;
}

#intro-prompt p {
    font-size: 1rem;
    margin-top: 10px;
    opacity: 0.8;
}

#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease-in-out;
}

#intro-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.fading {
    opacity: 0 !important;
    pointer-events: none;
}

.content-wrapper {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.content-wrapper.visible {
    opacity: 1;
}

/* --- STYLES for Cutscene Content --- */

#cutscene-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: none;
}

.cutscene-item {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    position: absolute;
}

.cutscene-item.image-item {
    max-width: 45vw;
    max-height: 45vh;
    width: 45vw;
    height: 45vh;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse at center, white 30%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, white 30%, transparent 70%);
}

.cutscene-item.text-item {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cutscene-item.visible {
    opacity: 1;
}

.cutscene-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15);
}

.cutscene-item canvas {
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    display: block;
}

.cutscene-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15);
}

.cutscene-item p {
    color: #e0e0e0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.8rem;
    text-align: center;
    padding: 20px;
    text-shadow: 0 0 8px rgba(0,0,0,0.9);
}

/* --- ANIMATION KEYFRAMES (img/video — uses object-position for pan) --- */
@keyframes pan-up {
    from { object-position: 50% 70%; }
    to   { object-position: 50% 0%;  }
}
@keyframes pan-down {
    from { object-position: 50% 30%; }
    to   { object-position: 50% 100%; }
}
@keyframes pan-left {
    from { object-position: 70% 50%; }
    to   { object-position: 0%  50%; }
}
@keyframes pan-right {
    from { object-position: 30% 50%; }
    to   { object-position: 100% 50%; }
}
@keyframes zoom-in {
    from { transform: scale(1.15); }
    to   { transform: scale(1.3);  }
}
@keyframes zoom-out {
    from { transform: scale(1.15); }
    to   { transform: scale(1.0);  }
}

/* --- ANIMATION KEYFRAMES (canvas — uses transform translate for pan) --- */
@keyframes pan-up-canvas {
    from { transform: scale(1.2) translateY(9%);  }
    to   { transform: scale(1.2) translateY(-9%); }
}
@keyframes pan-down-canvas {
    from { transform: scale(1.2) translateY(-9%); }
    to   { transform: scale(1.2) translateY(9%);  }
}
@keyframes pan-left-canvas {
    from { transform: scale(1.2) translateX(9%);  }
    to   { transform: scale(1.2) translateX(-9%); }
}
@keyframes pan-right-canvas {
    from { transform: scale(1.2) translateX(-9%); }
    to   { transform: scale(1.2) translateX(9%);  }
}
@keyframes zoom-in-canvas {
    from { transform: scale(1.2); }
    to   { transform: scale(1.4); }
}
@keyframes zoom-out-canvas {
    from { transform: scale(1.2); }
    to   { transform: scale(1.0); }
}

/* --- ANIMATION CLASSES (img and video) --- */
.pan-up    img, .pan-up    video { animation: pan-up    var(--anim-duration, 10s) linear forwards; }
.pan-down  img, .pan-down  video { animation: pan-down  var(--anim-duration, 10s) linear forwards; }
.pan-left  img, .pan-left  video { animation: pan-left  var(--anim-duration, 10s) linear forwards; }
.pan-right img, .pan-right video { animation: pan-right var(--anim-duration, 10s) linear forwards; }
.zoom-in   img, .zoom-in   video { animation: zoom-in   var(--anim-duration, 10s) linear forwards; }
.zoom-out  img, .zoom-out  video { animation: zoom-out  var(--anim-duration, 10s) linear forwards; }

/* --- ANIMATION CLASSES (canvas) --- */
.pan-up    canvas { animation: pan-up-canvas    var(--anim-duration, 10s) linear forwards; }
.pan-down  canvas { animation: pan-down-canvas  var(--anim-duration, 10s) linear forwards; }
.pan-left  canvas { animation: pan-left-canvas  var(--anim-duration, 10s) linear forwards; }
.pan-right canvas { animation: pan-right-canvas var(--anim-duration, 10s) linear forwards; }
.zoom-in   canvas { animation: zoom-in-canvas   var(--anim-duration, 10s) linear forwards; }
.zoom-out  canvas { animation: zoom-out-canvas  var(--anim-duration, 10s) linear forwards; }

/* --- CENTER EFFECT --- */
.cutscene-item.center {
    width: 90vw;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center img,
.center canvas,
.center video {
    transform: scale(1);
}

/* --- SILENT MOVIE EFFECTS ---
   All rules scoped to .silent-movie, which is toggled by SILENT_MOVIE_EFFECTS in cutscene.js.
   Set that constant to false to disable every effect below without touching this file. */

/* Projector flicker — brightness avoids conflicting with the overlay's own opacity transitions */
@keyframes sm-flicker {
    0%, 88%, 90%, 92%, 100% { filter: brightness(1); }
    89% { filter: brightness(0.78); }
    91% { filter: brightness(0.93); }
}
.silent-movie { animation: sm-flicker 7s steps(1) infinite; }

/* Vignette div (injected by JS) */
.sm-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
    z-index: 10001;
}

/* Grain canvas (injected by JS) — 256x256, stretched to fill, low opacity overlay */
.sm-grain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10002;
    opacity: 0.07;
    mix-blend-mode: overlay;
    image-rendering: pixelated;
}

/* Intertitle card — no hard box, just a dark warm field that fades into the grain */
.silent-movie .text-item {
    background: transparent;
    padding: 28px 48px 24px;
    min-width: 360px;
    max-width: 55vw;
    animation: sm-jitter 5s steps(1) infinite;
    filter: blur(0.4px) contrast(0.85);
}

/* Thin faded rules above and below — more organic than symbol ornaments */
.silent-movie .text-item::before,
.silent-movie .text-item::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(210,192,158,0.45) 25%, rgba(210,192,158,0.45) 75%, transparent);
    margin: 0 12px;
}
.silent-movie .text-item::before { margin-bottom: 12px; }
.silent-movie .text-item::after  { margin-top: 12px; }

/* Text — Fredericka the Great gives the engraved aged-print feel; soft warm glow */
.silent-movie .text-item p {
    font-family: 'Fredericka the Great', 'Times New Roman', serif;
    color: #d8cdb8;
    letter-spacing: 0.06em;
    font-size: 1.65rem;
    line-height: 1.6;
    text-shadow:
        0 0 4px rgba(215,200,170,0.55),
        0 0 12px rgba(195,178,148,0.2);
    padding: 0;
}

/* GIFs/images/video — warm desaturation */
.silent-movie .image-item img,
.silent-movie .image-item canvas,
.silent-movie .image-item video {
    filter: grayscale(20%) sepia(25%) contrast(1.06) brightness(0.9);
}

/* Title overlay text — floats over a gif/image, no card background */
.silent-movie .text-item.sm-overlay-text {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 20px 40px;
    filter: blur(0.3px); /* no contrast reduction — overlay needs full punch */
}

.silent-movie .text-item.sm-overlay-text::before,
.silent-movie .text-item.sm-overlay-text::after {
    display: none;
}

.silent-movie .text-item.sm-overlay-text p {
    font-size: 2.6rem;
    letter-spacing: 0.18em;
    color: #f8f4ec;
    text-shadow:
        0 0 3px rgba(255,248,235,0.95),
        0 0 10px rgba(240,228,205,0.65),
        0 2px 6px rgba(0,0,0,1),
        0 0 22px rgba(0,0,0,0.92),
        0 0 55px rgba(0,0,0,0.75);
}

/* Film jitter — sub-pixel card tremor, very infrequent */
@keyframes sm-jitter {
    0%, 95%, 100%  { transform: translate(-50%, -50%); }
    96% { transform: translate(-49.7%, -50.25%); }
    97% { transform: translate(-50.3%, -49.8%);  }
    98% { transform: translate(-50.1%, -50.15%); }
}