/* ═══════════════════════════════════════════════════════════════════
   Quibo (matriz) showcase — claro + gradientes pastel
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base ────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: #FAFAF8;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: #1E293B;
    color: #FAFAF8;
}

a:focus-visible,
button:focus-visible,
[data-agent-demo]:focus-visible {
    outline: 2px solid #1E293B;
    outline-offset: 3px;
    border-radius: 6px;
}

.font-display {
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "liga" 1, "calt" 1, "ss01" 1;
}

/* ── Scroll progress bar ─────────────────────────────────────── */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform-origin: left center;
    transform: scaleX(var(--scroll, 0));
    background: linear-gradient(90deg, #7dd3fc 0%, #c084fc 50%, #fda4af 100%);
    z-index: 60;
    pointer-events: none;
    will-change: transform;
}

/* ── Noise overlay (grado editorial) ─────────────────────────── */

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* ── Console spotlight (cursor-follow en agent demo) ─────────── */

[data-agent-demo] {
    --mx: 50%;
    --my: 50%;
}

[data-agent-demo]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        240px circle at var(--mx) var(--my),
        rgba(125, 211, 252, 0.18) 0%,
        rgba(216, 180, 254, 0.10) 35%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

[data-agent-demo]:hover::after,
[data-agent-demo]:focus-within::after {
    opacity: 1;
}

/* ── Header logo microinteracción ────────────────────────────── */

.header-logo img,
.header-logo span {
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
}

.header-logo:hover img {
    transform: translateY(-1px) rotate(-6deg);
}

.header-logo:hover span {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .header-logo:hover img,
    .header-logo:hover span { transform: none; }
    [data-agent-demo]::after { display: none; }
    .scroll-progress { display: none; }
}

/* ── Gradient meshes de atmósfera ────────────────────────────── */

/* Wrapper pattern: cada mesh tiene un ::before con el gradiente y un mask
   que desvanece el gradiente en los bordes superior e inferior para que
   no se vea una línea dura al cambiar de sección. El bg-sheet base del
   body sigue visible detrás. */

.mesh-hero,
.mesh-process,
.mesh-cta,
.mesh-case {
    background: #FAFAF8;
    position: relative;
    isolation: isolate;
}

.mesh-hero::before,
.mesh-process::before,
.mesh-cta::before,
.mesh-case::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
}

.mesh-hero::before {
    background:
        radial-gradient(ellipse 60% 50% at 20% 45%, rgba(186, 230, 253, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 40%, rgba(253, 164, 175, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 60%, rgba(253, 186, 116, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 85% 55%, rgba(216, 180, 254, 0.50) 0%, transparent 60%);
}

.mesh-process::before {
    background:
        radial-gradient(ellipse 50% 40% at 15% 45%, rgba(216, 180, 254, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 85% 55%, rgba(186, 230, 253, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 50% 65%, rgba(253, 164, 175, 0.40) 0%, transparent 65%);
}

.mesh-cta::before {
    background:
        radial-gradient(ellipse 55% 40% at 25% 50%, rgba(186, 230, 253, 0.60) 0%, transparent 65%),
        radial-gradient(ellipse 55% 40% at 75% 55%, rgba(253, 186, 116, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 45% 30% at 50% 60%, rgba(216, 180, 254, 0.50) 0%, transparent 65%);
}

.mesh-case::before {
    background:
        radial-gradient(ellipse 60% 45% at 50% 50%, rgba(187, 247, 208, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 20% 45%, rgba(204, 251, 241, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 80% 55%, rgba(204, 251, 241, 0.45) 0%, transparent 65%);
}

/* ── Orbs pastel animados ────────────────────────────────────── */

.pastel-orb {
    position: absolute;
    pointer-events: none;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: 0.7;
    animation: orb-drift 16s ease-in-out infinite alternate;
}

.pastel-orb-sky    { background: radial-gradient(circle, #bae6fd 0%, transparent 70%); }
.pastel-orb-rose   { background: radial-gradient(circle, #fecdd3 0%, transparent 70%); }
.pastel-orb-peach  { background: radial-gradient(circle, #fed7aa 0%, transparent 70%); }
.pastel-orb-mint   { background: radial-gradient(circle, #bbf7d0 0%, transparent 70%); }
.pastel-orb-lavender { background: radial-gradient(circle, #e9d5ff 0%, transparent 70%); }

@keyframes orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(22px, -18px) scale(1.06); }
}

/* ── Hero SVG underline animado ──────────────────────────────── */

.hero-underline svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hero-underline path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: draw-underline 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

@keyframes draw-underline {
    to { stroke-dashoffset: 0; }
}

/* ── Agent demo console ──────────────────────────────────────── */

[data-agent-panel] {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

@keyframes agent-fade-in {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.agent-thinking-dot {
    animation: agent-thinking-pulse 1.4s ease-in-out infinite;
}

@keyframes agent-thinking-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* ── Card tilt + glow ────────────────────────────────────────── */

.card-tilt {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
}

.card-tilt:hover {
    transform: translateY(-4px);
}

/* ── Decorative sparkles ─────────────────────────────────────── */

.decorative-sparkle {
    position: absolute;
    pointer-events: none;
    width: 18px;
    height: 18px;
    animation: sparkle-pulse 3s ease-in-out infinite;
}

@keyframes sparkle-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.4; }
    50%      { transform: scale(1.25) rotate(25deg); opacity: 0.95; }
}

/* ── Tech stack logos (color original, no invert) ────────────── */

.logos-row img {
    opacity: 0.75;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.logos-row a:hover img {
    opacity: 1;
    transform: translateY(-2px);
}

/* ── Métricas ────────────────────────────────────────────────── */

.metric-number {
    font-feature-settings: "ss01", "ss02";
    font-variant-numeric: tabular-nums;
}

/* ── Línea dashed del proceso ────────────────────────────────── */

.process-line {
    stroke-dasharray: 6 6;
    animation: dash-move 25s linear infinite;
}

@keyframes dash-move {
    to { stroke-dashoffset: -240; }
}

/* ── Reveals al scroll ───────────────────────────────────────── */

[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.85s cubic-bezier(0.2, 0.65, 0.3, 1),
        transform 0.85s cubic-bezier(0.2, 0.65, 0.3, 1);
    transition-delay: var(--delay, 0ms);
}

[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pastel-orb           { animation: none; }
    .hero-underline path  { animation: none; stroke-dashoffset: 0; }
    [data-animate]        { opacity: 1; transform: none; transition: none; }
    .card-tilt:hover      { transform: none; }
    .agent-thinking-dot   { animation: none; }
    .decorative-sparkle   { animation: none; }
    .process-line         { animation: none; }
    html                  { scroll-behavior: auto; }
}