/* ============================================================================
   Tema "Cyberpunk empresarial" — capa OPCIONAL del home de Mortech.
   Aislado a propósito: se carga solo en el home (vía @push('styles')) y todo
   queda bajo `body.theme-cyber`, por lo que NO afecta a ninguna otra página.

   REVERTIR: quitar de home.blade.php el @section('body_class','theme-cyber')
   y el @push('styles')...cyber.css...@endpush. Opcionalmente borrar este
   archivo. Nada más depende de él.
   ============================================================================ */

:root {
    --cyber-neon: #22E3D3;   /* cian neón, derivado del teal de marca */
    --cyber-neon-2: #FF3B6B; /* magenta tenue, eco del vino de marca (uso escaso) */
}

/* ---- HERO: rejilla neón con paneo + barrido ---- */
.theme-cyber .cyber-hero {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(34, 227, 211, .18), transparent 60%),
        linear-gradient(160deg, #06182B 0%, #0B2E4F 55%, #0A2746 100%);
}

/* Rejilla en perspectiva que se desplaza lentamente */
.theme-cyber .cyber-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(34, 227, 211, .14) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 227, 211, .14) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
    animation: cyber-grid 18s linear infinite;
    pointer-events: none;
}

/* Barrido de escáner descendente, sutil */
.theme-cyber .cyber-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(34, 227, 211, .10) 50%, transparent 100%);
    height: 40%;
    animation: cyber-scan 7s ease-in-out infinite;
    pointer-events: none;
}

/* El contenido del hero debe quedar por encima de rejilla/escáner */
.theme-cyber .cyber-hero > .container-site { position: relative; z-index: 1; }

@keyframes cyber-grid {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 44px 0, 0 44px; }
}
@keyframes cyber-scan {
    0%   { transform: translateY(-60%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(220%); opacity: 0; }
}

/* ---- Eyebrow tipo terminal/HUD ---- */
.theme-cyber .cyber-hero .eyebrow {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(34, 227, 211, .65);
}
.theme-cyber .cyber-hero .eyebrow::before { content: "> "; opacity: .8; }

/* ---- Título con resplandor neón muy contenido (look empresarial) ---- */
.theme-cyber .cyber-hero h1 {
    text-shadow: 0 0 22px rgba(34, 227, 211, .22);
}
.theme-cyber .cyber-hero h1 span {
    background: linear-gradient(90deg, #fff, var(--cyber-neon));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Tarjeta visual del hero: marco neón + esquinas HUD ---- */
.theme-cyber .cyber-visual { position: relative; }
.theme-cyber .cyber-visual > div {
    border-color: rgba(34, 227, 211, .35) !important;
    box-shadow:
        0 0 0 1px rgba(34, 227, 211, .25),
        0 0 34px rgba(34, 227, 211, .22),
        0 30px 60px -20px rgba(0, 0, 0, .5);
}
/* Corchetes de esquina estilo interfaz futurista */
.theme-cyber .cyber-visual::before,
.theme-cyber .cyber-visual::after {
    content: "";
    position: absolute;
    width: 26px; height: 26px;
    border: 2px solid var(--cyber-neon);
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(34, 227, 211, .8));
}
.theme-cyber .cyber-visual::before {
    top: -8px; left: -8px;
    border-right: none; border-bottom: none;
}
.theme-cyber .cyber-visual::after {
    bottom: -8px; right: -8px;
    border-left: none; border-top: none;
}

/* ---- Botón fantasma del hero con borde neón ---- */
.theme-cyber .cyber-hero .btn-ghost {
    border-color: rgba(34, 227, 211, .5);
    box-shadow: 0 0 14px rgba(34, 227, 211, .18) inset;
}
.theme-cyber .cyber-hero .btn-ghost:hover {
    box-shadow: 0 0 18px rgba(34, 227, 211, .35);
}

/* ---- Eyebrows del resto del home en estilo HUD (sutil) ---- */
.theme-cyber .eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .18em;
}

/* ---- Tarjetas de producto/servicio: glow neón al pasar el cursor ---- */
.theme-cyber .shadow-card { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.theme-cyber .shadow-card:hover {
    border-color: rgba(34, 227, 211, .45) !important;
    box-shadow:
        0 0 0 1px rgba(34, 227, 211, .25),
        0 0 26px rgba(34, 227, 211, .18) !important;
}

/* ---- Respeta a quien pide menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
    .theme-cyber .cyber-hero::before,
    .theme-cyber .cyber-hero::after { animation: none; }
}