/* =========================================================
   FRAMEUP — SISTEMA DE MOVIMIENTO v2
   ---------------------------------------------------------
   Tesis de movimiento
     · Momento de autor: el visor del hero (marco de encuadre
       que "enfoca" + REC + subrayado). Es el motivo del isotipo.
     · Continuidad: transición entre páginas con View
       Transitions (sin retrasar la navegación).
     · Respuesta: todo lo que se pulsa responde en <160 ms.
     · Paneles y editores (uso diario): movimiento corto y
       funcional, sin coreografía de entrada.

   Reglas del manual de marca:
     - El logotipo no se anima ni lleva efectos.
     - Paleta: naranja #ED6B27 · carbón #1D1E1D · claros.
     - Personalidad: joven · creativa · cercana · dinámica.

   Con prefers-reduced-motion se quita el desplazamiento y se
   conservan los fundidos que comunican estado.
========================================================= */

:root {
    --fu-orange: var(--frameup-orange, #ED6B27);
    --fu-charcoal: var(--frameup-black, #1D1E1D);

    /* Curvas: salida fuerte para lo que entra, in-out para lo que se mueve */
    --fu-ease-out: cubic-bezier(.23, 1, .32, 1);
    --fu-ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --fu-ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --fu-ease: var(--fu-ease-out);           /* compatibilidad */

    --fu-t-press: 140ms;
    --fu-t-fast: 180ms;
    --fu-t-base: 240ms;
    --fu-t-slow: 420ms;
}


/* =========================================================
   1. TRANSICIÓN ENTRE PÁGINAS
   El navegador hace el fundido entre documentos: la
   navegación no espera a ninguna animación.
========================================================= */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: fu-vt-out 120ms ease both;
}

::view-transition-new(root) {
    animation: fu-vt-in 260ms var(--fu-ease-out) both;
}

@keyframes fu-vt-out { to { opacity: 0; } }

@keyframes fu-vt-in {
    from { opacity: 0; transform: translateY(6px); }
}

/* El header y el menú lateral no "parpadean" al cambiar de página */
.header { view-transition-name: fu-header; }
.frameup-dashboard-sidebar { view-transition-name: fu-sidebar; }

::view-transition-group(fu-header),
::view-transition-group(fu-sidebar) {
    animation-duration: 0s;
}


/* =========================================================
   2. RESPUESTA AL PULSAR
   `scale` es independiente de `transform`, así no pisa los
   hover de la plantilla. :where() = especificidad cero.
========================================================= */

:where(button, [role="button"], summary,
       a[class*="btn"], a[class*="button"], a[class*="cta"],
       label[class*="button"], label[class*="upload"],
       .frameup-camino-principal, .frameup-dashboard-user-card) {
    transition: scale var(--fu-t-press) var(--fu-ease-out);
}

:where(button, [role="button"], summary,
       a[class*="btn"], a[class*="button"], a[class*="cta"],
       label[class*="button"], label[class*="upload"],
       .frameup-camino-principal, .frameup-dashboard-user-card):not(:disabled):active {
    scale: .97;
}


/* =========================================================
   3. HEADER Y NAVEGACIÓN
========================================================= */

.header {
    transition: box-shadow var(--fu-t-base) ease;
}

.header.fu-scrolled {
    box-shadow: 0 8px 28px rgba(29, 30, 29, .10);
}

/* Subrayado naranja que se dibuja desde la izquierda */
.header .nav a:not(.activo):not(.active) {
    background-image: linear-gradient(var(--fu-orange), var(--fu-orange));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition:
        background-size var(--fu-t-base) var(--fu-ease-out),
        color var(--fu-t-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .header .nav a:not(.activo):not(.active):hover {
        background-size: 100% 2px;
    }
}

/* Menú lateral del panel: el icono avanza un paso al pasar */
.frameup-sidebar-nav a .frameup-sidebar-icon {
    transition: translate var(--fu-t-fast) var(--fu-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .frameup-sidebar-nav a:hover .frameup-sidebar-icon {
        translate: 2px 0;
    }
}


/* =========================================================
   4. APARICIÓN AL DESPLAZAR (solo páginas de presentación)
   El contenido es visible por defecto: la clase la pone el
   JS únicamente a lo que está fuera de pantalla.
========================================================= */

.fu-a {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity var(--fu-t-slow) var(--fu-ease-out) var(--fu-d, 0ms),
        transform var(--fu-t-slow) var(--fu-ease-out) var(--fu-d, 0ms);
}

.fu-a.fu-in {
    opacity: 1;
    transform: none;
}

/* Imágenes de presentación: se descubren como un telón */
.fu-a-wipe {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 700ms var(--fu-ease-in-out);
}

.fu-a-wipe.fu-in {
    clip-path: inset(0 0 0 0);
}


/* =========================================================
   5. LISTAS QUE APARECEN COMO LISTA
   Opt-in con [data-fu-stagger] en el contenedor.
========================================================= */

[data-fu-stagger] > * {
    animation: fu-a-item var(--fu-t-base) var(--fu-ease-out) backwards;
}

[data-fu-stagger] > :nth-child(2) { animation-delay: 40ms; }
[data-fu-stagger] > :nth-child(3) { animation-delay: 75ms; }
[data-fu-stagger] > :nth-child(4) { animation-delay: 105ms; }
[data-fu-stagger] > :nth-child(5) { animation-delay: 130ms; }
[data-fu-stagger] > :nth-child(n+6) { animation-delay: 150ms; }

@keyframes fu-a-item {
    from { opacity: 0; transform: translateY(8px); }
}


/* =========================================================
   6. CAPAS QUE SE ABREN (modales, avisos, menús)
   La animación corre cada vez que el elemento se muestra.
   Los modales crecen desde el centro; nunca desde scale(0).
========================================================= */

:where([role="dialog"], [class*="modal-card"], [class*="modal-content"],
       [class*="modal-box"], [class*="-dialog"]):not([hidden]) {
    animation: fu-a-dialog 260ms var(--fu-ease-out) backwards;
}

@keyframes fu-a-dialog {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
}

:where([class*="modal-backdrop"], [class*="modal-overlay"], [class$="-modal"]):not([hidden]) {
    animation: fu-a-fade var(--fu-t-fast) ease backwards;
}

:where([class*="dropdown"], [class*="popover"]):not([hidden]) {
    animation: fu-a-menu var(--fu-t-fast) var(--fu-ease-out) backwards;
    transform-origin: top right;
}

@keyframes fu-a-menu {
    from { opacity: 0; transform: translateY(-4px) scale(.97); }
}

@keyframes fu-a-fade { from { opacity: 0; } }


/* =========================================================
   7. TARJETAS Y MEDIOS
========================================================= */

/* Reels y portadas: zoom lento dentro del encuadre */
:where([class*="portfolio-card"], [class*="project-card"], [class*="proyecto-card"],
       [class*="reel-card"], [class*="talent-card"], [class*="profesional-card"]) :where(img, video) {
    transition: scale 600ms var(--fu-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    :where([class*="portfolio-card"], [class*="project-card"], [class*="proyecto-card"],
           [class*="reel-card"], [class*="talent-card"], [class*="profesional-card"]):hover :where(img, video) {
        scale: 1.04;
    }
}

/* Accesos del panel: la flecha del enlace avanza */
.frameup-dashboard-action > a {
    transition: letter-spacing var(--fu-t-base) var(--fu-ease-out), color var(--fu-t-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .frameup-dashboard-action:hover > a {
        letter-spacing: .02em;
    }
}

/* Cifras del panel: aparecen sin saltos de ancho */
.frameup-dashboard-stat strong {
    font-variant-numeric: tabular-nums;
}

.fu-a-tick {
    animation: fu-a-tick 320ms var(--fu-ease-out);
}

@keyframes fu-a-tick {
    from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
}


/* =========================================================
   8. FORMULARIOS
========================================================= */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
    transition:
        border-color var(--fu-t-fast) ease,
        box-shadow var(--fu-t-fast) ease,
        background-color var(--fu-t-fast) ease;
}

/* Opciones tipo tarjeta: el check aparece, no rebota */
[class*="option"] input[type="radio"]:checked ~ *,
[class*="option"] input[type="checkbox"]:checked ~ * {
    animation: fu-a-select var(--fu-t-fast) var(--fu-ease-out);
}

@keyframes fu-a-select {
    from { transform: scale(.97); }
}

/* Campo con error: se marca con color; el aviso entra con fundido */
.fu-field-error {
    animation: fu-a-item var(--fu-t-fast) var(--fu-ease-out);
}


/* =========================================================
   9. HERO DEL HOME — el momento de autor
   Visor de cámara: las esquinas "enfocan" el encuadre.
========================================================= */

.frameup-hero h1 span {
    background-image: linear-gradient(var(--fu-orange), var(--fu-orange));
    background-repeat: no-repeat;
    background-position: 0 96%;
    background-size: 0% 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    width: fit-content;
    max-width: 100%;
    animation: fu-a-underline 700ms var(--fu-ease-in-out) 900ms forwards;
}

@keyframes fu-a-underline {
    to { background-size: 100% 4px; }
}

/* La entrada por capas del hero la define index.html (.fu-home-reveal);
   aquí solo se ajusta al mismo ritmo que el resto del sistema. */
.fu-home-reveal {
    filter: blur(6px);
    transition-property: opacity, transform, filter !important;
    transition-duration: 560ms !important;
    transition-timing-function: var(--fu-ease-out) !important;
}

.fu-home-reveal.is-visible {
    filter: none;
}

.fu-a-viewfinder {
    position: absolute;
    inset: clamp(14px, 2.6vw, 40px);
    pointer-events: none;
}

.fu-a-corner {
    position: absolute;
    width: clamp(26px, 4vw, 58px);
    height: clamp(26px, 4vw, 58px);
    border: 0 solid rgba(255, 255, 255, .7);
    opacity: .85;
    animation: fu-a-lock 700ms var(--fu-ease-out) backwards;
}

.fu-a-corner.tl { top: 0;    left: 0;  border-top-width: 3px;    border-left-width: 3px;  border-top-left-radius: 12px;     transform-origin: 0 0;       animation-delay: 200ms; }
.fu-a-corner.tr { top: 0;    right: 0; border-top-width: 3px;    border-right-width: 3px; border-top-right-radius: 12px;    transform-origin: 100% 0;    animation-delay: 260ms; }
.fu-a-corner.bl { bottom: 0; left: 0;  border-bottom-width: 3px; border-left-width: 3px;  border-bottom-left-radius: 12px;  transform-origin: 0 100%;    animation-delay: 320ms; }
.fu-a-corner.br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 12px; transform-origin: 100% 100%; animation-delay: 380ms; }

/* Las esquinas llegan desde fuera del encuadre y se asientan */
@keyframes fu-a-lock {
    from { opacity: 0; transform: scale(1.5); }
}

/* Al mover el cursor el visor "respira": reencuadra un poco */
.fu-a-viewfinder {
    transition: inset 500ms var(--fu-ease-out);
}

.frameup-hero.fu-aiming .fu-a-viewfinder {
    inset: clamp(20px, 3.2vw, 52px);
}

/* Punto REC */
.fu-a-rec {
    position: absolute;
    top: clamp(26px, 3.6vw, 58px);
    right: clamp(64px, 7vw, 110px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--fu-orange);
    animation:
        fu-a-fade 400ms ease 900ms backwards,
        fu-a-rec 1.6s ease-in-out 1.3s infinite;
}

@keyframes fu-a-rec {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Foco de luz que sigue al cursor (solo puntero fino) */
.fu-a-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(237, 107, 39, .20) 0%, rgba(237, 107, 39, 0) 65%);
    transition: opacity 500ms ease;
}

.fu-a-glow.on { opacity: 1; }

@media (max-width: 900px) {
    .fu-a-glow { display: none; }
}


/* =========================================================
   10. TÍTULOS DE SECCIÓN DEL HOME
========================================================= */

.frameup-seccion-titulo h2,
.fu-section-heading h2 {
    background-image: linear-gradient(var(--fu-orange), var(--fu-orange));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 64px 3px;
    padding-bottom: 6px;
}

html.fu-anim .frameup-seccion-titulo.fu-a h2,
html.fu-anim .fu-section-heading.fu-a h2 {
    background-size: 0 3px;
    transition: background-size 600ms var(--fu-ease-in-out) 200ms;
}

html.fu-anim .frameup-seccion-titulo.fu-in h2,
html.fu-anim .fu-section-heading.fu-in h2 {
    background-size: 64px 3px;
}


/* =========================================================
   MOVIMIENTO REDUCIDO
   Menos y más suave: se quita el desplazamiento, se dejan
   los fundidos que confirman una acción o un cambio.
========================================================= */

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: fu-a-fade 120ms ease both;
    }

    ::view-transition-old(root) { animation-direction: reverse; }

    .fu-a,
    .fu-a-wipe {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    [data-fu-stagger] > *,
    :where([role="dialog"], [class*="modal-card"], [class*="modal-content"], [class*="modal-box"], [class*="-dialog"]):not([hidden]),
    :where([class*="dropdown"], [class*="popover"]):not([hidden]),
    .fu-a-tick,
    .fu-field-error {
        animation: fu-a-fade 150ms ease backwards !important;
    }

    .fu-home-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .fu-a-corner,
    .fu-a-rec,
    [class*="option"] input:checked ~ * {
        animation: none !important;
    }

    .frameup-hero h1 span {
        animation: none !important;
        background-size: 100% 4px !important;
    }

    .fu-a-glow { display: none !important; }

    :where(button, [role="button"], a, label, summary):active { scale: 1 !important; }

    :where(img, video) { scale: 1 !important; }

    html { scroll-behavior: auto !important; }
}