/* work_0 — Figma artboard 1440×1024 (KMC-Website-Blueprint nodes 111:64, 26:157, 33:192) */
.work-0 {
  --w0-red: #c21f1f;
  --w0-cream: #f4f3ef;
  --w0-artboard-w: 1440;
  --w0-artboard-h: 1024;
  --w0-vid-r: 78px;
  position: relative;
  background: var(--w0-red);
  color: var(--w0-cream);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
  z-index: 1;
}

.work-0__canvas {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: inherit;
  margin: 0 auto;
}

/* ——— Header (Figma ~17–18px from edges, horizontal logo) ——— */
.work-0__header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(12px, 1.1vw, 17px) clamp(12px, 1.2vw, 18px) 0;
  pointer-events: none;
}

.work-0__header > * {
  pointer-events: auto;
}

/* Full-screen video (Figma 33:192): no top bar — logo + menu hidden. */
.work-0[data-work-state="video"] .work-0__header {
  display: none;
}

.work-0__logo {
  display: block;
  width: min(272.334px, 18.9vw);
  max-width: 72%;
  mix-blend-mode: plus-lighter;
  transform: rotate(0.4deg);
  filter: drop-shadow(0 4px 4px transparent);
}

.work-0__logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.work-0__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.4vw, 49px);
  height: clamp(40px, 3.4vw, 50px);
  padding: 0;
  color: var(--w0-cream);
}

.work-0__menu img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

/* ——— Stage (click to expand intro → detail) ——— */
.work-0__stage {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.work-0[data-work-state="detail"] .work-0__stage,
.work-0[data-work-state="video"] .work-0__stage {
  cursor: default;
}

/* Headlines: Inter Extra Bold 150px — scale with artboard width */
.work-0__line {
  position: absolute;
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 800;
  font-size: min(150px, calc(150 / var(--w0-artboard-w) * 100vw));
  line-height: 1;
  letter-spacing: 0;
  color: var(--w0-cream);
  white-space: nowrap;
  transition:
    left 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    top 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s var(--ease-eco),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s var(--ease-eco);
  will-change: left, top, transform;
}

/* Intro (111:64) */
.work-0[data-work-state="intro"] .work-0__no {
  left: calc(411 / var(--w0-artboard-w) * 100%);
  top: calc(249 / var(--w0-artboard-h) * 100%);
}

.work-0[data-work-state="intro"] .work-0__ads {
  left: calc(787 / var(--w0-artboard-w) * 100%);
  top: calc(249 / var(--w0-artboard-h) * 100%);
}

.work-0[data-work-state="intro"] .work-0__but {
  left: calc(224 / var(--w0-artboard-w) * 100%);
  top: calc(495 / var(--w0-artboard-h) * 100%);
}

.work-0[data-work-state="intro"] .work-0__stories {
  left: calc(599 / var(--w0-artboard-w) * 100%);
  top: calc(495 / var(--w0-artboard-h) * 100%);
}

/* Detail + video headline positions (26:157 / 33:192) — B: NO/ADS pulled inward so video feels central */
.work-0[data-work-state="detail"] .work-0__no,
.work-0[data-work-state="video"] .work-0__no {
  left: calc(210 / var(--w0-artboard-w) * 100%);
  top: calc(250 / var(--w0-artboard-h) * 100%);
}

.work-0[data-work-state="detail"] .work-0__ads,
.work-0[data-work-state="video"] .work-0__ads {
  left: calc(960 / var(--w0-artboard-w) * 100%);
  top: calc(250 / var(--w0-artboard-h) * 100%);
}

.work-0[data-work-state="detail"] .work-0__but,
.work-0[data-work-state="video"] .work-0__but {
  left: calc(225 / var(--w0-artboard-w) * 100%);
  top: calc(496 / var(--w0-artboard-h) * 100%);
}

.work-0[data-work-state="detail"] .work-0__stories,
.work-0[data-work-state="video"] .work-0__stories {
  left: calc(600 / var(--w0-artboard-w) * 100%);
  top: calc(496 / var(--w0-artboard-h) * 100%);
}

.work-0__no,
.work-0__ads,
.work-0__but,
.work-0__stories {
  z-index: 4;
}

.work-0[data-work-state="video"] .work-0__line {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* ——— Video frame + YouTube host ——— */
.work-0__video-shell {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  border-radius: var(--w0-vid-r);
  background: #d9d9d9;
  cursor: pointer;
  transition:
    left 1.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    top 1.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    width 1.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    height 1.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    border-radius 1s ease,
    box-shadow 0.8s ease,
    transform 1.2s cubic-bezier(0.2, 0.85, 0.25, 1);
  transform-origin: center center;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Slit (111:64): 25×227 @ 711,219 */
.work-0[data-work-state="intro"] .work-0__video-shell {
  left: calc(711 / var(--w0-artboard-w) * 100%);
  top: calc(219 / var(--w0-artboard-h) * 100%);
  width: calc(25 / var(--w0-artboard-w) * 100%);
  height: calc(227 / var(--w0-artboard-h) * 100%);
  transform: scaleX(1);
}

/* Detail capsule (26:157): 510×227 @ 438,220 */
.work-0[data-work-state="detail"] .work-0__video-shell {
  left: calc(438 / var(--w0-artboard-w) * 100%);
  top: calc(220 / var(--w0-artboard-h) * 100%);
  width: calc(510 / var(--w0-artboard-w) * 100%);
  height: calc(227 / var(--w0-artboard-h) * 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Full player: 16:9 so embed matches YouTube (no pillarboxing). Narrower + centered vs Figma 33:192 1213×762 */
.work-0[data-work-state="video"] .work-0__video-shell {
  left: calc(220 / var(--w0-artboard-w) * 100%);
  top: calc(231 / var(--w0-artboard-h) * 100%);
  width: calc(1000 / var(--w0-artboard-w) * 100%);
  height: auto;
  aspect-ratio: 16 / 9;
  z-index: 12;
  cursor: default;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

/* YouTube cannot receive parent click handlers (cross-origin). Use this control to open the watch URL. */
.work-0__yt-out {
  position: absolute;
  right: min(16px, 1.2vw);
  bottom: min(16px, 1.2vw);
  z-index: 16;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 243, 239, 0.85);
  background: rgba(17, 17, 17, 0.45);
  color: var(--w0-cream);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: max(12px, 0.75rem);
  text-decoration: none;
  pointer-events: auto;
}

.work-0[data-work-state="video"] .work-0__yt-out {
  display: inline-flex;
  z-index: 17;
}

/* Captures clicks above the cross-origin YouTube iframe (parent never receives iframe clicks). */
.work-0__video-hit {
  position: absolute;
  inset: 0;
  z-index: 14;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  display: none;
}

/* Only in detail: iframe swallows clicks cross-origin, so the hit layer expands to full video. */
.work-0[data-work-state="detail"] .work-0__video-hit {
  display: block;
}

.work-0[data-work-state="video"] .work-0__video-hit {
  display: none;
}

/* Figma 33:192 full frame: click anywhere on the box opens YouTube (iframe is cross-origin). */
.work-0__video-yt-hit {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 15;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.work-0[data-work-state="video"] .work-0__video-yt-hit {
  display: block;
}

.work-0__video-yt-hit:focus-visible {
  outline: 2px solid var(--w0-cream);
  outline-offset: 3px;
}

.work-0__video-hit:focus-visible {
  outline: 2px solid var(--w0-cream);
  outline-offset: 3px;
}

.work-0__yt-out:hover,
.work-0__yt-out:focus-visible {
  background: rgba(17, 17, 17, 0.65);
}

/* Inner host: YouTube needs ≥~200px; we scale down inside the slit (overflow hidden). */
.work-0__yt-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.work-0[data-work-state="detail"] .work-0__yt-inner,
.work-0[data-work-state="video"] .work-0__yt-inner {
  pointer-events: auto;
}

#work-0-yt-host {
  width: 640px;
  height: 360px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: inherit;
  transition: transform 1.15s cubic-bezier(0.2, 0.85, 0.25, 1), width 0.35s ease, height 0.35s ease;
}

.work-0[data-work-state="intro"] #work-0-yt-host {
  transform: scale(0.042);
  transform-origin: center center;
}

/* Cover-scale 16:9 inside non-16:9 shells so the picture fills width (no side bars) */
.work-0[data-work-state="detail"] #work-0-yt-host,
.work-0[data-work-state="video"] #work-0-yt-host {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  aspect-ratio: 16 / 9;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

#work-0-yt-host iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.work-0[data-work-state="detail"] #work-0-yt-host iframe {
  pointer-events: none;
}

.work-0[data-work-state="video"] #work-0-yt-host iframe {
  pointer-events: none;
}

/* ——— Scroll entrance: contracted “signal” reveal ——— */
.work-0:not(.work-0--entered) .work-0__line {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(12px);
}

.work-0:not(.work-0--entered) .work-0__video-shell {
  opacity: 0;
  transform: scaleX(0.08) scaleY(0.65);
}

.work-0.work-0--entered .work-0__line {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.work-0.work-0--entered:not(.work-0--entered-by-scroll) .work-0__no {
  transition-delay: 0.05s;
}

.work-0.work-0--entered:not(.work-0--entered-by-scroll) .work-0__ads {
  transition-delay: 0.12s;
}

.work-0.work-0--entered:not(.work-0--entered-by-scroll) .work-0__but {
  transition-delay: 0.2s;
}

.work-0.work-0--entered:not(.work-0--entered-by-scroll) .work-0__stories {
  transition-delay: 0.28s;
}

.work-0.work-0--entered:not(.work-0--entered-by-scroll) .work-0__video-shell {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
  transition:
    left 1.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    top 1.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    width 1.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    height 1.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    opacity 1s ease 0.18s,
    transform 1.1s cubic-bezier(0.34, 1.2, 0.64, 1) 0.15s,
    filter 0.9s ease 0.2s;
}

.work-0.work-0--entered.work-0--entered-by-scroll .work-0__line,
.work-0.work-0--entered.work-0--entered-by-scroll .work-0__video-shell {
  transition-delay: 0s !important;
}

.work-0.work-0--entered.work-0--entered-by-scroll .work-0__video-shell {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
  transition:
    left 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    top 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    width 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    height 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    transform 0.22s ease,
    filter 0.22s ease;
}

/* ——— Detail footer (26:157) ——— */
.work-0__detail-footer {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.work-0[data-work-state="intro"] .work-0__detail-footer,
.work-0[data-work-state="video"] .work-0__detail-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.work-0[data-work-state="detail"] .work-0__detail-footer {
  opacity: 1;
  visibility: visible;
  /* Full-bleed wrapper must not sit above the video (z-index 5) or clicks never reach .work-0__video-hit. */
  pointer-events: none;
  transition: opacity 0.6s ease 0.35s;
}

.work-0__work-tray {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.work-0[data-work-state="detail"] .work-0__rule-hit {
  pointer-events: auto;
}

/* rule-hit: retired (pill replaced by arrow-link, no hover trigger needed) */
.work-0__rule-hit {
  display: none;
}

/* rule: now a full-width bottom divider */
.work-0__rule {
  position: absolute;
  left: clamp(20px, 3.2vw, 48px);
  right: clamp(20px, 3.2vw, 48px);
  bottom: clamp(28px, 4vh, 56px);
  width: auto;
  top: auto;
  height: 1px;
  background: var(--w0-cream);
  opacity: 0.25;
  pointer-events: none;
  z-index: 5;
}

.work-0__all-work {
  position: absolute;
  right: clamp(20px, 3.2vw, 48px);
  bottom: clamp(36px, 5.5vh, 72px);
  left: auto;
  top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--w0-cream);
  text-decoration: none;
  cursor: pointer;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.45s var(--ease-out-expo),
    transform 0.45s var(--ease-out-expo);
}

.work-0__all-work-arrow {
  display: block;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-0__all-work-text {
  font-family: var(--font-inter);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  position: relative;
}

.work-0__all-work-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: var(--w0-cream);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* C: Always visible in detail */
.work-0[data-work-state="detail"] .work-0__all-work {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.5s var(--ease-out-expo) 0.9s,
    transform 0.5s var(--ease-out-expo) 0.9s;
}

.work-0[data-work-state="detail"] .work-0__all-work:hover .work-0__all-work-arrow,
.work-0[data-work-state="detail"] .work-0__all-work:focus-visible .work-0__all-work-arrow {
  transform: translateX(8px);
}

.work-0[data-work-state="detail"] .work-0__all-work:hover .work-0__all-work-text::after,
.work-0[data-work-state="detail"] .work-0__all-work:focus-visible .work-0__all-work-text::after {
  width: 100%;
}

@media (hover: none), (pointer: coarse) {
  .work-0__rule-hit {
    display: none;
  }
  .work-0__all-work-text::after {
    display: none;
  }
}

/* ——— Full video UI (33:192) ——— */
.work-0__close-video {
  position: absolute;
  z-index: 18;
  left: calc(1330 / var(--w0-artboard-w) * 100%);
  top: calc(108 / var(--w0-artboard-h) * 100%);
  width: calc(63 / var(--w0-artboard-w) * 100%);
  height: calc(52 / var(--w0-artboard-h) * 100%);
  min-width: 44px;
  min-height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--w0-cream);
  cursor: pointer;
  background: transparent;
  border: none;
}

.work-0__close-video img,
.work-0__close-video svg {
  width: 55%;
  height: 55%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.work-0[data-work-state="video"] .work-0__close-video {
  display: flex;
}

/* Intro-only rule (111:64 node 33:188) */
.work-0__intro-rule {
  position: absolute;
  left: calc(649 / var(--w0-artboard-w) * 100%);
  top: calc(919 / var(--w0-artboard-h) * 100%);
  width: calc(190 / var(--w0-artboard-w) * 100%);
  height: 2px;
  background: var(--w0-cream);
  opacity: 0.95;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.5s ease;
}

.work-0[data-work-state="intro"] .work-0__intro-rule {
  opacity: 0.95;
}

.work-0[data-work-state="detail"] .work-0__intro-rule,
.work-0[data-work-state="video"] .work-0__intro-rule {
  opacity: 0;
}

/* Stage ignores clicks on header & footer controls */
.work-0__header,
.work-0__detail-footer,
.work-0__close-video {
  cursor: auto;
}

.work-0[data-work-state="intro"] .work-0__video-shell {
  pointer-events: none;
}

.work-0[data-work-state="detail"] .work-0__video-shell {
  cursor: pointer;
}

.work-0[data-work-state="video"] .work-0__video-shell {
  cursor: default;
}

/* ——— A: Brand keywords (detail only) — centered under video capsule ——— */
.work-0__keywords {
  position: absolute;
  margin: 0;
  /* Horizontally centered in the canvas */
  left: 50%;
  top: calc(710 / var(--w0-artboard-h) * 100%);
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w0-cream);
  white-space: nowrap;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  /* combine center-shift + reveal-lift in one transform */
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.work-0[data-work-state="detail"] .work-0__keywords {
  opacity: 0.50;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.55s ease 1.1s, transform 0.55s ease 1.1s;
}

@media (prefers-reduced-motion: reduce) {
  .work-0__line,
  .work-0__video-shell,
  .work-0.work-0--entered .work-0__video-shell {
    transition-duration: 0.01ms !important;
  }

  .work-0:not(.work-0--entered) .work-0__line,
  .work-0:not(.work-0--entered) .work-0__video-shell {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .work-0__keywords {
    transition-duration: 0.01ms !important;
  }
}