/* ==========================================================================
   Di Mauro — Scrittore | Animazioni
   Animazioni CSS base + classi per integrazione con GSAP ScrollTrigger
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stati iniziali per animazioni GSAP
   Gli elementi partono nascosti e GSAP li anima con ScrollTrigger.
   Se JS non e' disponibile, gli elementi restano visibili (progressive enhancement).
   -------------------------------------------------------------------------- */

/* Stato iniziale: invisibile, traslato verso il basso */
.js .anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
}

/* Stato iniziale: invisibile, traslato da sinistra */
.js .anim-fade-left {
    opacity: 0;
    transform: translateX(-30px);
}

/* Stato iniziale: invisibile, traslato da destra */
.js .anim-fade-right {
    opacity: 0;
    transform: translateX(30px);
}

/* Stato iniziale: scala ridotta */
.js .anim-scale-in {
    opacity: 0;
    transform: scale(0.9);
}

/* Stato iniziale: reveal con clip-path */
.js .anim-reveal {
    clip-path: inset(0 0 100% 0);
}

/* SplitText — caratteri */
.js .anim-split-chars .char {
    opacity: 0;
    transform: translateY(40px) rotateX(-45deg);
    transform-origin: bottom;
}

/* SplitText — parole */
.js .anim-split-words .word {
    opacity: 0;
    transform: translateY(20px);
}

/* Clip reveal — wipe orizzontale */
.js .anim-clip-reveal {
    clip-path: inset(0 100% 0 0);
}

/* Blur in */
.js .anim-blur-in {
    opacity: 0;
    filter: blur(10px);
}

/* Mask up — contenuto sale da dietro una maschera */
.js .anim-mask-up {
    clip-path: inset(100% 0 0 0);
}

/* Rotate in */
.js .anim-rotate-in {
    opacity: 0;
    transform: rotate(-5deg) translateY(30px);
}

/* Classe applicata da GSAP quando l'animazione e' completata */
.anim-complete {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}

/* Classe trigger per scroll — applicata da JS quando l'elemento entra nel viewport */
.is-visible {
    opacity: 1 !important;
    transform: none !important;
}


/* --------------------------------------------------------------------------
   2. Keyframes CSS
   -------------------------------------------------------------------------- */

/* Ken Burns — zoom lento per hero immagine */
@keyframes ken-burns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}

.ken-burns {
    animation: ken-burns 20s ease-in-out alternate infinite;
}

/* Fade in semplice */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fade-in {
    animation: fade-in 0.6s ease both;
}

/* Fade up */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in da destra */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Pulse per elementi in attesa (es. loading) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Gradient shift — ciclo background-position */
@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Shimmer — effetto skeleton loading */
@keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-bg) 50%, var(--color-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease infinite;
}

/* Float — oscillazione verticale leggera */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Text wipe — reveal da sinistra */
@keyframes text-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Scroll line indicator */
@keyframes scroll-line {
    0%   { transform: translateY(0); opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translateY(16px); opacity: 0; }
}

/* Spinner — rotazione continua per indicatori di caricamento */
@keyframes spinner {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Hero scroll bounce — freccia indicatore scroll */
@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* Classi animate-* con delay variabile per uso senza GSAP */
.animate-fade-up {
    animation: fadeUp 0.6s ease both;
}

.animate-fade-in {
    animation: fade-in 0.6s ease both;
}

.animate-slide-in {
    animation: slideInRight 0.6s ease both;
}

.animate-fade-up[data-delay="1"] { animation-delay: 100ms; }
.animate-fade-up[data-delay="2"] { animation-delay: 200ms; }
.animate-fade-up[data-delay="3"] { animation-delay: 300ms; }
.animate-fade-up[data-delay="4"] { animation-delay: 400ms; }
.animate-fade-up[data-delay="5"] { animation-delay: 500ms; }


/* --------------------------------------------------------------------------
   3. Transizioni hover per elementi interattivi
   -------------------------------------------------------------------------- */

/* Bottone con effetto ombra al hover */
.btn-hover-lift {
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-hover-lift:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Link con sottolineatura animata */
.link-underline {
    position: relative;
    text-decoration: none;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}

.link-underline:hover::after {
    width: 100%;
}

/* Magnetic hover — JS applica transform dinamicamente */
.magnetic {
    transition: transform var(--transition-spring);
    will-change: transform;
}

/* Custom cursor dot */
.cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    pointer-events: none;
    z-index: var(--z-tooltip);
    mix-blend-mode: difference;
    transition: width 0.3s, height 0.3s, transform 0.3s;
}

.cursor-dot--expanded {
    width: 40px;
    height: 40px;
}

/* Section heading — sottolineatura animata */
.section-heading::after {
    transition: width var(--transition-smooth);
    width: 0;
}

.section-heading.is-visible::after {
    width: 80px;
}


/* --------------------------------------------------------------------------
   4. Stagger delay utilities
   Usate in combinazione con GSAP per ritardi progressivi nelle griglie.
   -------------------------------------------------------------------------- */
.stagger-1  { --stagger-delay: 0ms; }
.stagger-2  { --stagger-delay: 100ms; }
.stagger-3  { --stagger-delay: 200ms; }
.stagger-4  { --stagger-delay: 300ms; }
.stagger-5  { --stagger-delay: 400ms; }
.stagger-6  { --stagger-delay: 500ms; }
.stagger-7  { --stagger-delay: 600ms; }
.stagger-8  { --stagger-delay: 700ms; }
.stagger-9  { --stagger-delay: 800ms; }
.stagger-10 { --stagger-delay: 900ms; }
.stagger-11 { --stagger-delay: 1000ms; }
.stagger-12 { --stagger-delay: 1100ms; }


/* --------------------------------------------------------------------------
   5. Parallax depth layers
   -------------------------------------------------------------------------- */
.parallax-deep { transform: translateZ(-300px) scale(2); }
.parallax-mid  { transform: translateZ(-150px) scale(1.5); }
.parallax-near { transform: translateZ(0); }


/* --------------------------------------------------------------------------
   6. Reduced motion — rispetta le preferenze utente
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ken-burns {
        animation: none;
    }

    .js .anim-fade-up,
    .js .anim-fade-left,
    .js .anim-fade-right,
    .js .anim-scale-in,
    .js .anim-reveal,
    .js .anim-split-chars .char,
    .js .anim-split-words .word,
    .js .anim-clip-reveal,
    .js .anim-blur-in,
    .js .anim-mask-up,
    .js .anim-rotate-in {
        opacity: 1;
        transform: none;
        clip-path: none;
        filter: none;
    }
}