/**
 * Animations — Microinterazioni, Reveal on scroll, Transizioni
 * Cristina Mazzitelli Interior Design Studio
 */

/* ── REVEAL ON SCROLL ─────────────────────────────────────────────────────── */

/* Stato iniziale: invisibile */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.reveal--left {
    transform: translateX(-32px);
}

.reveal--right {
    transform: translateX(32px);
}

.reveal--scale {
    transform: scale(0.96);
}

.reveal--fade {
    transform: none;
}

/* Stato finale: visibile (aggiunto da JS) */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Delay staggered per elementi in griglia */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 500ms; }

/* ── PARALLAX ─────────────────────────────────────────────────────────────── */
.parallax-container {
    overflow: hidden;
    position: relative;
}

.parallax-image {
    transform: translateY(0px);
    will-change: transform;
}

/* ── TEXT CLIP REVEAL ─────────────────────────────────────────────────────── */
.text-reveal {
    overflow: hidden;
    display: block;
}

.text-reveal__inner {
    display: block;
    transform: translateY(110%);
    transition: transform 0.9s var(--ease-out-expo);
}

.text-reveal.is-visible .text-reveal__inner {
    transform: translateY(0);
}

/* ── LINEA CHE SI DISEGNA ─────────────────────────────────────────────────── */
.line-draw {
    width: 0;
    transition: width 1s var(--ease-out-expo);
}

.line-draw.is-visible {
    width: 100%;
}

/* ── COUNTER ──────────────────────────────────────────────────────────────── */
.count-up {
    display: inline-block;
}

/* ── PAGE TRANSITION ──────────────────────────────────────────────────────── */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--color-anthracite);
    z-index: calc(var(--z-cursor) - 1);
    transform: scaleY(0);
    transform-origin: top;
    pointer-events: none;
}

.page-transition.is-entering {
    animation: pageEnter 0.5s var(--ease-in-out) forwards;
}

.page-transition.is-leaving {
    animation: pageLeave 0.5s var(--ease-in-out) forwards;
}

@keyframes pageEnter {
    from { transform: scaleY(1); transform-origin: bottom; }
    to   { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes pageLeave {
    from { transform: scaleY(0); transform-origin: top; }
    to   { transform: scaleY(1); transform-origin: top; }
}

/* ── IMAGE HOVER EFFECT ───────────────────────────────────────────────────── */
.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    transition: transform 0.8s var(--ease-out-expo);
    will-change: transform;
}

.img-hover-zoom:hover img {
    transform: scale(1.05);
}

/* ── GRADIENT MASK SOTTOTITOLO ─────────────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, var(--color-magenta), var(--color-lavender));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── PULSANTE HOVER FILL ──────────────────────────────────────────────────── */
.btn--animated {
    position: relative;
    z-index: 1;
}

.btn--animated::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-magenta);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out-expo);
}

.btn--animated:hover {
    color: var(--color-white);
    border-color: var(--color-magenta);
}

.btn--animated:hover::before {
    transform: scaleX(1);
}

/* ── PULSING DOT (elementi attivi/live) ──────────────────────────────────── */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-magenta);
    position: relative;
}

.pulse-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--color-magenta);
    opacity: 0.3;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50%       { transform: scale(1.6); opacity: 0; }
}

/* ── LOADING SKELETON ─────────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--color-champagne) 25%, var(--color-border) 50%, var(--color-champagne) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── SCROLL INDICATOR FRECCIA HERO ───────────────────────────────────────── */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator__line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--color-ivory));
}

.scroll-indicator__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: rgba(250,248,245,0.6);
    writing-mode: vertical-rl;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* ── PREFER REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .text-reveal__inner,
    .line-draw,
    .parallax-image,
    .img-hover-zoom img,
    .btn--animated::before,
    .scroll-indicator,
    .pulse-dot::before,
    .skeleton {
        transition: none;
        animation: none;
        transform: none;
        opacity: 1;
        width: auto;
    }
}