/* ==========================================================
   websitem · custom site styles (animations & helpers)
   ========================================================== */

:root {
    --ink: #0a0a0a;
    --surface: #111;
    --muted: #7a7a7a;
    /* Accent — overridden inline by site layout from settings */
    --accent: #ffffff;
    --accent-text: #0a0a0a;
    --accent-hover: #7a7a7a;
}

/* Accent utilities — used by primary CTAs across the site */
.btn-accent {
    background-color: var(--accent);
    color: var(--accent-text);
    transition: background-color .25s ease, color .25s ease;
}
.btn-accent:hover {
    background-color: var(--accent-hover);
    color: var(--accent);
}
.btn-accent-outline {
    border-color: rgba(255,255,255,0.30);
    color: #fff;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-accent-outline:hover {
    background-color: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}
.text-accent     { color: var(--accent); }
.bg-accent       { background-color: var(--accent); }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: #fff; }

/* ---- Hero Ken Burns slow zoom ---- */
@keyframes kenburns {
    0%   { transform: scale(1.0)   translate(0, 0); }
    100% { transform: scale(1.15) translate(-1%, -2%); }
}
.kenburns {
    animation: kenburns 18s ease-in-out infinite alternate;
    will-change: transform;
}

/* ---- Hero text reveal ---- */
@keyframes riseIn {
    from { opacity: 0; transform: translate3d(0, 32px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.rise-in        { animation: riseIn .9s cubic-bezier(.22,.8,.36,1) both; }
.rise-in.delay-1{ animation-delay: .1s; }
.rise-in.delay-2{ animation-delay: .25s; }
.rise-in.delay-3{ animation-delay: .4s; }
.rise-in.delay-4{ animation-delay: .55s; }

/* ---- Marquee ---- */
@keyframes marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.marquee {
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: inline-flex;
    gap: 2.5rem;
    animation: marquee 40s linear infinite;
    will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .marquee__track, .kenburns, .rise-in { animation: none !important; }
}

/* ---- Scroll reveal (used by JS) ---- */
/* Default: visible (no-JS / reduced-motion / pre-JS) */
.reveal { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.22,.8,.36,1); }
/* When JS is ready, hide reveals until they enter the viewport */
.js-ready .reveal              { opacity: 0; transform: translate3d(0, 36px, 0); }
.js-ready .reveal.is-visible   { opacity: 1; transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) {
    .js-ready .reveal { opacity: 1; transform: none; }
}

/* ---- Project card hover zoom + reveal ----
   NOTE: position is intentionally NOT set here — let Tailwind utilities
   (`relative`, `absolute inset-0`, etc.) decide so cards work both as
   self-sized containers and as absolutely-filled children. */
.proj-card { overflow: hidden; isolation: isolate; }
.proj-card__img {
    transition: transform 1.1s cubic-bezier(.22,.8,.36,1), filter .6s ease;
    will-change: transform;
}
.proj-card:hover .proj-card__img { transform: scale(1.06); filter: brightness(.7); }
.proj-card__meta {
    transition: transform .55s cubic-bezier(.22,.8,.36,1), opacity .4s ease;
    transform: translate3d(0, 12px, 0);
    opacity: 0;
}
.proj-card:hover .proj-card__meta { transform: none; opacity: 1; }

/* ---- Underline animated link ---- */
.link-underline { position: relative; }
.link-underline::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
    height: 1px; background: currentColor; transform-origin: right;
    transform: scaleX(0); transition: transform .5s cubic-bezier(.22,.8,.36,1);
}
.link-underline:hover::after { transform-origin: left; transform: scaleX(1); }

/* ---- Cursor scroll cue ---- */
@keyframes cueBounce {
    0%, 100% { transform: translateY(0); opacity: .6; }
    50%      { transform: translateY(8px); opacity: 1; }
}
.scroll-cue { animation: cueBounce 1.6s ease-in-out infinite; }

/* ---- Fullscreen nav drawer ---- */
.nav-drawer { transition: transform .5s cubic-bezier(.22,.8,.36,1); }
.nav-drawer.is-closed { transform: translate3d(100%, 0, 0); }
.nav-drawer.is-open   { transform: translate3d(0, 0, 0); }

/* Big nav links — scale with viewport so 5+ items always fit on screen */
.nav-drawer__link {
    font-size: clamp(2rem, 8vh, 4.75rem);
    line-height: 0.9;
}
@media (min-width: 1024px) {
    .nav-drawer__link {
        /* On wide screens cap a bit smaller so right column has room */
        font-size: clamp(2.5rem, 9vh, 5.5rem);
    }
}

/* ---- Number count-up: just a placeholder hook for JS ---- */
.count-up { font-variant-numeric: tabular-nums; }

/* ============================================================
   Brands multi-row marquee — humanagement.me style
   ============================================================ */
@keyframes brandsScrollLeft {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes brandsScrollRight {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.brands-marq { width: 100%; overflow: hidden; }
.brands-row  { width: 100%; overflow: hidden; white-space: nowrap; }
.brands-row__track {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 1.25rem;
    padding-left: 1.25rem;
    animation: brandsScrollLeft 80s linear infinite;
    will-change: transform;
}
.brands-row--reverse .brands-row__track {
    animation: brandsScrollRight 90s linear infinite;
}
.brands-row__item {
    flex: 0 0 auto !important;
    width: 220px;
    height: 130px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.01);
    transition: border-color .35s ease, background-color .35s ease, opacity .35s ease;
    opacity: 0.85;
    text-decoration: none;
}
.brands-row__item:hover {
    border-color: rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.04);
    opacity: 1;
}
@media (min-width: 640px) {
    .brands-row__item { width: 240px; height: 150px; }
}
@media (min-width: 1024px) {
    .brands-row__item { width: 260px; height: 166px; padding: 1.875rem 1.25rem; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .brands-row__track { animation: none !important; }
}


/* Honeypot — visible to bots, hidden from humans (screen-reader friendly). */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ============================================================
   Hero YouTube background — cover viewport, hide YT chrome
   ============================================================ */
.hero-yt { isolation: isolate; }

/* Iframe sized 16:9 to cover viewport, then scaled 1.35x so the
   YouTube title bar and "More videos" overlay sit off-screen. */
.hero-yt__frame {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Cover whichever axis is larger: width = max(100vw, 100vh × 16/9), height matches */
    width: max(100vw, calc(100vh * (16 / 9)));
    height: max(100vh, calc(100vw * (9 / 16)));
    transform: translate(-50%, -50%) scale(1.35);
    transform-origin: center center;
    border: 0;
    background: #000;
}

@media (max-width: 640px) {
    .hero-yt__frame {
        /* On small portrait screens YT chrome is denser — push out a bit more */
        transform: translate(-50%, -50%) scale(1.6);
    }
}

/* ============================================================
   Hero Slider
   ============================================================ */

.hero-slider { isolation: isolate; }

.hero-slide {
    opacity: 0;
    transition: opacity 1s cubic-bezier(.22,.8,.36,1);
    pointer-events: none;
    visibility: hidden;
}
.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: 2;
}

/* Slide content rises in when slide becomes active */
.hero-slide .hero-slide__eyebrow,
.hero-slide .hero-slide__title,
.hero-slide .hero-slide__subtitle,
.hero-slide .hero-slide__cta {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .8s cubic-bezier(.22,.8,.36,1), transform .8s cubic-bezier(.22,.8,.36,1);
}
.hero-slide.is-active .hero-slide__eyebrow  { opacity: 1; transform: none; transition-delay: .1s; }
.hero-slide.is-active .hero-slide__title    { opacity: 1; transform: none; transition-delay: .2s; }
.hero-slide.is-active .hero-slide__subtitle { opacity: 1; transform: none; transition-delay: .35s; }
.hero-slide.is-active .hero-slide__cta      { opacity: 1; transform: none; transition-delay: .5s; }

/* Indicator dots */
.hero-dot {
    width: 28px;
    height: 2px;
    background: rgba(255,255,255,.3);
    transition: background .4s ease, width .4s ease;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.hero-dot:hover { background: rgba(255,255,255,.6); }
.hero-dot.is-active {
    background: #fff;
    width: 56px;
}

/* ============================================================
   Cookie banner
   ============================================================ */
.cookie-banner {
    transform: translate3d(0, 110%, 0);
    transition: transform .6s cubic-bezier(.22,.8,.36,1);
}
.cookie-banner.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide .hero-slide__eyebrow,
    .hero-slide .hero-slide__title,
    .hero-slide .hero-slide__subtitle,
    .hero-slide .hero-slide__cta,
    .cookie-banner { transition: none !important; animation: none !important; }
}

/* ============================================================
   Quill editor (admin)
   ============================================================ */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: rgba(255,255,255,.15) !important;
    background: rgba(255,255,255,.02);
}
.ql-toolbar.ql-snow .ql-stroke { stroke: #ccc; }
.ql-toolbar.ql-snow .ql-fill   { fill: #ccc; }
.ql-toolbar.ql-snow .ql-picker-label { color: #ccc; }
.ql-editor { color: #fff; min-height: 240px; }
.ql-editor.ql-blank::before { color: #7a7a7a; font-style: normal; }

/* Back-to-top button -------------------------------------------------- */
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top__ring circle[data-back-to-top-progress] {
    transition: stroke-dashoffset 80ms linear;
}

/* Where-we-work globe ------------------------------------------------- */
/* Only the box; everything inside is painted on the canvas by globe.js. */
.globe {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
}
.globe__canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: #000;
    /* pan-y keeps a vertical swipe scrolling the page: the globe fills
       most of a phone screen and must not trap the scroll. Horizontal
       drags and two-finger pinches still reach the canvas. */
    touch-action: pan-y;
    cursor: grab;
}
.globe__canvas:active { cursor: grabbing; }

/* Placeholder disc until the map data lands, so the section never jumps. */
.globe::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 50%, #131313 0 42%, #0a0a0a 42%);
    transition: opacity .5s ease;
}
.globe.is-ready::after { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
    .globe { aspect-ratio: 1 / 1; }
}