/* Cosmic Zoom Styles */
.zoom-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.zoom-stage {
    height: 100svh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.zoom-stage.is-visible {
    opacity: 1;
}

.zoom-stage:first-child {
    opacity: 1;
}

.zoom-stage-content {
    max-width: 540px;
    text-align: center;
}

.zoom-scale-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-gold);
    margin-bottom: 1.5rem;
}

.zoom-stage-text {
    font-family: var(--font-wisdom);
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    line-height: 1.6;
    color: #F0EDE8;
}

/* Stage backgrounds — perceptual color journey across scales.
   Cool (cosmic vastness) -> warm (human intimacy) -> cool (return to vastness).
   Each stage layers a soft off-center radial over a vertical fade so adjacent
   stages share atmosphere instead of cutting hard at the boundary. */
.zoom-stage[data-stage="1"] {
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(86, 102, 178, 0.18) 0%, transparent 70%),
        linear-gradient(180deg, #08081a 0%, #0d0e26 100%);
}
.zoom-stage[data-stage="2"] {
    background:
        radial-gradient(ellipse 80% 60% at 30% 40%, rgba(124, 102, 196, 0.16) 0%, transparent 70%),
        linear-gradient(180deg, #0d0e26 0%, #161534 100%);
}
.zoom-stage[data-stage="3"] {
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(200, 140, 110, 0.18) 0%, transparent 70%),
        linear-gradient(180deg, #161534 0%, #211d3e 100%);
}
.zoom-stage[data-stage="4"] {
    background:
        radial-gradient(ellipse 70% 60% at 70% 60%, rgba(124, 102, 196, 0.16) 0%, transparent 70%),
        linear-gradient(180deg, #211d3e 0%, #18162d 100%);
}
.zoom-stage[data-stage="5"] {
    background:
        radial-gradient(ellipse 80% 60% at 50% 70%, rgba(86, 102, 178, 0.14) 0%, transparent 70%),
        linear-gradient(180deg, #18162d 0%, #08081a 100%);
}

/* User reflection injected from homepage */
.zoom-user-reflection {
    font-style: italic;
    opacity: 0.7;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #F0EDE8;
}

/* Final stage — warm gold center fading into deep cosmic indigo.
   Signals "you have arrived"; the warmth contrasts the cool journey stages. */
.zoom-stage-final {
    background:
        radial-gradient(circle at 50% 45%, rgba(244, 192, 111, 0.10) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, #221c44 0%, #0d0c20 65%, #08081a 100%) !important;
}

.zoom-final-text {
    font-family: var(--font-wisdom);
    font-size: 1rem;
    color: var(--color-gold);
    margin-bottom: 2rem;
}

.btn-generate-card {
    background: var(--color-gold);
    color: #0A0A12;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-family: var(--font-wisdom);
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-generate-card:hover {
    transform: scale(1.05);
}

.zoom-back-link {
    display: block;
    margin-top: 1.5rem;
    color: #F0EDE8;
    opacity: 0.7;
    font-size: 0.85rem;
    text-decoration: none;
}

/* Progress dots */
.zoom-progress {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 10;
}

.zoom-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(240, 237, 232, 0.4);
    transition: background 0.3s, transform 0.3s;
}

.zoom-dot.active {
    background: var(--color-gold);
    transform: scale(1.3);
}

/* Back button */
.zoom-back {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    color: #F0EDE8;
    opacity: 0.7;
    font-size: 0.85rem;
    text-decoration: none;
    z-index: 10;
    transition: opacity 0.2s;
}

.zoom-back:hover { opacity: 1; }

/* Entry animation from homepage */
.zoom-container[data-entry="transition"] {
    animation: zoom-fade-in 400ms ease 100ms both;
}

@keyframes zoom-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    /* Disable smooth scrolling — instant jumps */
    .zoom-container {
        scroll-behavior: auto;
    }

    /* All stages visible immediately — no opacity transition */
    .zoom-stage {
        opacity: 1;
        transition: none;
    }

    /* Progress dots — no transition */
    .zoom-dot {
        transition: none;
    }

    /* Entry fade-in — disabled */
    .zoom-container[data-entry="transition"] {
        animation: none;
    }

    /* Generate card button — no hover transform */
    .btn-generate-card:hover {
        transform: none;
    }
}