/* ==========================================================================
   PartyNow — grafiche delle SEZIONI SPECIALI (sezioni-speciali.json).

   Ogni tema è una chiave: `[data-pn-tema="<chiave>"]` sulla sezione della home
   e sul <body> della landing. Una sezione senza attributo (tema sconosciuto al
   sito, vedi TEMI_NOTI in js/pn-sezioni-speciali.js) resta con lo stile
   normale della home: mai la grafica di un'altra festa.

   Halloween: fondo scuro editoriale (#0D0D0D del brand), zucca fatta coi due
   colori caldi del brand (rosso → giallo) e alone viola (eventi speciali).
   Testo bianco sui pieni colorati.
   ========================================================================== */

/* ---- Home: la sezione speciale è una barra sottile e fissa sotto l'header (22/10) ----
   Tutta la barra è il link alla landing. Sta nello slot #pn-sezioni-speciali, che resta
   attaccato sotto l'header (68px) mentre si scorre; con la barra presente le ancore
   tengono conto anche di lei (scroll-padding-top). Senza tema: barra scura neutra. */
.pn-sezioni-speciali {
    position: sticky;
    top: 68px;
    z-index: 90;
}
html:has(.pn-barra-speciale) { scroll-padding-top: 132px; }
.pn-barra-speciale {
    display: block;
    color: #fff;
    text-decoration: none;
    background: var(--pn-ink, #0E0F13);
    box-shadow: 0 6px 18px rgba(14, 15, 19, .14);
}
.pn-barra-speciale__dentro {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
}
.pn-barra-speciale__icona { flex: 0 0 auto; width: 22px; height: 22px; }
.pn-barra-speciale__testo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 600;
}
.pn-barra-speciale__testo strong { font-family: var(--pn-display); font-weight: 900; font-size: 18px; letter-spacing: .01em; text-transform: uppercase; }
.pn-barra-speciale__apri {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--pn-ink, #0E0F13);
    font-size: 13px;
    font-weight: 800;
}
.pn-barra-speciale:hover .pn-barra-speciale__apri { filter: brightness(1.06); }

/* ==========================================================================
   HALLOWEEN
   ========================================================================== */
[data-pn-tema="halloween"] {
    --pn-hw-notte: #0D0D0D;
    --pn-hw-notte-2: #1A1320;
    --pn-hw-zucca: linear-gradient(100deg, var(--pn-red, #F24B3F) 0%, #F7853F 48%, var(--pn-yellow, #FECD3F) 100%);
    --pn-hw-viola: #A44CCF;
    --pn-hw-testo: #F5F3F7;
    --pn-hw-testo-2: #C9C3D1;
}

/* ---- Home: la barra di Halloween (notte, luna, «Apri» color zucca) ---- */
.pn-barra-speciale[data-pn-tema="halloween"] {
    background:
        radial-gradient(40% 160% at 0% 50%, rgba(164, 76, 207, .45), transparent 70%),
        radial-gradient(30% 160% at 100% 50%, rgba(247, 133, 63, .30), transparent 70%),
        linear-gradient(90deg, var(--pn-hw-notte-2), var(--pn-hw-notte));
    color: var(--pn-hw-testo);
}
/* La luna: la stessa falce della landing, fatta con un cerchio e un'ombra. */
.pn-barra-speciale[data-pn-tema="halloween"] .pn-barra-speciale__icona {
    border-radius: 50%;
    box-shadow: -5px 4px 0 0 #FECD3F;
    transform: translate(4px, -2px) rotate(-12deg);
}
.pn-barra-speciale[data-pn-tema="halloween"] .pn-barra-speciale__testo strong {
    background: var(--pn-hw-zucca);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.pn-barra-speciale[data-pn-tema="halloween"] .pn-barra-speciale__apri { background: var(--pn-hw-zucca); color: #fff; }

/* ---- Landing: riquadro scuro DENTRO il gutter della pagina ----
   Il riquadro è .pn-sezione-deco, posizionato come il contenuto di .pn-container
   (stesso max-width e stesso gutter: 32px, 20px sotto i 900px, 16px su telefono).
   Il testo resta nel contenitore e prende un rientro interno. */
.pn-sezione-deco { display: none; }
body[data-pn-tema="halloween"] .pn-hero {
    --pn-hw-gutter: 32px;
    --pn-hw-rientro: 44px;
    position: relative;
    isolation: isolate;
    margin-top: 18px;
    padding: 64px 0 52px;
    overflow: visible;
    color: var(--pn-hw-testo);
}
body[data-pn-tema="halloween"] .pn-hero-glow { display: none; }
body[data-pn-tema="halloween"] .pn-sezione-deco {
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: max(var(--pn-hw-gutter), calc((100% - var(--pn-maxw, 1240px)) / 2 + var(--pn-hw-gutter)));
    right: max(var(--pn-hw-gutter), calc((100% - var(--pn-maxw, 1240px)) / 2 + var(--pn-hw-gutter)));
    border-radius: 32px;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(55% 90% at 8% 0%, rgba(164, 76, 207, .45), transparent 62%),
        radial-gradient(45% 80% at 100% 100%, rgba(247, 133, 63, .32), transparent 60%),
        linear-gradient(160deg, var(--pn-hw-notte-2), var(--pn-hw-notte) 72%);
}
body[data-pn-tema="halloween"] .pn-hero-left { padding: 0 var(--pn-hw-rientro); }

/* La luna: una falce fatta con due cerchi. */
.pn-sezione-luna {
    position: absolute;
    top: 34px;
    right: 13%;
    width: clamp(64px, 8vw, 104px);
    height: clamp(64px, 8vw, 104px);
    border-radius: 50%;
    box-shadow: -16px 11px 0 0 #FECD3F;
    transform: rotate(-12deg);
    opacity: .92;
}

/* Ragnatele agli angoli alti: calano all'apertura e poi ondeggiano piano. */
.pn-ragnatela {
    position: absolute;
    top: 0;
    width: clamp(140px, 17vw, 220px);
    height: auto;
    color: rgba(245, 243, 247, .42);
    animation: pn-ragnatela-cala 2.4s cubic-bezier(.2, .7, .2, 1) both, pn-ragnatela-ondeggia 9s ease-in-out 2.4s infinite;
}
.pn-ragnatela--sx { left: 0; width: 84px; transform-origin: top left; } /* piccola: resta sopra l'etichetta, non dietro il testo */
.pn-ragnatela--dx { right: 0; transform-origin: top right; animation-delay: .5s, 2.9s; }

/* Due fili sottili che scendono dall'alto. */
.pn-filo {
    position: absolute;
    top: 0;
    width: 1px;
    background: linear-gradient(rgba(245, 243, 247, .32), rgba(245, 243, 247, 0));
    transform-origin: top;
    animation: pn-filo-cala 3s ease-out both, pn-filo-ondeggia 7s ease-in-out 3s infinite;
}
.pn-filo--1 { left: 34%; height: 70px; animation-delay: .8s, 3.8s; }
.pn-filo--2 { right: 30%; height: 46px; animation-delay: 1.3s, 4.3s; }

/* Il ragnetto appeso al suo filo: scende, si ferma, risale. Sta nella colonna di
   destra, lontano dal titolo. */
.pn-ragno {
    position: absolute;
    top: 0;
    right: 6%;
    width: 34px;
    height: 220px;
    color: rgba(245, 243, 247, .55);
    transform: translateY(-190px);
    transform-origin: top center;
    animation: pn-ragno-scende 11s ease-in-out 1.2s infinite;
}
.pn-ragno svg { position: absolute; bottom: 0; left: 0; width: 34px; height: 220px; }
.pn-ragno__corpo { fill: #2A2030; stroke: rgba(245, 243, 247, .7); stroke-width: 1; }

@keyframes pn-ragnatela-cala {
    from { transform: translateY(-100%) scaleY(.6); opacity: 0; }
    to   { transform: translateY(0) scaleY(1); opacity: 1; }
}
@keyframes pn-ragnatela-ondeggia {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(1.6deg); }
}
@keyframes pn-filo-cala {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
@keyframes pn-filo-ondeggia {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(3deg); }
}
@keyframes pn-ragno-scende {
    0%        { transform: translateY(-190px) rotate(0deg); }
    30%       { transform: translateY(-70px) rotate(2deg); }
    45%       { transform: translateY(-84px) rotate(-2deg); }
    60%       { transform: translateY(-64px) rotate(1deg); }
    85%, 100% { transform: translateY(-190px) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pn-ragnatela, .pn-filo, .pn-ragno { animation: none; }
    .pn-ragno { transform: translateY(-84px); }
}

body[data-pn-tema="halloween"] .pn-hero-title { color: #fff; max-width: 15ch; margin-top: 0; }
body[data-pn-tema="halloween"] .pn-hero-city-wrap,
body[data-pn-tema="halloween"] .pn-hero-city {
    background: var(--pn-hw-zucca);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
body[data-pn-tema="halloween"] .pn-hero-citta__freccia { color: #F7853F; }
body[data-pn-tema="halloween"] .pn-hero-sub { color: var(--pn-hw-testo-2); max-width: 560px; }

/* L'etichetta sopra il titolo, con il suo spazio. */
.pn-sezione-kicker {
    display: block;
    margin: 0 0 18px;
    font-family: var(--pn-display, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.pn-sezione-kicker:empty { display: none; }
body[data-pn-tema="halloween"] .pn-sezione-kicker {
    width: fit-content;
    background: var(--pn-hw-zucca);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Chip delle notti. Il chip ha un bordo trasparente di 4px che allarga solo l'area
   toccabile (home-seo.css, giro UX 27/9): il riempimento deve fermarsi al padding,
   altrimenti il gradiente finisce sotto il bordo e si vedono bande ai lati. */
body[data-pn-tema="halloween"] #pn-time-chips .pn-chip {
    background: transparent padding-box;
    box-shadow: none;
}
body[data-pn-tema="halloween"] #pn-time-chips .pn-chip:hover {
    background: rgba(247, 133, 63, .12) padding-box;
    color: var(--pn-ink, #0E0F13);
}
body[data-pn-tema="halloween"] #pn-time-chips .pn-chip-active,
body[data-pn-tema="halloween"] #pn-time-chips .pn-chip-active:hover {
    background: var(--pn-hw-zucca) padding-box;
    color: #fff;
}
body[data-pn-tema="halloween"] .pn-section-title#pn-list-title { color: var(--pn-hw-notte); }
body[data-pn-tema="halloween"] .pn-load-more { border-color: #F7853F; }

/* Eventi a tema in testa: sulla card il nome della sezione (etichettaCard del JSON,
   es. «Halloween» con l'icona della zucca), testo bianco su zucca, sopra la categoria. */
.pn-card__tema {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    margin: 0 0 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--pn-font, 'Barlow', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
    color: #fff;
    /* Scuro abbastanza per il testo bianco (AA, > 4.5:1) su tutta la pillola. */
    background: var(--pn-ink, #0E0F13);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.pn-card[data-pn-a-tema] .pn-card__tema { background: linear-gradient(100deg, #B8321E, #A8480A); }
/* La zucca (js/pn-icone.js) prima del nome, gialla sulla pillola. */
.pn-card__tema .pn-icona { width: 14px; height: 14px; margin-right: 5px; color: #FECD3F; }

@media (max-width: 900px) {
    body[data-pn-tema="halloween"] .pn-hero { --pn-hw-gutter: 20px; --pn-hw-rientro: 28px; }
}
@media (max-width: 560px) {
    body[data-pn-tema="halloween"] .pn-hero { --pn-hw-gutter: 16px; --pn-hw-rientro: 20px; margin-top: 10px; padding: 34px 0 30px; }
    body[data-pn-tema="halloween"] .pn-hero .pn-container { padding: 0 16px; }
    body[data-pn-tema="halloween"] .pn-sezione-deco { border-radius: 24px; }
    .pn-sezione-luna { top: 16px; right: 18px; width: 40px; height: 40px; box-shadow: -8px 6px 0 0 #FECD3F; }
    .pn-ragnatela--sx { display: none; }
    .pn-ragnatela--dx { width: 104px; }
    .pn-filo--2 { display: none; }
    .pn-ragno { right: 24%; width: 26px; height: 170px; }
    .pn-ragno svg { width: 26px; height: 170px; }
    .pn-sezione-kicker { margin-bottom: 14px; font-size: 13px; }
    .pn-barra-speciale__dentro { height: 46px; gap: 10px; }
    .pn-barra-speciale__testo { font-size: 13px; }
    .pn-barra-speciale__testo strong { font-size: 16px; }
    .pn-barra-speciale__apri { padding: 5px 12px; font-size: 12px; }
}