/* ------------------------------------------------------------------
   base.css — reset + base, ported from the source index.css (Vite).
   The source's @import chain (tokens/ivypresto/typography/instrument)
   is handled by separate <link>s in _Layout. The home/page data-route
   background backdrops are page-level (their design-assets arrive with
   each page in Phase 6) and are intentionally omitted here.
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.02em;          /* 2% global tracking for Instrument Sans */
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}

#root,
main {
  width: 100%;
}

main {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
}

/* Home page-level backdrop — the hero + image section + SelectedWorks banner ride
   on a tall background image (ported from the source index.css home backdrop). */
main[data-route="home"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(200vh + 44vh);
  background: url("/images/home/hero/home-hero-bg.webp") top center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 720px) {
  main[data-route="home"]::before {
    height: calc(200vh + 70vh);
  }
}

/* Section-scoped backdrop for the non-home hero sections — every page's #top
   shares the same SVG so its visual position is identical regardless of which
   page you land on. Painted as the section's own background so it starts at the
   section's top edge. Hero contents render on z-index >= 1; this is the bottom
   layer. Ported verbatim from the source index.css. */
main[data-route="services"] #top,
main[data-route="contact"] #top,
main[data-route="design-process"] #top,
main[data-route="work"] #top {
  background:
    url("/images/shared/other-page-hero-bg.svg")
    top center / cover no-repeat;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

ul,
ol {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--color-flame-bright);
  color: #050505;
}

:focus-visible {
  outline: 2px solid var(--color-flame-bright);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip-to-content link (Razor a11y; not in the SPA source but standard). */
.skip-to-content {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-fg);
  color: var(--color-bg);
  font-size: var(--t-label);
  text-decoration: none;
}
.skip-to-content:focus {
  top: 0;
}

/* ------------------------------------------------------------------
   Bottom blur — fixed glass strip pinned to the viewport bottom.
   Ported verbatim from the source index.css.
   ------------------------------------------------------------------ */
.bottomBlur {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 7rem;
  background: rgba(0, 0, 0, 0.01);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  pointer-events: none;
  z-index: 50;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
}

/* DarkCluster wrapper — dark canvas behind the GetInTouch + Footer cluster. */
.darkCluster {
  position: relative;
  background: var(--color-bg);
}

/* ------------------------------------------------------------------
   AmbientCursor — single soft dot trailing the pointer (damped in
   site.js). Ported from AmbientCursor.module.css (.dot). Hidden on
   touch + prefers-reduced-motion.
   ------------------------------------------------------------------ */
.ambient-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  will-change: transform, opacity;
  transition: opacity 260ms ease;
}
@media (hover: none), (pointer: coarse) {
  .ambient-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-cursor { display: none; }
}

/* Section cursors (SelectedWorks "View Project" pill + ProjectGallery video card).
   Built/positioned by home.js (GSAP quickTo + xPercent/yPercent centring). `scale`
   is an independent CSS property here, so it doesn't fight GSAP's translate. */
/* Source-exact: SelectedWorksCursor / HoverCursor — SQUARE white cards in #6c33ff
   (not rounded pills). Compact pill = the row; video variant = a 20rem column. */
.section-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
  will-change: transform;
}
/* Inner card — scale 0.6 -> 1 + opacity 0 -> 1 on activation, matching the
   source SelectedWorksCursor `.inner` (Motion scale .6/1, opacity 0/1,
   0.28s cubic-bezier(0.16,1,0.3,1) === var(--ease-out)). Phase 6.6: the
   scale/opacity MUST live on a CHILD — GSAP owns the shell's transform (x/y),
   and it folds any standalone `scale` on that same element into its matrix,
   freezing the cursor at 0.6 so it never enlarges. The source splits position
   (.cursor shell) from scale (.inner card) for exactly this reason. */
.section-cursor-inner {
  display: inline-flex;
  transform-origin: 50% 50%;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.28s var(--ease-out), scale 0.28s var(--ease-out);
  will-change: transform, opacity;
}
.section-cursor.is-on .section-cursor-inner {
  opacity: 1;
  scale: 1;
}
.section-cursor-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  background: #ffffff;
  color: #6c33ff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.section-cursor-label { color: inherit; }
.section-cursor-arrow {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}
.section-cursor-media { display: none; }
/* Rich (gallery video preview) — 20rem white card, media on top, row beneath. */
.section-cursor.has-media .section-cursor-inner {
  flex-direction: column;
  width: 20rem;
  background: #ffffff;
  color: #6c33ff;
  padding-bottom: 1rem;
  gap: 0.875rem;
}
.section-cursor.has-media .section-cursor-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #f4f0ff;
}
.section-cursor.has-media .section-cursor-row {
  background: none;
  padding: 0;
  width: 100%;
}
@media (hover: none), (pointer: coarse) {
  .section-cursor { display: none; }
}

/* Page-load transition (RouteTransition equivalent — see handoff for the
   SPA→MPA note). Content fades + lifts in on load via a PURE-CSS animation so it
   never depends on JS to become visible: with `both` fill it ends at opacity 1
   even if site.js is slow, errors, or the page is restored from bfcache. Instant
   under reduced motion. (Previously opacity:0 until JS added .is-entered, which
   could leave a page blank — the cause of "can't see" on some loads.) */
[data-route-transition] {
  animation: routeEnter 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes routeEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-route-transition] { animation: none; }
}

.iti__flag-container {
    position: absolute;
    top: 15px;
    bottom: 0;
    right: 0;
    padding: 1px;
}