/* ========================================
   TILE INFOGRAPHIC ART
   Each tile gets a unique animated visual
   ======================================== */

/* Base — all tiles get animated geometric backgrounds */
.tile {
    --line-color: rgba(181,154,91,0.25);
    --dot-color: rgba(181,154,91,0.4);
}

.tile::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
    opacity: 0.85;
    transition: opacity 0.5s;
}
.tile:hover::before { opacity: 1; }

/* 1 — AI Development: Neural network nodes */
.tile:nth-child(1)::before {
    background:
        radial-gradient(circle 2px at 25% 30%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 2px at 60% 20%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 2px at 45% 55%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 2px at 80% 45%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 2px at 15% 70%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 2px at 70% 75%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 1.5px at 35% 15%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 1.5px at 90% 25%, var(--dot-color) 50%, transparent 50%);
    animation: neuralPulse 4s ease-in-out infinite alternate;
}
@keyframes neuralPulse {
    0% { filter: blur(0px); opacity: 0.7; }
    100% { filter: blur(1px); opacity: 1; }
}

/* 2 — Digital Marketing: Rising chart lines */
.tile:nth-child(2)::before {
    background: linear-gradient(0deg, transparent 94%, var(--line-color) 94%, var(--line-color) 95%, transparent 95%),
        linear-gradient(0deg, transparent 74%, var(--line-color) 74%, var(--line-color) 75%, transparent 75%),
        linear-gradient(0deg, transparent 54%, var(--line-color) 54%, var(--line-color) 55%, transparent 55%),
        linear-gradient(0deg, transparent 34%, var(--line-color) 34%, var(--line-color) 35%, transparent 35%);
    animation: chartRise 6s ease-in-out infinite;
}
@keyframes chartRise {
    0%, 100% { clip-path: polygon(0 100%, 20% 80%, 40% 85%, 60% 60%, 80% 50%, 100% 30%, 100% 100%); }
    50% { clip-path: polygon(0 100%, 20% 70%, 40% 75%, 60% 45%, 80% 35%, 100% 15%, 100% 100%); }
}

/* 3 — Video: Waveform */
.tile:nth-child(3)::before {
    background: repeating-linear-gradient(90deg,
        transparent, transparent 6px,
        var(--line-color) 6px, var(--line-color) 8px);
    clip-path: polygon(0% 50%, 5% 30%, 10% 60%, 15% 25%, 20% 55%, 25% 35%, 30% 65%, 35% 40%, 40% 55%, 45% 30%, 50% 50%, 55% 35%, 60% 60%, 65% 40%, 70% 55%, 75% 30%, 80% 50%, 85% 45%, 90% 55%, 95% 40%, 100% 50%, 100% 100%, 0% 100%);
    animation: waveform 3s ease-in-out infinite alternate;
}
@keyframes waveform {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(1.15); }
}

/* 4 — ORM: Shield / concentric circles */
.tile:nth-child(4)::before {
    background:
        radial-gradient(circle at 50% 50%, transparent 15%, var(--line-color) 15.5%, transparent 16%),
        radial-gradient(circle at 50% 50%, transparent 25%, var(--line-color) 25.5%, transparent 26%),
        radial-gradient(circle at 50% 50%, transparent 35%, var(--line-color) 35.5%, transparent 36%),
        radial-gradient(circle at 50% 50%, transparent 45%, var(--line-color) 45.5%, transparent 46%);
    animation: shieldPulse 5s ease-in-out infinite;
}
@keyframes shieldPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* 5 — SEO: Upward arrows / growth */
.tile:nth-child(5)::before {
    background:
        linear-gradient(45deg, transparent 48%, var(--line-color) 48.5%, var(--line-color) 49.5%, transparent 50%),
        linear-gradient(-45deg, transparent 48%, var(--line-color) 48.5%, var(--line-color) 49.5%, transparent 50%);
    background-size: 30px 30px;
    animation: seoRise 8s linear infinite;
}
@keyframes seoRise {
    0% { background-position: 0 0; }
    100% { background-position: 0 -120px; }
}

/* 6 — E-Commerce: Grid of dots (product grid) */
.tile:nth-child(6)::before {
    background: radial-gradient(circle 1.5px at center, var(--dot-color) 50%, transparent 50%);
    background-size: 24px 24px;
    animation: gridFloat 10s linear infinite;
}
@keyframes gridFloat {
    0% { background-position: 0 0; }
    100% { background-position: 24px 24px; }
}

/* 7 — Team: Connected people dots */
.tile:nth-child(7)::before {
    background:
        radial-gradient(circle 3px at 20% 30%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 3px at 50% 25%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 3px at 80% 35%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 3px at 35% 60%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 3px at 65% 55%, var(--dot-color) 50%, transparent 50%),
        radial-gradient(circle 4px at 50% 45%, rgba(181,154,91,0.3) 50%, transparent 50%),
        linear-gradient(30deg, transparent 49.5%, var(--line-color) 49.5%, var(--line-color) 50.5%, transparent 50.5%),
        linear-gradient(-20deg, transparent 49.5%, var(--line-color) 49.5%, var(--line-color) 50.5%, transparent 50.5%);
    animation: teamPulse 5s ease-in-out infinite alternate;
}
@keyframes teamPulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 8 — Consulting: Strategy lines / flowchart */
.tile:nth-child(8)::before {
    background:
        linear-gradient(0deg, transparent 49.5%, var(--line-color) 49.5%, var(--line-color) 50.5%, transparent 50.5%),
        linear-gradient(90deg, transparent 49.5%, var(--line-color) 49.5%, var(--line-color) 50.5%, transparent 50.5%);
    background-size: 50px 50px;
    background-position: 25px 25px;
    animation: strategyShift 12s linear infinite;
}
@keyframes strategyShift {
    0% { background-position: 25px 25px; }
    100% { background-position: 75px 75px; }
}

/* 9 — CRM: Database cylinder lines */
.tile:nth-child(9)::before {
    background:
        linear-gradient(0deg, transparent 19%, var(--line-color) 19.5%, transparent 20%),
        linear-gradient(0deg, transparent 39%, var(--line-color) 39.5%, transparent 40%),
        linear-gradient(0deg, transparent 59%, var(--line-color) 59.5%, transparent 60%),
        linear-gradient(0deg, transparent 79%, var(--line-color) 79.5%, transparent 80%);
    animation: dbScan 3s ease-in-out infinite;
}
@keyframes dbScan {
    0% { clip-path: inset(0 0 0 0); }
    50% { clip-path: inset(0 0 0 30%); }
    100% { clip-path: inset(0 0 0 0); }
}

/* 10 — Branding: Typography / letterforms */
.tile:nth-child(10)::before {
    background:
        linear-gradient(90deg, transparent 9%, var(--line-color) 9.5%, transparent 10%),
        linear-gradient(90deg, transparent 29%, var(--line-color) 29.5%, transparent 30%),
        linear-gradient(0deg, transparent 89%, var(--line-color) 89.5%, transparent 90%),
        linear-gradient(0deg, transparent 49%, var(--line-color) 49.5%, transparent 50%);
    animation: brandReveal 6s ease-in-out infinite alternate;
}
@keyframes brandReveal {
    0% { opacity: 0.5; transform: scaleX(0.95); }
    100% { opacity: 1; transform: scaleX(1); }
}

/* 11 — Affiliation: Network mesh */
.tile:nth-child(11)::before {
    background:
        linear-gradient(60deg, transparent 49%, var(--line-color) 49.5%, var(--line-color) 50.5%, transparent 51%),
        linear-gradient(-60deg, transparent 49%, var(--line-color) 49.5%, var(--line-color) 50.5%, transparent 51%),
        linear-gradient(0deg, transparent 49%, var(--line-color) 49.5%, var(--line-color) 50.5%, transparent 51%);
    background-size: 40px 40px;
    animation: meshFlow 15s linear infinite;
}
@keyframes meshFlow {
    0% { background-position: 0 0; }
    100% { background-position: 40px 80px; }
}

/* 12 — Data: Binary / matrix rain */
.tile:nth-child(12)::before {
    background: repeating-linear-gradient(0deg,
        transparent, transparent 14px,
        var(--line-color) 14px, var(--line-color) 15px);
    background-size: 8px 15px;
    animation: matrixRain 4s linear infinite;
}
@keyframes matrixRain {
    0% { background-position: 0 0; }
    100% { background-position: 0 60px; }
}

/* 13 — Product Design: Blueprint grid */
.tile:nth-child(13)::before {
    --bp-color: rgba(100,180,220,0.18);
    background:
        linear-gradient(0deg, transparent 49.5%, var(--bp-color) 49.5%, var(--bp-color) 50.5%, transparent 50.5%),
        linear-gradient(90deg, transparent 49.5%, var(--bp-color) 49.5%, var(--bp-color) 50.5%, transparent 50.5%);
    background-size: 25px 25px;
}

/* 14 — Company Building: Rising blocks */
.tile:nth-child(14)::before {
    background:
        linear-gradient(0deg, var(--line-color) 10%, transparent 10%) 10% 100%,
        linear-gradient(0deg, var(--line-color) 25%, transparent 25%) 30% 100%,
        linear-gradient(0deg, var(--line-color) 45%, transparent 45%) 50% 100%,
        linear-gradient(0deg, var(--line-color) 35%, transparent 35%) 70% 100%,
        linear-gradient(0deg, var(--line-color) 55%, transparent 55%) 90% 100%;
    background-size: 12% 100%;
    background-repeat: no-repeat;
    animation: buildRise 5s ease-in-out infinite alternate;
}
@keyframes buildRise {
    0% { opacity: 0.5; }
    100% { opacity: 0.9; }
}

/* 15 — Sales: Funnel shape */
.tile:nth-child(15)::before {
    clip-path: polygon(20% 10%, 80% 10%, 70% 35%, 65% 55%, 55% 75%, 50% 95%, 45% 75%, 35% 55%, 30% 35%);
    background: linear-gradient(180deg, var(--line-color), rgba(181,154,91,0.03));
    animation: funnelPulse 4s ease-in-out infinite alternate;
}
@keyframes funnelPulse {
    0% { opacity: 0.7; transform: scaleY(0.95); }
    100% { opacity: 1; transform: scaleY(1.05); }
}

/* 16 — Music: EQ bars */
.tile:nth-child(16)::before {
    background:
        linear-gradient(0deg, var(--line-color) 60%, transparent 60%) 10% 100%,
        linear-gradient(0deg, var(--line-color) 80%, transparent 80%) 18% 100%,
        linear-gradient(0deg, var(--line-color) 45%, transparent 45%) 26% 100%,
        linear-gradient(0deg, var(--line-color) 90%, transparent 90%) 34% 100%,
        linear-gradient(0deg, var(--line-color) 55%, transparent 55%) 42% 100%,
        linear-gradient(0deg, var(--line-color) 70%, transparent 70%) 50% 100%,
        linear-gradient(0deg, var(--line-color) 40%, transparent 40%) 58% 100%,
        linear-gradient(0deg, var(--line-color) 85%, transparent 85%) 66% 100%,
        linear-gradient(0deg, var(--line-color) 50%, transparent 50%) 74% 100%,
        linear-gradient(0deg, var(--line-color) 65%, transparent 65%) 82% 100%,
        linear-gradient(0deg, var(--line-color) 75%, transparent 75%) 90% 100%;
    background-size: 5% 100%;
    background-repeat: no-repeat;
    animation: eqBounce 2s ease-in-out infinite alternate;
}
@keyframes eqBounce {
    0% { transform: scaleY(1); }
    25% { transform: scaleY(0.85); }
    50% { transform: scaleY(1.1); }
    75% { transform: scaleY(0.9); }
    100% { transform: scaleY(1.05); }
}

/* 17 — Media: Broadcast waves */
.tile:nth-child(17)::before {
    background:
        radial-gradient(circle at 15% 50%, transparent 10%, var(--line-color) 10.5%, transparent 11%),
        radial-gradient(circle at 15% 50%, transparent 20%, var(--line-color) 20.5%, transparent 21%),
        radial-gradient(circle at 15% 50%, transparent 30%, var(--line-color) 30.5%, transparent 31%),
        radial-gradient(circle at 15% 50%, transparent 40%, var(--line-color) 40.5%, transparent 41%);
    animation: broadcastWave 4s ease-in-out infinite;
}
@keyframes broadcastWave {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ========================================
   SECTION ART — Extra visual layers
   ======================================== */

/* About section — animated corner accent */
.about-photo::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(181,154,91,0.3), transparent 30%, transparent 70%, rgba(60,100,180,0.2)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: photoFrame 6s ease-in-out infinite alternate;
    z-index: 1;
}
@keyframes photoFrame {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Stats — animated underline that sweeps */
.stats-row::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    animation: statsSweep 4s ease-in-out infinite;
}
.stats-row { position: relative; }
@keyframes statsSweep {
    0% { left: 0; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: calc(100% - 60px); opacity: 0; }
}

/* Advisory note — breathing border */
.advisory-note {
    position: relative;
    border: none !important;
    overflow: hidden;
}
.advisory-note::before {
    content: '';
    position: absolute; inset: 0;
    border: 1px solid rgba(255,255,255,0.06);
    animation: noteBreathe 4s ease-in-out infinite;
}
@keyframes noteBreathe {
    0%, 100% { border-color: rgba(255,255,255,0.06); }
    50% { border-color: rgba(255,255,255,0.12); }
}

/* Quote section — animated quotation marks */
.quote-section {
    position: relative;
    overflow: hidden;
}
.quote-section::before,
.quote-section::after {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 12rem;
    line-height: 1;
    color: rgba(181,154,91,0.08);
    position: absolute;
    animation: quoteFloat 8s ease-in-out infinite alternate;
}
.quote-section::before {
    content: '\201C';
    top: -20px; left: 40px;
}
.quote-section::after {
    content: '\201D';
    bottom: -60px; right: 40px;
    animation-delay: -4s;
}
@keyframes quoteFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* Location cards — subtle animated top border */
.location {
    position: relative;
    overflow: hidden;
}
.location::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: locationSweep 6s ease-in-out infinite;
}
.location:nth-child(2)::after { animation-delay: -1.5s; }
.location:nth-child(3)::after { animation-delay: -3s; }
.location:nth-child(4)::after { animation-delay: -4.5s; }
@keyframes locationSweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Advisor cards — animated bottom dot */
.advisor-card {
    position: relative;
    overflow: hidden;
}
.advisor-card::after {
    content: '';
    position: absolute;
    bottom: 12px; left: 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    opacity: 0;
    transform: translateX(-50%);
    animation: advisorPulse 3s ease-in-out infinite;
}
.advisor-card:nth-child(2)::after { animation-delay: -0.3s; }
.advisor-card:nth-child(3)::after { animation-delay: -0.6s; }
.advisor-card:nth-child(4)::after { animation-delay: -0.9s; }
.advisor-card:nth-child(5)::after { animation-delay: -1.2s; }
.advisor-card:nth-child(6)::after { animation-delay: -1.5s; }
.advisor-card:nth-child(7)::after { animation-delay: -1.8s; }
.advisor-card:nth-child(8)::after { animation-delay: -2.1s; }
.advisor-card:nth-child(9)::after { animation-delay: -2.4s; }
.advisor-card:nth-child(10)::after { animation-delay: -2.7s; }
@keyframes advisorPulse {
    0%, 100% { opacity: 0; transform: translateX(-50%) scale(0.5); }
    50% { opacity: 0.5; transform: translateX(-50%) scale(1); }
}

/* Marquee — glow at edges */
.marquee-bar {
    position: relative;
}
.marquee-bar::before,
.marquee-bar::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.marquee-bar::before {
    left: 0;
    background: linear-gradient(90deg, #1b2d45, transparent);
}
.marquee-bar::after {
    right: 0;
    background: linear-gradient(-90deg, #1b2d45, transparent);
}

/* Contact form — animated focus ring */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(181,154,91,0.08), 0 0 20px rgba(181,154,91,0.04);
}