/* ═══════════════════════════════════════════════════════════════
   HireLocal — 3D / motion layer for the homepage
   Pure CSS 3D transforms. No WebGL, no dependencies.
   Animates transform/opacity only so it stays on the GPU.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --hl-green:  #25D366;
    --hl-deep:   #1a6b4a;
    --hl-teal:   #0d9488;
    --hl-amber:  #fbbf24;
    --hl-violet: #8b5cf6;
    --hl-ease:   cubic-bezier(.22, 1, .36, 1);
}

/* ───────────────────────────────────────────────────────────────
   1. HERO — depth stage
   ─────────────────────────────────────────────────────────────── */

.banner {
    overflow: hidden;
    perspective: 1200px;
    perspective-origin: 50% 40%;
}

/* Aurora blobs drifting behind the hero copy */
.hl-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.hl-aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}
.hl-aurora span:nth-child(1) {
    width: 420px; height: 420px; top: -80px; left: -60px;
    background: radial-gradient(circle at 30% 30%, var(--hl-green), transparent 68%);
    animation: hl-drift-a 22s var(--hl-ease) infinite alternate;
}
.hl-aurora span:nth-child(2) {
    width: 360px; height: 360px; bottom: 40px; right: -70px;
    background: radial-gradient(circle at 60% 40%, var(--hl-teal), transparent 68%);
    animation: hl-drift-b 27s var(--hl-ease) infinite alternate;
}
.hl-aurora span:nth-child(3) {
    width: 300px; height: 300px; top: 32%; left: 55%;
    background: radial-gradient(circle at 50% 50%, var(--hl-violet), transparent 66%);
    opacity: .32;
    animation: hl-drift-c 31s var(--hl-ease) infinite alternate;
}

@keyframes hl-drift-a {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(90px, 70px, 0) scale(1.18); }
}
@keyframes hl-drift-b {
    0%   { transform: translate3d(0,0,0) scale(1.1); }
    100% { transform: translate3d(-80px, -60px, 0) scale(.9); }
}
@keyframes hl-drift-c {
    0%   { transform: translate3d(0,0,0) scale(.95); }
    100% { transform: translate3d(-110px, 50px, 0) scale(1.25); }
}

/* Keep hero copy above the aurora */
.banner .container { position: relative; z-index: 2; }
.banner .company-brand { z-index: 2; }

/* ── Floating 3D job chips ────────────────────────────────────── */
.hl-chip-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transform-style: preserve-3d;
}

.hl-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px 11px 12px;
    background: rgba(255,255,255,.94);
    border-radius: 14px;
    box-shadow:
        0 18px 40px -12px rgba(0,0,0,.45),
        0 2px 0 0 rgba(255,255,255,.7) inset;
    font-size: 13px;
    font-weight: 600;
    color: #16303f;
    white-space: nowrap;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}
.hl-chip .hl-chip-ico {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #fff;
    transform: translateZ(18px);
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.5);
}
.hl-chip .hl-chip-sub {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: #8b98a5;
    letter-spacing: .2px;
}

/* Individual placement + independent float cycles */
.hl-chip--1 { top: 20%;  left: 3%;  animation: hl-float-1 9s  ease-in-out infinite; }
.hl-chip--2 { top: 58%;  left: 7%;  animation: hl-float-2 11s ease-in-out infinite; }
.hl-chip--3 { top: 17%;  right: 4%; animation: hl-float-3 10s ease-in-out infinite; }
.hl-chip--4 { top: 52%;  right: 2%; animation: hl-float-1 12s ease-in-out infinite reverse; }

@keyframes hl-float-1 {
    0%,100% { transform: translate3d(0,0,0)      rotateX(6deg)  rotateY(-14deg); }
    50%     { transform: translate3d(0,-22px,30px) rotateX(-4deg) rotateY(-6deg); }
}
@keyframes hl-float-2 {
    0%,100% { transform: translate3d(0,0,0)      rotateX(-5deg) rotateY(12deg); }
    50%     { transform: translate3d(10px,-26px,20px) rotateX(7deg) rotateY(4deg); }
}
@keyframes hl-float-3 {
    0%,100% { transform: translate3d(0,0,0)       rotateX(4deg)  rotateY(16deg); }
    50%     { transform: translate3d(-12px,-18px,36px) rotateX(-6deg) rotateY(6deg); }
}

/* ── Hero copy entrance ───────────────────────────────────────── */
.hl-rise {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    animation: hl-rise-in .9s var(--hl-ease) forwards;
}
.hl-rise--1 { animation-delay: .05s; }
.hl-rise--2 { animation-delay: .18s; }
.hl-rise--3 { animation-delay: .31s; }
.hl-rise--4 { animation-delay: .44s; }
.hl-rise--5 { animation-delay: .57s; }

@keyframes hl-rise-in {
    to { opacity: 1; transform: translate3d(0,0,0); }
}

/* Live dot on the hero badge */
.banner-badge span {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .7);
    animation: hl-pulse 2.2s ease-out infinite;
}
@keyframes hl-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(37,211,102,.7); }
    70%  { box-shadow: 0 0 0 11px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0    rgba(37,211,102,0); }
}

/* Gradient sweep across the accented headline word */
.hl-shine {
    background: linear-gradient(100deg, #fff 20%, var(--hl-green) 42%, #b9ffd4 54%, #fff 76%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hl-shine-sweep 5.5s linear infinite;
}
@keyframes hl-shine-sweep {
    0%   { background-position: 180% 0; }
    100% { background-position: -80% 0; }
}

/* ───────────────────────────────────────────────────────────────
   2. STATS STRIP — 3D flip-in tiles with counters
   ─────────────────────────────────────────────────────────────── */

.hl-stats { perspective: 900px; }

.hl-stat {
    transform-style: preserve-3d;
    transform: rotateX(-70deg) translate3d(0, 18px, 0);
    opacity: 0;
    transition:
        transform .75s var(--hl-ease),
        opacity   .55s ease-out;
    cursor: default;
}
.hl-stat.is-in { transform: rotateX(0) translate3d(0,0,0); opacity: 1; }
.hl-stat:nth-child(1).is-in { transition-delay: .00s; }
.hl-stat:nth-child(2).is-in { transition-delay: .09s; }
.hl-stat:nth-child(3).is-in { transition-delay: .18s; }
.hl-stat:nth-child(4).is-in { transition-delay: .27s; }

.hl-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--hl-green);
    line-height: 1.15;
    text-shadow: 0 2px 0 rgba(0,0,0,.18);
    transition: transform .3s var(--hl-ease);
}
.hl-stat:hover .hl-stat-num { transform: translate3d(0,-3px,26px) scale(1.06); }
.hl-stat-label { font-size: 12px; color: rgba(255,255,255,.72); letter-spacing: .3px; }

/* ───────────────────────────────────────────────────────────────
   3. CATEGORY TILES — mouse-tracked 3D tilt
   ─────────────────────────────────────────────────────────────── */

.hl-tilt-scene { perspective: 800px; }

.cat-tile {
    transform-style: preserve-3d;
    transition:
        transform .35s var(--hl-ease),
        box-shadow .35s var(--hl-ease),
        border-color .25s ease,
        background .25s ease;
    will-change: transform;
}
.cat-tile i,
.cat-tile span,
.cat-tile small { transition: transform .35s var(--hl-ease), color .25s ease; }

.cat-tile:hover {
    box-shadow: 0 22px 40px -18px rgba(26,107,74,.55);
}
.cat-tile:hover i     { transform: translateZ(38px) scale(1.16) rotate(-7deg); }
.cat-tile:hover span  { transform: translateZ(22px); }
.cat-tile:hover small { transform: translateZ(12px); }

/* Sheen that slides across on hover */
.cat-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .7s var(--hl-ease);
    pointer-events: none;
}
.cat-tile { position: relative; overflow: hidden; }
.cat-tile:hover::after { transform: translateX(120%); }

/* ───────────────────────────────────────────────────────────────
   4. JOB CARDS — lift out of the page
   ─────────────────────────────────────────────────────────────── */

.hl-cards-scene { perspective: 1400px; }

.home-job-card {
    transform-style: preserve-3d;
    transition:
        transform .4s var(--hl-ease),
        box-shadow .4s var(--hl-ease),
        border-color .3s ease;
    will-change: transform;
}
.home-job-card:hover {
    transform: translate3d(0, -10px, 40px) rotateX(3.5deg);
    border-color: #c9f2da;
    box-shadow:
        0 30px 50px -22px rgba(16, 58, 40, .38),
        0 4px 12px -6px rgba(16, 58, 40, .2);
}
.home-job-card .card-logo {
    transition: transform .4s var(--hl-ease), box-shadow .4s var(--hl-ease);
}
.home-job-card:hover .card-logo {
    transform: translateZ(30px) rotate(-6deg) scale(1.07);
    box-shadow: 0 12px 22px -10px rgba(0,0,0,.42);
}
.home-job-card:hover h3 { transform: translateZ(16px); }
.home-job-card h3 { transition: transform .4s var(--hl-ease); }

/* Urgent / premium tag gets a gentle attention wobble */
.home-job-card .tg-featuretag {
    animation: hl-tag-tilt 3.4s ease-in-out infinite;
    transform-origin: 100% 0;
}
@keyframes hl-tag-tilt {
    0%,88%,100% { transform: rotate(0deg); }
    92%         { transform: rotate(-4deg); }
    96%         { transform: rotate(3deg); }
}

/* ───────────────────────────────────────────────────────────────
   5. HOW IT WORKS — cards swing in on their edge
   ─────────────────────────────────────────────────────────────── */

.hl-hiw-scene { perspective: 1100px; }

.hiw-card {
    transform-style: preserve-3d;
    opacity: 0;
    transition:
        transform .8s var(--hl-ease),
        opacity   .6s ease-out,
        box-shadow .35s var(--hl-ease);
    will-change: transform;
}
.hl-hiw-col--left  .hiw-card { transform: rotateY(-26deg) translate3d(-40px,0,-60px); transform-origin: left center; }
.hl-hiw-col--right .hiw-card { transform: rotateY( 26deg) translate3d( 40px,0,-60px); transform-origin: right center; }

/* Cards sit at nth-child 2–4 because the column heading is first */
.hiw-card.is-in { transform: rotateY(0) translate3d(0,0,0); opacity: 1; }
.hiw-card:nth-child(3).is-in { transition-delay: .11s; }
.hiw-card:nth-child(4).is-in { transition-delay: .22s; }

.hiw-card:hover {
    box-shadow: 0 24px 44px -20px rgba(16,58,40,.4);
}

/* Step number reads as a solid 3D chip */
.hiw-step-num {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .4s var(--hl-ease);
}
.hiw-step-num::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    filter: brightness(.62);
    transform: translate3d(0, 5px, -10px);
    z-index: -1;
}
.hiw-card:hover .hiw-step-num { transform: translateZ(26px) rotate(-10deg); }

/* ───────────────────────────────────────────────────────────────
   6. SCROLL REVEAL — generic
   ─────────────────────────────────────────────────────────────── */

.hl-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity .7s ease-out, transform .7s var(--hl-ease);
}
.hl-reveal.is-in { opacity: 1; transform: translate3d(0,0,0); }

/* ───────────────────────────────────────────────────────────────
   7. EMPLOYER CTA — orbiting 3D shapes
   ─────────────────────────────────────────────────────────────── */

.hl-cta { position: relative; overflow: hidden; perspective: 900px; }
.hl-cta > .container { position: relative; z-index: 2; }

.hl-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform-style: preserve-3d; }
.hl-shapes i {
    position: absolute;
    display: block;
    border-radius: 22%;
    opacity: .16;
    will-change: transform;
}
.hl-shapes i:nth-child(1) { width: 86px;  height: 86px;  top: 12%; left: 6%;   background: var(--hl-green);  animation: hl-orbit-a 17s linear infinite; }
.hl-shapes i:nth-child(2) { width: 54px;  height: 54px;  top: 62%; left: 16%;  background: var(--hl-teal);   animation: hl-orbit-b 21s linear infinite; }
.hl-shapes i:nth-child(3) { width: 110px; height: 110px; top: 8%;  right: 8%;  background: var(--hl-deep);   animation: hl-orbit-b 25s linear infinite reverse; }
.hl-shapes i:nth-child(4) { width: 42px;  height: 42px;  top: 70%; right: 18%; background: var(--hl-amber);  animation: hl-orbit-a 19s linear infinite reverse; }

@keyframes hl-orbit-a {
    0%   { transform: rotateX(0)      rotateY(0)      translateZ(0)    rotate(0); }
    100% { transform: rotateX(360deg) rotateY(180deg) translateZ(40px) rotate(360deg); }
}
@keyframes hl-orbit-b {
    0%   { transform: rotateX(0)       rotateY(0)      translate3d(0,0,0); }
    100% { transform: rotateX(-360deg) rotateY(360deg) translate3d(0,-30px,60px); }
}

/* CTA buttons get a press-down depth */
.hl-btn-3d {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .22s var(--hl-ease), box-shadow .22s var(--hl-ease);
    box-shadow: 0 6px 0 -1px rgba(16,58,40,.35), 0 14px 26px -12px rgba(16,58,40,.5);
}
.hl-btn-3d:hover  { transform: translate3d(0,-3px,20px); box-shadow: 0 9px 0 -1px rgba(16,58,40,.35), 0 20px 34px -14px rgba(16,58,40,.55); }
.hl-btn-3d:active { transform: translate3d(0, 3px,0);   box-shadow: 0 2px 0 -1px rgba(16,58,40,.35), 0 6px 14px -8px rgba(16,58,40,.5); }

/* ───────────────────────────────────────────────────────────────
   8. Responsive + accessibility guards
   ─────────────────────────────────────────────────────────────── */

/* Floating chips are desktop-only garnish — they'd crowd a phone hero */
@media (max-width: 991px) {
    .hl-chip-field { display: none; }
    .hl-aurora span { filter: blur(52px); opacity: .38; }
}

/* Tilt tracking only where there's a real pointer */
@media (hover: none), (pointer: coarse) {
    .cat-tile:hover,
    .home-job-card:hover { transform: none; }
    .cat-tile:hover::after { transform: translateX(-120%); }
}

/* Honour the OS "reduce motion" setting — everything settles instantly */
@media (prefers-reduced-motion: reduce) {
    .hl-aurora span,
    .hl-chip,
    .hl-shapes i,
    .banner-badge span,
    .hl-shine,
    .home-job-card .tg-featuretag {
        animation: none !important;
    }
    .hl-shine {
        -webkit-text-fill-color: currentColor;
        background: none;
    }
    .hl-rise,
    .hl-reveal,
    .hl-stat,
    .hiw-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .hl-btn-3d,
    .cat-tile,
    .home-job-card { transition: none !important; }
}