/* ------------------------------------------------------------
   Getecz - shared styles (animations, placeholders, helpers)
   Brand colours come from assets/logo.png:
     blue #317BD4 · light blue #639DE4 · deep blue #0863D1 · black
   ------------------------------------------------------------ */

:root {
    --ink: #0A0B0D;
    --ink-2: #15171C;
    --ink-3: #111317;
    --paper: #F5F4EF;
    --line: #E4E2DA;
    --brand: #317BD4;
    --brand-light: #639DE4;
    --brand-strong: #1F6BCB;
}

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, .font-display { font-family: 'Sora', system-ui, sans-serif; letter-spacing: -0.02em; }

/* Section eyebrow label (e.g. "01 — WHAT WE DO") */
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* Dotted grid backgrounds */
.dot-grid       { background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 28px 28px; }
.dot-grid-dense { background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px); background-size: 18px 18px; }

/* Image placeholders - replace the element with an <img> when you have the photo */
.ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    border: 1.5px dashed #C7C4B8; background: #ECEAE2; color: #8A8778; text-align: center; padding: 16px;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em;
}
.ph-dark { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.03); color: #8F939C; }

/* Load-in animation for hero content */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .22s; } .d3 { animation-delay: .34s; } .d4 { animation-delay: .46s; }

/* Floating cards */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float  { animation: floatY 6s ease-in-out infinite; }
.float2 { animation: floatY 7s ease-in-out 1.2s infinite; }

/* Logo marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { animation: marquee 38s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* Pulsing location dots */
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }
.ping { animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite; }

/* Animated dashed route between offices */
@keyframes dash { to { stroke-dashoffset: -48; } }
.dash { animation: dash 1.6s linear infinite; }

/* Slow rotating rings in the hero */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-slow { animation: spin 40s linear infinite; }

/* Process line draws itself when scrolled into view (AOS adds .aos-animate) */
.grow-line { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.2,.7,.2,1) .2s; }
.aos-animate .grow-line, .grow-line.aos-animate { transform: scaleX(1); }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.blink { animation: blink 1.6s ease-in-out infinite; }

/* Cards that lift on hover */
.lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(10,11,13,.28); border-color: var(--brand) !important; }
.lift .arrow { transition: transform .25s; }
.lift:hover .arrow { transform: translateX(6px); }

.btn-lift { transition: transform .2s, background-color .2s, box-shadow .2s; }
.btn-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(49,123,212,.55); }

/* Navbar
   - top of page: fully transparent, white logo + light links (sits on the dark hero)
   - scrolled:    light frosted-white bar, dark logo + dark links
   - mobile menu open: solid dark so the dark menu panel matches */
#navbar { border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; }
#navbar .logo-on-light { display: none; }
#navbar .nav-pill { border: 1px solid transparent; transition: border-color .3s, background-color .3s; }
#navbar .nav-link { color: #D0D3D9; transition: color .2s, background-color .2s; }
#navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
#navbar .nav-link.is-active { color: #fff; background: rgba(255,255,255,.12); }
#navbar .nav-burger { color: #fff; border: 1px solid rgba(255,255,255,.2); transition: color .2s, border-color .2s, background-color .2s; }
#navbar .nav-burger:hover { background: rgba(255,255,255,.1); }

#navbar.scrolled:not(.menu-open) {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom-color: rgba(10,11,13,.08);
    box-shadow: 0 10px 30px -18px rgba(10,11,13,.25);
}
#navbar.scrolled:not(.menu-open) .logo-on-dark { display: none; }
#navbar.scrolled:not(.menu-open) .logo-on-light { display: block; }
#navbar.scrolled:not(.menu-open) .nav-pill { border-color: rgba(10,11,13,.07); background: rgba(10,11,13,.025); }
#navbar.scrolled:not(.menu-open) .nav-link { color: #3A3D44; }
#navbar.scrolled:not(.menu-open) .nav-link:hover { color: #0A0B0D; background: rgba(10,11,13,.05); }
#navbar.scrolled:not(.menu-open) .nav-link.is-active { color: var(--brand-strong); background: rgba(49,123,212,.1); }
#navbar.scrolled:not(.menu-open) .nav-burger { color: #0A0B0D; border-color: rgba(10,11,13,.12); }
#navbar.scrolled:not(.menu-open) .nav-burger:hover { background: rgba(10,11,13,.05); }

#navbar.menu-open { background: #0A0B0D; border-bottom-color: rgba(255,255,255,.08); }

/* Soft brand glow behind the hero visual */
.hero-glow {
    background: radial-gradient(closest-side, rgba(49,123,212,.35), rgba(49,123,212,0));
    filter: blur(20px);
}
/* Dot grid that fades out towards the edges */
.dot-grid-fade {
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .grow-line { transform: scaleX(1); }
}


/* Keep the HTML hidden attribute working on elements that also use Tailwind display classes */
[hidden] { display: none !important; }

/* Technology logo strip: muted by default, full colour on hover, faded edges */
.brand-logo { opacity: .55; filter: grayscale(1); transition: opacity .35s, filter .35s; }
.brand-logo:hover { opacity: 1; filter: grayscale(0); }
.marquee-fade {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
@keyframes marqueeRow { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee-row { animation: marqueeRow 32s linear infinite; }
.marquee-wrap:hover .marquee-row { animation-play-state: paused; }

/* WhatsApp floating button (bottom right) with a soft pulsing green glow */
.whatsapp-btn {
    background: #25D366;
    box-shadow: 0 0 18px 4px rgba(37,211,102,.55), 0 6px 16px rgba(10,11,13,.2);
    animation: waGlow 2.4s ease-in-out infinite;
    transition: transform .2s, background-color .2s;
}
.whatsapp-btn::before,
.whatsapp-btn::after {
    content: ""; position: absolute; inset: 0; border-radius: 9999px;
    background: #25D366; z-index: -1; opacity: .5;
    animation: waRipple 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.whatsapp-btn::after { animation-delay: 1.2s; }
.whatsapp-btn:hover { background: #1EBE5B; transform: translateY(-2px) scale(1.06); }
.whatsapp-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes waGlow {
    0%, 100% { box-shadow: 0 0 14px 2px rgba(37,211,102,.45), 0 6px 16px rgba(10,11,13,.2); }
    50%      { box-shadow: 0 0 30px 10px rgba(37,211,102,.75), 0 6px 16px rgba(10,11,13,.2); }
}
@keyframes waRipple {
    0%   { transform: scale(1);   opacity: .5; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Arrow nudge on plain links (outside .lift cards) */
.arrow-hover .arrow { transition: transform .25s; }
.arrow-hover:hover .arrow { transform: translateX(6px); }

/* Filter chips (products / our work). Items are filtered by the script in includes/footer.php */
.filter-chip {
    padding: 9px 16px; border-radius: 9999px; border: 1px solid var(--line); background: #fff;
    font-size: 14px; font-weight: 500; color: #3A3D44; transition: background-color .2s, color .2s, border-color .2s;
}
.filter-chip:hover { border-color: var(--brand); color: var(--brand-strong); }
.filter-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Faint grid behind product logos */
.product-grid {
    background-image: linear-gradient(rgba(10,11,13,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,11,13,.05) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 100%);
}

/* FAQ accordion */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-icon { transition: transform .25s, background-color .25s, color .25s; }
.faq[open] .faq-icon { transform: rotate(45deg); background: var(--brand); border-color: var(--brand); color: #fff; }