/**
 * Impactiqa — home.css
 * All home-page section styles.
 * CSS extracted from index.php Phase 1 inline <style> block in Phase 2.
 * Loaded via $page_css = ['home'] in index.php.
 *
 * Order mirrors the page scroll sequence for maintainability.
 * Not included: nav.css, reveal.css, loader.css, cursor.css, footer.css
 * (those are in their own dedicated files).
 */

/* ── Home body & cube variables ─────────────────────────────────────────────── */
:root {
  --cube-size: 260px;
  --half:      130px;
}

body {
  background: var(--black, #0a0a0a);
  color: #fff;
  overflow-y: scroll;
  user-select: none;
}

/* ── Background layers ───────────────────────────────────────────────────────── */
#bg-base { position: fixed; inset: 0; z-index: 0; background: var(--black); pointer-events: none; }
#bg-white {
  position: fixed; inset: 0; z-index: 1;
  background: var(--white);
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
#bg-white.on { opacity: 1; }
#bg-image {
  position: fixed; inset: 0; z-index: 2;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.12s ease; pointer-events: none;
}
#bg-image.visible { opacity: 1; }

/* ── Scroll content (dark cube sections) ────────────────────────────────────── */
#scroll-content { position: relative; z-index: 10; }

.section {
  height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: 0 8vw; position: relative; pointer-events: none;
}
.section:nth-child(odd)  { align-items: flex-start; }
.section:nth-child(even) { align-items: flex-end; text-align: right; }
.section-label {
  font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 13px;
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 20px;
}
.section-heading {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(80px, 13vw, 180px); line-height: .88;
  letter-spacing: -.02em; text-transform: uppercase; color: #fff;
}
.section-sub {
  margin-top: 28px; font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(14px, 1.5vw, 18px); color: rgba(255,255,255,.5);
  max-width: 360px; line-height: 1.6;
}
.section:nth-child(even) .section-sub { margin-left: auto; }

/* ── Explosion zone ──────────────────────────────────────────────────────────── */
#explosion-zone { position: relative; height: 280vh; z-index: 10; }
#explosion-sticky {
  position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden;
}
#explosion-content {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 0 8vw 10vh;
  opacity: 0; z-index: 5; pointer-events: none;
}
#explosion-content .exp-eyebrow {
  font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 13px;
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 20px;
}
#explosion-content .exp-heading {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(72px, 11vw, 160px); line-height: .88;
  letter-spacing: -.03em; text-transform: uppercase; color: #fff;
}
#explosion-content .exp-sub {
  margin-top: 28px; max-width: 480px; font-family: 'Barlow', sans-serif;
  font-weight: 300; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.75);
}
#explosion-content .exp-cta {
  margin-top: 40px; display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: .15em; text-transform: uppercase;
  color: #000; background: #fff;
  padding: 14px 28px; cursor: pointer; text-decoration: none; pointer-events: auto;
}

/* ── What we do (white) ──────────────────────────────────────────────────────── */
#what-we-do {
  position: relative; z-index: 20;
  background: var(--white); color: var(--black);
  height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: 1fr 1fr;
}
.wwd-heading {
  padding: 72px 6vw 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(64px, 9vw, 130px); line-height: 1;
  letter-spacing: -.03em; color: var(--black);
  align-self: end;
}
.wwd-body {
  padding: 0 6vw;
  display: flex; align-items: center; justify-content: flex-end;
}
.wwd-body p {
  max-width: 440px; font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(18px, 2vw, 26px); line-height: 1.5; color: #111;
}

/* ── Horizontal scroll zone (services) ──────────────────────────────────────── */
#horiz-zone { position: relative; z-index: 20; height: 600vh; }
#horiz-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: var(--white);
}
#horiz-track {
  display: flex; flex-direction: row;
  height: 100%; width: 600vw;
  will-change: transform;
}
.h-panel {
  flex: 0 0 100vw; width: 100vw; height: 100vh;
  background: var(--white); color: var(--black);
  display: grid; grid-template-rows: auto 1fr;
  padding: 80px 6vw 60px; position: relative; overflow: hidden;
}
.h-panel-header {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 48px;
}
.h-panel-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(48px, 7vw, 104px); line-height: .95;
  letter-spacing: -.03em; color: var(--black);
}
.h-panel-num {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 300;
  font-size: clamp(20px, 2.5vw, 34px); color: #aaa; line-height: 1;
  transform: translateY(-8px);
}
.h-panel-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.h-panel-mosaic {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr); gap: 8px; height: 340px;
}
.mosaic-cell {
  border-radius: 4px; overflow: hidden; position: relative;
  background: #0a0a0a;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 14px 16px;
}
.mosaic-cell span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(247,246,244,.7); text-align: left; line-height: 1.1;
}
.mosaic-cell:first-child { grid-column: 1 / 3; }
.mosaic-cell:nth-child(5) { grid-column: 2 / 4; }
.h-panel-desc p {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(15px, 1.6vw, 20px); line-height: 1.6; color: #222;
  margin-bottom: 32px;
}
.h-panel-desc .explore-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: .15em; text-transform: uppercase;
  color: #fff; background: var(--black); padding: 13px 24px; text-decoration: none;
}
#horiz-progress {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--black); width: 0%;
  transition: width 0.05s linear; z-index: 5;
}
#horiz-counter {
  position: absolute; bottom: 32px; right: 32px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 300;
  font-size: 13px; letter-spacing: .2em; color: rgba(0,0,0,.35);
}

/* ── Cube stage ──────────────────────────────────────────────────────────────── */
#cube-stage {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100; width: var(--cube-size); height: var(--cube-size);
  perspective: 900px; mix-blend-mode: difference;
  pointer-events: none; will-change: transform, opacity;
}
#cube-stage.hoverable { pointer-events: none; }
#cube-stage.hoverable #cube { pointer-events: none; }
#cube {
  width: var(--cube-size); height: var(--cube-size);
  position: relative; transform-style: preserve-3d; will-change: transform;
}
.face {
  position: absolute; width: var(--cube-size); height: var(--cube-size);
  background: #fff; display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; overflow: hidden; will-change: transform, background;
}
.face::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.face-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  color: #000; text-transform: uppercase; line-height: .9;
  letter-spacing: -.02em; text-align: center; position: relative; z-index: 1;
}
.face.front  { transform: rotateY(0deg)    translateZ(var(--half)); }
.face.right  { transform: rotateY(90deg)   translateZ(var(--half)); }
.face.back   { transform: rotateY(180deg)  translateZ(var(--half)); }
.face.left   { transform: rotateY(-90deg)  translateZ(var(--half)); }
.face.top    { transform: rotateX(90deg)   translateZ(var(--half)); }
.face.bottom { transform: rotateX(-90deg)  translateZ(var(--half)); }

/* ── Scroll indicator ────────────────────────────────────────────────────────── */
#scroll-indicator {
  position: fixed; bottom: 32px; right: 32px; z-index: 200;
  display: flex; align-items: center; gap: 10px; transition: opacity .5s;
  mix-blend-mode: difference; cursor: pointer;
}
#scroll-indicator span {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.25); padding: 10px 16px;
}
.arrow {
  width: 14px; height: 14px;
  border-right: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.5);
  transform: rotate(45deg); animation: arrowBounce 1.4s infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 1; }
  50%       { transform: rotate(45deg) translate(3px,3px); opacity: .4; }
}

/* ── Video hero ──────────────────────────────────────────────────────────────── */
#video-hero { position: relative; z-index: 20; height: 200vh; }
#video-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#video-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.video-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 100%);
}
.video-content {
  position: absolute; inset: 0; z-index: 3;
  display: grid; grid-template-rows: 1fr auto;
  padding: 80px 6vw 64px;
}
.video-heading {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(64px, 10vw, 148px); line-height: .88;
  letter-spacing: -.03em; text-transform: uppercase; color: #fff;
  align-self: end; margin-bottom: 48px;
  opacity: 0; filter: blur(20px); transform: translateY(20px);
  transition: opacity 1.1s cubic-bezier(.22,1,.36,1), filter 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
}
.video-heading.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.video-bottom { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.video-badge {
  display: inline-flex; flex-direction: column; gap: 0;
  opacity: 0; filter: blur(12px); transform: translateY(12px);
  transition: opacity .9s .2s cubic-bezier(.22,1,.36,1), filter .9s .2s cubic-bezier(.22,1,.36,1), transform .9s .2s cubic-bezier(.22,1,.36,1);
}
.video-badge.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.badge-top {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400;
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  background: rgba(255,255,255,.15); color: #fff; padding: 6px 14px; display: inline-block;
}
.badge-bottom {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  background: #8338EC; color: #fff; padding: 6px 14px; display: inline-block;
}
.video-desc {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(15px, 1.8vw, 22px); line-height: 1.55; color: #fff;
  max-width: 480px; margin-left: auto;
  opacity: 0; filter: blur(12px); transform: translateY(12px);
  transition: opacity .9s .35s cubic-bezier(.22,1,.36,1), filter .9s .35s cubic-bezier(.22,1,.36,1), transform .9s .35s cubic-bezier(.22,1,.36,1);
}
.video-desc.in { opacity: 1; filter: blur(0); transform: translateY(0); }

/* ── Partners section ────────────────────────────────────────────────────────── */
#partners-zone { position: relative; z-index: 20; height: 300vh; }
#partners-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #060606;
  display: flex; flex-direction: column; padding: 64px 6vw;
}
.partners-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4vw; align-items: start; margin-bottom: 56px; flex-shrink: 0;
}
.partners-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(44px, 6vw, 88px); line-height: .9;
  letter-spacing: -.03em; text-transform: uppercase; color: #fff;
  opacity: 0; filter: blur(16px); transform: translateY(16px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1), filter 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.partners-title.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.partners-body {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(15px, 1.6vw, 20px); line-height: 1.6; color: rgba(255,255,255,.7);
  padding-top: 12px;
  opacity: 0; filter: blur(12px); transform: translateY(12px);
  transition: opacity 1s .2s cubic-bezier(.22,1,.36,1), filter 1s .2s cubic-bezier(.22,1,.36,1), transform 1s .2s cubic-bezier(.22,1,.36,1);
}
.partners-body.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.partner-rows { flex: 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.partner-row { display: flex; gap: 12px; overflow: visible; }
.partner-card {
  flex: 0 0 calc(16.666% - 10px); min-width: 0;
  border: 1px solid rgba(255,255,255,.15); aspect-ratio: 3/2;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; background: transparent;
  transition: border-color .3s; will-change: transform;
}
.partner-card:hover { border-color: rgba(255,255,255,.4); }
.partner-logo-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(13px, 1.4vw, 18px); letter-spacing: .04em;
  color: #fff; text-transform: uppercase; text-align: center;
}
.partner-logo-mark {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 300;
  font-size: 10px; letter-spacing: .2em;
  color: rgba(255,255,255,.4); text-transform: uppercase;
}

/* ── Featured section (white) ────────────────────────────────────────────────── */
#featured-section {
  position: relative; z-index: 20;
  background: var(--white); color: var(--black);
  min-height: 100vh; display: grid; grid-template-rows: auto 1fr;
  padding: 80px 6vw 80px;
}
.feat-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 52px; }
.feat-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(44px, 6.5vw, 96px); line-height: .95; letter-spacing: -.03em; color: var(--black);
}
.feat-num {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 300;
  font-size: clamp(18px, 2.5vw, 32px); color: #aaa; transform: translateY(-6px);
}
.feat-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5vw; align-items: center; }
.feat-image {
  aspect-ratio: 4/3; border-radius: 4px; overflow: hidden;
  background: repeating-linear-gradient(45deg, #ddd 0px, #ddd 4px, #e9e9e9 4px, #e9e9e9 14px);
  display: flex; align-items: center; justify-content: center;
}
.feat-image span {
  font-family: 'Courier New', monospace; font-size: 11px;
  color: rgba(0,0,0,.3); text-align: center; line-height: 1.6;
}
.feat-copy p {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(16px, 1.7vw, 22px); line-height: 1.6; color: #222; margin-bottom: 36px;
}
.feat-copy .explore-btn {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: .15em; text-transform: uppercase; color: #fff; background: #0a0a0a;
  padding: 13px 24px; text-decoration: none; display: inline-flex; align-items: center;
  gap: 8px; cursor: pointer;
}

/* ── We Believe zone ─────────────────────────────────────────────────────────── */
#wb-zone { position: relative; z-index: 20; height: 320vh; }
#wb-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #060606;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  padding: 60px 6vw; gap: 0;
}
.wb-heading-el {
  grid-column: 1 / 3; grid-row: 1;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(56px, 8vw, 120px); line-height: .9;
  letter-spacing: -.03em; color: #fff; margin-bottom: 48px;
  opacity: 0; filter: blur(20px);
  transition: opacity 1s ease, filter 1s ease;
}
.wb-heading-el.in { opacity: 1; filter: blur(0); }
#wb-svg-wrap {
  grid-column: 1; grid-row: 2;
  display: flex; align-items: center; justify-content: center; padding-right: 32px;
}
#wb-draw-svg { width: min(380px, 42vw); height: min(340px, 40vh); }
#wb-box-label {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(14px, 1.4vw, 18px); fill: rgba(255,255,255,.7);
  opacity: 0; transition: opacity .6s;
}
#wb-box-label.in { opacity: 1; }
#wb-text {
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 36px;
}
.wb-para {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(16px, 1.8vw, 24px); line-height: 1.55; color: rgba(255,255,255,.85);
  opacity: 0; filter: blur(12px); transform: translateY(16px);
  transition: opacity .8s ease, filter .8s ease, transform .8s ease;
}
.wb-para.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.wb-para.in.d1 { transition-delay: .15s; }
.wb-para.in.d2 { transition-delay: .3s; }
.accent-1 { color: #FF2D8B; }
.accent-2 { color: #8338EC; }
.accent-3 { color: #3A86FF; }

/* ── Work section ────────────────────────────────────────────────────────────── */
#work-zone { position: relative; z-index: 20; height: 250vh; }
#work-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: 1fr 1fr;
  padding: 64px 6vw; background: #000; will-change: background-color;
}
.work-heading {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(72px, 12vw, 168px); line-height: .88;
  letter-spacing: -.04em; text-transform: uppercase; color: #fff;
  align-self: end; padding-bottom: 16px; will-change: filter, color;
}
.work-body-wrap {
  display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 40px;
}
.work-body {
  font-family: 'Barlow', sans-serif; font-weight: 400;
  font-size: clamp(20px, 2.8vw, 38px); line-height: 1.3;
  color: #fff; max-width: 480px; text-align: left; will-change: filter, color;
}

/* ── Case studies zone ───────────────────────────────────────────────────────── */
#cases-zone { position: relative; z-index: 20; height: 1200vh; }
#cases-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.case-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.6s ease; z-index: 0;
}
.case-bg.active { opacity: 1; }
#cases-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 60%),
              linear-gradient(to top,  rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%);
  pointer-events: none;
}
#cases-bg-trigger {
  position: absolute; inset: 0; z-index: 2;
  background: transparent; cursor: default; display: block; outline: none;
}
#cases-content {
  position: absolute; inset: 0; z-index: 2;
  padding: 72px 6vw 64px;
  display: grid; grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.case-index {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #fff;
  opacity: 0; transition: opacity .5s; will-change: opacity;
}
.case-index.on { opacity: 1; }
.case-titles {
  align-self: end; position: relative;
  font-size: clamp(72px, 13vw, 180px); height: 1.05em; overflow: hidden;
}
.case-title-slot {
  position: absolute; bottom: 0; left: 0; width: 100%;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(72px, 13vw, 180px); line-height: 1; letter-spacing: -.03em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
  opacity: 0; filter: blur(18px); transform: translateY(32px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), filter .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
  will-change: opacity, filter, transform;
}
.case-title-slot.enter { opacity: 1; filter: blur(0); transform: translateY(0); }
.case-title-slot.exit  {
  opacity: 0; filter: blur(14px); transform: translateY(-28px);
  transition: opacity .45s ease-in, filter .45s ease-in, transform .45s ease-in;
}
.case-bottom {
  display: flex; align-items: flex-end; justify-content: space-between; padding-top: 32px;
}
/* Stack all desc slots on top of each other — only the active one is visible.
   Without this they stack in normal flow, pushing each successive description lower. */
.case-bottom > div {
  display: grid;
}
.case-desc-slot {
  grid-area: 1 / 1; /* all slots occupy the same cell */
  max-width: 380px; font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(15px, 1.8vw, 22px); line-height: 1.5; color: #fff;
  opacity: 0; filter: blur(12px); transform: translateY(16px);
  transition: opacity .7s .12s cubic-bezier(.22,1,.36,1), filter .7s .12s cubic-bezier(.22,1,.36,1), transform .7s .12s cubic-bezier(.22,1,.36,1);
  will-change: opacity, filter, transform;
}
.case-desc-slot.enter { opacity: 1; filter: blur(0); transform: translateY(0); }
.case-desc-slot.exit  {
  opacity: 0; filter: blur(10px); transform: translateY(-14px);
  transition: opacity .35s ease-in, filter .35s ease-in, transform .35s ease-in;
}
.case-view-btn {
  display: flex; align-items: center; gap: 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: #000; text-decoration: none; cursor: pointer; pointer-events: auto;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s .25s, transform .5s .25s cubic-bezier(.22,1,.36,1);
}
.case-view-btn.on { opacity: 1; transform: translateY(0); }
.case-view-btn span.vl { background: #fff; padding: 10px 14px; }
.case-view-btn span.vi { background: #000; color: #fff; padding: 10px 12px; }
#cases-progress {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: rgba(255,255,255,0.6); z-index: 3; transition: width 0.08s linear;
}

/* ── Progress dots (left sidebar) ───────────────────────────────────────────── */
#progress {
  position: fixed; left: 32px; top: 50%; transform: translateY(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  mix-blend-mode: difference;
}
.prog-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.25); transition: background .3s, transform .3s;
}
.prog-dot.active { background: #fff; transform: scale(2); }

/* ── Easter egg flash overlay ────────────────────────────────────────────────── */
#huge-flash {
  position: fixed; inset: 0; z-index: 99999;
  background: #fff; color: #000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
#huge-flash.show { opacity: 1; pointer-events: auto; }
#huge-flash-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(48px, 10vw, 120px); letter-spacing: -.03em;
  text-transform: uppercase; color: #000;
}
#huge-flash-sub {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(0,0,0,.45);
}

/* ── Morph zone ──────────────────────────────────────────────────────────────── */
#morph-zone { position: relative; z-index: 20; height: 350vh; }
#morph-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #050005;
  display: flex; align-items: center; justify-content: center;
}
#morph-bg {
  position: absolute; inset: 0; z-index: 2;
  background-size: cover; background-position: center;
  will-change: clip-path, opacity;
}
#morph-cube-stage {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 260px; height: 260px; perspective: 900px; z-index: 1;
}
#morph-cube-el {
  width: 260px; height: 260px;
  position: relative; transform-style: preserve-3d; will-change: transform;
}
.mface {
  position: absolute; width: 260px; height: 260px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden;
}
.mface::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.mface-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  color: #000; text-transform: uppercase; line-height: .9;
  letter-spacing: -.02em; text-align: center;
  position: relative; z-index: 1; opacity: 0;
}
.mface.mfront  { transform: rotateY(0deg)    translateZ(130px); }
.mface.mright  { transform: rotateY(90deg)   translateZ(130px); }
.mface.mback   { transform: rotateY(180deg)  translateZ(130px); }
.mface.mleft   { transform: rotateY(-90deg)  translateZ(130px); }
.mface.mtop    { transform: rotateX(90deg)   translateZ(130px); }
.mface.mbottom { transform: rotateX(-90deg)  translateZ(130px); }