/* darrenihenacho.com — shared base styles
   Reused across all pages (/, /creative/, /professional/, /academy/).
   Tailwind config lives in shared/components.js (JS, not CSS). */

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #F3F2EF;
    color: #0A0A0A;
}

/* Grid-pattern background texture (used sparingly as page texture) */
.bg-grid {
    background-size: 4rem 4rem;
    mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
}
@media (max-width: 768px) {
    .bg-grid { background-size: 2rem 2rem; }
}

/* Custom cursor (desktop only, pointer: fine) */
@media (pointer: fine) {
    body { cursor: none; }
    .cursor-dot, .cursor-outline { display: block; }
}
@media (pointer: coarse) {
    body { cursor: auto; }
    .cursor-dot, .cursor-outline { display: none !important; }
}
.cursor-dot, .cursor-outline {
    position: fixed; top: 0; left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%; z-index: 9999;
    pointer-events: none;
}
.cursor-dot { width: 8px; height: 8px; background-color: #FF3B00; }
.cursor-outline {
    width: 40px; height: 40px;
    border: 1px solid #0A0A0A;
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
}
body.hovering .cursor-outline {
    width: 100px; height: 100px;
    background-color: rgba(255, 59, 0, 0.08);
    border-color: #FF3B00;
}

/* .menu-link / .fill hover reveal pattern — reuse for any similar link-hover */
.menu-link {
    position: relative;
    display: inline-block;
    overflow: hidden;
    /* A long single word (e.g. "Professional") at mobile widths must wrap
       within its own box, not overflow it. overflow-wrap alone isn't enough
       here: .menu-link is a direct flex item (child of the <a class="flex
       ...">), and flex items default to min-width: auto, which computes to
       the full unbreakable-word width regardless of overflow-wrap in some
       browsers -- min-width: 0 removes that floor so shrinking/wrapping can
       actually happen. word-break is a fallback for engines that don't
       honor overflow-wrap the same way. */
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}
.menu-link .fill {
    position: absolute;
    inset: 0;
    color: #FF3B00;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    /* No white-space: nowrap here (removed) -- this duplicate must wrap at
       the exact same point as its sibling text span for the clip-path
       color-wipe to stay visually aligned once a long word wraps to a
       second line. Inherits overflow-wrap/word-break from .menu-link. */
}
.menu-link:hover .fill,
.menu-link:focus-visible .fill {
    clip-path: inset(0 0 0 0);
}
.menu-index {
    font-variant-numeric: tabular-nums;
}

/* Long single words in any split-heading (sub-page hero h1s, About's chapter
   pull-quotes and through-line) must wrap within their own line instead of
   overflowing -- these were silently clipped by a nearer ancestor's
   overflow: hidden (e.g. the hero <section>), invisible to a page-level
   scrollWidth check. Each word already sits in its own per-word wrapper
   (built by initSplitHeading in shared/components.js); overflow-wrap is
   inherited down into those wrappers/spans automatically. */
.split-heading {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Same fix, applied broadly to every heading site-wide -- not just
   .split-heading. Found via the corrected element-level audit: Academy's
   "The Academy." h2 sits in a narrow md:col-span-4 sidebar column and
   overflowed it by up to 175px at several viewports, silently clipped by
   an ancestor, invisible to the old page-level scrollWidth check. Only
   activates when a word doesn't already fit its line, so this can't
   regress any heading that currently wraps fine. */
h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Scrollbar (sub-pages scroll; landing page does not) */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #F3F2EF; }
::-webkit-scrollbar-thumb { background: #0A0A0A; }

/* Parallax image — sits inside an overflow-hidden container */
.img-parallax {
    height: 120%; width: 100%;
    object-fit: cover; object-position: center;
    transform-origin: bottom;
    will-change: transform;
}

/* Gallery/grid card hover-reveal overlay */
.work-overlay {
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.work-card:hover .work-overlay {
    transform: translateY(0%);
}

/* Accordion (height animated via GSAP in shared/components.js) */
.accordion-content {
    height: 0;
    overflow: hidden;
}

/* Marquee (see initMarquee in shared/components.js). Reused verbatim from
   reference/index.html's "Form follows Function" marquee. */
.marquee-container { display: flex; overflow: hidden; user-select: none; }
.marquee-content { flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; }

/* Horizontal scroll-snap row (hidden scrollbar). Used by the logo-scroll
   component below; reuse for any similar horizontal card/logo row. */
.scroll-row {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-row::-webkit-scrollbar {
    display: none;
}

/* Logo-scroll-with-popup (see renderLogoScroll/initLogoScroll in
   shared/components.js). Prevents native browser drag-ghosting on the logo
   images so it doesn't fight the component's own click-drag-to-scroll. */
.logo-scroll-item img {
    -webkit-user-drag: none;
    user-select: none;
}

/* Shared full-screen slide-up popup/modal. Reused from the same convention
   already established in reference/index.html and reference/showroom.html
   (archive/about/inspect modals) rather than inventing a new modal style.
   The slide itself is animated via GSAP (translateY 100% <-> 0). */
.modal-overlay {
    transform: translateY(100%);
    will-change: transform;
}

/* While the logo detail modal is open, the fixed body lock in
   shared/components.js prevents the page behind it from moving. The inner
   content region remains the only vertical scroll surface and contains any
   overscroll at its boundary instead of chaining it to the page. */
html.logo-scroll-modal-open,
body.logo-scroll-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
.logo-scroll-modal {
    overscroll-behavior: contain;
}
.logo-scroll-modal-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}