/* =========================================================
   landing-intro.css — hero-first landing (comprehension pass)

   Adds an explanatory hero ABOVE the chromatic wheel so a brand-new
   visitor understands the concept in a few seconds: a clear headline,
   a real before/after, the 3-step loop, and one primary CTA.

   Everything here is scoped to `html.landing` / the new `.intro-*`
   classes so no other page is affected. The wheel + scopes stay
   exactly as they were — they just live below the fold now.
   ========================================================= */

/* ---- Turn the landing into a scrollable document ----------------
   The global rule is `html, body { height:100%; overflow:hidden }`
   (good for the fixed full-screen tool pages). On the landing we
   opt back into normal document scrolling so the hero can sit above
   the wheel. Scoped to html.landing only. */
html.landing,
html.landing body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
html.landing {
    /* UN SEUL fond pour toute la page : quasi noir en haut (hero), qui se
       relève très légèrement vers le bas. Le halo coloré derrière la roue
       est apporté par .bg-grade-layer, dont le bord supérieur est fondu
       (mask, plus bas) pour qu'il se fonde dans ce fond sans aucune ligne
       de coupure. */
    background: linear-gradient(
        180deg,
        #08080a 0%,
        #08080a 40%,    /* le hero reste quasi noir sur sa partie haute */
        #0a0b10 49%,    /* ~niveau du bouton EXPLORER : 1er éclaircissement */
        #0e0f18 58%,
        #14151f 74%,    /* zone de la roue : base sous le halo coloré */
        #161728 100%
    );
}
html.landing body {
    display: block;
    min-height: 100vh;
    padding-top: 66px; /* compensate fixed top bar */
}

/* Top bar fixed so it always follows on scroll. */
html.landing .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 20px 40px;
    background: rgba(8, 8, 11, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-faint, rgba(255,255,255,0.05));
}

/* Side panels fixed to viewport edges, vertically centred. */
html.landing .side-panel {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 200px;
    padding: 24px 20px;
}
html.landing .side-panel--left  { left: 0; }
html.landing .side-panel--right { right: 0; align-items: flex-end; text-align: right; }
/* Scale the brand up a touch so the bigger bar feels balanced. */
html.landing .brand-name      { font-size: 19px; }
html.landing .brand-mark svg  { width: 26px; height: 26px; }

/* ---- Make the sign-in CTA pop on the landing ----
   Elsewhere the auth widget's "sign in" is a neutral pill; on the
   landing we fill it with the accent so a first-time visitor is
   actively nudged to create an account. Scoped to html.landing so
   the in-session pages (game / room) keep the quiet version. */
html.landing .auth-signin-btn {
    background: var(--accent);
    color: #0a0a0b;
    border-color: var(--accent);
    font-weight: 600;
    padding: 8px 20px;
    font-size: 12px;
    box-shadow: 0 2px 16px -4px rgba(212, 148, 107, 0.55);
    transition: transform 150ms ease, box-shadow 150ms ease,
                background 150ms ease;
}
html.landing .auth-signin-btn:hover {
    background: var(--accent);
    color: #0a0a0b;
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 5px 20px -4px rgba(212, 148, 107, 0.8);
}

/* The wheel area was `flex:1` inside a full-height flex body. In
   scroll mode that no longer fills the viewport, so give it a
   sensible min-height to breathe under the hero. */
html.landing .menu-stage {
    min-height: 86vh;
}

/* The old mobile-only text hero (inside menu-stage) is now redundant —
   the new .intro-hero is the universal hero on every viewport. Hide it
   so mobile users don't see the explanation twice. The mobile-nav list
   below it stays (the wheel doesn't work on touch). */
html.landing .mobile-hero { display: none !important; }

/* =========================================================
   HERO
   ========================================================= */
.intro-hero {
    position: relative;
    z-index: 5;
    min-height: calc(100vh - 66px);   /* first screen, minus the (taller) top bar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 40px 64px;
    box-sizing: border-box;
}

/* Fondu du bord SUPÉRIEUR du halo de la roue (.bg-grade-layer) dans le
   fond de la page : le haut du halo devient transparent et laisse voir le
   fond quasi noir du html, ce qui supprime la ligne de coupure entre le
   hero et la section roue. Le halo reste pleinement visible derrière la
   roue (en dessous de 34 %). Idem pour le tint coloré au survol. */
html.landing .bg-grade-layer,
html.landing .bg-grade-tint {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
}

/* =========================================================
   Animation d'arrivée du hero — léger slide bas→haut + montée
   d'opacité (0 → 100 %) sur 2 s à l'ouverture de la page.
   ========================================================= */
@keyframes intro-enter {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
html.landing .intro-hero-inner {
    animation: intro-enter 6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* La pastille « explorer » apparaît juste après le contenu — fondu seul
   (pas de transform, pour ne pas entrer en conflit avec le translateX
   du bob). */
@keyframes intro-scroll-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.intro-hero-inner {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

/* ---- Left: copy + CTA ---- */
.intro-copy { min-width: 0; }

.intro-title {
    font-family: var(--font-ui, sans-serif);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-primary, #f0eee9);
    margin: 0 0 20px;
}
.intro-title .accent { color: var(--accent, #d4a574); }

.intro-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary, #b4b2ad);
    max-width: 30em;
    margin: 0 0 32px;
}
.intro-sub strong { color: var(--text-primary, #f0eee9); font-weight: 500; }

/* ---- 3-step loop ---- */
.intro-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.intro-step {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--text-secondary, #b4b2ad);
}
.intro-step-num {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--accent, #d4a574);
    letter-spacing: 0.1em;
    min-width: 20px;
}
.intro-step strong { color: var(--text-primary, #f0eee9); font-weight: 500; }

/* ---- CTAs ---- */
.intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 3px;
    font-family: var(--font-mono, monospace);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease,
                color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.intro-cta--primary {
    background: var(--accent, #d4a574);
    color: #0a0a0b;
    border: 1px solid var(--accent, #d4a574);
}
.intro-cta--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px -8px rgba(212, 148, 107, 0.6);
}
.intro-cta--primary .intro-cta-arrow { transition: transform 160ms ease; }
.intro-cta--primary:hover .intro-cta-arrow { transform: translateX(4px); }

.intro-cta--ghost {
    background: transparent;
    color: var(--text-secondary, #b4b2ad);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.12));
}
.intro-cta--ghost:hover {
    color: var(--text-primary, #f0eee9);
    border-color: var(--text-tertiary, #8a8680);
}

/* =========================================================
   BEFORE / AFTER (side by side)
   ========================================================= */
.intro-demo { min-width: 0; }

.ba-pair {
    position: relative;   /* anchor for the .ba-arrow chip */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}

.ba-card {
    position: relative;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
    background: #000;
    aspect-ratio: 4 / 5;
    box-shadow: 0 18px 50px -20px rgba(0,0,0,0.8);
}
.ba-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* deter casual right-click-save on contributor photos */
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* The "after" card gets a subtle accent ring + lift so the eye lands
   on the developed result. */
.ba-card--after {
    border-color: rgba(212, 148, 107, 0.45);
    box-shadow: 0 18px 50px -18px rgba(0,0,0,0.85),
                0 0 0 1px rgba(212, 148, 107, 0.18);
}

.ba-tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 2px;
    background: rgba(8, 8, 11, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--text-secondary, #c8c6c1);
    border: 1px solid var(--border-faint, rgba(255,255,255,0.08));
}
.ba-card--after .ba-tag {
    color: var(--accent, #d4a574);
    border-color: rgba(212, 148, 107, 0.4);
}

/* Arrow chip sitting between the two cards */
.ba-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent, #d4a574);
    color: #0a0a0b;
    font-size: 15px;
    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.8);
    pointer-events: none;
}

.intro-demo-caption {
    margin-top: 14px;
    text-align: center;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary, #8a8680);
}
.intro-demo-caption strong { color: var(--text-secondary, #b4b2ad); font-weight: 400; }
.intro-demo-caption a {
    color: var(--accent, #d4a574);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 148, 107, 0.4);
    transition: color var(--t-fast, 140ms), border-color var(--t-fast, 140ms);
}
.intro-demo-caption a:hover {
    color: var(--text-primary, #f0eee9);
    border-color: var(--text-primary, #f0eee9);
}

/* ---- Scroll hint to the wheel below ---- */
.intro-scroll {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 20px;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent, #d4a574);
    text-decoration: none;
    border: 1px solid rgba(212, 148, 107, 0.4);
    border-radius: 999px;
    background: rgba(212, 148, 107, 0.07);
    box-shadow: 0 4px 18px -6px rgba(212, 148, 107, 0.35);
    transition: color 160ms ease, border-color 160ms ease,
                background 160ms ease, box-shadow 160ms ease;
}
.intro-scroll:hover {
    color: var(--text-primary, #f0eee9);
    border-color: var(--accent, #d4a574);
    background: rgba(212, 148, 107, 0.16);
    box-shadow: 0 6px 22px -6px rgba(212, 148, 107, 0.6);
}
/* The whole pill gently bobs to signal there's more below the fold —
   et un fondu d'arrivée différé (~1,2 s) pour qu'elle entre après le
   contenu du hero. Les deux animations cohabitent (transform vs opacity). */
.intro-scroll {
    animation: intro-bob 1.6s ease-in-out infinite,
               intro-scroll-in 0.8s ease 0.8s both;
}
.intro-scroll:hover { animation-play-state: paused; }
.intro-scroll-arrow { font-size: 14px; line-height: 1; }
@keyframes intro-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* Voile de transition : monte légèrement puis redescend pendant le scroll
   animé déclenché par « explorer » (piloté en JS dans landing-intro.js). */
.page-fade-overlay {
    position: fixed;
    inset: 0;
    z-index: 1800;
    background: #08080a;
    opacity: 0;
    pointer-events: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .intro-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: 560px;
    }
    /* image first on small screens — show, then tell */
    .intro-demo { order: -1; }
    /* Compact the whole hero so the before/after, the copy AND the two
       CTAs all fit on the first screen without scrolling. */
    .intro-hero { padding: 16px 20px 52px; min-height: calc(100vh - 50px); }

    /* Smaller, centered before/after — it only needs to read as a pair. */
    .ba-pair { max-width: 290px; margin: 0 auto; gap: 10px; }
    /* The floating "→" chip eats the centre of the stacked layout — drop
       it on mobile; the RAW / retouchée labels carry the meaning. */
    .ba-arrow { display: none; }
    .intro-demo-caption { margin-top: 9px; font-size: 9.5px; }

    .intro-title { font-size: 25px; line-height: 1.08; margin-bottom: 12px; }
    .intro-sub   { font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
    .intro-steps { gap: 8px; margin-bottom: 18px; }
    .intro-step  { font-size: 12.5px; }
    .intro-actions { width: 100%; gap: 10px; }
    .intro-cta { flex: 1; justify-content: center; padding: 12px 14px; }
    /* Mobile hero is packed, so keep the explore pill near the bottom
       (the desktop value would push it up into the CTAs). */
    .intro-scroll { bottom: 18px; }
}

@media (max-width: 420px) {
    .intro-hero { padding: 12px 18px 48px; }
    .ba-pair { max-width: 248px; gap: 8px; }
    .ba-tag { font-size: 9px; padding: 4px 7px; }
    .intro-title { font-size: 22px; margin-bottom: 10px; }
    .intro-sub { font-size: 13px; margin-bottom: 14px; }
    .intro-steps { gap: 7px; margin-bottom: 16px; }
}

/* Very short viewports (small phones, landscape) — compact further so
   the functional content (CTAs) wins the vertical budget. The photo
   credit stays visible (it's an attribution to the contributor). */
@media (max-width: 900px) and (max-height: 720px) {
    .intro-demo-caption { margin-top: 7px; }
    .ba-pair { max-width: 230px; }
    .intro-title { font-size: 22px; }
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
    html.landing .intro-hero-inner { animation: none; }
    .intro-scroll { animation: none; }
    .intro-cta { transition: none; }
}