/* =========================================================================
   Oddono's — Motion layer
   Editorial reveals, masks, micro-interactions
   ========================================================================= */

/* ---------- Word-stagger reveal (auto-applied to .reveal-words via JS) ---------- */
.reveal-words .w {
    display: inline-block;
    overflow: hidden;
    line-height: 1.05;
    vertical-align: top;
}
.reveal-words .w > i {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 0.95s var(--ease-out-strong),
                opacity 0.95s var(--ease-out-strong);
    font-style: inherit;
    will-change: transform;
}
.reveal-words.in-view .w > i {
    transform: translateY(0);
    opacity: 1;
}

/* ---------- Image mask reveal ---------- */
.mask-reveal {
    position: relative;
    overflow: hidden;
}
.mask-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cream);
    transform-origin: bottom;
    transform: scaleY(1);
    transition: transform 1.1s var(--ease-out-strong);
    z-index: 2;
    pointer-events: none;
}
.mask-reveal.in-view::after { transform: scaleY(0); }
.mask-reveal img,
.mask-reveal picture {
    transform: scale(1.12);
    transition: transform 1.6s var(--ease-out-strong);
}
.mask-reveal.in-view img,
.mask-reveal.in-view picture { transform: scale(1); }

/* ---------- Line rise reveal ---------- */
.line-rise {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1s var(--ease-out-strong),
                transform 1s var(--ease-out-strong);
}
.line-rise.in-view { opacity: 1; transform: translateY(0); }
.line-rise.delay-1 { transition-delay: 0.08s; }
.line-rise.delay-2 { transition-delay: 0.16s; }
.line-rise.delay-3 { transition-delay: 0.24s; }
.line-rise.delay-4 { transition-delay: 0.32s; }
.line-rise.delay-5 { transition-delay: 0.4s; }

/* ---------- Soft fade ---------- */
.soft-fade { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.soft-fade.in-view { opacity: 1; }

/* ---------- Hover link underline ---------- */
.hov-link {
    position: relative;
    display: inline-block;
}
.hov-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--ease-out-strong);
}
.hov-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------- Magnetic helper ---------- */
.magnetic {
    transition: transform 0.4s var(--ease-out);
    will-change: transform;
}

/* ---------- Subtle float (accent badges) ---------- */
@keyframes softFloat {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-6px) rotate(-6deg); }
}
.float-soft { animation: softFloat 5s var(--ease-in-out) infinite; }

/* ---------- Counter glow ---------- */
@keyframes countPulse {
    0% { color: var(--ink); }
    50% { color: var(--pistachio-deep); }
    100% { color: var(--ink); }
}
.stat-number.counting { animation: countPulse 1.4s var(--ease-out); }

/* Marquee shimmer removed for performance */

/* ---------- Page transition ---------- */
.page-leave {
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
}

/* ---------- FAB intro ---------- */
@keyframes fabIntro {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
.fab-button {
    animation: fabIntro 0.6s var(--ease-out-strong) 1.2s backwards;
}

/* Hero corner badge — static, no infinite animation */

/* ---------- Reduced motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal-words .w > i,
    .line-rise,
    .soft-fade,
    .mask-reveal::after,
    .mask-reveal img {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .float-soft, .hero__corner, .fab-button { animation: none !important; }
}