/* ================================================
   BRECOL — MODERN ENHANCEMENTS (2025)
   Loaded after style.css — all overrides are safe
   ================================================ */

/* ── Custom Cursor ──────────────────────────────── */
* {
    cursor: none !important;
}

#cursor-dot {
    width: 10px;
    height: 10px;
    background: var(--blue);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, background .2s, opacity .2s;
    mix-blend-mode: normal;
}

#cursor-ring {
    width: 38px;
    height: 38px;
    border: 2px solid rgba(30, 90, 255, .5);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width .35s cubic-bezier(.25, .46, .45, .94),
        height .35s cubic-bezier(.25, .46, .45, .94),
        background .25s, border-color .25s;
}

body:has(a:hover, button:hover) #cursor-dot {
    width: 14px;
    height: 14px;
    background: var(--sky);
}

body:has(a:hover, button:hover) #cursor-ring {
    width: 54px;
    height: 54px;
    border-color: rgba(0, 180, 255, .4);
    background: rgba(0, 180, 255, .06);
}

@media (hover: none) {
    * {
        cursor: auto !important;
    }

    #cursor-dot,
    #cursor-ring {
        display: none;
    }
}

/* ── Animated Gradient Mesh — Hero ─────────────── */
#hero {
    background:
        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(30, 90, 255, .22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 180, 255, .15) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 60% 80%, rgba(20, 71, 204, .18) 0%, transparent 55%),
        linear-gradient(145deg, #060e1f 0%, #0A1628 45%, #0d1e3a 100%);
    background-attachment: fixed;
}

@keyframes mesh-drift {
    0% {
        background-position: 0% 50%, 100% 10%, 60% 90%, 0 0;
    }

    50% {
        background-position: 30% 70%, 70% 40%, 80% 20%, 0 0;
    }

    100% {
        background-position: 0% 50%, 100% 10%, 60% 90%, 0 0;
    }
}

/* ── Typewriter cursor blink ───────────────────── */
.typewriter-wrap {
    display: inline-block;
}

.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--sky);
    margin-left: 4px;
    vertical-align: text-bottom;
    animation: blink-cursor .8s step-end infinite;
}

@keyframes blink-cursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ── Split-text heading animation ──────────────── */
.split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    margin-right: .18em;
}

.split-word>span {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}

.split-word.visible>span {
    transform: translateY(0);
    opacity: 1;
}

/* ── Wave Section Dividers ─────────────────────── */
.wave-divider {
    position: relative;
    overflow: visible;
    pointer-events: none;
}

.wave-divider svg {
    display: block;
    width: 100%;
    overflow: visible;
}

/* ── Glassmorphism upgrade — service cards ─────── */
.service-card {
    backdrop-filter: blur(0px);
    border: 1px solid rgba(238, 241, 251, .8);
    box-shadow: 0 4px 24px rgba(10, 22, 40, .07), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.service-card:hover {
    box-shadow: 0 20px 60px rgba(30, 90, 255, .18), 0 1px 0 rgba(255, 255, 255, .8) inset;
}

/* ── 3D Tilt card effect ────────────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform .12s ease, box-shadow .3s ease;
    will-change: transform;
}

.tilt-card:hover {
    box-shadow: 0 28px 70px rgba(10, 22, 40, .25);
}

.tilt-card .tilt-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, .14) 0%, transparent 60%);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity .3s;
}

.tilt-card:hover .tilt-shine {
    opacity: 1;
}

/* ── Magnetic button glow ──────────────────────── */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    border-radius: inherit;
}

.btn-primary:hover::after {
    opacity: 1;
}

.btn-primary::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(30, 90, 255, .5) 0%, transparent 70%);
    filter: blur(8px);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}

.btn-primary:hover::before {
    opacity: 1;
}

/* ── Infinite Ticker / Marquee ─────────────────── */
#ticker-section {
    background: var(--navy);
    padding: 28px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ticker-track {
    display: flex;
    gap: 0;
    animation: ticker-scroll 28s linear infinite;
    width: max-content;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 48px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
    transition: color .3s;
}

.ticker-item:hover {
    color: var(--sky);
}

.ticker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Hero heading glow effect ──────────────────── */
.hero-title .highlight {
    position: relative;
    filter: drop-shadow(0 0 32px rgba(0, 180, 255, .35));
}

/* ── Number counter glow ───────────────────────── */
.hero-stat-num {
    text-shadow: 0 0 40px rgba(30, 90, 255, .5);
}

/* ── Enhanced about cards ──────────────────────── */
.about-card {
    position: relative;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.about-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 80% 60% at 50% 0%,
            rgba(30, 90, 255, .12) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Stat cards hover lift ─────────────────────── */
.stat-card {
    position: relative;
    background: white;
    transition: var(--transition);
}

.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--blue), var(--sky));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
}

.stat-card:hover::after {
    transform: scaleX(1);
}

/* ── Portfolio image overlay upgrade ───────────── */
.portfolio-overlay {
    background: linear-gradient(to top,
            rgba(6, 14, 31, .95) 0%,
            rgba(14, 37, 87, .5) 50%,
            transparent 100%);
}

.portfolio-info h4 {
    font-size: 1.05rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* ── Team card upgrade ─────────────────────────── */
.team-card {
    position: relative;
    border-bottom: 3px solid transparent;
    background-origin: border-box;
    transition: var(--transition), border-color .3s;
}

.team-card:hover {
    border-bottom-color: var(--blue);
    box-shadow: 0 16px 48px rgba(30, 90, 255, .18);
}

.team-card .team-info {
    position: relative;
}

.team-card .team-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--sky));
    border-radius: 1px;
}

/* ── Equipment card upgrade ────────────────────── */
.equip-card {
    position: relative;
    overflow: hidden;
}

.equip-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--sky));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.equip-card:hover::before {
    transform: scaleX(1);
}

/* ── Scroll progress bar ───────────────────────── */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    z-index: 9999;
    background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 60%, var(--gold) 100%);
    width: 0%;
    transition: width .1s linear;
    box-shadow: 0 0 10px rgba(0, 180, 255, .6);
}

/* ── Section label upgrade ─────────────────────── */
.section-label {
    position: relative;
    overflow: hidden;
}

.section-label::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 180, 255, .2), transparent);
    transform: translateX(-100%);
    animation: shimmer-label 3s ease infinite;
}

@keyframes shimmer-label {
    0% {
        transform: translateX(-100%);
    }

    60%,
    100% {
        transform: translateX(200%);
    }
}

/* ── Floating hero image grain/texture ─────────── */
#hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: .4;
}

/* ── Contact section upgrade ───────────────────── */
.contact-info-card {
    background: linear-gradient(145deg, #0A1628 0%, #0d2247 100%);
    position: relative;
    overflow: hidden;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 90, 255, .18) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Footer gradient text ──────────────────────── */
.footer-brand .brand {
    background: linear-gradient(90deg, var(--white) 0%, var(--sky) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Why-cards ─────────────────────────────────── */
.why-card {
    position: relative;
    overflow: hidden;
}

.why-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--sky));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.why-card:hover::before {
    transform: scaleX(1);
}

/* ── Smooth section entry (stagger) ────────────── */
.reveal-stagger>* {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.reveal-stagger.visible>*:nth-child(1) {
    transition-delay: .05s;
    opacity: 1;
    transform: none;
}

.reveal-stagger.visible>*:nth-child(2) {
    transition-delay: .15s;
    opacity: 1;
    transform: none;
}

.reveal-stagger.visible>*:nth-child(3) {
    transition-delay: .25s;
    opacity: 1;
    transform: none;
}

.reveal-stagger.visible>*:nth-child(4) {
    transition-delay: .35s;
    opacity: 1;
    transform: none;
}

.reveal-stagger.visible>*:nth-child(5) {
    transition-delay: .45s;
    opacity: 1;
    transform: none;
}

.reveal-stagger.visible>*:nth-child(6) {
    transition-delay: .55s;
    opacity: 1;
    transform: none;
}

/* ── Hero parallax wrapper ─────────────────────── */
.hero-content {
    will-change: transform;
}

/* ── Back to top upgrade ───────────────────────── */
#back-top {
    background: linear-gradient(135deg, var(--blue), var(--sky));
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.5px;
    border: 2px solid rgba(255, 255, 255, .25);
}

#back-top:hover {
    background: linear-gradient(135deg, var(--sky), var(--blue));
}

/* ── Responsive: hide cursor on touch ─────────── */
@media (pointer: coarse) {

    #cursor-dot,
    #cursor-ring {
        display: none;
    }

    * {
        cursor: auto !important;
    }
}

/* ── SERVICES SECTION — always-visible text fix ── */
/* Explicit colors so nothing relies on cascade inheritance */
#services {
    background: var(--offwhite);
}

.service-card {
    background: white;
    color: var(--text, #0A1628);
}

.service-card h3 {
    color: var(--navy, #0A1628) !important;
    font-weight: 700;
}

.service-card p {
    color: var(--gray-500, #7B8299) !important;
}

.service-card .service-list li {
    color: var(--gray-700, #3A4058) !important;
}

/* Override on hover: white text over blue gradient */
.service-card:hover h3,
.service-card:hover p,
.service-card:hover .service-list li {
    color: white !important;
}

/* ── REVEAL-STAGGER fallback ─────────────────────
   If IntersectionObserver doesn't fire the .visible
   class (e.g. JS error, slow connection), cards
   fade in after 1.5s so nothing stays invisible.     */
.reveal-stagger>* {
    animation: reveal-fallback 0s 1.5s forwards;
}

@keyframes reveal-fallback {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Top Nav Logo Fix ──────────────────────────── */
.nav-logo img {
    filter: brightness(0) invert(1);
}

/* ── Clickable Portfolio Items ─────────────────── */
[data-project-id],
[data-service-id] {
    cursor: pointer;
}

/* ── Clickable Portfolio Items ─────────────────── */
[data-project-id],
[data-service-id] {
    cursor: pointer;
}