/* ═══════════════════════════════════════════════════
   PetraS – Associazione Culturale di Petrella Salto
   v3.0 – GDPR compliant (font locali, no CDN terze parti)
   ═══════════════════════════════════════════════════ */

/* ═══════ FONT LOCALI (GDPR compliant) ═══════ */
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-display-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-display-latin-700-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-latin-300-normal.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --petraGreen: #004333;
    --petraOrange: #E0661A;
    --petraStone: #F5F1F0;
    --petraDark: #1a1a1a;
}

/* ═══════ NAVBAR ═══════ */
.nav-glass {
    background: linear-gradient(to bottom, rgba(245, 241, 240, 0.92), rgba(245, 241, 240, 0.7));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 67, 51, 0.08);
    transition: all 0.4s ease;
}

.nav-solid {
    background: rgba(245, 241, 240, 0.98) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ═══════ REVEAL ON SCROLL ═══════ */
.reveal {
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ═══════ SCROLLBAR ═══════ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--petraStone); }
::-webkit-scrollbar-thumb { background: var(--petraGreen); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #00594a; }

/* ═══════ SELECTION ═══════ */
::selection {
    background: rgba(0, 67, 51, 0.15);
    color: var(--petraDark);
}

/* ═══════ FOCUS (A11y) ═══════ */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--petraOrange);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ═══════ REDUCED MOTION (A11y) ═══════ */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 640px) {
    .reveal { transform: translateY(20px); }
}

/* ═══════ LOGO FLOAT ANIMATION ═══════ */
@keyframes logoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(0.5deg); }
    50% { transform: translateY(-12px) rotate(0deg); }
    75% { transform: translateY(-6px) rotate(-0.5deg); }
}

.logo-float {
    animation: logoFloat 5s ease-in-out infinite;
}

/* ═══════ LOGO GRAYSCALE → COLOR ═══════ */
@keyframes logoColorize {
    0% { filter: grayscale(100%) brightness(0.8); }
    100% { filter: grayscale(0%) brightness(1); }
}

.logo-colorize {
    filter: grayscale(100%) brightness(0.8);
    animation: logoColorize 2s ease-out 0.5s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .logo-float { animation: none; }
    .logo-colorize { animation: none; filter: none; }
    .hero-illuminate { animation: none; filter: brightness(0.55); }
    .hero-lights .light { animation: none; opacity: 0.5; }
}

/* ═══════ HERO ILLUMINATION — "il paese si accende" ═══════ */
@keyframes heroIlluminate {
    0%   { filter: brightness(0.15) saturate(0.15); }
    25%  { filter: brightness(0.3) saturate(0.4); }
    50%  { filter: brightness(0.45) saturate(0.7); }
    100% { filter: brightness(0.6) saturate(1); }
}

.hero-illuminate {
    filter: brightness(0.15) saturate(0.15);
    animation: heroIlluminate 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

/* ═══════ LUCI DELLE CASE ═══════ */
@keyframes lightOn {
    0%   { opacity: 0; transform: scale(0.3); }
    40%  { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 0.7; transform: scale(1.2); }
    80%  { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes lightFlicker {
    0%, 100% { opacity: 0.85; }
    10% { opacity: 1; }
    30% { opacity: 0.7; }
    50% { opacity: 0.95; }
    70% { opacity: 0.75; }
    90% { opacity: 1; }
}

.hero-lights .light {
    position: absolute;
    width: var(--s, 3px);
    height: var(--s, 3px);
    background: #ffe4a0;
    border-radius: 50%;
    box-shadow:
        0 0 var(--g, 10px) 2px rgba(255, 220, 130, 0.6),
        0 0 calc(var(--g, 10px) * 2) 4px rgba(255, 200, 80, 0.3),
        0 0 calc(var(--g, 10px) * 3) 6px rgba(255, 180, 50, 0.15);
    opacity: 0;
    animation:
        lightOn 1.5s ease-out var(--d, 2s) forwards,
        lightFlicker 3s ease-in-out calc(var(--d, 2s) + 1.5s) infinite;
}

/* ═══════ PRINT ═══════ */
@media print {
    header, footer { display: none; }
    section { page-break-inside: avoid; }
    .reveal { opacity: 1 !important; transform: none !important; }
}