/* ============================================================================
   Il Capo Production / MARCUS — ported landing styles (static <link>, survives
   Lightning CSS). This reproduces ilcapo's Tailwind v4 @theme tokens, the two
   self-hosted @font-face faces, the utility classes the ported components use
   (font-grotesque / font-serif / text-ink / text-paper / bg-ink / bg-red /
   tabular-nums), and the bespoke CSS classes (.site-nav / .nav-link /
   .nav-kinetic / .cursor-pill / .has-custom-cursor). Values copied verbatim
   from ilcapo-clone/src/app/globals.css + layout.tsx.

   ADDITIVE + ISOLATED: it does NOT touch Clone-SaaS's own globals.css tokens.
   The `--ink` / `--hero` vars must live on :root because ScrollTheme writes
   document.documentElement.dataset.ink and the Hero timeline animates
   document.documentElement style "--hero" — both target the root element.
   ========================================================================== */

/* ---- Self-hosted typeface ----
   Helvetica Neue 55 Roman is kept ONLY for the MARCUS wordmark (Wordmark.tsx
   hardcodes it). Everything else now uses the canonical SF Pro/system --font-app,
   so the former Ivar Display serif @font-face was removed as dead. */
@font-face {
  font-family: "Helvetica Neue 55 Roman";
  src: url("/fonts/helvetica-neue-55-roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Il Capo design tokens (ilcapo @theme verbatim) ----
   Two-colour palette: white + black only (videos keep their own colour). The
   font tokens point at the @font-face families above; the Wordmark SVG reads
   var(--font-grotesque). These are scoped to the ilcapo wrapper so they don't
   leak into the MAP / Sui sections below. */
.ilcapo-root {
  --color-red: #ffffff; /* the accent is now white; token name kept to avoid churn */
  --color-ink: #000000;
  --color-paper: #ffffff;
  /* Unified to the canonical SF Pro/system app font (per user). MARCUS keeps its
     Helvetica via a hardcoded stack in Wordmark.tsx; its @font-face below stays. */
  --font-serif: var(--font-app);
  --font-grotesque: var(--font-app);
  font-family: var(--font-grotesque);
}

/* The Wordmark SVG (rendered inside .ilcapo-root) reads var(--font-grotesque);
   the cursor pill is position:fixed (a child of body, outside the wrapper) so it
   needs its own copy of the tokens it uses. */
:root {
  /* hero scrub progress (0 during the red/expand phase, 1 at full-screen). Driven
     by the hero's GSAP timeline; gates the nav reveal so CONTACTS/MENU appear only
     at full-screen. Lives on :root because the Hero animates documentElement. */
  --hero: 0;
}

/* ---- Per-section ink theme (nav + crest flip white/black) ----
   data-ink="red"  = dark (black-bg) section  -> ink is WHITE
   data-ink="black" = light (white-bg) section -> ink is BLACK
   ScrollTheme mirrors the section under the nav onto documentElement[data-ink].
   Scoped to the ilcapo wrapper + :root[data-ink] so it only colours ilcapo nav. */
.ilcapo-root {
  --ink: #ffffff;
}
:root[data-ink="black"] {
  --ink: #000000;
}
:root[data-ink="red"] {
  --ink: #ffffff;
}

/* ---- Utility classes the ported components rely on ----
   (ilcapo used Tailwind utilities tied to its @theme; reproduced here as plain
   CSS so we don't edit Clone-SaaS's Tailwind config.) */
.ilcapo-root .font-grotesque {
  font-family: var(--font-grotesque);
}
.ilcapo-root .font-serif {
  font-family: var(--font-serif);
}
.ilcapo-root .text-ink {
  color: #000000;
}
.ilcapo-root .text-paper {
  color: #ffffff;
}
.ilcapo-root .text-red {
  color: #ffffff;
}
.ilcapo-root .bg-ink {
  background-color: #000000;
}
.ilcapo-root .bg-red {
  background-color: #ffffff;
}
.ilcapo-root .tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ---- Fixed top nav ----
   nav fades in only once the hero reel has taken the full screen (reverses on
   scroll-up). .site-nav / .nav-link / .nav-kinetic are unique to ilcapo so they
   stay global (rendered at the top of the page). */
.site-nav {
  opacity: var(--hero);
}
.site-nav .nav-link {
  font-family: var(--font-app);
}
.nav-link {
  color: var(--ink);
  transition: color 0.45s ease;
}

/* kinetic nav hover: the label slides up and a duplicate rises from below */
.nav-kinetic {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.1;
  vertical-align: bottom;
}
.nav-kinetic > span {
  display: block;
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.nav-kinetic > span:last-child {
  position: absolute;
  left: 0;
  top: 100%;
}
.nav-link:hover .nav-kinetic > span {
  transform: translateY(-100%);
}

/* ---- Minimal "scroll" cursor (desktop / fine-pointer only) ----
   .has-custom-cursor is added to documentElement by CustomCursor. Just the word "scroll"
   trailing the pointer with a smooth lerp; mix-blend-mode: difference keeps it legible on
   any background (white text reads as the inverse of whatever is behind it). */
html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none !important;
}
.tech-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  pointer-events: none;
  color: #ffffff;
  mix-blend-mode: difference;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  padding-left: 0.22em; /* balance the trailing letter-spacing so it reads centered */
  white-space: nowrap;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
}
@media (pointer: coarse) {
  .tech-cursor { display: none; }
}

/* ---- Mobile "scroll" hint under MARCUS (touch devices only) ----
   Desktop uses the custom cursor, so this is hidden there. Appears once the preloader
   finishes (html.hero-ready) and retires the moment the viewer scrolls (html.hero-scrolled). */
.hero-scroll-hint { display: none; }
@media (max-width: 640px) {
  .hero-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    /* sit just ABOVE the MARCUS wordmark: its bottom is 8svh and its height scales with
       viewport width (~7.2vw at 390px), so clear both + a small gap. */
    bottom: calc(8svh + 8vw + 16px);
    transform: translateX(-50%);
    z-index: 11;
    color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  html.hero-ready .hero-scroll-hint { opacity: 1; }
  html.hero-ready.hero-scrolled .hero-scroll-hint { opacity: 0; }

  .hero-scroll-hint__label {
    font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.28em;
    padding-left: 0.28em; /* balance the trailing letter-spacing so it reads centered */
    text-transform: uppercase;
  }
  /* tech-style down-chevron cascade: two chevrons pulse in sequence, top -> bottom,
     so the motion "flows" downward, cueing scroll-down. */
  .hero-scroll-hint__arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-scroll-hint__chev {
    width: 13px;
    height: 7px;
    animation: hero-hint-flow 1.5s ease-in-out infinite;
  }
  .hero-scroll-hint__chev + .hero-scroll-hint__chev {
    margin-top: -3px; /* overlap into a double-chevron */
    animation-delay: 0.2s;
  }
  @keyframes hero-hint-flow {
    0% { opacity: 0.25; transform: translateY(-2px); }
    50% { opacity: 1; transform: translateY(1px); }
    100% { opacity: 0.25; transform: translateY(-2px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-scroll-hint__chev { animation: none; opacity: 0.7; transform: none; }
  }
}

/* ---- Mobile (<=640px) ----
   The giant reel serif titles (Tailwind text-[clamp(38px,7vw,104px)] on the
   h2.font-serif) overflow & clip on a phone when the project title is one long
   word (e.g. "LUXURIOUSSUBPENTHOUSE"); shrink them and let them wrap. Also trim
   the footer wordmark top padding so #contacts isn't pushed off the fold. */
@media (max-width: 640px) {
  /* keep the long single-word reel titles (e.g. LUXURIOUSSUBPENTHOUSE, 21 chars)
     on ONE line: force nowrap and size the font by vw so the longest title fits
     the width. Was wrapping (overflow-wrap:anywhere) → broke onto 2 lines. */
  .ilcapo-root section[data-ink] h2.font-serif {
    font-size: clamp(14px, 4.4vw, 24px) !important;
    line-height: 1.02;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    width: auto;
    max-width: 96vw;
  }
  .ilcapo-root #contacts {
    padding-top: 48px;
    padding-left: 4vw;
    padding-right: 4vw;
  }
}