:root {
  --bg: #f2efe4;
  --ink: #24231c;
  --muted: #a9a698;
  --amber: #e8a33d;
  --dark: #141210;
  --card: #23201b;
  --card-line: rgba(238, 233, 220, 0.14);
  --light: #f2efe4;
  --muted-dark: #7e7a6e;
  --frame-radius: 10px;
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Weighty in-out curve for the big layout moves (band rise, card collapse). */
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* Typed custom props so cursor-driven values transition smoothly.
   Browsers without @property fall back to the var() defaults (no smoothing). */
@property --tilt {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --shift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --frame-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.02;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ============ AMBIENT PARTICLE FIELD ============ */
/* The canvas sits behind everything; the dark band paints over it, so
   the shapes only show on the beige half. */

#particle-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.landing {
  position: relative;
  z-index: 1;
}

/* ============ LANDING (single screen) ============ */

.landing {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---- Beige upper half ---- */

.landing-light {
  flex: 1 1 auto;
  min-height: 42svh;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vh, 3rem) var(--gutter) 0;
  overflow: hidden;
  /* JS measures the real height into an inline max-height before opening a
     project, so this transition has a concrete start value. */
  transition:
    max-height 1.1s var(--ease-inout),
    min-height 1.1s var(--ease-inout),
    padding 1.1s var(--ease-inout);
}

/* Project open: the beige half collapses, the dark band takes the screen.
   max-height itself is driven by JS inline values (measured px → 0px) so
   the transition always has two interpolable endpoints. */
body.project-open .landing-light {
  min-height: 0;
  padding-top: 0;
  flex: 0 0 auto;
}

.landing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.tagline {
  color: var(--ink);
  font-size: clamp(0.95rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  max-width: 22em;
}

.chat-pill {
  /* Pinned to the screen so it holds its place while the dark band pans
     up underneath it. */
  position: fixed;
  top: clamp(1.75rem, 3.5vh, 3rem);
  right: var(--gutter);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  /* --mx/--my are the magnetic offset toward the cursor (main.js). */
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--pill-scale, 1));
  transition:
    transform 0.28s var(--ease-out),
    background 0.6s ease 0.25s,
    color 0.6s ease 0.25s;
}

/* Over the dark section the pill inverts so it stays legible. */
body.project-open .chat-pill {
  background: var(--light);
  color: var(--ink);
}

.chat-pill:hover {
  --pill-scale: 1.06;
}

.chat-arrow {
  color: var(--amber);
  transition: transform 0.35s var(--ease-out);
}

.chat-pill:hover .chat-arrow {
  transform: translate(2px, -2px);
}

/* Giant logotype spanning the full width, resting at the bottom of the
   beige half. */
.logo {
  display: block;
  margin-top: auto;
  padding-bottom: clamp(1.5rem, 4.5vh, 3.5rem);
  font-size: clamp(2rem, 13vw, 19rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.8;
  white-space: nowrap;
}

.logo-dot {
  color: var(--ink);
}

/* ---- Dark lower band: nav, stage, footer ---- */

.landing-dark {
  background: var(--dark);
  color: var(--light);
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vh, 3rem) var(--gutter) 0;
}

.landing-nav {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(3rem, 12vw, 11rem);
}

.landing-nav a {
  position: relative;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
  transition: color 0.3s ease, opacity 0.5s ease;
}

/* The nav words fade away while a project is open; "Back to Home" takes
   their place on the left. */
body.project-open .landing-nav a[data-panel] {
  opacity: 0;
  pointer-events: none;
}

/* Amber dot marking the selected panel */
.landing-nav a::before {
  content: "";
  position: absolute;
  left: calc(50% - 0.09em);
  bottom: -0.65em;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--amber);
  transform: translateX(-50%) scale(0);
  transition: transform 0.35s var(--ease-out);
}

.landing-nav a.is-active::before {
  transform: translateX(-50%) scale(1);
}

.landing-nav a:hover,
.landing-nav a.is-active {
  color: var(--light);
}

/* ---- Stage (swaps with the selected nav word) ---- */

.stage {
  display: grid;
  margin-top: clamp(1.75rem, 4.5vh, 3.5rem);
  margin-bottom: clamp(1.5rem, 3.5vh, 3rem);
}

.stage-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease,
    transform 0.55s var(--ease-out),
    visibility 0s linear 0.55s;
}

.stage-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.55s ease 0.15s,
    transform 0.55s var(--ease-out) 0.15s,
    visibility 0s;
}

/* ---- Work panel: five placeholder cards side by side ---- */

.frames {
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
  width: 100%;
  height: clamp(240px, 36vh, 420px);
  perspective: 1400px;
}

.frame {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--frame-radius);
  border: 1px solid var(--card-line);
  background: var(--card);
  /* --tilt is driven by cursor proximity (main.js); it transitions
     smoothly thanks to the @property registration above. */
  transform: rotateY(var(--tilt, 0deg));
  transition:
    flex-grow 0.7s var(--ease-out),
    transform 0.4s var(--ease-out),
    border-color 0.5s ease,
    opacity 0.6s ease;
}

/* Highlighted card grows, pushing siblings away */
body:not(.project-open) .frames:hover .frame:hover {
  flex-grow: 2.4;
  border-color: rgba(238, 233, 220, 0.3);
}

/* Project open: the selected card expands to fill the strip while its
   siblings collapse out of the composition. Flex-driven, so it works in
   the mobile column layout too. */
.frames {
  transition: gap 1s var(--ease-inout);
}

body.project-open .frames {
  gap: 0;
  perspective: none;
}

body.project-open .frame {
  transform: none;
}

/* Siblings ease out: fade while the flex collapse pushes them away,
   matching the band's weightier curve. */
body.project-open .frame:not(.is-selected) {
  flex-grow: 0.001;
  opacity: 0;
  border-color: transparent;
  pointer-events: none;
  transition:
    flex-grow 1s var(--ease-inout),
    opacity 0.65s ease 0.1s,
    border-color 0.5s ease;
}

body.project-open .frame.is-selected {
  transition:
    flex-grow 1s var(--ease-inout),
    border-color 0.6s ease;
}

body.project-open .frame.is-selected {
  flex-grow: 1;
  border-color: rgba(238, 233, 220, 0.3);
  cursor: default;
}

/* Diagonal-stripe placeholder texture. Real stills/footage go inside
   .frame-media and will cover it. */
.frame-media {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(242, 239, 228, 0.025) 0 26px,
    transparent 26px 52px
  );
  transform: scale(var(--frame-scale, 1.02)) translateX(var(--shift, 0px));
  transition: --frame-scale 0.6s var(--ease-out), --shift 0.4s var(--ease-out);
}

.frame:hover {
  --frame-scale: 1.08;
}

.frame-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame-tag {
  position: absolute;
  top: 1.1rem;
  left: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted-dark);
  white-space: nowrap;
}

.frame-label {
  position: absolute;
  left: 1.15rem;
  bottom: 1.05rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--light);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.frame-label em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--amber);
}

/* ---- About / Contact panels (on the dark band) ---- */

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.5rem;
}

.about-lede {
  font-size: clamp(1.2rem, 2.1vw, 1.9rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  max-width: 28em;
  margin-bottom: 2.5rem;
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 52rem;
}

.about-facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 0.4rem;
}

.about-facts dd {
  font-size: 0.95rem;
}

.contact-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-mail {
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  border-bottom: 3px solid var(--amber);
  transition: color 0.3s ease;
}

.contact-mail:hover {
  color: var(--amber);
}

.contact-note {
  margin-top: 1.5rem;
  color: var(--muted-dark);
  font-size: 1rem;
  max-width: 28em;
}

.social-row {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.social-row a {
  color: var(--muted-dark);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.social-row a:hover {
  color: var(--light);
}

/* ---- Project close link (nav row, project mode only) ---- */

.landing-nav a.project-close {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
  transition: color 0.3s ease, opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

/* Fades in once the nav words have faded out. */
body.project-open .landing-nav a.project-close {
  opacity: 1;
  pointer-events: auto;
  transition: color 0.3s ease, opacity 0.6s ease 0.35s;
}

.project-close:hover {
  color: var(--light);
}

/* ---- Project view (shared template below the expanded card) ---- */

.project-view {
  padding: clamp(2.5rem, 6vh, 4.5rem) 0 clamp(2rem, 5vh, 3.5rem);
}

body.project-open .project-view {
  animation: rise-in 0.9s var(--ease-out) 0.6s backwards;
}

.pv-head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.pv-index {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--amber);
}

.pv-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--light);
}

.pv-meta {
  color: var(--muted-dark);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pv-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  max-width: 34em;
  margin-bottom: 2.5rem;
}

.pv-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 52rem;
  margin-bottom: 3rem;
}

.pv-facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 0.4rem;
}

.pv-facts dd {
  font-size: 0.95rem;
}

.pv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
  margin-bottom: 3rem;
}

.pv-still {
  position: relative;
  height: clamp(220px, 38vh, 420px);
  border-radius: var(--frame-radius);
  border: 1px solid var(--card-line);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(242, 239, 228, 0.025) 0 26px,
      transparent 26px 52px
    ),
    var(--card);
}

.pv-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

.pv-next {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--light);
  transition: color 0.3s ease;
}

.pv-next:hover {
  color: var(--amber);
}

.pv-hint {
  color: var(--muted-dark);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Footer (bottom of the dark band) ---- */

.site-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  padding: clamp(1.1rem, 2.2vh, 1.75rem) 0;
  border-top: 1px solid rgba(238, 233, 220, 0.12);
  color: var(--muted-dark);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
}

body.project-open .site-footer {
  opacity: 0;
  pointer-events: none;
}

/* ============ ENTRANCE MOTION ============ */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* One-time load stagger: tagline/pill → logo → nav → cards */
.tagline,
.chat-pill,
.logo {
  animation: rise-in 0.8s var(--ease-out) backwards;
}

.chat-pill {
  animation-delay: 0.06s;
}

.logo {
  animation-delay: 0.12s;
}

.landing-nav a {
  animation: rise-in 0.6s var(--ease-out) backwards;
}

.landing-nav a:nth-child(1) { animation-delay: 0.3s; }
.landing-nav a:nth-child(2) { animation-delay: 0.36s; }
.landing-nav a:nth-child(3) { animation-delay: 0.42s; }

#panel-work .frame {
  animation: rise-in 0.7s var(--ease-out) backwards;
}

#panel-work .frame:nth-child(1) { animation-delay: 0.42s; }
#panel-work .frame:nth-child(2) { animation-delay: 0.48s; }
#panel-work .frame:nth-child(3) { animation-delay: 0.54s; }
#panel-work .frame:nth-child(4) { animation-delay: 0.6s; }
#panel-work .frame:nth-child(5) { animation-delay: 0.66s; }

/* Panel content staggers in when About / Contact become active. */
html.js #panel-about.is-active > .about-panel > *,
html.js #panel-contact.is-active > .contact-panel > * {
  animation: rise-in 0.6s var(--ease-out) backwards;
}

html.js #panel-about.is-active > .about-panel > *:nth-child(1),
html.js #panel-contact.is-active > .contact-panel > *:nth-child(1) {
  animation-delay: 0.1s;
}
html.js #panel-about.is-active > .about-panel > *:nth-child(2),
html.js #panel-contact.is-active > .contact-panel > *:nth-child(2) {
  animation-delay: 0.18s;
}
html.js #panel-about.is-active > .about-panel > *:nth-child(3),
html.js #panel-contact.is-active > .contact-panel > *:nth-child(3) {
  animation-delay: 0.26s;
}
html.js #panel-about.is-active > .about-panel > *:nth-child(4),
html.js #panel-contact.is-active > .contact-panel > *:nth-child(4) {
  animation-delay: 0.34s;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 760px) {
  /* The pill is fixed top-right; keep the tagline clear of it. */
  .tagline {
    padding-right: 9.5rem;
  }

  /* Tighter nav so the three words fit on one row. */
  .landing-nav {
    gap: 1rem 1.75rem;
  }

  /* Five cards don't fit side by side: stack them, and let the
     highlighted one grow vertically instead. */
  .frames {
    flex-direction: column;
    height: min(58vh, 480px);
  }

  .about-facts {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .pv-facts {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .pv-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }

  /* Neutralise cursor-driven transforms. JS also skips setting these
     under reduced motion, but keep CSS inert as a belt-and-braces. */
  .frame,
  .chat-pill {
    transform: none !important;
  }
}