/* ===== MAJOR EVENTS: Cutscene & Celebration Modals ===== */

/* --- Transformation Cutscene Overlay --- */
.cutscene-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-cutscene);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cutscene-overlay.cutscene-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* When cutscene ends, remove from layout/event flow so pet stays clickable */
.cutscene-overlay.cutscene-finished {
    display: none !important;
    pointer-events: none !important;
}

.cutscene-backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-background-primary);
    z-index: 0;
}

.cutscene-pet-container {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.cutscene-pet-old,
.cutscene-pet-new {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cutscene-pet-old img,
.cutscene-pet-new img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 1.2s ease, filter 1.2s ease;
}

/* Float animation - gentle bob */
.cutscene-pet-container {
    animation: cutscene-float 3s ease-in-out infinite;
}

@keyframes cutscene-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Shake during transformation */
.cutscene-pet-container.cutscene-shake {
    animation: cutscene-shake 0.1s ease-in-out 10;
}

@keyframes cutscene-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Crossblur: old fades out + blurs, new fades in + unblurs */
.cutscene-pet-container.cutscene-crossblur .cutscene-pet-old img {
    opacity: 0 !important;
    filter: blur(12px) !important;
}

.cutscene-pet-container.cutscene-crossblur .cutscene-pet-new img {
    opacity: 1 !important;
    filter: blur(0) !important;
}

/* --- Accomplishment modals: hide app content to prevent any flash --- */
body.accomplishment-modal-active #pet-window,
body.accomplishment-modal-active #topbar-hamburger {
    visibility: hidden;
}

/* --- Accomplishment modals: fullscreen on ALL devices (contained) --- */
.modal-overlay.fullscreen-always.active {
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--color-background-primary);
}
.modal-overlay.fullscreen-always.active .modal,
.modal-overlay.fullscreen-always.active .modal-confirm,
.modal-overlay.fullscreen-always.active .celebration-modal-content {
    width: 90vw;
    max-width: 380px;
    height: auto;
    max-height: 90vh;
    margin: auto;
}

/* --- Accomplishment Modal Animation: fullscreen first (instant), then popup --- */
/* Overlay: solid backdrop appears instantly - no opacity fade (avoids flash of app behind) */
.modal-overlay.accomplishment-reveal {
    animation: none !important;
    opacity: 1 !important;
    background: var(--color-background-primary) !important;
}
/* Backdrop pseudo-element ensures app is always covered from first paint */
.modal-overlay.accomplishment-reveal.fullscreen-always::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--color-background-primary);
}
/* Content stays hidden until overlay is ready, then fades in */
.modal-overlay.accomplishment-reveal .modal,
.modal-overlay.accomplishment-reveal .modal-confirm,
.modal-overlay.accomplishment-reveal .celebration-modal-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0s linear 0.05s;
    transition-delay: 0.05s;
}
.modal-overlay.accomplishment-reveal.accomplishment-content-visible .modal,
.modal-overlay.accomplishment-reveal.accomplishment-content-visible .modal-confirm,
.modal-overlay.accomplishment-reveal.accomplishment-content-visible .celebration-modal-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Level-up modal (same accomplishment treatment) */
#level-up-modal.accomplishment-reveal .modal,
#transform-level-up-modal.accomplishment-reveal .modal,
#transformation-modal.accomplishment-reveal .modal {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0s linear 0.05s;
    transition-delay: 0.05s;
}
#level-up-modal.accomplishment-reveal.accomplishment-content-visible .modal,
#transform-level-up-modal.accomplishment-reveal.accomplishment-content-visible .modal,
#transformation-modal.accomplishment-reveal.accomplishment-content-visible .modal {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* --- Celebration Modals (Purchase, Award) --- */
.celebration-overlay .modal,
.celebration-overlay .modal-confirm {
    pointer-events: auto;
}

.celebration-overlay .modal-close-button {
    display: none !important;
}

.celebration-modal-content {
    position: relative;
    overflow: visible;
    max-width: 340px;
    width: 90vw;
}

.celebration-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-large);
    text-align: center;
}

.celebration-preview {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto var(--spacing-large);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-background-secondary);
}

.celebration-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.celebration-type-icon {
    font-size: 64px !important;
    color: var(--color-accent-primary);
}

.celebration-trophy {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-large);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent-coin), #eab308);
    border-radius: var(--radius-full);
    color: white;
}

.celebration-trophy .material-icons {
    font-size: 48px;
    color: white;
}

.celebration-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-primary);
    margin-bottom: var(--spacing-small);
}

.celebration-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-medium);
}

.celebration-rewards {
    font-size: var(--font-size-sm);
    color: var(--color-accent-coin);
    font-weight: var(--font-weight-semibold);
}

/* Fullscreen on mobile for celebration modals */
@media (max-width: 480px) {
    .celebration-overlay.fullscreen-mobile .celebration-modal-content,
    .celebration-overlay.fullscreen-mobile.active .celebration-modal-content {
        max-width: 100%;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}