/* =========================================================
   Valkora — effetti visivi condivisi (fx)
   Particelle, aurora, parallasse, comparsa allo scroll,
   tilt 3D e microinterazioni.

   Regola d'oro: questo foglio NON tocca le classi del sito.
   Stila solo classi proprie (.fx-*), assegnate da js/fx.js
   agli elementi giusti pagina per pagina. Se fx.js non parte,
   la pagina resta esattamente com'era.
   ========================================================= */

:root {
    --fx-accent: #ff1f3d;
    --fx-accent-2: #d4a017;
}

/* ---------- Livelli di sfondo (iniettati da fx.js) ---------- */

.fx-aurora,
.fx-grain,
#fx-embers,
.fx-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

.fx-aurora {
    inset: 0;
    overflow: hidden;
}

.fx-aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.15;
    will-change: transform;
    animation: fx-drift 30s ease-in-out infinite;
}

.fx-aurora span:nth-child(1) { width: 48vw; height: 48vw; left: -14vw;  top: -12vw;    background: #b60d2d; }
.fx-aurora span:nth-child(2) { width: 36vw; height: 36vw; right: -10vw; top: 26vh;     background: #8c5bff; animation-delay: -10s; }
.fx-aurora span:nth-child(3) { width: 32vw; height: 32vw; left: 34vw;   bottom: -14vw; background: #d4a017; opacity: 0.08; animation-delay: -19s; }

@keyframes fx-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(3.5vw, -4vh, 0) scale(1.14); }
}

/* Attenuazione nelle pagine di lettura e nel pannello admin */
.fx-quiet .fx-aurora span { opacity: 0.07; }
.fx-quiet .fx-aurora span:nth-child(3) { opacity: 0.04; }

.fx-grain {
    inset: 0;
    opacity: 0.035;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 0.5px, transparent 0.6px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.6) 0.5px, transparent 0.6px),
        radial-gradient(circle at 45% 85%, rgba(255,255,255,0.7) 0.5px, transparent 0.6px);
    background-size: 140px 140px, 190px 190px, 240px 240px;
    animation: fx-grain-shift 22s linear infinite;
}

@keyframes fx-grain-shift {
    to { background-position: 140px 140px, -190px 190px, 240px -240px; }
}

#fx-embers {
    inset: 0;
    display: block;
}

/* Alone che segue il puntatore */
.fx-cursor {
    top: 0;
    left: 0;
    width: 380px;
    height: 380px;
    margin: -190px 0 0 -190px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--fx-accent) 16%, transparent),
        color-mix(in srgb, var(--fx-accent-2) 7%, transparent) 45%,
        transparent 70%);
    transition: opacity 0.45s ease;
    will-change: transform;
}

.fx-cursor.is-on { opacity: 1; }

/* ---------- Comparsa allo scroll ---------- */

.fx-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.fx-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Titoli con luce che scorre ---------- */

.fx-shimmer {
    background: linear-gradient(100deg,
        currentColor 20%,
        color-mix(in srgb, var(--fx-accent-2) 85%, white) 38%,
        color-mix(in srgb, var(--fx-accent) 75%, white) 50%,
        currentColor 68%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fx-shimmer 7s ease-in-out infinite;
}

@keyframes fx-shimmer {
    0%, 100% { background-position: 130% 0; }
    50%      { background-position: -30% 0; }
}

/* ---------- Schede: tilt 3D, alone d'accento, riflesso ---------- */

.fx-card {
    transform-style: preserve-3d;
    transition: transform 0.18s ease-out, border-color 0.3s ease, box-shadow 0.35s ease;
}

.fx-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(420px circle at var(--fx-x, 50%) var(--fx-y, 0%),
        color-mix(in srgb, var(--fx-card-accent, var(--fx-accent)) 20%, transparent), transparent 60%);
}

.fx-card:hover::after,
.fx-card:focus-within::after { opacity: 1; }

.fx-card:hover {
    border-color: color-mix(in srgb, var(--fx-card-accent, var(--fx-accent)) 50%, transparent);
    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.42),
        0 0 0 1px color-mix(in srgb, var(--fx-card-accent, var(--fx-accent)) 28%, transparent),
        0 0 46px -10px color-mix(in srgb, var(--fx-card-accent, var(--fx-accent)) 55%, transparent);
}

/* La copertina/immagine si stacca dal piano della scheda */
.fx-card .fx-lift {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
    will-change: transform;
}

.fx-card:hover .fx-lift {
    transform: translateZ(42px) scale(1.05);
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.5));
}

/* Riflesso che scorre sull'immagine della scheda */
.fx-sheen { position: relative; overflow: hidden; }

.fx-sheen::after {
    content: '';
    position: absolute;
    top: -120%;
    left: -60%;
    width: 60%;
    height: 340%;
    pointer-events: none;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-card:hover .fx-sheen::after { left: 130%; }

/* ---------- Microinterazioni sui bottoni ---------- */

.fx-btn { position: relative; overflow: hidden; }

.fx-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: transform 0.6s ease;
}

.fx-btn:hover::before { transform: translateX(100%); }

/* Scintilla al clic */
.fx-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #fff, var(--fx-accent) 40%, transparent 70%);
    animation: fx-spark-out 0.55s ease-out forwards;
}

@keyframes fx-spark-out {
    from { transform: scale(0.4); opacity: 0.9; }
    to   { transform: scale(9);   opacity: 0; }
}

/* ---------- Chi preferisce meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
    .fx-aurora span,
    .fx-grain,
    .fx-shimmer { animation: none !important; }

    .fx-shimmer { background-position: 0 0; }

    #fx-embers,
    .fx-cursor { display: none !important; }

    .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

    .fx-card,
    .fx-card .fx-lift,
    .fx-sheen::after { transition: none !important; }
}