/* ============================================================
   The Lost Wanderer — micro-site
   Fond plein écran + carte de tarot centrée (ombre + halo)
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    min-height: 100vh;
    /* Vignette sombre par-dessus l'image de fond, pour faire ressortir la carte */
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%),
        url("assets/lostWandererBkg.jpg") center center / cover no-repeat fixed;
    background-color: #0b0d10; /* repli avant chargement de l'image */
    overflow: hidden;
}

/* Scène centrée */
.stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 5vh 5vw;
}

/* Halo doux derrière la carte */
.stage::before {
    content: "";
    position: absolute;
    width: min(60vh, 80vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 220, 170, 0.18), rgba(240, 220, 170, 0) 60%);
    filter: blur(8px);
    pointer-events: none;
}

/* La carte de tarot */
.card {
    position: relative;
    height: min(82vh, 760px);
    max-width: 90vw;
    width: auto;
    border-radius: 14px;
    /* Ombre portée pour décoller la carte du fond */
    filter:
        drop-shadow(0 22px 45px rgba(0, 0, 0, 0.75))
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
    transition: transform 0.4s ease, filter 0.4s ease;
    animation: float 7s ease-in-out infinite;
    user-select: none;
    -webkit-user-drag: none;
}

.card:hover {
    transform: translateY(-6px) scale(1.015);
    filter:
        drop-shadow(0 28px 55px rgba(0, 0, 0, 0.8))
        drop-shadow(0 0 24px rgba(240, 220, 170, 0.25));
}

/* Léger flottement vertical */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Respecte les préférences d'accessibilité (pas d'animation) */
@media (prefers-reduced-motion: reduce) {
    .card { animation: none; }
}

/* Mobile : la carte s'adapte à la hauteur de l'écran */
@media (max-width: 600px) {
    .card { height: auto; width: min(82vw, 360px); }
    .stage { padding: 6vh 6vw; }
}