<?php
/*
Template Name: Homepage Personale
*/
$lilith_home_url = esc_url( home_url( '/' ) );
$lilith_title = 'Figlie di Lilith | Lilith, Lilitu e Via Lilithiana';
$lilith_page_description = 'Figlie di Lilith è il cerchio lilithiano di Lilith Pontifex dedicato a Lilith, Lilitu, spiritualità gotica e memoria della voce lilithiana.';
$lilith_hero_image = 'https://www.figliedililith.it/wp-content/uploads/2026/05/header-scaled.png?v=30';
$lilith_hero_image_mobile = 'https://www.figliedililith.it/wp-content/uploads/2026/05/headerwebmobile.png?v=30';
$lilith_sigil_image = 'https://www.figliedililith.it/wp-content/uploads/2026/07/sigillo-trasparente-b.png';
$lilith_avatar_image = 'https://www.figliedililith.it/wp-content/uploads/2026/07/stemma-pontifex-ss.png';
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo esc_html( $lilith_title ); ?></title>
    <meta name="description" content="<?php echo esc_attr( $lilith_page_description ); ?>">
    <meta name="keywords" content="lilith, figlie di lilith, lilitu, lilithiano, lilithiana">
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
    <meta name="theme-color" content="#0a0a0a">
    <link rel="canonical" href="<?php echo $lilith_home_url; ?>">

    <meta property="og:type" content="website">
    <meta property="og:locale" content="it_IT">
    <meta property="og:site_name" content="Figlie di Lilith">
    <meta property="og:title" content="<?php echo esc_attr( $lilith_title ); ?>">
    <meta property="og:description" content="<?php echo esc_attr( $lilith_page_description ); ?>">
    <meta property="og:url" content="<?php echo $lilith_home_url; ?>">
    <meta property="og:image" content="<?php echo esc_url( $lilith_hero_image ); ?>">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php echo esc_attr( $lilith_title ); ?>">
    <meta name="twitter:description" content="<?php echo esc_attr( $lilith_page_description ); ?>">
    <meta name="twitter:image" content="<?php echo esc_url( $lilith_hero_image ); ?>">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap">
    <link rel="preload" as="image" href="<?php echo esc_url( $lilith_hero_image ); ?>" media="(min-width: 769px)">
    <link rel="preload" as="image" href="<?php echo esc_url( $lilith_hero_image_mobile ); ?>" media="(max-width: 768px)">

    <script type="application/ld+json">
    <?php
    echo wp_json_encode(
        array(
            '@context' => 'https://schema.org',
            '@graph'   => array(
                array(
                    '@type'       => 'WebSite',
                    '@id'         => $lilith_home_url . '#website',
                    'url'         => $lilith_home_url,
                    'name'        => 'Figlie di Lilith',
                    'description' => $lilith_page_description,
                    'inLanguage'  => 'it-IT',
                    'publisher'   => array( '@id' => $lilith_home_url . '#organization' ),
                ),
                array(
                    '@type'         => 'Organization',
                    '@id'           => $lilith_home_url . '#organization',
                    'name'          => 'Figlie di Lilith',
                    'alternateName' => array( 'il Cerchio Lilithiano', 'Cerchio Lilithiano' ),
                    'url'           => $lilith_home_url,
                    'email'         => 'info@figliedililith.it',
                    'description'   => 'Community spirituale e gotico-esoterica dedicata a Lilith, Lilitu e alla via lilithiana.',
                    'founder'       => array( '@id' => $lilith_home_url . '#person-lilith-pontifex' ),
                    'logo'          => array(
                        '@type' => 'ImageObject',
                        'url'   => $lilith_hero_image,
                    ),
                    'sameAs'        => array(
                        'https://www.facebook.com/LilithPontifex/',
                        'https://www.instagram.com/lilithpontifex/',
                        'https://www.tiktok.com/@lilith.pontifex',
                        'https://www.youtube.com/@LilithPontifex',
                    ),
                ),
                array(
                    '@type'       => 'Person',
                    '@id'         => $lilith_home_url . '#person-lilith-pontifex',
                    'name'        => 'Lilith Pontifex',
                    'url'         => $lilith_home_url,
                    'email'       => 'lilith@figliedililith.it',
                    'jobTitle'    => 'Custode del Cerchio, Autrice ed Esperta di Esoterismo',
                    'description' => 'Custode del cerchio lilithiano, autrice ed esperta sul mito della prima donna (Lilitu) e promotrice dell\'emancipazione spirituale e della via lilithiana.',
                    'worksFor'    => array( '@id' => $lilith_home_url . '#organization' ),
                    'sameAs'      => array( 'https://www.instagram.com/lilithpontifex/' ),
                    'knowsAbout'  => array(
                        'Spiritualità Lilithiana',
                        'Mito di Lilith',
                        'Archetipo di Lilitu',
                        'Gnosticismo Lilithiano',
                        'Iniziazione Femminile',
                        'Luna Nera Esoterica',
                        'Cabala Lilithiana',
                        'lilith',
                        'figlie di lilith',
                        'lilitu',
                        'lilithiano',
                        'lilithiana',
                    ),
                ),
                array(
                    '@type'              => 'WebPage',
                    '@id'                => $lilith_home_url . '#webpage',
                    'url'                => $lilith_home_url,
                    'name'               => $lilith_title,
                    'description'        => $lilith_page_description,
                    'isPartOf'           => array( '@id' => $lilith_home_url . '#website' ),
                    'about'              => array( '@id' => $lilith_home_url . '#organization' ),
                    'author'             => array( '@id' => $lilith_home_url . '#person-lilith-pontifex' ),
                    'inLanguage'         => 'it-IT',
                    'primaryImageOfPage' => array(
                        '@type' => 'ImageObject',
                        'url'   => $lilith_hero_image,
                    ),
                    'keywords'           => 'lilith, figlie di lilith, lilitu, lilithiano, lilithiana, Cerchio Lilithiano',
                ),
            ),
        ),
        JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE
    );
    ?>
    </script>

    <style>
        html {
            margin-top: 0 !important;
        }

        * html body {
            margin-top: 0 !important;
        }

        @media screen and (max-width: 782px) {
            #wpadminbar {
                display: none !important;
            }

            html {
                margin-top: 0 !important;
            }
        }

        .admin-bar .top-nav-2026 {
            top: 32px;
        }

        @media screen and (max-width: 782px) {
            .admin-bar .top-nav-2026 {
                top: 0;
            }
        }

        :root {
            --bg-oled: hsl(0, 0%, 2%);
            --bg-card: rgba(10, 8, 8, 0.82);
            --rosso: #8b0000;
            --rosso-vivo: #c31818;
            --fiamma: #ff5a1f;
            --oro-velato: #c7a56b;
            --accent-gold-glow: hsl(43, 85%, 68%);
            --bianco: #fff7ef;
            --muted: rgba(255, 247, 239, 0.74);
            --glass: rgba(12, 10, 10, 0.68);
            --border: rgba(195, 24, 24, 0.34);
            --shadow-red: 0 0 36px rgba(139, 0, 0, 0.42);
            --max: 1160px;
            --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
            --duration-normal: 0.4s;
            --duration-slow: 0.8s;
            --duration-elastic: 0.6s;
        }

        * {
            box-sizing: border-box;
        }

        img,
        svg,
        iframe,
        video {
            max-width: 100%;
            height: auto;
        }

        html {
            margin-top: 0 !important;
            scroll-behavior: smooth;
            scroll-padding-top: 90px;
        }

        body {
            margin: 0;
        }

        body.page-template-template-homepage,
        body.overflow-x-hidden {
            position: relative;
            min-width: 320px;
            overflow-x: hidden;
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            color: var(--bianco) !important;
            background-color: var(--bg-oled) !important;
            background-image: radial-gradient(circle at 50% 50%, rgba(20, 10, 10, 0.4) 0%, var(--bg-oled) 80%);
            background-attachment: fixed;
        }

        body.page-template-template-homepage::before,
        body.overflow-x-hidden::before {
            content: "";
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.035;
            pointer-events: none;
            z-index: 0;
        }

        a {
            color: inherit;
        }

        button {
            font: inherit;
        }

        .gotico {
            font-family: 'Cormorant Garamond', Georgia, serif;
        }

        .skip-link {
            position: fixed;
            left: -999px;
            top: 1rem;
            z-index: 500;
            padding: 0.75rem 1rem;
            border-radius: 999px;
            background: var(--rosso-vivo);
            color: #fff;
            text-decoration: none;
            font-weight: 700;
        }

        .skip-link:focus {
            left: 1rem;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        html.menu-open,
        body.menu-open {
            overflow: hidden !important;
            height: 100vh !important;
            height: 100dvh !important;
        }



        .site-watermark {
            position: fixed;
            top: 50%;
            left: 50%;
            width: min(72vw, 680px);
            height: auto;
            opacity: 0.023;
            pointer-events: none;
            user-select: none;
            z-index: 0;
            transform: translate(-50%, -50%);
        }

        .site-shell {
            position: relative;
            z-index: 2;
            isolation: isolate;
        }

        .hero-header-2026 {
            position: relative;
            min-height: 86vh;
            overflow: hidden;
            background-image:
                linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.1) 42%, rgba(0, 0, 0, 0.95)),
                url('<?php echo esc_url( $lilith_hero_image ); ?>');
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid rgba(139, 0, 0, 0.62);
            box-shadow: 0 34px 100px rgba(0, 0, 0, 0.92);
        }

        .hero-header-2026::before,
        .hero-header-2026::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .hero-header-2026::before {
            z-index: 1;
            background:
                radial-gradient(circle at 50% 48%, rgba(255, 90, 31, 0.16), transparent 18rem),
                radial-gradient(circle at 50% 52%, rgba(139, 0, 0, 0.22), transparent 36rem),
                linear-gradient(90deg, rgba(0,0,0,0.62), transparent 30%, transparent 70%, rgba(0,0,0,0.62));
        }

        .hero-header-2026::after {
            z-index: 2;
            background: linear-gradient(to bottom, transparent 58%, #030303 100%);
        }

        .top-nav-2026 {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 110;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: min(100% - 2rem, var(--max));
            margin: 0 auto;
            padding: calc(1.1rem + env(safe-area-inset-top, 0px)) 0 1.1rem;
        }

        .brand-mark,
        #menu-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            border: 1px solid rgba(199, 165, 107, 0.42);
            border-radius: 999px;
            background: linear-gradient(145deg, rgba(10,10,10,0.76), rgba(80,0,0,0.24));
            color: var(--bianco);
            box-shadow: var(--shadow-red), inset 0 1px 0 rgba(255,255,255,0.09);
            backdrop-filter: blur(18px) saturate(140%);
            -webkit-backdrop-filter: blur(18px) saturate(140%);
            transition:
                transform var(--duration-elastic) var(--ease-elastic),
                border-color var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth);
        }

        .brand-logo-svg {
            width: 34px;
            height: 34px;
            color: var(--oro-velato);
            filter: drop-shadow(0 2px 8px rgba(199, 165, 107, 0.25));
        }

        #menu-btn {
            position: relative;
            cursor: pointer;
        }

        #menu-btn svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            transition:
                opacity var(--duration-elastic) var(--ease-elastic),
                transform var(--duration-elastic) var(--ease-elastic);
        }

        #menu-btn .icon-open {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }

        #menu-btn .icon-close {
            opacity: 0;
            transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
        }

        #menu-btn[aria-expanded="true"] .icon-open {
            opacity: 0;
            transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
        }

        #menu-btn[aria-expanded="true"] .icon-close {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }

        .immobile-interactive,
        .pulsante-bagliore,
        .ghost-link,
        .social-icon-btn,
        .brand-mark,
        #menu-btn {
            transition:
                color var(--duration-elastic) var(--ease-elastic),
                background-color var(--duration-elastic) var(--ease-elastic),
                border-color var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth),
                opacity var(--duration-normal) var(--ease-smooth),
                filter var(--duration-normal) var(--ease-smooth);
        }

        @media (hover: hover) {
            .brand-mark:hover,
            #menu-btn:hover {
                border-color: rgba(255, 90, 31, 0.74);
                box-shadow: 0 0 42px rgba(195, 24, 24, 0.62), inset 0 1px 0 rgba(255,255,255,0.12);
            }
        }

        .clip-reveal-container {
            display: block;
            overflow: hidden;
            line-height: 1.2;
        }

        .clip-reveal-text {
            display: inline-block;
            will-change: transform, clip-path;
            transform: translateY(105%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
            transition:
                transform var(--duration-slow) var(--ease-smooth),
                clip-path var(--duration-slow) var(--ease-smooth);
        }

        .clip-reveal-text.revealed {
            transform: translateY(0);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        .hero-content-2026 {
            position: absolute;
            left: 50%;
            bottom: clamp(2.6rem, 8vh, 6.5rem);
            z-index: 8;
            width: min(92vw, 980px);
            text-align: center;
            transform: translateX(-50%);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            margin: 0 0 1.1rem;
            color: rgba(255, 247, 239, 0.84);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            text-shadow: 0 0 18px rgba(0,0,0,0.9);
        }

        .eyebrow::before,
        .eyebrow::after {
            content: "";
            width: 34px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--fiamma));
        }

        .eyebrow::after {
            background: linear-gradient(90deg, var(--fiamma), transparent);
        }

        .hero-title-2026 {
            margin: 0 0 1.2rem;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(2.8rem, 7vw, 7.2rem);
            line-height: 0.9;
            font-weight: 700;
            letter-spacing: 0;
            color: #fff;
            text-shadow: 0 0 12px rgba(0,0,0,0.98), 0 0 28px rgba(139,0,0,0.84), 0 0 70px rgba(0,0,0,1);
        }

        .hero-subtitle-2026 {
            max-width: 760px;
            margin: 0 auto 2rem;
            color: rgba(255, 247, 239, 0.88);
            font-size: clamp(1rem, 2vw, 1.18rem);
            line-height: 1.7;
            text-shadow: 0 0 16px rgba(0,0,0,0.95);
        }

        .cta-row {
            display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
        }

        .pulsante-bagliore,
        .ghost-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 54px;
            border-radius: 999px;
            text-decoration: none;
            font-weight: 800;
            cursor: pointer;
        }

        .pulsante-bagliore {
            position: relative;
            padding: 0.95rem 1.7rem;
            border: 1px solid rgba(255, 90, 31, 0.62);
            color: #fff;
            background: linear-gradient(135deg, #690000, #bd1b1b 48%, #5b0505);
            box-shadow: 0 0 24px rgba(139, 0, 0, 0.56), inset 0 1px 0 rgba(255,255,255,0.16);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-size: 0.8rem;
            overflow: hidden;
        }

        .ghost-link {
            padding: 0.9rem 1.35rem;
            border: 1px solid rgba(199, 165, 107, 0.35);
            background: rgba(5,5,5,0.48);
            color: rgba(255,247,239,0.9);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            font-size: 0.88rem;
        }

        #mobile-menu {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            width: min(86vw, 390px);
            height: 100dvh;
            max-height: 100dvh;
            padding: 5.5rem 1.5rem max(2.5rem, env(safe-area-inset-bottom, 1.5rem));
            border-left: 1px solid var(--border);
            background:
                radial-gradient(circle at 22% 12%, rgba(195,24,24,0.22), transparent 18rem),
                rgba(5, 5, 5, 0.96);
            backdrop-filter: blur(24px) saturate(140%);
            -webkit-backdrop-filter: blur(24px) saturate(140%);
            box-shadow: -32px 0 90px rgba(0, 0, 0, 0.82);
            transform: translateX(106%) scaleX(0.94);
            transform-origin: right center;
            visibility: hidden;
            transition: transform 560ms var(--ease-snappy), visibility 560ms var(--ease-snappy);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        #mobile-menu.is-open {
            transform: translateX(0) scaleX(1);
            visibility: visible;
        }

        #mobile-menu ul {
            display: grid;
            gap: 0.75rem;
            padding: 0;
            margin: 0;
            list-style: none;
            flex: 1 1 auto;
            min-height: 0;
        }

        .menu-footer-notes {
            flex-shrink: 0;
            margin-top: 1.25rem;
            padding-top: 0.5rem;
        }

        .menu-link {
            display: block;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            color: #fff;
            text-decoration: none;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(1.4rem, 5.5vw, 2.1rem);
            line-height: 1.1;
        }

        .menu-note {
            margin-top: 2rem;
            color: var(--muted);
            line-height: 1.7;
            font-size: 0.95rem;
        }

        .menu-note kbd {
            display: inline-block;
            padding: 0.15rem 0.45rem;
            border: 1px solid rgba(199, 165, 107, 0.45);
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.45);
            color: var(--bianco);
            font-family: inherit;
            font-size: 0.85em;
            font-weight: 700;
        }

        main {
            position: relative;
            z-index: 2;
        }

        .sezione {
            width: min(100% - 2rem, var(--max));
            margin: 0 auto;
            padding: clamp(3rem, 7vw, 6rem) 0;
        }

        .full-band {
            width: 100%;
            padding: clamp(2.4rem, 6vw, 5rem) 1rem;
            background:
                radial-gradient(circle at 50% 0, rgba(139,0,0,0.26), transparent 30rem),
                rgba(0,0,0,0.38);
        }

        .section-kicker {
            margin: 0 0 0.6rem;
            color: var(--oro-velato);
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .section-title {
            margin: 0 0 1.2rem;
            color: #fff;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(2.2rem, 5vw, 4.4rem);
            line-height: 0.98;
            letter-spacing: 0;
        }

        .video-player-wrapper {
            position: relative;
            width: min(92vw, 420px);
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid rgba(255, 90, 31, 0.52);
            border-radius: 8px;
            background: #000;
            box-shadow: 0 30px 90px rgba(0,0,0,0.72), 0 0 34px rgba(139,0,0,0.34);
            line-height: 0;
        }

        .video-mp4-lilith {
            display: block;
            width: 100%;
            height: auto;
            background: #000;
        }

        .divisore-alchemico-container {
            width: min(100% - 2rem, 900px);
            margin: clamp(2rem, 5vw, 2.5rem) auto;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .divisore-alchemico {
            width: 100%;
            height: auto;
            max-height: 40px;
            color: var(--oro-velato);
        }

        .bento-section {
            position: relative;
            z-index: 2;
            padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 6rem);
        }

        .bento-section-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .bento-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-rows: minmax(260px, auto);
            gap: 1.35rem;
        }

        .bento-card {
            position: relative;
            z-index: 2;
            overflow: hidden;
            padding: clamp(1.4rem, 3vw, 2.4rem);
            border-radius: 16px;
            border: 1px solid rgba(199, 165, 107, 0.18);
            background-color: var(--bg-card);
            backdrop-filter: blur(24px) saturate(140%);
            -webkit-backdrop-filter: blur(24px) saturate(140%);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .bento-2x2 {
            grid-column: span 2;
            grid-row: span 2;
        }

        .bento-1x2 {
            grid-column: span 1;
            grid-row: span 2;
        }

        .bento-2x1 {
            grid-column: span 2;
            grid-row: span 1;
        }

        .esoteric-badge-container,
        .keyword-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
        }

        .esoteric-badge,
        .keyword-pill {
            border: 1px solid rgba(199, 165, 107, 0.3);
            border-radius: 999px;
            background: rgba(199, 165, 107, 0.06);
            color: var(--oro-velato);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 0.3rem 0.75rem;
        }

        .keyword-pill {
            color: rgba(255,247,239,0.82);
            background: rgba(0,0,0,0.32);
            font-size: 0.78rem;
            letter-spacing: 0;
            text-transform: none;
        }

        .bento-card h3 {
            margin: 0 0 0.85rem;
            color: #fff;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            line-height: 1.05;
        }

        .bento-card p,
        .form-intro,
        .author-bio {
            color: var(--muted);
            line-height: 1.7;
        }

        .sigil-container,
        .social-bento-container,
        .author-bento-container,
        .fragments-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
        }

        .sigil-img {
            width: min(220px, 60vw);
            height: min(220px, 60vw);
            object-fit: contain;
            filter: drop-shadow(0 0 12px rgba(199, 165, 107, 0.2)) contrast(1);
        }

        .sigil-caption {
            margin-top: 1.2rem;
            font-size: 0.82rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--oro-velato);
        }

        .values-container,
        .thresholds-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
            margin-top: 0.75rem;
        }

        .value-item,
        .threshold-item {
            padding: 1rem;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.015);
            border: 1px solid rgba(199, 165, 107, 0.08);
        }

        .value-icon,
        .threshold-sub,
        .fragments-icon,
        .author-title {
            color: var(--oro-velato);
        }

        .threshold-num {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--rosso-vivo);
            opacity: 0.65;
        }

        .social-icons-grid,
        .social-links,
        .legal-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .social-icon-btn,
        .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1px solid rgba(199, 165, 107, 0.22);
            background: rgba(255, 255, 255, 0.03);
            color: var(--bianco);
            text-decoration: none;
        }

        .author-avatar-wrapper {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            border: 2px solid var(--accent-gold-glow);
            display: grid;
            place-items: center;
            margin-bottom: 1rem;
            box-shadow: 0 0 20px rgba(199, 165, 107, 0.2);
        }

        .author-bento-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%;
        }

        .author-contact-line {
            font-size: 0.8rem;
            margin: 0 0 0.85rem;
            color: var(--muted);
        }

        .author-cta {
            width: min(100%, 320px);
            font-size: 0.72rem;
        }

        .cf7-bento-wrap .wpcf7 form {
            display: grid;
            gap: 1rem;
        }

        .cf7-bento-wrap input,
        .cf7-bento-wrap textarea,
        .cf7-bento-wrap select {
            width: 100%;
            padding: 0.75rem 0.9rem;
            border: 1px solid rgba(199, 165, 107, 0.22);
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.35);
            color: var(--bianco);
            font: inherit;
        }

        .cf7-bento-wrap input:focus,
        .cf7-bento-wrap textarea:focus {
            outline: none;
            border-color: rgba(195, 24, 24, 0.55);
            box-shadow: 0 0 16px rgba(139, 0, 0, 0.25);
        }

        .cf7-bento-wrap .wpcf7-submit {
            cursor: pointer;
        }

        .esoteric-quote {
            margin: 0;
            padding: 0;
            border: none;
        }

        .esoteric-quote p {
            margin: 0 0 0.75rem;
            font-style: italic;
            color: var(--bianco);
        }

        .esoteric-quote cite {
            display: block;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.7rem;
            font-style: normal;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--oro-velato);
        }

        footer {
            padding: 3.5rem 1rem;
            border-top: 1px solid rgba(139,0,0,0.42);
            background:
                radial-gradient(circle at 50% 0, rgba(139,0,0,0.18), transparent 24rem),
                #030303;
            text-align: center;
        }

        .footer-inner {
            width: min(100%, 900px);
            margin: 0 auto;
        }

        .footer-quote {
            margin: 0 0 1.6rem;
            color: #d33636;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(1.5rem, 4vw, 2.3rem);
            line-height: 1.15;
        }

        .footer-meta {
            display: grid;
            gap: 0.5rem;
            color: rgba(255,247,239,0.58);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .legal-links a {
            color: rgba(255,247,239,0.74);
            text-underline-offset: 4px;
        }

        @media (max-width: 1024px) {
            .bento-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .bento-2x2,
            .bento-2x1,
            .bento-1x2 {
                grid-column: span 2;
                grid-row: span 1;
            }

            .values-container {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 900px) {
            .hero-header-2026 {
                min-height: 80vh;
                background-position: center top;
            }

            .brand-mark,
            #menu-btn {
                width: 48px;
                height: 48px;
            }

            .hero-content-2026 {
                bottom: 4.2rem;
            }
        }

        @media (max-width: 768px) {
            .hero-header-2026 {
                min-height: 76vh;
                background-image:
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.96)),
                    url('<?php echo esc_url( $lilith_hero_image_mobile ); ?>');
            }

            .sezione {
                width: min(100% - 1.25rem, var(--max));
                padding: 2.5rem 0;
            }

            .full-band {
                padding: 2.5rem 1rem;
            }

            .top-nav-2026 {
                z-index: 110;
                width: calc(100% - 2.5rem);
                padding-top: calc(1.8rem + env(safe-area-inset-top, 0px));
                padding-bottom: 0.6rem;
            }

            #mobile-menu {
                width: 100% !important;
                border-left: none !important;
            }

            .hero-title-2026 {
                font-size: clamp(2.45rem, 13vw, 4.6rem);
            }

            .hero-subtitle-2026 {
                font-size: 0.98rem;
                line-height: 1.65;
            }

            .eyebrow {
                font-size: 0.68rem;
                letter-spacing: 0.14em;
            }

            .ghost-link,
            .pulsante-bagliore {
                width: min(100%, 320px);
            }

            .bento-grid,
            .thresholds-grid {
                grid-template-columns: 1fr;
            }

            .bento-2x2,
            .bento-1x2,
            .bento-2x1 {
                grid-column: span 1;
                grid-row: span 1;
            }
        }

        @media (max-width: 420px) {
            .hero-header-2026 {
                min-height: 74vh;
            }

            .hero-content-2026 {
                bottom: 3.4rem;
            }

            .section-title {
                font-size: 2.25rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation-duration: 1ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: 1ms !important;
            }
        }

        @media (hover: none), (pointer: coarse) {
            .bento-card {
                transform: none !important;
            }
        }

        /* cache-bust-gothic-seo-cwv-figma-2026-v40-nav-safe-area */
    </style>

    <?php wp_head(); ?>
</head>

<body <?php body_class( 'overflow-x-hidden' ); ?>>
<img class="site-watermark" src="<?php echo esc_url( $lilith_avatar_image ); ?>" alt="" aria-hidden="true">
<a class="skip-link" href="#contenuto">Salta al contenuto</a>

<div class="site-shell">
    <header id="hero" class="hero-header-2026" aria-label="Figlie di Lilith">
        <div class="top-nav-2026">
            <a href="#hero" class="brand-mark immobile-interactive" aria-label="Torna all'inizio della homepage Figlie di Lilith">
                <svg class="brand-logo-svg" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="brandGoldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#c7a56b"/>
                            <stop offset="100%" stop-color="#050505"/>
                        </linearGradient>
                    </defs>
                    <path d="M 55 12 A 38 38 0 1 0 88 45 A 32 32 0 1 1 55 12 Z" fill="url(#brandGoldGradient)" stroke="none" opacity="0.35"/>
                    <path d="M 55 12 A 38 38 0 1 0 88 45 A 32 32 0 1 1 55 12 Z"/>
                    <path d="M 38 25 L 34 15 L 42 20 L 50 14 L 58 20 L 66 15 L 62 25 Z"/>
                    <line x1="38" y1="25" x2="62" y2="25"/>
                    <path d="M 38 25 L 50 50 L 62 25 Z"/>
                    <line x1="50" y1="25" x2="50" y2="78"/>
                    <path d="M 30 58 C 30 50, 42 50, 50 58 C 58 50, 70 50, 70 58"/>
                    <circle cx="30" cy="58" r="2" fill="currentColor"/>
                    <circle cx="70" cy="58" r="2" fill="currentColor"/>
                    <line x1="42" y1="70" x2="58" y2="70"/>
                    <path d="M 40 78 A 10 10 0 0 0 60 78"/>
                </svg>
            </a>

            <button id="menu-btn" class="immobile-interactive" type="button" aria-label="Apri menu di navigazione" aria-controls="mobile-menu" aria-expanded="false">
                <svg class="icon-open" width="27" height="27" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16m-7 5h7"></path>
                </svg>
                <svg class="icon-close" width="27" height="27" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <div class="hero-content-2026">
            <p class="eyebrow">Figlie di Lilith</p>
            <h1 class="hero-title-2026">
                <span class="sr-only">Figlie di Lilith - </span>
                <span class="clip-reveal-container"><span class="clip-reveal-text">Lilith chiama.</span></span>
                <br>
                <span class="clip-reveal-container"><span class="clip-reveal-text" style="transition-delay: 0.15s;" aria-hidden="true">Le Figlie rispondono.</span></span>
                <span class="sr-only">Le Figlie di Lilith rispondono.</span>
            </h1>
            <p class="hero-subtitle-2026">Cerchio gotico e via lilithiana dedicati a Lilith, a Lilitu e alla memoria ribelle della prima voce.</p>
            <div class="cta-row">
                <button id="join-circle-btn" type="button" class="pulsante-bagliore immobile-interactive" aria-label="Vai al modulo per unirti al cerchio delle Figlie di Lilith">
                    <span>Unisciti al Cerchio</span>
                </button>
                <a class="ghost-link immobile-interactive" href="#lilith" aria-label="Scopri chi è Lilith e la via lilithiana">Scopri la Via Lilithiana</a>
            </div>
        </div>
    </header>

    <nav id="mobile-menu" aria-label="Menu principale" aria-hidden="true">
        <ul>
            <li><a href="#hero" class="menu-link immobile-interactive" tabindex="-1">Home</a></li>
            <li><a href="#lilith" class="menu-link immobile-interactive" tabindex="-1">Chi è Lilith</a></li>
            <li><a href="#valori" class="menu-link immobile-interactive" tabindex="-1">Valori Lilithiani</a></li>
            <li><a href="#sigillo" class="menu-link immobile-interactive" tabindex="-1">Sigillo</a></li>
            <li><a href="#iniziazione" class="menu-link immobile-interactive" tabindex="-1">Iniziazione</a></li>
        </ul>
    </nav>

    <main id="contenuto">
        <section class="full-band" aria-labelledby="video-title">
            <h2 id="video-title" class="section-title sr-only">Video introduttivo su Lilith e le Figlie di Lilith</h2>
            <div class="video-player-wrapper">
                <video class="video-mp4-lilith" autoplay muted loop playsinline controls preload="metadata" poster="<?php echo esc_url( $lilith_hero_image ); ?>" aria-describedby="video-title" aria-label="Video introduttivo delle Figlie di Lilith su Lilith e la via lilithiana">
                    <source src="https://www.figliedililith.it/wp-content/uploads/2026/05/Lilith.mp4?v=30" type="video/mp4">
                    Il tuo browser non supporta il video HTML5.
                </video>
            </div>
        </section>

        <div class="divisore-alchemico-container" aria-hidden="true">
            <svg class="divisore-alchemico" viewBox="0 0 1000 40" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
                <line x1="0" y1="20" x2="460" y2="20" stroke-width="1" stroke="url(#lineGradientLeftA)"/>
                <g class="alchemical-center" transform="translate(500, 20)">
                    <polygon points="0,-15 15,0 0,15 -15,0" stroke="#c7a56b" stroke-width="1.5" fill="none"/>
                    <circle cx="0" cy="0" r="8" stroke="#c31818" stroke-width="1.2" fill="none"/>
                    <circle cx="0" cy="0" r="4" stroke="#c7a56b" stroke-width="1" fill="hsl(0, 0%, 2%)"/>
                    <circle cx="-25" cy="0" r="2" fill="#c7a56b" stroke="none"/>
                    <circle cx="25" cy="0" r="2" fill="#c7a56b" stroke="none"/>
                </g>
                <line x1="540" y1="20" x2="1000" y2="20" stroke-width="1" stroke="url(#lineGradientRightA)"/>
                <defs>
                    <linearGradient id="lineGradientLeftA" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stop-color="transparent"/>
                        <stop offset="100%" stop-color="#c7a56b"/>
                    </linearGradient>
                    <linearGradient id="lineGradientRightA" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stop-color="#c7a56b"/>
                        <stop offset="100%" stop-color="transparent"/>
                    </linearGradient>
                </defs>
            </svg>
        </div>

        <section class="bento-section sezione" aria-labelledby="bento-title">
            <p class="section-kicker">Cerchio lilithiano</p>
            <h2 id="bento-title" class="section-title bento-section-title">
                <span class="clip-reveal-container"><span class="clip-reveal-text">Il Cerchio Lilithiano: Bento Grid Gotica 2026</span></span>
            </h2>

            <div class="bento-grid">
                <article id="lilith" class="bento-card bento-2x2">
                    <div class="esoteric-badge-container">
                        <span class="esoteric-badge">lilitu</span>
                        <span class="esoteric-badge">lilithiano</span>
                        <span class="esoteric-badge">lilithiana</span>
                    </div>
                    <h3>Chi è Lilith nella memoria lilithiana?</h3>
                    <p>Lilith è la prima donna che non accetta di essere ridotta a ombra, costola o silenzio. Prima di Eva, prima dell'obbedienza, il suo nome resta come frattura e ritorno nel mito di <strong>lilith</strong>.</p>
                    <p>Nel respiro antico di <strong>Lilitu</strong> vive una figura notturna, libera e inafferrabile. Le <strong>Figlie di Lilith</strong> leggono quel mito come simbolo di sovranità, desiderio, ferita e risveglio.</p>
                    <p>La via lilithiana non addomestica la rabbia: la trasforma in presenza. Una voce lilithiana non chiede permesso per ricordare ciò che è stato rubato.</p>
                    <p>Il Cerchio Lilithiano custodisce simboli, parole e pratiche per chi sente il nome di Lilith come una soglia. Ogni incontro lilithiano è memoria attiva, non folklore vuoto.</p>
                    <p>Integrare l'ombra lilithiana significa riconoscere potere, confine e desiderio senza chiedere assoluzione a chi pretende obbedienza.</p>
                    <div class="keyword-row" aria-label="Temi principali">
                        <span class="keyword-pill">lilith</span>
                        <span class="keyword-pill">figlie di lilith</span>
                        <span class="keyword-pill">lilitu</span>
                        <span class="keyword-pill">lilithiano</span>
                        <span class="keyword-pill">lilithiana</span>
                    </div>
                </article>

                <article id="sigillo" class="bento-card bento-1x2" aria-label="Sigillo di Lilith">
                    <div class="sigil-container">
                        <img src="<?php echo esc_url( $lilith_sigil_image ); ?>" alt="Il Vero Sigillo di Lilith" class="sigil-img" width="220" height="220" loading="lazy">
                        <p class="sigil-caption gotico">Il Sigillo di Lilith</p>
                    </div>
                </article>

                <article id="valori" class="bento-card bento-2x1" aria-labelledby="valori-bento-title">
                    <p class="section-kicker">Il Cerchio Lilithiano</p>
                    <h3 id="valori-bento-title">I valori delle Figlie di Lilith</h3>
                    <div class="values-container">
                        <div class="value-item">
                            <div class="value-icon" aria-hidden="true">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                            </div>
                            <h4 class="gotico">Ribellione iniziatica</h4>
                            <p>Rifiuto dei dogmi imposti per reclamare la propria indipendenza spirituale lilithiana.</p>
                        </div>
                        <div class="value-item">
                            <div class="value-icon" aria-hidden="true">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3a9 9 0 1 0 9 9 9.75 9.75 0 0 0-9-9Z"/></svg>
                            </div>
                            <h4 class="gotico">Risveglio dell'ombra</h4>
                            <p>Integrazione della forza profonda legata a Lilitu e alla memoria lilithiana.</p>
                        </div>
                        <div class="value-item">
                            <div class="value-icon" aria-hidden="true">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z"/></svg>
                            </div>
                            <h4 class="gotico">Sovranità spirituale</h4>
                            <p>Presenza consapevole e piena sovranità dell'anima sul cammino lilithiano.</p>
                        </div>
                    </div>
                </article>

                <article class="bento-card" aria-labelledby="social-bento-title">
                    <div class="social-bento-container">
                        <h3 id="social-bento-title">I nostri social</h3>
                        <div class="social-icons-grid">
                            <a class="social-icon-btn immobile-interactive" href="https://www.facebook.com/LilithPontifex/" target="_blank" rel="noopener noreferrer" aria-label="Facebook Figlie di Lilith">
                                <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 8H7v3h2v9h4v-9h3.6l.4-3H13V6c0-.5.5-1 1-1h3V2h-3c-2.5 0-5 1.5-5 4v2z"/></svg>
                            </a>
                            <a class="social-icon-btn immobile-interactive" href="https://www.instagram.com/lilithpontifex/" target="_blank" rel="noopener noreferrer" aria-label="Instagram Lilith Pontifex">
                                <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path 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-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 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.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
                            </a>
                            <a class="social-icon-btn immobile-interactive" href="https://www.tiktok.com/@lilith.pontifex" target="_blank" rel="noopener noreferrer" aria-label="TikTok Lilith Pontifex">
                                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>
                            </a>
                            <a class="social-icon-btn immobile-interactive" href="https://www.youtube.com/@LilithPontifex" target="_blank" rel="noopener noreferrer" aria-label="YouTube Lilith Pontifex">
                                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="3"/><path d="M10 9l5 3-5 3V9z"/></svg>
                            </a>
                        </div>
                    </div>
                </article>

                <article id="iniziazione" class="bento-card bento-2x2" aria-labelledby="iniziazione-title">
                    <div class="contact-form-container">
                        <p class="section-kicker">Iniziazione</p>
                        <h3 id="iniziazione-title">
                            <span class="clip-reveal-container"><span class="clip-reveal-text">Bussa al Cerchio</span></span>
                        </h3>
                        <p class="form-intro">Sussurra la tua verità alle Figlie di Lilith. Se il sentiero lilithiano ti chiama, il primo passo è una parola inviata senza maschera al <strong>Cerchio Lilithiano</strong>.</p>
                        <div class="cf7-bento-wrap">
                            <?php echo do_shortcode( '[contact-form-7 id="c5885f7" title="modulo contatto"]' ); ?>
                        </div>
                    </div>
                </article>

                <article id="autore" class="bento-card bento-1x2" aria-labelledby="autore-title">
                    <div class="author-bento-container">
                        <div class="author-avatar-wrapper">
                            <img src="<?php echo esc_url( $lilith_avatar_image ); ?>" width="100" height="100" alt="Lilith Pontifex" class="author-bento-img" loading="lazy">
                        </div>
                        <h3 id="autore-title">Lilith Pontifex</h3>
                        <p class="author-title">Custode del Cerchio, Autrice ed Esperta</p>
                        <p class="author-bio">Custode del cerchio lilithiano, autrice ed esperta di esoterismo. Attraverso il portale <strong>Figlie di Lilith</strong>, Lilith guida la cerchia nel risveglio della via iniziatica della Luna Nera, condividendo studi sull'archetipo primordiale di <strong>Lilitu</strong> e facilitando la liberazione dell'essenza <strong>lilithiana</strong>.</p>
                        <p class="author-contact-line"><strong>Email:</strong> <a href="mailto:lilith@figliedililith.it">lilith@figliedililith.it</a></p>
                        <a href="mailto:lilith@figliedililith.it" class="pulsante-bagliore immobile-interactive author-cta" aria-label="Invia messaggio a Lilith Pontifex">Invia Messaggio</a>
                    </div>
                </article>

                <article id="soglie-iniziatiche" class="bento-card bento-2x1" aria-labelledby="soglie-title">
                    <p class="section-kicker">Via iniziatica</p>
                    <h3 id="soglie-title">Le Tre Soglie Iniziatiche</h3>
                    <div class="thresholds-grid">
                        <div class="threshold-item">
                            <span class="threshold-num" aria-hidden="true">I</span>
                            <h4 class="gotico">Il Distacco</h4>
                            <span class="threshold-sub">Bando d'Adamo</span>
                            <p>Emancipazione e autonomia dello spirito rispetto ai dogmi.</p>
                        </div>
                        <div class="threshold-item">
                            <span class="threshold-num" aria-hidden="true">II</span>
                            <h4 class="gotico">La Discesa</h4>
                            <span class="threshold-sub">Soggiorno nel Deserto</span>
                            <p>Confronto con la propria ombra per integrarla come forza vitale.</p>
                        </div>
                        <div class="threshold-item">
                            <span class="threshold-num" aria-hidden="true">III</span>
                            <h4 class="gotico">La Sovranità</h4>
                            <span class="threshold-sub">Il Ritorno di Lilitu</span>
                            <p>Riconoscimento del proprio tempio interiore e della voce ancestrale.</p>
                        </div>
                    </div>
                </article>

                <article id="frammenti-lilitu" class="bento-card" aria-labelledby="frammenti-title">
                    <div class="fragments-container">
                        <div class="fragments-icon" aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M12 3v18M3 12h18M12 3l4 4M12 21l-4-4M3 12l4-4M21 12l-4 4"/>
                            </svg>
                        </div>
                        <h3 id="frammenti-title">Frammenti di Lilitu</h3>
                        <blockquote class="esoteric-quote">
                            <p>«Lilitu, lo spirito del vento che soffia nelle dimore desolate, la sposa della notte che non conosce legami terreni.»</p>
                            <cite>Frammento mesopotamico - Nippur, III millennio a.C.</cite>
                        </blockquote>
                    </div>
                </article>
            </div>
        </section>

        <div class="divisore-alchemico-container" aria-hidden="true">
            <svg class="divisore-alchemico" viewBox="0 0 1000 40" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
                <line x1="0" y1="20" x2="460" y2="20" stroke-width="1" stroke="url(#lineGradientLeftB)"/>
                <g class="alchemical-center" transform="translate(500, 20)">
                    <polygon points="0,-15 15,0 0,15 -15,0" stroke="#c7a56b" stroke-width="1.5" fill="none"/>
                    <circle cx="0" cy="0" r="8" stroke="#c31818" stroke-width="1.2" fill="none"/>
                    <circle cx="0" cy="0" r="4" stroke="#c7a56b" stroke-width="1" fill="hsl(0, 0%, 2%)"/>
                    <circle cx="-25" cy="0" r="2" fill="#c7a56b" stroke="none"/>
                    <circle cx="25" cy="0" r="2" fill="#c7a56b" stroke="none"/>
                </g>
                <line x1="540" y1="20" x2="1000" y2="20" stroke-width="1" stroke="url(#lineGradientRightB)"/>
                <defs>
                    <linearGradient id="lineGradientLeftB" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stop-color="transparent"/>
                        <stop offset="100%" stop-color="#c7a56b"/>
                    </linearGradient>
                    <linearGradient id="lineGradientRightB" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stop-color="#c7a56b"/>
                        <stop offset="100%" stop-color="transparent"/>
                    </linearGradient>
                </defs>
            </svg>
        </div>
    </main>

    <footer>
        <div class="footer-inner">
            <p class="footer-quote">"Lilith non è un mito. È la memoria della divinità che hai sepolto."</p>

            <div class="social-links" aria-label="Profili social Figlie di Lilith">
                <a class="immobile-interactive" href="https://www.facebook.com/LilithPontifex/" target="_blank" rel="noopener noreferrer" aria-label="Facebook Figlie di Lilith">
                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                </a>
                <a class="immobile-interactive" href="https://www.instagram.com/lilithpontifex/" target="_blank" rel="noopener noreferrer" aria-label="Instagram Lilith Pontifex">
                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="5"/><circle cx="17" cy="7" r="1.5"/></svg>
                </a>
                <a class="immobile-interactive" href="https://www.tiktok.com/@lilith.pontifex" target="_blank" rel="noopener noreferrer" aria-label="TikTok Lilith Pontifex">
                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>
                </a>
                <a class="immobile-interactive" href="https://www.youtube.com/@LilithPontifex" target="_blank" rel="noopener noreferrer" aria-label="YouTube Lilith Pontifex">
                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="3"/><path d="M10 9l5 3-5 3V9z"/></svg>
                </a>
            </div>

            <div class="footer-meta">
                <p>© 2026 Figlie di Lilith. Sito personale di Lilith Pontifex.</p>
                <p>Responsabile del sito e trattamento dati: Lilith Pontifex - lilith@figliedililith.it</p>
                <div class="legal-links">
                    <a href="<?php echo get_privacy_policy_url(); ?>">Privacy Policy</a>
                    <span aria-hidden="true">|</span>
                    <a href="<?php echo esc_url( home_url( '/cookie-policy' ) ); ?>">Cookie Policy</a>
                </div>
            </div>
        </div>
    </footer>
</div>

<script>
    (() => {
        const menuBtn = document.getElementById('menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const menuLinks = document.querySelectorAll('.menu-link');
        const joinBtn = document.getElementById('join-circle-btn');
        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

        function setMenu(open) {
            mobileMenu.classList.toggle('is-open', open);
            mobileMenu.setAttribute('aria-hidden', String(!open));
            menuBtn.setAttribute('aria-expanded', String(open));
            menuBtn.setAttribute('aria-label', open ? 'Chiudi menu di navigazione' : 'Apri menu di navigazione');
            document.documentElement.classList.toggle('menu-open', open);
            document.body.classList.toggle('menu-open', open);
            menuLinks.forEach((link) => {
                link.setAttribute('tabindex', open ? '0' : '-1');
            });
            if (open) {
                menuLinks[0]?.focus();
            } else {
                menuBtn?.focus();
            }
        }

        menuBtn?.addEventListener('click', () => {
            setMenu(!mobileMenu.classList.contains('is-open'));
        });

        menuLinks.forEach((link) => {
            link.addEventListener('click', () => setMenu(false));
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && mobileMenu.classList.contains('is-open')) {
                setMenu(false);
            }
        });

        joinBtn?.addEventListener('click', () => {
            document.getElementById('iniziazione')?.scrollIntoView({ behavior: prefersReducedMotion ? 'auto' : 'smooth' });
        });

        const revealElements = document.querySelectorAll('.clip-reveal-text');
        if (revealElements.length) {
            if (prefersReducedMotion) {
                revealElements.forEach((el) => el.classList.add('revealed'));
            } else {
                const revealObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach((entry) => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('revealed');
                            observer.unobserve(entry.target);
                        }
                    });
                }, {
                    root: null,
                    threshold: 0.15,
                    rootMargin: '0px 0px -50px 0px',
                });

                revealElements.forEach((el) => revealObserver.observe(el));
            }
        }
    })();
</script>

<?php wp_footer(); ?>
</body>
</html>
