/* ==========================================================================
   CIFRE MEDIA — Capa de dinamismo. Aislada a propósito (fácil de ajustar/quitar).
   Todo GPU (transform/opacity) y gateado por prefers-reduced-motion.
   ========================================================================== */

/* ---------- Intro letterbox (barras cinematográficas que se abren) ---------- */
.lb-intro { position: fixed; inset: 0; z-index: 9996; pointer-events: none; }
.lb-intro__bar { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--carbon-950); }
.lb-intro__bar--top { top: 0; transform-origin: top; }
.lb-intro__bar--bottom { bottom: 0; transform-origin: bottom; }
.lb-intro__tc {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 0.6rem; opacity: 1; transition: opacity .35s var(--ease);
}
.lb-intro.is-open .lb-intro__bar { transform: scaleY(0); transition: transform 1s var(--ease); }
.lb-intro.is-open .lb-intro__tc { opacity: 0; transition: opacity .3s ease; }

/* ---------- Hero: entrada escalonada (CSS puro, sin FOUC si falla el JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .is-home .hero__kicker,
    .is-home .hero__title,
    .is-home .hero__sub,
    .is-home .hero__scroll {
        animation: hero-in 1s var(--ease-out) both;
    }
    .is-home .hero__kicker { animation-delay: 0.55s; }
    .is-home .hero__title  { animation-delay: 0.7s; }
    .is-home .hero__sub    { animation-delay: 0.9s; }
    .is-home .hero__scroll { animation-delay: 1.15s; }
}
@keyframes hero-in {
    from { opacity: 0; transform: translateY(26px); filter: brightness(0.5); }
    to   { opacity: 1; transform: none; filter: brightness(1); }
}

/* ---------- Título con "wipe" de exposición ---------- */
.will-wipe { clip-path: inset(0 100% 0 0); opacity: 0.35; filter: brightness(0.6); }
.will-wipe.is-wiped {
    clip-path: inset(0 0 0 0); opacity: 1; filter: brightness(1);
    transition: clip-path 1s var(--ease-out), opacity .8s var(--ease-out), filter 1s var(--ease-out);
}

/* ---------- Tilt 3D en cards de Trabajos (se aplica al bloque de imagen) ---------- */
.work-card { perspective: 1000px; }
.work-card__media { transition: transform .2s var(--ease), box-shadow .3s var(--ease); }
.work-card:hover .work-card__media { box-shadow: var(--shadow-lg); }

/* ---------- Botón magnético (transición suave del desplazamiento) ---------- */
.magnetic { will-change: transform; }

/* ---------- Marquee de disciplinas ---------- */
.marquee {
    overflow: hidden; border-block: 1px solid var(--line);
    padding-block: 1.15rem; background: var(--carbon-950);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: inline-flex; gap: 3rem; white-space: nowrap; will-change: transform; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
    font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.8rem);
    letter-spacing: -0.01em; color: var(--white); display: inline-flex; align-items: center; gap: 3rem;
    text-transform: uppercase;
}
.marquee__item::after { content: ""; width: 7px; height: 7px; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 8px var(--yellow); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; transform: none; }
    .lb-intro { display: none; }
    .will-wipe { clip-path: none; opacity: 1; filter: none; }
}