/*
 * Moviaggio.it — Effetti professionali (addon)
 *
 * @version 3.1 — Aprile 2026
 *
 * Carica DOPO moviaggio.css. Aggiunge:
 *   1.  Parallax hero (richiede js/moviaggio-effects.js)
 *   2.  Scroll reveal scaglionato (richiede js/moviaggio-effects.js)
 *   3.  Progress bar di lettura (zero JS, scroll-driven CSS)
 *   4.  Marquee continenti (CSS-only animation)
 *   5.  Magnetic CTA (richiede js/moviaggio-effects.js)
 *   6.  Image reveal con bussola SVG su city card hover
 *   7.  Link underline elastica
 *   8.  Grain overlay SVG inline (texture cartacea)
 *   9.  Drop cap ornato (già parte di moviaggio.css come .mv-lede)
 *   10. Ornamenti SVG nei separatori
 *   11. View Transitions API (progressive enhancement)
 *
 * Tutti gli effetti rispettano @media (prefers-reduced-motion: reduce).
 */

/* ============================================================
   EFFETTO 8: GRAIN OVERLAY (texture cartacea)
   SVG noise inline come data URI, fixed sopra tutto a 3.5% opacity.
   blend mode multiply per integrarsi col background.
   ============================================================ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
}

/* ============================================================
   EFFETTO 3: PROGRESS BAR DI LETTURA
   CSS scroll-driven animation (Chromium 115+, Safari 17+).
   Graceful fallback: rimane invisibile su browser vecchi.
   ============================================================ */
.mv-reading-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 1000;
    pointer-events: none;
}
.mv-reading-progress::before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--mv-terra) 0%, var(--mv-ochre) 100%);
    transform-origin: left;
    transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
    .mv-reading-progress::before {
        animation: mv-reading-grow linear forwards;
        animation-timeline: scroll(root);
    }
}
@keyframes mv-reading-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ============================================================
   EFFETTO 1: PARALLAX HERO
   La trasformazione viene applicata da JS. Qui prepariamo
   will-change per performance (GPU layer).
   ============================================================ */
.mv-hero__bg[data-parallax] {
    will-change: transform;
}
.mv-hero__bg[data-parallax] img {
    height: 115%;  /* extra altezza per coprire durante lo scroll */
}

/* ============================================================
   EFFETTO 2: SCROLL REVEAL SCAGLIONATO
   Stato iniziale = invisibile + offset 28px.
   La classe .is-visible viene aggiunta da JS (IntersectionObserver).
   ============================================================ */
.mv-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms cubic-bezier(.2,.6,.2,1),
                transform 700ms cubic-bezier(.2,.6,.2,1);
    transition-delay: var(--mv-reveal-delay, 0ms);
}
.mv-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .mv-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   EFFETTO 4: MARQUEE CONTINENTI
   Banner orizzontale stile Le Monde / NYT, pausa on hover.
   La classe .mv-marquee__track deve contenere il contenuto
   DUPLICATO (necessario per loop continuo).
   ============================================================ */
.mv-marquee {
    overflow: hidden;
    position: relative;
    border-block: 1px solid var(--mv-pearl);
    padding-block: var(--space-5);
    background: var(--mv-bone);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.mv-marquee__track {
    display: flex;
    gap: var(--space-8);
    width: max-content;
    animation: mv-marquee 40s linear infinite;
}
.mv-marquee:hover .mv-marquee__track {
    animation-play-state: paused;
}
.mv-marquee__item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--mv-deep-sea);
    text-decoration: none;
    transition: color var(--t-fast);
    flex-shrink: 0;
}
.mv-marquee__item:hover { color: var(--mv-terra); }
.mv-marquee__count {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--mv-stone);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.mv-marquee__star {
    color: var(--mv-terra);
    font-size: 1.2em;
    margin-inline: var(--space-3);
}
@keyframes mv-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .mv-marquee__track { animation: none; }
}

/* ============================================================
   EFFETTO 5: MAGNETIC CTA
   Transizione più morbida del default (spring-like).
   Il transform viene applicato via JS al mousemove.
   ============================================================ */
.mv-btn--magnetic {
    transition: transform 200ms cubic-bezier(.2,.9,.3,1.1),
                background var(--t-fast),
                border-color var(--t-fast);
    will-change: transform;
}

/* ============================================================
   EFFETTO 6: IMAGE REVEAL + BUSSOLA SVG su city card hover
   La bussola SVG (.mv-city-card__compass) appare nell'angolo
   alto-destro al passaggio del mouse, con bounce + rotation.
   ============================================================ */
.mv-city-card__compass {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(212, 160, 76, 0.4);
    color: var(--mv-ochre);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    background: rgba(10, 37, 64, 0.3);
    opacity: 0;
    transform: scale(0.7) rotate(-45deg);
    transition: opacity 400ms cubic-bezier(.2,.9,.3,1.1),
                transform 500ms cubic-bezier(.2,.9,.3,1.1);
}
.mv-city-card:hover .mv-city-card__compass {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.mv-city-card:hover .mv-city-card__img {
    transform: scale(1.08);
    filter: saturate(1.15);
}
.mv-city-card:hover {
    box-shadow: 0 20px 50px rgba(10, 37, 64, 0.25);
}
.mv-city-card__img {
    transition: transform 800ms cubic-bezier(.2,.6,.2,1),
                filter 600ms;
}

/* Animazione hero italic underline (sotto la "mò") */
.mv-hero__title em {
    position: relative;
    display: inline-block;
}
.mv-hero__title em::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0.06em;
    height: 0.12em;
    background: var(--mv-terra);
    transform: scaleX(0);
    transform-origin: left;
    animation: mv-underline-mo 800ms 1s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes mv-underline-mo {
    0%   { transform: scaleX(0); }
    60%  { transform: scaleX(1.02); }
    100% { transform: scaleX(1); }
}

/* ============================================================
   EFFETTO 7: LINK UNDERLINE ELASTICA
   Background-size animato: l'underline cresce da sinistra in 320ms.
   Da applicare con .mv-text dentro corpo articolo.
   ============================================================ */
.mv-text a,
.mv-post-card__excerpt a,
.mv-city-section__body a {
    position: relative;
    color: var(--mv-deep-sea);
    text-decoration: none;
    background-image: linear-gradient(var(--mv-terra), var(--mv-terra));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 320ms cubic-bezier(.65, 0, .35, 1),
                color var(--t-fast);
    padding-bottom: 1px;
}
.mv-text a:hover,
.mv-post-card__excerpt a:hover,
.mv-city-section__body a:hover {
    background-size: 100% 1px;
    color: var(--mv-terra);
}

/* ============================================================
   EFFETTO 10: ORNAMENTI SVG NEI SEPARATORI
   Sostituiscono l'<hr> standard con un ornamento centrato +
   linee laterali in fade. Da inserire come <div class="mv-ornament">
   con SVG figlio.
   ============================================================ */
.mv-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-7) auto;
    color: var(--mv-terra);
    opacity: 0.7;
}
.mv-ornament::before,
.mv-ornament::after {
    content: "";
    flex: 0 0 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%);
}
.mv-ornament svg {
    margin: 0 var(--space-4);
    width: 24px;
    height: 24px;
}

/* ============================================================
   CTA block — gradienti decorativi extra (radial)
   ============================================================ */
.mv-cta-block::after {
    content: "";
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mv-terra) 0%, transparent 65%);
    opacity: 0.15;
}
.mv-cta-block__inner { position: relative; z-index: 1; }

/* Footer socials hover lift */
.mv-site-footer__socials a {
    transition: border-color var(--t-fast),
                background var(--t-fast),
                transform var(--t-fast);
}
.mv-site-footer__socials a:hover {
    transform: translateY(-2px);
}

/* Newsletter submit hover lift */
.mv-newsletter__submit {
    transition: background var(--t-fast),
                transform var(--t-fast);
}
.mv-newsletter__submit:hover {
    transform: translateY(-1px);
}

/* ============================================================
   EFFETTO 11: VIEW TRANSITIONS API (progressive enhancement)
   Chrome 111+, Safari 18+, Edge. Browser non supportati ignorano
   silenziosamente. Aggiunge fade morbido tra navigation.
   ============================================================ */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: mv-fade-out 200ms ease-out forwards;
}
::view-transition-new(root) {
    animation: mv-fade-in 280ms ease-in forwards;
}
@keyframes mv-fade-out {
    to { opacity: 0; }
}
@keyframes mv-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}