/* Cinematic Experience — interactive installation */
:root {
  --cx-bg: #050505;
  --cx-white: #fff;
  --cx-muted: #a3a3a3;
  --cx-dim: #5c5c5c;
  --cx-line: #1a1a1a;
  --cx-accent: #4ade80;
}

#experience-scroll-wrapper {
  position: relative;
  z-index: 5;
  background: var(--cx-bg);
}

#experience-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: var(--cx-bg);
  color: var(--cx-white);
  overflow: hidden;
  z-index: 5;
  box-sizing: border-box;
  isolation: isolate;
}

.scroll-culled #experience-section,
.scroll-culled #experience-section * {
  animation-play-state: paused !important;
}

/* —— Blueprint / engineering field —— */
.cx-field {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  will-change: transform;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 72px 72px;
}

.cx-field__noise {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

.cx-field__marks {
  position: absolute;
  inset: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.cx-field__marks span { position: absolute; white-space: nowrap; }

.cx-cross {
  position: absolute;
  width: 10px;
  height: 10px;
}
.cx-cross::before,
.cx-cross::after {
  content: "";
  position: absolute;
  background: #fff;
}
.cx-cross::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.cx-cross::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }

.cx-hline {
  position: absolute;
  left: 6%;
  right: 6%;
  height: 1px;
  background: #fff;
}

/* —— HUD chrome (matches site section header + clears fixed nav) —— */
.cx-hud {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.cx-hud__top {
  position: absolute;
  /* Clear fixed nav (~80–100px) + align with section padding rhythm */
  top: clamp(96px, 12vh, 140px);
  left: 10%;
  right: 10%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.cx-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #666666;
  margin: 0 0 12px;
  display: block;
}

.cx-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--type-section-display, clamp(44px, 28px + 2.8vw, 96px));
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
  text-transform: none;
  color: #fff;
  line-height: 1;
}

.cx-hud__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #666666;
  text-align: right;
  padding-top: 8px;
  flex-shrink: 0;
}
.cx-hud__meta b { color: #fff; font-size: 1.15em; }

/* Progress spine — inset to match 10% padding, below header */
.cx-spine {
  position: absolute;
  left: max(12px, calc(10% - 28px));
  top: clamp(200px, 28vh, 280px);
  bottom: 12%;
  width: 1px;
  background: var(--cx-line);
  z-index: 41;
  pointer-events: none;
}

.cx-spine__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  will-change: transform;
  transform: scaleY(0);
  transform-origin: top center;
}

.cx-spine__dots {
  position: absolute;
  inset: 0;
}

.cx-spine__dot {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border: 1px solid var(--cx-dim);
  background: transparent;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease,
    border-color 0.35s ease;
}

.cx-spine__dot.is-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.65);
}

.cx-spine__dot.is-past {
  border-color: #fff;
  background: transparent;
  transform: scale(0.85);
}

/* —— Stage / scenes —— */
.cx-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  perspective: 1400px;
}

.cx-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.cx-scene.is-live {
  pointer-events: auto;
}

.cx-char {
  display: inline-block;
  will-change: transform, opacity;
}

/* Shared type pieces */
.cx-giant {
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.06em;
  line-height: 0.82;
  margin: 0;
  color: #fff;
}

.cx-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
}

.cx-role {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  color: var(--cx-muted);
  margin: 0;
}

.cx-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--cx-dim);
}

.cx-logo {
  border: 1px solid var(--cx-line);
  padding: 12px 14px;
  width: fit-content;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cx-logo:hover { transform: rotate(3deg); }
.cx-logo img {
  display: block;
  max-width: 110px;
  max-height: 32px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.2);
}
.cx-logo img.is-portrait { max-width: 44px; max-height: 40px; }

.cx-bullet {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.55;
  color: var(--cx-muted);
  max-width: 36ch;
}
.cx-bullet .verb { color: #fff; font-weight: 600; }
.cx-bullet .metric {
  font-family: "JetBrains Mono", monospace;
  color: #fff;
  font-weight: 700;
}
.cx-bullet:hover .cx-underline {
  transform: scaleX(1);
}
.cx-underline {
  display: block;
  height: 1px;
  margin-top: 6px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cx-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cx-muted);
  border: 1px solid var(--cx-line);
  padding: 8px 10px;
  position: absolute;
  white-space: nowrap;
  will-change: transform, letter-spacing;
  transition: letter-spacing 0.35s ease, color 0.25s ease, border-color 0.25s ease;
}
.cx-tag:hover {
  letter-spacing: 0.28em;
  color: #fff;
  border-color: #fff;
}

.cx-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--cx-line);
  padding: 8px 12px;
  color: var(--cx-muted);
  width: fit-content;
}
.cx-badge.is-live { color: var(--cx-accent); border-color: #2a4a33; }
.cx-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}

/* ========== Unified poster — readable zones ==========
   Left: tags + primary metric + role
   Right: dates + bullets panel + logo
   Atmosphere: company watermark + outline metric (never over copy)
*/
.cx-poster .cx-poster-company {
  position: absolute;
  left: 58%;
  top: clamp(18%, 20vh, 24%);
  transform: translateX(-40%) rotate(-5deg);
  font-size: clamp(48px, 8.5vw, 128px);
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.72;
  color: transparent;
  -webkit-text-stroke: 1.75px rgba(255, 255, 255, 0.55);
}

.cx-poster .cx-poster-metric {
  position: absolute;
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: #fff;
  z-index: 3;
}

.cx-poster .cx-poster-m1 {
  left: 10%;
  top: clamp(38%, 40vh, 44%);
  font-size: clamp(40px, 6.5vw, 96px);
  max-width: min(280px, 26vw);
  z-index: 4;
}

.cx-poster .cx-poster-m1.is-compact {
  font-size: clamp(20px, 3.2vw, 40px);
  letter-spacing: -0.03em;
  max-width: min(300px, 28vw);
  line-height: 1.05;
}

.cx-poster .cx-poster-m2 {
  left: 10%;
  right: auto;
  top: auto;
  bottom: clamp(22%, 24vh, 28%);
  font-size: clamp(36px, 5.5vw, 72px);
  z-index: 4;
  pointer-events: none;
  opacity: 0.9;
  max-width: min(280px, 26vw);
  text-align: left;
}

.cx-poster .cx-poster-m2.is-outline,
.cx-poster .cx-poster-metric.is-outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.72);
}

.cx-poster .cx-poster-mlabel {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
  display: block;
  margin-top: 10px;
  -webkit-text-stroke: 0;
  font-weight: 400;
  opacity: 1;
  line-height: 1.3;
}

.cx-poster .cx-poster-m2 .cx-poster-mlabel {
  opacity: 1;
  color: #999;
  -webkit-text-stroke: 0;
}

.cx-poster .cx-poster-role {
  position: absolute;
  left: 10%;
  bottom: 10%;
  font-size: clamp(22px, 2.2vw, 32px);
  z-index: 6;
  max-width: 34vw;
  color: #d4d4d4;
  line-height: 1.15;
}

.cx-poster .cx-poster-bullets {
  position: absolute;
  left: max(42%, calc(10% + 300px));
  right: 10%;
  top: clamp(34%, 36vh, 40%);
  width: auto;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 22px 24px;
  z-index: 8;
  background: rgba(5, 5, 5, 0.92);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  box-sizing: border-box;
  backdrop-filter: blur(6px);
}

.cx-poster .cx-poster-bullets .cx-bullet {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: #c2c2c2;
  max-width: none;
}

.cx-poster .cx-poster-bullets .cx-bullet .verb {
  color: #fff;
}

.cx-poster .cx-poster-logo {
  position: absolute;
  right: 10%;
  bottom: 12%;
  z-index: 6;
}

.cx-poster .cx-poster-tags {
  position: absolute;
  left: 10%;
  top: clamp(26%, 28vh, 32%);
  width: min(320px, 30vw);
  height: auto;
  min-height: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cx-poster .cx-poster-tags .cx-tag {
  position: relative;
  left: auto !important;
  top: auto !important;
}

.cx-poster .cx-poster-dates {
  position: absolute;
  right: 10%;
  top: clamp(26%, 28vh, 32%);
  z-index: 6;
  text-align: right;
  color: #9a9a9a;
}

/* Desktop pin height */
@media (min-width: 901px) {
  #experience-scroll-wrapper {
    height: 500vh;
  }
  #experience-section {
    position: sticky;
    top: 0;
    left: 0;
  }
}

/* Mobile fallback */
@media (max-width: 900px) {
  #experience-scroll-wrapper { height: auto; }
  #experience-section {
    height: auto;
    /* Keep vertical flow visible but clip the decorative field (inset -12%)
       so it can't create horizontal page scroll on phones */
    overflow: visible;
    overflow-x: clip;
    padding: 140px 10% 80px;
    position: relative !important;
    transform: none !important;
  }
  .cx-spine { display: none; }
  .cx-hud {
    position: relative;
    inset: auto;
    margin-bottom: 48px;
  }
  .cx-hud__top {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }
  .cx-stage {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 0;
  }
  .cx-scene {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto;
    /* Content-sized — a forced 70vh min-height left screens of empty grid */
    min-height: 0;
    pointer-events: auto !important;
    transform: none !important;
    padding-bottom: 52px;
  }
  /* Clear divider between stacked experiences so each role reads as its own
     chapter (a faint border was invisible over the grid backdrop) */
  .cx-scene::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0.18) 55%,
      rgba(255, 255, 255, 0.02)
    );
  }
  .cx-scene:last-child {
    padding-bottom: 0;
  }
  .cx-scene:last-child::after {
    display: none;
  }
  /* The desktop scroll timeline pre-hides scene elements with inline GSAP
     styles (opacity 0 / offsets). Mobile shows all scenes stacked, so force
     every piece visible regardless of those inline styles. */
  .cx-poster .cx-char,
  .cx-poster .cx-bullet,
  .cx-poster .cx-tag,
  .cx-poster .cx-poster-company {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  /* Readable card order on phones: company → role → dates → story → logo/tags → metrics */
  .cx-poster {
    display: flex;
    flex-direction: column;
  }
  .cx-poster .cx-poster-company { order: 1; }
  .cx-poster .cx-poster-role    { order: 2; }
  .cx-poster .cx-poster-dates   { order: 3; }
  .cx-poster .cx-poster-bullets { order: 4; }
  .cx-poster .cx-poster-logo    { order: 5; }
  .cx-poster .cx-poster-tags    { order: 6; }
  .cx-poster .cx-poster-m1      { order: 7; }
  .cx-poster .cx-poster-m2      { order: 8; }
  .cx-poster .cx-poster-company {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    font-size: clamp(40px, 12vw, 64px);
    margin: 8px 0 4px;
    white-space: normal;
    /* Section heading on mobile — full presence, not a faint backdrop */
    opacity: 0.9;
  }
  .cx-poster .cx-poster-role,
  .cx-poster .cx-poster-bullets,
  .cx-poster .cx-poster-logo,
  .cx-poster .cx-poster-tags,
  .cx-poster .cx-poster-dates,
  .cx-poster .cx-poster-m1,
  .cx-poster .cx-poster-m2 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 14px 0;
    opacity: 1 !important;
  }
  .cx-poster .cx-poster-m1,
  .cx-poster .cx-poster-m2 {
    font-size: clamp(40px, 11vw, 72px);
  }
  .cx-poster .cx-poster-m1.is-compact {
    font-size: clamp(22px, 6vw, 36px) !important;
  }
  .cx-poster .cx-poster-role { font-size: clamp(20px, 5vw, 28px) !important; }
  .cx-poster .cx-poster-bullets {
    padding: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
  }
  .cx-poster .cx-poster-bullets .cx-bullet {
    font-size: 14px !important;
  }
  .cx-tag { position: relative !important; display: inline-block; margin: 4px; }
  .cx-poster .cx-poster-tags { height: auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #experience-scroll-wrapper { height: auto !important; }
  #experience-section {
    position: relative !important;
    height: auto !important;
    transform: none !important;
  }
  .cx-scene {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    transform: none !important;
  }
}