/* =============================================
   Marathon Aesthetic Layer v2
   Bio-tech + Terminal + Fluid color treatment
   inspired by Bungie's Marathon franchise.
   Cleanly separable - remove this file to revert.
   ============================================= */

/* --- 1. CUSTOM PROPERTIES --- */
:root {
    --m-acid: #C2FE0B;
    --m-acid-glow: rgba(194, 254, 11, 0.25);
    --m-acid-subtle: rgba(194, 254, 11, 0.08);
    --m-cyan: #01FFFF;
    --m-cyan-glow: rgba(1, 255, 255, 0.15);
    --m-red: #FF0D1A;
    --m-red-glow: rgba(255, 13, 26, 0.2);
    --m-deep-navy: #080c18;
    --m-phosphor: #00FF41;
    --m-scanline-opacity: 0.015;
    --m-lattice-opacity: 0.055;
    --m-glow-spread: 12px;
    /* Reference existing brand accent */
    --m-brand-accent: var(--accent-light, #929df8);
    --m-brand-cyan: var(--cyan, #22d3ee);
}

/* --- 2. COLORFUL FLUID GRADIENTS --- */

/* Bio gradient - slow cycling teal > cyan > acid hint > teal */
@keyframes m-bio-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.m-gradient-bio {
    height: 2px;
    background: linear-gradient(90deg,
        transparent, var(--m-brand-cyan), var(--m-cyan),
        rgba(194, 254, 11, 0.4), var(--m-cyan), var(--m-brand-cyan), transparent);
    background-size: 200% 100%;
    animation: m-bio-shift 16s ease-in-out infinite;
    will-change: background-position;
}

/* Flow gradient - organic mesh for hero atmosphere */
.m-gradient-flow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;
    background:
        radial-gradient(ellipse 600px 500px at 25% 30%, rgba(34, 211, 238, 0.2), transparent),
        radial-gradient(ellipse 500px 400px at 75% 60%, rgba(1, 255, 255, 0.1), transparent),
        radial-gradient(ellipse 400px 350px at 50% 80%, rgba(194, 254, 11, 0.04), transparent),
        radial-gradient(ellipse 300px 300px at 85% 20%, rgba(146, 157, 248, 0.12), transparent);
}

/* --- 3. BIO-TECH CELLULAR LATTICE PATTERN --- */

/* Cellular / molecular lattice - irregular hexagonal feel */
.m-lattice-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--m-lattice-opacity);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0 L45 0 L60 26 L45 52 L15 52 L0 26Z' fill='none' stroke='%2322d3ee' stroke-width='0.5' opacity='0.6'/%3E%3Ccircle cx='15' cy='0' r='1.5' fill='%2322d3ee' opacity='0.4'/%3E%3Ccircle cx='45' cy='0' r='1.5' fill='%2322d3ee' opacity='0.4'/%3E%3Ccircle cx='60' cy='26' r='1.5' fill='%2322d3ee' opacity='0.4'/%3E%3C/svg%3E");
    background-size: 60px 52px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 70%);
}

/* Bio-circuit pattern - curved paths connecting nodes */
.m-lattice-circuit::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='2' fill='%2322d3ee'/%3E%3Ccircle cx='100' cy='20' r='2' fill='%2322d3ee'/%3E%3Ccircle cx='60' cy='60' r='2.5' fill='%2322d3ee'/%3E%3Ccircle cx='20' cy='100' r='2' fill='%2322d3ee'/%3E%3Ccircle cx='100' cy='100' r='2' fill='%2322d3ee'/%3E%3Cpath d='M20 20 Q40 10 60 60' fill='none' stroke='%2322d3ee' stroke-width='0.6'/%3E%3Cpath d='M100 20 Q80 40 60 60' fill='none' stroke='%2322d3ee' stroke-width='0.6'/%3E%3Cpath d='M60 60 Q40 80 20 100' fill='none' stroke='%2322d3ee' stroke-width='0.6'/%3E%3Cpath d='M60 60 Q80 80 100 100' fill='none' stroke='%2322d3ee' stroke-width='0.6'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 65%);
}

/* --- 4. GLITCH FLICKER --- */

@keyframes m-glitch {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 0); }
    40% { clip-path: inset(60% 0 10% 0); transform: translate(2px, 0); }
    60% { clip-path: inset(40% 0 30% 0); transform: translate(-1px, 0); }
    80% { clip-path: inset(70% 0 5% 0); transform: translate(1px, 0); }
}

/* Glitch hover disabled on all headings */

/* --- 5. BUTTON HOVER ENHANCEMENTS --- */

.btn-primary {
    position: relative;
}

.btn-primary::before {
    content: '> EXECUTE';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.1em;
    color: var(--m-acid);
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.btn-primary:hover::before {
    opacity: 0.35;
    top: -20px;
}

.btn-primary:hover {
    border-color: rgba(194, 254, 11, 0.2);
    box-shadow: 0 4px 20px rgba(101, 116, 205, 0.35), 0 0 20px rgba(194, 254, 11, 0.08);
}

/* --- 6. CARD SCAN-LINE HOVER --- */

@keyframes m-card-scan {
    from { transform: translateX(-200%); }
    to { transform: translateX(200%); }
}

.service-card::after,
.cyber-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--m-brand-cyan), transparent);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: transform;
}

.service-card:hover::after,
.cyber-card:hover::after {
    opacity: 1;
    animation: m-card-scan 0.8s ease-out;
}

/* Increase lattice on card hover */
.service-card:hover,
.cyber-card:hover {
    background-color: rgba(8, 12, 24, 0.85);
}

/* --- 7. LINK HOVER - GLITCH UNDERLINE --- */

.service-link {
    position: relative;
}

.service-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--m-acid);
    box-shadow: 0 0 4px var(--m-acid-glow);
    transition: width 0.3s ease;
}

.service-link:hover::after {
    width: 100%;
}

/* Hero scanline removed - kept clean */

/* Terminal cursor removed from hero */

/* --- 10. DATA STREAM TICKER --- */

@keyframes m-data-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.m-data-stream {
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    position: relative;
    z-index: 2;
    background: rgba(8, 12, 24, 0.5);
    border-top: 1px solid rgba(34, 211, 238, 0.06);
    border-bottom: 1px solid rgba(34, 211, 238, 0.06);
}

/* CRT scanline on the ticker itself */
.m-data-stream::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 3px
    );
}

.m-data-stream-inner {
    display: inline-block;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--m-brand-cyan);
    opacity: 0.3;
    animation: m-data-scroll 50s linear infinite;
    text-transform: uppercase;
}

.m-data-stream-inner span {
    padding: 0 32px;
}

.m-data-stream:hover .m-data-stream-inner {
    animation-play-state: paused;
    opacity: 0.5;
}

/* --- 11. STAT NUMBER TREATMENT --- */

.proof-number {
    text-shadow: 0 0 var(--m-glow-spread) rgba(34, 211, 238, 0.15);
    transition: text-shadow 0.2s ease;
}

.proof-number:hover {
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.3);
}

/* proof-label inherits site default font (Inter) */

/* Hero stat numbers */
.stat-number {
    transition: filter 0.3s ease;
}

.stat-number:hover {
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
}

/* --- 12. ACID STATUS DOT --- */

@keyframes m-acid-pulse {
    0%, 100% { box-shadow: 0 0 6px var(--m-acid-glow); }
    50% { box-shadow: 0 0 12px var(--m-acid-glow), 0 0 24px var(--m-acid-subtle); opacity: 0.6; }
}

.card-status-dot.m-acid {
    background: var(--m-acid);
    box-shadow: 0 0 6px var(--m-acid-glow);
    animation: m-acid-pulse 2.5s ease-in-out infinite;
}

/* --- 13. CYBERSECURITY DEEP TREATMENT --- */

.cybersecurity {
    position: relative;
}

/* Bio-circuit lattice on cybersecurity */
.cybersecurity .cyber-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='2' fill='%2322d3ee'/%3E%3Ccircle cx='100' cy='20' r='2' fill='%2322d3ee'/%3E%3Ccircle cx='60' cy='60' r='2.5' fill='%2322d3ee'/%3E%3Ccircle cx='20' cy='100' r='2' fill='%2322d3ee'/%3E%3Ccircle cx='100' cy='100' r='2' fill='%2322d3ee'/%3E%3Cpath d='M20 20 Q40 10 60 60' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3Cpath d='M100 20 Q80 40 60 60' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3Cpath d='M60 60 Q40 80 20 100' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3Cpath d='M60 60 Q80 80 100 100' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
}

/* Red threat indicator - single use */
.cybersecurity .section-tag::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--m-red);
    box-shadow: 0 0 6px var(--m-red-glow);
    animation: m-acid-pulse 2s ease-in-out infinite;
    display: inline-block;
    margin-right: 2px;
}

/* --- 14. NOISE / DITHER TEXTURE --- */

.why-us {
    position: relative;
}

.why-us::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* --- 15. BIO-CONSTRUCTION LINE DRAW --- */

@keyframes m-line-draw {
    from { stroke-dashoffset: 280; }
    to { stroke-dashoffset: 0; }
}

.m-bio-construct {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 120px;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.m-bio-construct.visible {
    opacity: 1;
}

.m-bio-construct path {
    stroke: var(--m-brand-cyan);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    filter: drop-shadow(0 0 4px var(--m-cyan-glow));
}

.m-bio-construct.visible path {
    animation: m-line-draw 2.5s ease-out forwards;
}

/* --- 16. BOOT SEQUENCE --- */

.m-boot-log {
    margin-top: 12px;
}

.m-boot-log summary {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--m-brand-cyan);
    opacity: 0.2;
    cursor: pointer;
    text-transform: uppercase;
    list-style: none;
    user-select: none;
    transition: opacity 0.3s ease;
}

.m-boot-log summary:hover {
    opacity: 0.45;
}

.m-boot-log summary::-webkit-details-marker { display: none; }

.m-boot-log-lines {
    background: var(--m-deep-navy);
    border: 1px solid rgba(34, 211, 238, 0.08);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 8px;
    max-width: 480px;
}

.m-boot-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 1.8;
    color: var(--m-brand-cyan);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    letter-spacing: 0.03em;
}

.m-boot-line .ok { color: var(--m-acid); }
.m-boot-line .fail { color: var(--m-red); }

.m-boot-log[open] .m-boot-line {
    opacity: 0.6;
    transform: translateY(0);
}

/* Stagger boot lines */
.m-boot-line:nth-child(1) { transition-delay: 0.1s; }
.m-boot-line:nth-child(2) { transition-delay: 0.3s; }
.m-boot-line:nth-child(3) { transition-delay: 0.5s; }
.m-boot-line:nth-child(4) { transition-delay: 0.7s; }
.m-boot-line:nth-child(5) { transition-delay: 0.9s; }
.m-boot-line:nth-child(6) { transition-delay: 1.1s; }
.m-boot-line:nth-child(7) { transition-delay: 1.3s; }

/* --- 17. SYSTEM FOOTER LABEL --- */

.m-sys-version {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--m-brand-cyan);
    opacity: 0.08;
    text-align: center;
    padding: 6px 0;
    text-transform: uppercase;
    user-select: none;
    transition: opacity 0.6s ease;
}

.m-sys-version:hover {
    opacity: 0.3;
}

/* --- 18. SECTION GRADIENT DIVIDERS --- */

.m-divider-bio {
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(34, 211, 238, 0.3),
        rgba(1, 255, 255, 0.4),
        rgba(194, 254, 11, 0.2),
        rgba(1, 255, 255, 0.4),
        rgba(34, 211, 238, 0.3),
        transparent);
    background-size: 200% 100%;
    animation: m-bio-shift 16s ease-in-out infinite;
    will-change: background-position;
}

/* --- 19. RESPONSIVE --- */

@media (max-width: 768px) {
    .m-lattice-cell::before,
    .m-lattice-circuit::before,
    .cybersecurity .cyber-bg::after,
    .why-us::after { display: none; }
    .m-data-stream-inner { font-size: 9px; }
    .m-bio-construct { display: none; }
    .m-gradient-bio, .m-divider-bio { animation: none; }
    .section-title:hover .gradient-text,
    .btn-primary:hover { animation: none; }
    .btn-primary::before { display: none; }
}

@media (max-width: 480px) {
    .m-data-stream { display: none; }
    .m-boot-log { display: none; }
    .m-sys-version { display: none; }
}

/* --- 20. ACCESSIBILITY --- */

@media (prefers-reduced-motion: reduce) {
    .m-data-stream-inner { animation: none; }
    .m-gradient-bio, .m-divider-bio { animation: none; }
    .m-gradient-flow { opacity: 0.1; }
    .section-title:hover .gradient-text,
    .btn-primary:hover { animation: none; }
    .card-status-dot.m-acid { animation: none; }
    .cybersecurity .section-tag::before { animation: none; }
    .m-bio-construct.visible path { animation: none; stroke-dashoffset: 0; }
    .service-card::after, .cyber-card::after { animation: none; display: none; }
}