/* ==========================================================================
   Site UI — the finalized design language, shared by every page
   (index.html, works.html, project.html and the Projects/… project pages).
   Documented in DESIGN.md › Site design language.

   Switched on by body classes:
     • site-ui        — labels, buttons, tabs, headings, footer, cursor, loader
     • site-dark      — the page dark #121212 (--c-inverse-home) everywhere
     • no-grid-lines  — no 4-column hairlines (or anything drawn on them)
     • no-lines       — no decorative lines ("+" marks, frames, dividers)
   Rules scoped by :where(.site-ui) add no specificity, so they win or lose
   by their own selector. Load this file after the component stylesheets and
   before the page's own stylesheet (pages/home.css, works.css, project.css),
   which may refine it for that page.
   ========================================================================== */

/* 0 · the page dark: #121212 (--c-inverse-home) in place of --c-inverse
   everywhere on the page — page, header, mobile menu, dark sections, cards,
   buttons */
.site-dark {
  --c-inverse: var(--c-inverse-home);
}

/* 1 · labels without the decorative dot: every dotted section label
   ("What I Do", "Testimonials", the footer's "Thanks for scrolling" …) */
.site-ui .eyebrow--dot::before { display: none; }

/* footer (layout F-01, components/footer-lab.js): the hero's dark
   (the same token the hero uses, --c-inverse via --hl-bg), and the hero's
   moving glass light in a layer behind the large name — it fills the
   bottom of the footer and fades out upward into the same dark, so there
   is no edge or separate band */
:where(.site-ui) .fl--site { background: var(--c-inverse); }

:where(.site-ui) .fl--site > .fl-light {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 62%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0.8) 45%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0.8) 45%, #000 62%);
}

:where(.site-ui) .fl--site > .fl-light canvas { display: block; width: 100%; height: 100%; }

:where(.site-ui) .fl--site > :not(.fl-light):not(.hero-fluid) { position: relative; z-index: 1; }

/* more air around the large name: above it (from the links / ©) and below
   it (from the page's bottom edge) */
:where(.site-ui) .fl--site .fl-wordmark { margin-top: 120px; margin-bottom: 70px; }

@media (max-width: 809px) {
  :where(.site-ui) .fl--site .fl-wordmark { margin-top: 70px; margin-bottom: 40px; }
  /* phones: the stacked footer is tall, so 62% reached up behind the small
     descriptor / © text; the light stays behind the name only, fading out
     below that text */
  :where(.site-ui) .fl--site > .fl-light { height: 230px; }
}

/* hero heading fluid hover (components/hero-fluid.js): the canvas covers the
   hero and takes over the heading only while the fluid moves; the DOM
   heading stays in place (and readable to assistive tech) underneath */
:where(.site-ui) .hero-fluid {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

:where(.site-ui) .is-fluid > .hero-fluid { opacity: 1; }
:where(.site-ui) .is-fluid-src { opacity: 0; }

/* cursor dot (components/cursor-dot.js) — the reference's .mouse: a 90px white
   disc clipped to a dot, difference-blended so it's white on dark sections
   and dark on light ones; never takes pointer events */
:where(.site-ui) .cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--c-on-inverse);         /* white; "difference" turns it dark on light */
  mix-blend-mode: difference;
  clip-path: circle(10%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease), clip-path 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}

:where(.site-ui) .cursor-dot.is-on { opacity: 1; }

@media (hover: none), (max-width: 1024px) {
  :where(.site-ui) .cursor-dot { display: none; }
}

/* 2 · no grid lines */

/* the page, section and footer hairlines ([data-grid-lines]) */
.no-grid-lines .grid-lines {
  display: none;
}

/* header: the "+" marks where the grid lines met the header rule */
.no-grid-lines .site-header__marks {
  display: none;
}

/* How I Work: the grey column lines */
.no-grid-lines .ag-col {
  display: none;
}

/* 3 · no decorative lines */

/* "+" corner marks on every [data-corners] box */
.no-lines .corners {
  display: none;
}

/* header bottom rule */
.no-lines .site-header::after {
  display: none;
}

/* hairline frames around images, media and cards */
.no-lines .media,
.no-lines .media__frame,
.no-lines .about__result-media,
.no-lines .project-card__media,
.no-lines .project-card__frame,
.no-lines .showreel__media,
.no-lines .cs-frame,
.no-lines .cs-card,
.no-lines .avatar {
  box-shadow: none;
}

/* boxes and strips drawn with lines: stats, awards, FAQ card */
.no-lines .metric,
.no-lines .award,
.no-lines .award:last-of-type,
.no-lines .faq__card {
  box-shadow: none;
}

/* divider rules — kept transparent so spacing doesn't shift */
.no-lines .faq__band,
.no-lines .accordion__item,
.no-lines .cs-card__stars {
  border-color: transparent;
}

/* How I Work on mobile: the outlined step cards */
.no-lines .ag-step {
  box-shadow: none;
}

/* mobile menu: the rule under each link */
.no-lines .mobile-menu__list a {
  border-color: transparent;
}

/* Main section headings in sentence case, as they're written (the display /
   headline styles set them in capitals): Selected Work, Services,
   Testimonials, Clients, Driven result ("Most designers ship decks…"),
   How I work, Recognition, FAQ; the Work and Project page titles,
   the project story sections ("Overview" …) and "Keep exploring".
   Same wording, fonts, sizes, weights and animations. Project titles under
   the thumbnails (homepage, Work page, Next project) show as written too:
   sentence case, proper nouns as spelled (projects.js › title). Service
   names in the Services list keep their caps. */
.site-ui .project-card__title,
.site-ui .page-hero__title,
.site-ui .story__name,
.site-ui .next-project__title,
.site-ui .section-head__title,
.site-ui .testimonials__title,
.site-ui .about__result-title,
.site-ui .ag-title,
.site-ui .awards__title,
.site-ui .faq__title {
  text-transform: none;
}

/* 5 · labels (body.site-ui) — reference (kstoimenov.com › Works tags such
   as "Hosting"): no fill, a visible 1px stroke, the text inside it, rounded
   ends. Our type (mono, --fs-mono-md 14px, uppercase); the stroke is the label's own
   colour at 35% (≈ the reference's #626262 on dark), so it reads on both
   dark and light sections. Used by: testimonial tags, Services tags and —
   as tabs (below) — the Work page's category filter.
   (Not the project cards — they keep their plain list of services.) */
.site-ui .cs-tags .chip,
.site-ui .svc-tag,
.site-ui .tab {
  display: inline-flex;
  align-items: center;
  height: auto;                            /* the base .chip (ui.css) sets a fixed height */
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);            /* testimonial tags: 14px */
  font-weight: 400;
  line-height: 18px;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-ui .cs-tags { gap: 6px; }
.site-ui .cs-tags .chip { justify-content: center; min-width: 0; }

/* 5b · tabs — the outlined label made selectable (Work page categories,
   <button class="tab">). Resting: muted text in its 35% stroke; hover /
   focus: full-colour text and stroke; active: filled in the text colour
   with the dark text — the outlined pill button's hover state, so a chosen
   tab reads like a pressed button. The count "(06)" sits at 60%. Colour
   changes crossfade over 0.3s (--ease), as the buttons. */
.site-ui .tab {
  gap: 6px;
  color: var(--c-muted);                   /* the muted grey of the headings' first lines (.t-muted) */
  cursor: pointer;
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.site-ui .tab__count { opacity: 0.6; }

.site-ui .tab:hover,
.site-ui .tab:focus-visible {
  color: var(--c-on-inverse);
  box-shadow: inset 0 0 0 1px var(--c-on-inverse);
}

.site-ui .tab.is-active {
  background-color: var(--c-on-inverse);
  box-shadow: inset 0 0 0 1px var(--c-on-inverse);
  color: var(--c-ink);
  cursor: default;
}

/* 4 · buttons (body.site-ui) — the outlined pill: transparent, 1.5px stroke,
   sentence-case sans label + ↗ beside it, 72px / 22px label ("Explore Our
   Work"; the hero's "Explore Work" is the 60px / 18px size, below). On hover
   it fills (a 0.3s crossfade), the label rolls (the site's .roll, as the top
   navigation) and the ↗ nudges up-right. On dark sections: white stroke +
   text, hover → white fill, ink text. On light sections: the inverse. */
.site-ui .footer-cta-box {
  --pill-fg: var(--c-on-inverse);
  --pill-fill: var(--c-on-inverse);
  --pill-on-fill: var(--c-ink);
  --pill-stroke: 1.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  height: 72px;
  padding: 0 34px;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--fs-title-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  background-color: transparent;
  box-shadow: inset 0 0 0 var(--pill-stroke) var(--pill-fg);
  color: var(--pill-fg);
  opacity: 1;
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    opacity 0.3s var(--ease),
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

/* press: a slight give, as the reference */
.site-ui .footer-cta-box:active {
  transform: scale(0.97);
}

.site-ui .footer-cta-box:hover,
.site-ui .footer-cta-box:focus-visible {
  background-color: var(--pill-fill);
  box-shadow: inset 0 0 0 var(--pill-stroke) var(--pill-fill);
  color: var(--pill-on-fill);
}

/* the label keeps the site's text roll (components/buttons.css .roll — the
   top navigation's hover: the text slides up out of view while a copy rises
   from below, 0.45s, --ease-in-out), alongside the fill */

/* "Explore Our Work": the bold ↗; on hover it nudges 3px toward where it
   points (up-right) over 0.3s while the pill fills — the reference's
   Contact arrow */
.site-ui .footer-cta-box .cta-arrow {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  transition: transform 0.3s var(--ease);
}

.site-ui .footer-cta-box:hover .cta-arrow,
.site-ui .footer-cta-box:focus-visible .cta-arrow {
  transform: translate(3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
  .site-ui .footer-cta-box .cta-arrow { transition: none; }
  .site-ui .footer-cta-box:hover .cta-arrow { transform: none; }
}

/* loading / page-transition overlay on this page: the panels (and the
   first-frame cover under them) in the page's own dark instead of brand
   green, the name in the light colour. Same animation, timing and movement
   (base/motion.css). */
.site-ui .transition__panel,
html.is-covered body.site-ui::before {
  background: var(--c-inverse);
}

.site-ui .transition__label {
  color: var(--c-on-inverse);
}