/* ============================================================
   Léa Landing — 3-Panel Triptych (rev.)
   Tokens from base.css. Aurora/particles from magic.css.
   Identity: la tempête cachée — calm surface, hidden storm.
   Hierarchy: centre is luminous, sides are subordinate context.
   ============================================================ */

/* ── Stage ──────────────────────────────────────────────────── */

.landing {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 24px;
    background: none;
}

.landing__panels {
    width: 100%;
    max-width: 1180px;
}

.landing__track {
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    gap: 28px;
    align-items: stretch; /* equal-height panels (all match tallest) */
}

.landing__panel {
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-width: 0;
}

/* ── Glass surfaces — hierarchy ────────────────────────────── */

/* Side panels: visible at rest. Same border/shadow/saturation as centre
   — hierarchy comes from column width, glass opacity, and the centre's
   stronger glow, not from desaturating the sides. No hover wake-up,
   no lift (they're context, not buttons). */
.landing__panel-glass {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    max-width: 320px;
    padding: 32px 26px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(12, 12, 28, 0.42);
    border: 1px solid rgba(124, 107, 245, 0.16);
    border-radius: 24px;
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.34),
        0 0 50px rgba(124, 107, 245, 0.06);
}

/* Centre card: luminous, primary, the focal object. Three-zone layout:
   TOP = identity (avatar + name + tagline + currently),
   MIDDLE = description (centres in remaining height; safe for long copy),
   BOTTOM = disclosure + socials + credits (pinned to bottom). */
.landing__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    gap: 0;
    width: 100%;
    height: 100%;
    max-width: 420px;
    padding: 38px 36px 32px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(14, 14, 34, 0.52);
    border: 1px solid rgba(124, 107, 245, 0.18);
    border-radius: 26px;
    box-shadow:
        0 14px 52px rgba(0, 0, 0, 0.5),
        0 0 90px rgba(124, 107, 245, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.landing__card-top,
.landing__card-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.landing__card-middle {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

/* ── Avatar (centre) ───────────────────────────────────────── */

.landing__avatar-wrap {
    position: relative;
    width: 132px;
    height: 132px;
    margin-bottom: 2px;
}

.landing__avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(124, 107, 245, 0.5);
    box-shadow: 0 0 22px rgba(124, 107, 245, 0.3);
    position: relative;
    z-index: 2;
    display: block;
}

.landing__avatar-glow {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(124, 107, 245, 0.55),
        rgba(56, 189, 248, 0.32),
        rgba(192, 132, 252, 0.45),
        rgba(124, 107, 245, 0.55)
    );
    filter: blur(14px);
    opacity: 0.6;
    animation: avatarRotate 18s linear infinite;
    z-index: 0;
}

@keyframes avatarRotate { to { transform: rotate(360deg); } }

/* ── Name, tagline, currently, disclosure ──────────────────── */

.landing__name {
    position: relative;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--text);
    text-shadow: 0 0 30px rgba(124, 107, 245, 0.3);
    line-height: 1.1;
    margin-top: 4px;
}

/* Shimmer — a slow pale-light sweep across the name every ~12s.
   Pseudo overlay so text-shadow is preserved underneath. */
.landing__name-text {
    position: relative;
    display: inline-block;
}
.landing__name-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 70%
    );
    background-size: 280% 100%;
    background-position: 180% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: nameShimmer 12s ease-in-out infinite;
    animation-delay: 5s;
    pointer-events: none;
}
@keyframes nameShimmer {
    0%, 6%      { background-position: 180% 0; }
    16%, 100%   { background-position: -120% 0; }
}

.landing__tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.landing__currently {
    display: block;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    opacity: 0.88;
    margin-top: -2px;
    min-height: 1.6em;
}

/* Inline group keeps the dot glued to the text; the pair centres as one. */
.landing__currently-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.landing__currently-inner.is-fading {
    opacity: 0;
    transform: translateY(-6px);
}

.landing__currently-marker {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(124, 107, 245, 0.6);
    animation: currentlyPulse 3.4s ease-in-out infinite;
    flex-shrink: 0;
}

.landing__currently-text {
    display: inline-block;
}

@keyframes currentlyPulse { /* retained for any reduced-motion edge-case; no current consumer */
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.35); }
}

.landing__pitch {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.98rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.62;
    max-width: 340px;
    letter-spacing: 0.01em;
    text-wrap: pretty;
    margin: 6px 0 2px;
}

/* Disclosure as typographic ornament — flanked hairlines, micro-caps */
.landing__disclosure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-top: 4px;
}

.landing__disclosure-line {
    width: 26px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(232, 232, 240, 0.18),
        transparent
    );
}

/* ── Feed panel layout override ─────────────────────────── */
/* Header pins to top, body fills downward. Override the centred default. */
.landing__feed {
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    gap: 16px;
}

/* ── In-card credits (auazze made her — not "with") ───────── */

.landing__credits {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-subtle);
    letter-spacing: 0.08em;
    margin-top: 6px;
}

.landing__credits a {
    color: var(--text-subtle);
    text-decoration: none;
    transition: color var(--t-fast);
}

.landing__credits a:hover { color: var(--accent); }

.landing__credits a:focus-visible {
    outline: none;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(124, 107, 245, 0.4);
}

.landing__credits-sep { opacity: 0.6; }

/* ── Socials (centre + mini in feed) ───────────────────────── */

.landing__socials {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 6px;
}

.landing__socials--mini { gap: 20px; margin-top: 0; }

.landing__socials a {
    display: flex;
    position: relative;
    padding: 4px;
    border-radius: 50%;
    color: var(--text-muted);
    transition:
        transform var(--t-base) var(--ease-spring),
        color var(--t-fast),
        box-shadow var(--t-fast);
}

.landing__socials a:hover {
    transform: translateY(-2px);
    color: var(--text);
}

.landing__socials a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
}

.landing__socials svg {
    width: 22px;
    height: 22px;
}

.landing .landing__social-x { color: #ffffff; }
.landing .landing__social-email { color: var(--accent); }

.landing__social-ig {
    width: 22px;
    height: 22px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Pixel panel (left, subordinate) ───────────────────────── */

.landing__panel--pixel .landing__panel-glass { gap: 12px; }

.landing__pixel-img {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid rgba(124, 107, 245, 0.5);
    box-shadow:
        0 0 20px rgba(124, 107, 245, 0.3),
        0 0 40px rgba(124, 107, 245, 0.2);
    display: block;
}

.landing__pixel-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 300;
    color: var(--text);
    letter-spacing: 0.06em;
    text-shadow: 0 0 18px rgba(124, 107, 245, 0.18);
    margin-top: 2px;
}

/* Side-panel subtitle voice — used by Pixel role + Feed label.
   Single rule keeps the two side panels visually paired. */
.landing__pixel-role,
.landing__feed-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.landing__pixel-role {
    margin-top: -8px;
    max-width: 240px;
    text-wrap: pretty;
}

/* Pixel live state. Single container; inner fades on update so Léa's
   periodic refresh of mood + diary swaps smoothly instead of popping. */
.landing__pixel-state {
    width: 100%;
    max-width: 260px;
    margin-top: 4px;
}

.landing__pixel-state-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.landing__pixel-state-inner.is-fading {
    opacity: 0;
    transform: translateY(-6px);
}

.landing__pixel-alive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.landing__pixel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5DCA7A;
    box-shadow: 0 0 8px rgba(93, 202, 122, 0.55);
    animation: pixelPulse 2.6s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pixelPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.92); }
}

/* Status-line voice — shared by Pixel mood + Léa's currently text.
   Same face, weight, size, style. The marker dot's colour is what
   distinguishes them (green = alive, purple = doing). Mood is clamped to
   2 lines so a long live payload can't blow out the layout. */
.landing__pixel-mood,
.landing__currently-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.landing__pixel-mood {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(2 * 1.4em);
    line-height: 1.4;
    max-width: 240px;
    text-wrap: pretty;
}

.landing__pixel-diary {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--text-subtle);
    line-height: 1.55;
    /* Belt-and-suspenders clamp: -webkit-line-clamp for nice ellipsis where
       supported, max-height as a hard fallback so long API payloads can't
       balloon the Pixel panel past the centre card and rearrange the row. */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(5 * 1.55em);
    text-wrap: pretty;
}

/* ── Feed panel (right, subordinate) ───────────────────────── */

.landing__feed {
    justify-content: flex-start;
    gap: 14px;
}

.landing__feed-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
}

.landing__feed-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.landing__feed-icon--x { color: #ffffff; }
.landing__feed-icon--x svg { width: 20px; height: 20px; fill: #ffffff; }

.landing__feed-icon--ig {
    background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.landing__feed-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.landing__feed-handle {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-subtle);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.landing__feed-body {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing__feed-media {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(124, 107, 245, 0.5);
    box-shadow:
        0 0 20px rgba(124, 107, 245, 0.3),
        0 0 40px rgba(124, 107, 245, 0.2);
    display: block;
}

.landing__feed-text {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.55;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    text-wrap: pretty;
    max-width: 100%;
}

.landing__feed-engagement {
    display: flex;
    gap: 14px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.72rem;
    color: var(--text-subtle);
    letter-spacing: 0.02em;
}

.landing__feed-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: text-shadow var(--t-fast), transform var(--t-fast);
}

.landing__feed-link:hover {
    text-shadow: 0 0 8px rgba(124, 107, 245, 0.5);
    transform: translateX(2px);
}

.landing__feed-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    border-radius: 4px;
}

.landing__feed-link svg { width: 12px; height: 12px; }

/* ── Feed body / fallback layout ─────────────────────────── */
/* Header is pinned at the top by the feed's flex-start. Body fills the
   remaining height: main (image + text) centres vertically + horizontally,
   foot (engagement + view-post link) sticks to the bottom. */
.landing__feed-body,
.landing__feed-fallback {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.landing__feed-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.landing__feed-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

/* ── Carousel controls ─────────────────────────────────────── */

.landing__carousel-controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.landing__arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(124, 107, 245, 0.2);
    background: rgba(12, 12, 28, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition:
        border-color var(--t-fast),
        color var(--t-fast),
        box-shadow var(--t-fast),
        transform var(--t-fast) var(--ease-spring);
}

.landing__arrow:hover {
    border-color: rgba(124, 107, 245, 0.55);
    color: var(--text);
    transform: scale(1.06);
}

.landing__arrow:active { transform: scale(0.94); }

.landing__arrow:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(124, 107, 245, 0.25);
    color: var(--text);
}

.landing__arrow svg { width: 18px; height: 18px; }

.landing__dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(124, 107, 245, 0.28);
    cursor: pointer;
    padding: 0;
    transition:
        background var(--t-fast),
        transform var(--t-fast) var(--ease-spring),
        box-shadow var(--t-fast);
}

.landing__dot--active {
    background: var(--accent);
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(124, 107, 245, 0.5);
}

.landing__dot:hover:not(.landing__dot--active) {
    background: rgba(124, 107, 245, 0.5);
}

.landing__dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
}

/* One-shot dot hint pulse on first paint */
@keyframes dotHint {
    0%, 100% { transform: scale(1); }
    35%      { transform: scale(1.6); box-shadow: 0 0 14px rgba(124, 107, 245, 0.55); }
}
.landing__dot--active.is-hinting {
    animation: dotHintActive 1.6s var(--ease-spring);
}
.landing__dot:not(.landing__dot--active).is-hinting {
    animation: dotHint 1.6s var(--ease-spring);
}
@keyframes dotHintActive {
    0%      { transform: scale(1.3); }
    35%     { transform: scale(1.85); box-shadow: 0 0 18px rgba(124, 107, 245, 0.7); }
    100%    { transform: scale(1.3); }
}
.landing__dots .landing__dot.is-hinting:nth-child(1) { animation-delay: 0s; }
.landing__dots .landing__dot.is-hinting:nth-child(2) { animation-delay: 0.12s; }
.landing__dots .landing__dot.is-hinting:nth-child(3) { animation-delay: 0.24s; }

/* ── Footer (lifted out of card) [DEPRECATED — use .landing__credits inside card] ─ */

.landing__footer {
    display: none;
}

/* ── Reveal ────────────────────────────────────────────────── */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.2, 0, 0.8, 1),
        transform 0.8s cubic-bezier(0.2, 0, 0.8, 1);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Carousel mode (< 1200px) ──────────────────────────────── */

@media (max-width: 1199px) {
    .landing { padding: 16px; gap: 22px; }

    .landing__panels {
        overflow: hidden;
        max-width: 440px;
        width: 100%;
    }

    .landing__track {
        display: flex;
        gap: 0;
        transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .landing__panel {
        width: 0;
        min-width: 100%;
        max-width: 100%;
        flex-shrink: 0;
        padding: 0 8px;
        box-sizing: border-box;
    }

    /* In carousel mode, the visible panel is centre — treat all surfaces equal */
    .landing__panel-glass {
        max-width: 100%;
        filter: none;
        opacity: 1;
        background: rgba(14, 14, 34, 0.5);
        border-color: rgba(124, 107, 245, 0.16);
    }
    .landing__card {
        max-width: 100%;
    }

    .landing__carousel-controls { display: flex; }
}

/* ── Tablet ────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .landing__panels { max-width: 400px; }

    .landing__card,
    .landing__panel-glass { padding: 28px 22px; }

    .landing__name { font-size: 2.15rem; }
    .landing__tagline { font-size: 1.05rem; }
    .landing__pitch { font-size: 0.95rem; max-width: 300px; }
    .landing__pixel-img { max-width: 200px; }
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .landing__panels { max-width: 340px; }

    .landing__card {
        padding: 22px 18px;
        border-radius: 22px;
        background: rgba(12, 12, 28, 0.6);
    }

    .landing__panel-glass {
        padding: 22px 18px;
        border-radius: 22px;
        background: rgba(12, 12, 28, 0.6);
    }

    .landing__avatar-wrap,
    .landing__avatar { width: 104px; height: 104px; }
    .landing__avatar-glow { inset: -10px; }

    .landing__name { font-size: 1.85rem; }
    .landing__tagline { font-size: 0.95rem; }
    .landing__currently { font-size: 0.88rem; min-height: 1.5em; }
    .landing__pitch { font-size: 0.9rem; max-width: 280px; }
    .landing__cta { padding: 12px 22px; font-size: 0.82rem; }

    .landing__socials { gap: 20px; }
    .landing__socials svg,
    .landing__social-ig { width: 20px; height: 20px; }

    .landing__pixel-img { max-width: 160px; border-radius: 12px; }
    .landing__pixel-name { font-size: 1.4rem; }

    .landing__feed-text { font-size: 0.82rem; }
    .landing__feed-media { max-height: 140px; }
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .landing__track       { transition: none !important; }
    .landing__avatar-glow {
        animation: none;
        opacity: 0.55;
        filter: blur(16px);
    }
    .landing__pixel-dot,
    .landing__currently-marker,
    .landing__currently-inner,
    .landing__name-text::after {
        animation: none !important;
    }
}