/* =============================================================
   LCEW — Luminous Color Evolution Works
   Single static stylesheet. System fonts only. No dependencies.
   ============================================================= */

:root {
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;

  --color-bg: #ffffff;
  --color-ink: #0a0a0a;
  --color-ink-strong: #000000;
  --color-muted: #6e6e73;
  --color-faint: #86868b;
  --color-hairline: rgba(0, 0, 0, 0.08);
  --color-hairline-soft: rgba(0, 0, 0, 0.05);

  --max-width: 1280px;
  --gutter-x: clamp(1.5rem, 5vw, 5rem);
  --section-y: clamp(7rem, 16vh, 14rem);

  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);

  --reveal-duration: 1100ms;
  --reveal-stagger: 110ms;
}

/* -------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

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

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

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

::selection {
  background: var(--color-ink);
  color: var(--color-bg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  z-index: 200;
  transition: top 200ms var(--ease-out-soft);
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--color-bg);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   Scroll progress — quiet 2px bar pinned to the top of the
   viewport. The bar scales horizontally with reading progress.
   It is rendered above the header so it reads as a structural
   document edge, not as decoration.
   ------------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #0a0a0a 0%,
    #00AEEF 25%,
    #EC008C 55%,
    #FFE000 85%,
    #0a0a0a 100%
  );
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: 0 0;
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}

/* -------------------------------------------------------------
   Wordmark — Lcew
   The wordmark is a designed object. Three sizes only.
   ------------------------------------------------------------- */

.wordmark {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-ink-strong);
  letter-spacing: -0.035em;
  font-feature-settings: "ss01", "kern";
  display: inline-block;
  line-height: 1;
  user-select: none;
}

.wordmark--header {
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  transition: opacity 220ms var(--ease-out-soft);
}
.wordmark--header:hover {
  opacity: 0.6;
}

.wordmark--footer {
  font-size: 1.375rem;
  letter-spacing: -0.03em;
}

.wordmark--display {
  font-size: clamp(7rem, 26vw, 22rem);
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: var(--color-ink-strong);
  display: block;
  background: linear-gradient(
    110deg,
    #0a0a0a 0%,
    #0a3a4a 22%,
    #0a0a0a 44%,
    #4a0a32 66%,
    #0a0a0a 88%,
    #3a2e0a 100%
  );
  background-size: 240% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wordmark-display-shimmer 52s linear infinite;
}

@keyframes wordmark-display-shimmer {
  0%   { background-position: 0%   50%; }
  100% { background-position: 240% 50%; }
}

/* -------------------------------------------------------------
   Site header
   ------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: saturate(180%) blur(0px);
  -webkit-backdrop-filter: saturate(180%) blur(0px);
  border-bottom: 1px solid transparent;
  transition:
    background 280ms var(--ease-out-soft),
    backdrop-filter 280ms var(--ease-out-soft),
    -webkit-backdrop-filter 280ms var(--ease-out-soft),
    border-color 280ms var(--ease-out-soft),
    padding 280ms var(--ease-out-soft);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--color-hairline);
  padding: 0.9rem 0;
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-nav {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: -0.005em;
}
.site-nav a {
  position: relative;
  padding-bottom: 6px;
  transition: color 200ms var(--ease-out-soft);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #00AEEF 22%,
    #EC008C 52%,
    #FFE000 82%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0.55);
  transform-origin: 50% 50%;
  transition:
    opacity 320ms var(--ease-out-soft),
    transform 360ms var(--ease-out-strong);
  pointer-events: none;
}
.site-nav a:hover {
  color: var(--color-ink-strong);
}
.site-nav a:hover::after,
.site-nav a.is-active::after {
  opacity: 0.85;
  transform: scaleX(1);
}
.site-nav a.is-active {
  color: var(--color-ink-strong);
}

@media (max-width: 640px) {
  .site-nav {
    display: none;
  }
}

/* -------------------------------------------------------------
   Section / typography primitives
   ------------------------------------------------------------- */

main > section {
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}

.section-eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-faint);
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 18ch;
  color: var(--color-ink-strong);
}

/* -------------------------------------------------------------
   Hero
   ------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: clamp(9rem, 14vh, 12rem);
  padding-bottom: clamp(5rem, 10vh, 8rem);
}

.hero__inner {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vh, 2.5rem);
}

.hero__eyebrow {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-faint);
}

.hero__title {
  font-size: clamp(3.5rem, 12vw, 11.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--color-ink-strong);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.04em;
}

.hero__line {
  display: block;
  padding-bottom: 0.06em;
}

.hero__line--accent {
  color: var(--color-ink-strong);
  background: linear-gradient(
    100deg,
    #0a0a0a 0%,
    #0a3a52 18%,
    #0a0a0a 36%,
    #4a0a32 54%,
    #0a0a0a 72%,
    #3a2e0a 88%,
    #0a0a0a 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hero-accent-shimmer 42s linear infinite;
}

@keyframes hero-accent-shimmer {
  0%   { background-position: 0%   50%; }
  100% { background-position: 220% 50%; }
}

.hero__sub {
  font-size: clamp(1.125rem, 1.8vw, 1.625rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--color-muted);
  max-width: 36ch;
  line-height: 1.35;
}

.hero__hint {
  position: absolute;
  bottom: clamp(2rem, 5vh, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.hero__hint.reveal {
  transform: translateX(-50%) translateY(28px);
}
.hero__hint.reveal.is-visible {
  transform: translateX(-50%) translateY(0);
}
.hero__hint span {
  display: inline-block;
  animation: hint-bob 2.6s ease-in-out infinite;
}

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* -------------------------------------------------------------
   Manifesto
   ------------------------------------------------------------- */

.manifesto {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.manifesto__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vh, 5rem);
}

.manifesto__para {
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  color: var(--color-ink-strong);
  max-width: 26ch;
}

.manifesto__para--final {
  max-width: 22ch;
}

.manifesto__muted {
  color: var(--color-muted);
  font-weight: 500;
}

.manifesto__emph {
  color: var(--color-ink-strong);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   Applications
   ------------------------------------------------------------- */

.applications {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-top: 1px solid var(--color-hairline-soft);
}

.applications__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vh, 4rem);
}

.applications__list {
  display: flex;
  flex-direction: column;
}

.applications__item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: baseline;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 0;
  border-top: 1px solid var(--color-hairline);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-ink-strong);
  transition: padding-left 480ms var(--ease-out-strong);
}
.applications__item:last-child {
  border-bottom: 1px solid var(--color-hairline);
}

.applications__item:hover {
  padding-left: clamp(0.5rem, 1vw, 1rem);
}

.applications__num {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  font-weight: 500;
  color: var(--color-faint);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.applications__name {
  color: var(--color-ink-strong);
}

@media (max-width: 640px) {
  .applications__item {
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
  }
}

/* -------------------------------------------------------------
   Company
   ------------------------------------------------------------- */

.company {
  padding-top: calc(var(--section-y) * 1.2);
  padding-bottom: calc(var(--section-y) * 1.2);
  border-top: 1px solid var(--color-hairline-soft);
  position: relative;
  overflow: hidden;
}

.company__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vh, 4rem);
}

.company__wordmark-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vh, 1.75rem);
}

.company__expansion {
  font-size: clamp(1rem, 1.4vw, 1.375rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-transform: none;
}

.company__body {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.45;
  color: var(--color-muted);
  max-width: 52ch;
}

/* -------------------------------------------------------------
   Programs
   ------------------------------------------------------------- */

.programs {
  padding-top: var(--section-y);
  padding-bottom: calc(var(--section-y) * 0.7);
  border-top: 1px solid var(--color-hairline-soft);
}

.programs__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.5rem);
}

.programs__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-ink-strong);
}

.programs__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2vh, 1.75rem);
  padding: clamp(1rem, 2.5vw, 2rem) 0;
  max-width: none;
}

.programs__badge {
  width: clamp(180px, 24vw, 280px);
  height: auto;
}

.programs__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.programs__name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink-strong);
  letter-spacing: -0.01em;
}

.programs__meta {
  font-size: 0.875rem;
  color: var(--color-muted);
  letter-spacing: -0.005em;
}

/* -------------------------------------------------------------
   Contact — image-only email disclosure
   The email is delivered as an SVG image to keep it out of HTML
   text and away from scraping bots. The visual is small and
   sits quietly above the footer.
   ------------------------------------------------------------- */

.contact {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-top: 1px solid var(--color-hairline-soft);
}

.contact__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.5rem);
}

.contact__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-ink-strong);
}

.contact__image {
  width: clamp(280px, 30vw, 420px);
  height: auto;
  margin-top: clamp(0.5rem, 1vh, 1rem);
  user-select: none;
  -webkit-user-drag: none;
}

.contact__note {
  font-size: 0.9375rem;
  color: var(--color-muted);
  letter-spacing: -0.005em;
  max-width: 48ch;
}

/* -------------------------------------------------------------
   Reel — a quiet vertical motion piece between Contact and Footer.
   No heading, no eyebrow. Just the video frame, centered, with
   generous space. Plays only when scrolled into view.
   ------------------------------------------------------------- */

.reel {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--color-hairline-soft);
}

.reel__frame {
  width: clamp(280px, 34vw, 460px);
  aspect-ratio: 1024 / 1792;
  border-radius: 38px;
  background: #0a0a0a;
  padding: 6px;
  position: relative;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 50px 110px -34px rgba(0, 0, 0, 0.24),
    -26px 32px 90px -36px rgba(0, 174, 239, 0.22),
    26px 32px 90px -36px rgba(236, 0, 140, 0.20),
    0 72px 130px -50px rgba(255, 224, 0, 0.18);
}

.reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  border: 0;
  outline: 0;
  border-radius: 32px;
}

/* iPhone-style mock affordances on the reel frame.
   Subtle by design — they signal "phone screen" without
   becoming product art. CSS only, no images. */

.reel__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  max-width: 144px;
  height: 28px;
  background: #000;
  border-radius: 16px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
}

.reel__btn {
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(40, 40, 40, 0.55) 0%,
    rgba(80, 80, 80, 0.85) 50%,
    rgba(40, 40, 40, 0.55) 100%
  );
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}

.reel__btn--power {
  right: -2.5px;
  top: 26%;
  width: 3px;
  height: 80px;
}

.reel__btn--vol-up {
  left: -2.5px;
  top: 22%;
  width: 3px;
  height: 48px;
}

.reel__btn--vol-down {
  left: -2.5px;
  top: calc(22% + 64px);
  width: 3px;
  height: 70px;
}

.reel__home {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  max-width: 140px;
  height: 4px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
}

/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------- */

.site-footer {
  padding: clamp(3rem, 8vh, 6rem) var(--gutter-x);
  border-top: 1px solid var(--color-hairline);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-footer__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--color-faint);
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .site-footer__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.45;
  }

  .site-footer__meta [aria-hidden="true"] {
    display: none;
  }
}

/* -------------------------------------------------------------
   Typographic line balancing
   Headings and short paragraphs use `balance` so the last line
   doesn't dangle. Longer body text uses `pretty` so widows and
   orphans get cleaned up without forcing equal-length lines.
   ------------------------------------------------------------- */

.hero__line,
.hero__sub,
.section-title,
.programs__title,
.manifesto__para,
.company__expansion,
.applications__name {
  text-wrap: balance;
}

.company__body {
  text-wrap: pretty;
}

/* -------------------------------------------------------------
   Reveal animations
   ------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--reveal-duration) var(--ease-out-strong),
    transform var(--reveal-duration) var(--ease-out-strong);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: calc(var(--reveal-stagger) * 1); }
.reveal--delay-2 { transition-delay: calc(var(--reveal-stagger) * 2); }
.reveal--delay-3 { transition-delay: calc(var(--reveal-stagger) * 3); }
.reveal--delay-4 { transition-delay: calc(var(--reveal-stagger) * 4); }

/* Stagger within a section, applied via JS to siblings */
.reveal.is-visible.stagger-1 { transition-delay: calc(var(--reveal-stagger) * 1); }
.reveal.is-visible.stagger-2 { transition-delay: calc(var(--reveal-stagger) * 2); }
.reveal.is-visible.stagger-3 { transition-delay: calc(var(--reveal-stagger) * 3); }
.reveal.is-visible.stagger-4 { transition-delay: calc(var(--reveal-stagger) * 4); }
.reveal.is-visible.stagger-5 { transition-delay: calc(var(--reveal-stagger) * 5); }

/* -------------------------------------------------------------
   Reduced motion — strip translations and hint animation
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    transform: none;
    transition: opacity 400ms ease;
  }

  .hero__hint span {
    animation: none;
  }

  .hero__line--accent,
  .wordmark--display {
    animation: none;
  }

  .site-header {
    transition: background 200ms ease, border-color 200ms ease;
  }
}