/* HonduWeb - Global Styles */

:root {
    --primary: #16B8A6;
    --primary-dark: #0E9384;
    --secondary: #0E9384;
    --gold: #F4A12A;
    --ink: #0C1116;
    --paper: #ECEAE3;
    --dark: #0C1116;
    --dark-lighter: #141A21;
    --accent: #16B8A6;
    --glass: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-hover: rgba(255, 255, 255, 0.04);
}

html {
    scroll-behavior: smooth;
}

/* Typography - Using same fonts as original site */
body {
    font-family: 'Inter', Arial, sans-serif;
    background-color: var(--dark);
    color: white;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Glass Navigation */
.glass-nav {
    background: rgba(9, 9, 11, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Text Gradient */
.text-gradient {
    background: linear-gradient(to right, #ffffff 40%, #94a3b8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Buttons - Less rounded like original site */
.btn-primary,
.btn-secondary,
a[class*="rounded-full"],
button[class*="rounded-full"] {
    border-radius: 0.5rem !important;
    /* 8px - rounded-lg */
}

/* Override Tailwind rounded-full for buttons and links */
a.rounded-full,
button.rounded-full {
    border-radius: 0.5rem !important;
}

/* Service Cards */
.service-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    z-index: 1;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 161, 251, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    border-radius: inherit;
}

.service-card:hover {
    background: var(--glass-hover);
    border-color: var(--primary);
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--premium-shadow);
}

.service-card:hover::before {
    opacity: 1;
}

/* Project Cards */
.project-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

.project-card:hover {
    transform: translateY(-12px) scale(1.01);
    border-color: var(--primary);
    box-shadow: var(--premium-shadow);
}

/* Floating Animation */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Glow Effect */
.glow {
    box-shadow: 0 0 40px rgba(0, 102, 255, 0.3);
}

/* Header Container Alignment - ensure logo aligns perfectly with body content */
#main-header>div {
    padding-left: 1rem !important;
    /* px-4 */
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    #main-header>div {
        padding-left: 1.5rem !important;
        /* sm:px-6 */
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    #main-header>div {
        padding-left: 0rem !important;
        /* lg:px-8 */
        padding-right: 0rem !important;
    }
}

/* Fix for Select Options in Dark Mode */
select option {
    background-color: #0f172a;
    color: white;
    padding: 10px;
}

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delay children reveal */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-stagger.active > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.6s; }

/* Pulse Glow */
.pulse-glow {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(20, 161, 251, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(20, 161, 251, 0); }
}

/* Cinematic Noise Textures */
.noise-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 10;
}

/* Perspective Hero Animations */
.perspective-hero {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.hero-text-elite {
    opacity: 0;
    transform: translateX(-40px) rotateY(10deg);
    transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-text-elite.active {
    opacity: 1;
    transform: translateX(0) rotateY(0);
}

/* Page Hero Gradient */
.page-hero-bg {
    background: radial-gradient(circle at top right, rgba(22, 184, 166, 0.08), transparent),
                radial-gradient(circle at bottom left, rgba(244, 161, 42, 0.05), transparent),
                #0C1116;
}

/* Elegant Minimalist Grid Pattern Overlay */
.grid-pattern {
    background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center;
}

/* =====================================================================
   PREMIUM LAYER — Linear / Vercel inspired design language
   ===================================================================== */

:root {
    --violet: #F4A12A; /* repurposed as warm amber accent */
    --premium-shadow: 0 24px 80px -24px rgba(22, 184, 166, 0.4);
}

/* --- Refined gradient text (tighter, more luminous than the old one) --- */
.text-gradient-premium {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #a7b6b2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-brand {
    background: linear-gradient(110deg, #2ee6cf 0%, #F4A12A 55%, #2ee6cf 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brand-shimmer 6s linear infinite;
}
@keyframes brand-shimmer {
    to { background-position: 200% center; }
}

/* --- Aurora: slow-drifting light blobs behind the hero --- */
.aurora {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.55;
}
.aurora::before,
.aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}
.aurora::before {
    width: 50vw; height: 50vw;
    top: -10%; left: 5%;
    background: radial-gradient(circle, rgba(22, 184, 166, 0.38), transparent 60%);
    animation: aurora-a 18s ease-in-out infinite;
}
.aurora::after {
    width: 42vw; height: 42vw;
    top: 0%; right: 8%;
    background: radial-gradient(circle, rgba(244, 161, 42, 0.22), transparent 60%);
    animation: aurora-b 22s ease-in-out infinite;
}
@keyframes aurora-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(8%, 12%) scale(1.18); }
}
@keyframes aurora-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-10%, 8%) scale(0.88); }
}

/* --- Top center spotlight (Linear signature) --- */
.spotlight {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(60% 50% at 50% -10%, rgba(255, 255, 255, 0.10), transparent 70%);
}

/* --- Grid that fades toward the edges --- */
.grid-fade {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
}

/* --- Announcement pill with animated gradient ring --- */
.announce-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem 0.45rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: color 0.3s ease, transform 0.3s ease;
}
.announce-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 0deg, transparent 0%, #16B8A6 25%, #F4A12A 50%, transparent 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ring-spin 5s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
.announce-pill:hover { color: #fff; transform: translateY(-1px); }
.announce-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: dot-pulse 2s infinite;
}
@keyframes dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* --- Premium primary button --- */
.btn-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.75rem;
    border-radius: 0.6rem;
    font-weight: 600;
    color: #04201c;
    background: linear-gradient(180deg, #2ee6cf 0%, #16B8A6 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset,
                0 8px 24px -6px rgba(22, 184, 166, 0.55);
    transition: transform 0.25s cubic-bezier(0.23,1,0.32,1), box-shadow 0.25s ease;
}
.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset,
                0 16px 40px -8px rgba(22, 184, 166, 0.7);
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.65rem;
    border-radius: 0.75rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* --- Gradient-border cards (Linear style) --- */
.card-premium {
    position: relative;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), border-color 0.4s ease, background 0.4s ease;
    overflow: hidden;
}
.card-premium::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(22,184,166,0.65), rgba(244,161,42,0.35), transparent 55%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.card-premium:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.04);
}
.card-premium:hover::after { opacity: 1; }

/* --- Reveal stagger by index (works with .reveal active toggle) --- */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    .aurora::before, .aurora::after, .announce-pill::before,
    .announce-dot, .text-gradient-brand { animation: none !important; }
}

/* --- Global button face-lift (site-wide) ---
   Targets only filled CTAs (exact `bg-primary` token) so nav links
   that use `text-primary` / `border-primary` are never affected. */
a[class~="bg-primary"],
button[class~="bg-primary"] {
    background-image: linear-gradient(180deg, #2ee6cf 0%, #16B8A6 100%) !important;
    color: #04201c !important;
    border-color: transparent !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset,
                0 8px 24px -6px rgba(22, 184, 166, 0.5) !important;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease, filter 0.25s ease !important;
}
a[class~="bg-primary"]:hover,
button[class~="bg-primary"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
                0 16px 40px -8px rgba(22, 184, 166, 0.7) !important;
}
/* Don't lift the small icon chips / sidebar items that merely tint bg-primary */
a[class~="bg-primary/10"], a[class~="bg-primary/20"],
.bg-primary\/10, .bg-primary\/20 { box-shadow: none !important; }

/* CTA section ambient glow (reuses hero aurora language) */
.cta-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.cta-glow::before {
    content: '';
    position: absolute;
    width: 60%; height: 200%;
    top: -50%; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(22, 184, 166, 0.22), transparent 60%);
    filter: blur(80px);
}

/* =====================================================================
   ENGINEERING-STUDIO LAYER — spec sheet language (Direction A)
   ===================================================================== */

/* Spec eyebrow: monospaced reference label with a tick */
.spec-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}
.spec-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--primary);
}
.spec-eyebrow .ref { color: var(--gold); }

/* Measurement ticks framing the hero (blueprint feel) */
.measure-x {
    position: absolute;
    left: 0; right: 0;
    height: 14px;
    pointer-events: none;
    background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.10) 0 1px, transparent 1px 56px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.corner-coord {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.32);
}

/* Light "paper" section — dark text on warm paper */
.section-paper {
    background: var(--paper);
    color: #1a1f24;
}
.section-paper h1, .section-paper h2, .section-paper h3,
.section-paper h4, .section-paper .text-white { color: #14181c; }
.section-paper p { color: #3f474e; }
.section-paper .spec-eyebrow { color: var(--secondary); }
.section-paper .spec-eyebrow::before { background: var(--secondary); }

/* Paper card */
.card-paper {
    background: #ffffff;
    border: 1px solid rgba(12,17,22,0.08);
    border-radius: 0.9rem;
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.card-paper:hover {
    transform: translateY(-6px);
    border-color: rgba(22,184,166,0.5);
    box-shadow: 0 24px 60px -28px rgba(12,17,22,0.35);
}

/* Mono data callout */
.mono-data {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}

/* Navigation Contact Button - Premium Glass / Outline with Glow Hover */
.btn-nav-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.35rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #16B8A6; /* primary teal */
    background: rgba(22, 184, 166, 0.05); /* very light primary tint */
    border: 1px solid rgba(22, 184, 166, 0.25); /* thin primary border */
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 12px rgba(22, 184, 166, 0.03);
}

.btn-nav-contact:hover {
    color: #04201c !important; /* dark green text */
    background: linear-gradient(180deg, #2ee6cf 0%, #16B8A6 100%) !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(22, 184, 166, 0.45) !important;
}

/* Responsive Button Optimizations for Mobile */
@media (max-width: 640px) {
    .btn-premium {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.95rem !important;
    }
    .btn-ghost {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.95rem !important;
    }
    .float-btn {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    .floating-whatsapp {
        left: 1rem !important;
        bottom: 1rem !important;
    }
    .floating-btns {
        right: 1rem !important;
        bottom: 1rem !important;
    }
    #ai-chatbot-container {
        left: 1rem !important;
        bottom: 4.5rem !important;
    }
    #ai-chat-trigger {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    #ai-chat-trigger svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

/* Scrambling Text Effect (Matrix / HUD themed) */
.scrambling {
    color: #2ee6cf !important;
    text-shadow: 0 0 10px rgba(46, 230, 207, 0.65);
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* Global Typewriter Cursor */
.typing-active::after {
    content: '|' !important;
    color: #16B8A6 !important;
    margin-left: 2px !important;
    animation: cursor-blink 0.8s infinite !important;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}