:root {
  --work-paper: #fffdf9;
  --work-ink: #1a1a1b;
  --work-muted: #625d58;
  --work-line: #e8e2dc;
  --work-blue: #596be5;
  --work-width: min(92vw, 1700px);
  --work-sans: "Gabarito", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --work-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --work-type-micro: 11px;
  --work-type-label: clamp(12px, 0.72vw, 13px);
}

* { box-sizing: border-box; }

html { background: var(--work-paper); font-synthesis: none; scroll-behavior: smooth; }

body.work-real {
  --portfolio-font-body: var(--work-sans);
  --portfolio-font-mono: var(--work-mono);
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--work-paper);
  color: var(--work-ink);
  font-family: var(--work-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.work-real__header {
  position: sticky;
  z-index: 12;
  top: 0;
  background: color-mix(in srgb, var(--work-paper) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
}

.work-real__header-inner {
  display: flex;
  width: var(--work-width);
  min-height: 78px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--work-line);
}

.work-real__brand,
.work-real__header-link {
  color: inherit;
  text-decoration: none;
}

.work-real__brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.work-real__brand-mark {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--work-blue) 30%, #fff);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px -14px rgba(31, 36, 70, 0.45);
  color: var(--work-blue);
  font-weight: 900;
}

.work-real__brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  mix-blend-mode: multiply;
  transform: scale(1.08);
}

.work-real__header-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--work-muted);
  font: 500 var(--work-type-label)/1 var(--work-mono);
  letter-spacing: 0.08em;
  transition: color 180ms ease;
}

.work-real__header-link:hover { color: var(--work-blue); }

.work-real__main { width: var(--work-width); margin: 0 auto; padding: clamp(78px, 10vw, 170px) 0 clamp(140px, 17vw, 220px); }

.work-real__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: clamp(40px, 8vw, 160px);
  align-items: end;
  padding-bottom: clamp(62px, 8vw, 122px);
}

.work-real__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  color: var(--work-blue);
  font: 500 var(--work-type-label)/1 var(--work-mono);
  letter-spacing: 0.09em;
}

.work-real__eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 13%, transparent);
  content: "";
}

.work-real__title {
  max-width: 920px;
  margin: 0;
  font-size: clamp(58px, 8.4vw, 148px);
  font-weight: 900;
  letter-spacing: -0.078em;
  line-height: 0.98;
  text-wrap: balance;
}

.work-real__title span { color: var(--work-blue); }

.work-real__summary {
  max-width: 440px;
  margin: 0 0 5px;
  color: var(--work-muted);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.75;
}

.work-real__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 7vw, 120px) clamp(28px, 3.2vw, 60px);
}

.work-real__card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.work-real__card::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, var(--card-accent) 22%, white);
  border-radius: clamp(16px, 1.5vw, 26px);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--card-accent) 38%, #fff6ed),
      color-mix(in srgb, var(--card-accent) 20%, #e7e7ff)
    );
  box-shadow: 0 24px 46px -34px color-mix(in srgb, var(--card-accent) 42%, transparent);
  content: "";
  opacity: 0.72;
  pointer-events: none;
  transform: translateY(8px) scale(0.986);
  transition:
    opacity 300ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease;
}

.work-real__card > .work-real__visual,
.work-real__card > .work-real__card-body {
  position: relative;
  z-index: 1;
}

.work-real__visual {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-accent) 17%, var(--work-line));
  border-radius: clamp(16px, 1.5vw, 26px);
  background: #f4f0eb;
  box-shadow: 0 22px 46px -38px color-mix(in srgb, var(--card-accent) 36%, transparent);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, border-color 260ms ease;
}

.work-real__view-cursor {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  transition:
    opacity 160ms ease,
    visibility 0s linear 180ms,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: top, left, opacity, transform;
}

.work-real__view-media {
  position: absolute;
  z-index: 1;
  inset: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.2)),
    color-mix(in srgb, var(--card-accent) 8%, rgba(255, 255, 255, 0.48));
  box-shadow:
    0 16px 42px rgba(20, 20, 20, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(13px) saturate(1.24);
  backdrop-filter: blur(13px) saturate(1.24);
}

.work-real__view-media::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.26), transparent 45%),
    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, 0.24), transparent 34%);
  content: "";
}

.work-real__view-clone {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  object-fit: contain;
  opacity: 0.5;
  pointer-events: none;
  filter: saturate(1.12) contrast(1.03) brightness(1.02);
  transform: none !important;
  transition: none !important;
  will-change: top, left;
}

.work-real__view-rim {
  position: absolute;
  z-index: 3;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 12deg,
    transparent 0 19%,
    color-mix(in srgb, var(--card-accent) 82%, white) 19% 35%,
    transparent 35% 73%,
    rgba(255, 255, 255, 0.94) 73% 79%,
    transparent 79% 100%
  );
  opacity: 0.88;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 0);
}

.work-real__view-label {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.72);
  box-shadow: 0 8px 22px rgba(23, 23, 23, 0.12);
  color: var(--work-ink);
  font-family: var(--work-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.work-real__view-label b {
  color: color-mix(in srgb, var(--card-accent) 84%, var(--work-ink));
  font-size: 12px;
  transform: translate(0, 0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-real__card.is-view-active .work-real__view-cursor {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

.work-real__card.is-view-active .work-real__view-label b {
  transform: translate(2px, -2px);
}

.work-real__card.is-view-pressed .work-real__view-cursor {
  transform: translate(-50%, -50%) scale(0.91);
}

.work-real__visual::after {
  position: absolute;
  inset: 9px;
  border: 1px solid color-mix(in srgb, #fff 72%, transparent);
  border-radius: inherit;
  content: "";
  opacity: 0.7;
  pointer-events: none;
}

.work-real__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.001);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-real__case-number {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  display: grid;
  width: 39px;
  height: 27px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--card-accent) 20%, #fff);
  border-radius: 999px;
  background: color-mix(in srgb, #fff 88%, transparent);
  box-shadow: 0 8px 14px -12px rgba(22, 22, 22, 0.45);
  color: var(--card-accent);
  font: 500 var(--work-type-label)/1 var(--work-mono);
  letter-spacing: 0.04em;
}

.work-real__card:hover .work-real__visual,
.work-real__card:focus-visible .work-real__visual,
.work-real__card.is-view-active .work-real__visual {
  border-color: color-mix(in srgb, var(--card-accent) 45%, var(--work-line));
  box-shadow: 0 34px 60px -38px color-mix(in srgb, var(--card-accent) 58%, transparent);
  transform: translateY(-11px);
}

.work-real__card:hover::before,
.work-real__card:focus-visible::before,
.work-real__card.is-view-active::before {
  opacity: 0.96;
  box-shadow: 0 32px 52px -35px color-mix(in srgb, var(--card-accent) 62%, transparent);
  transform: translateY(15px) scale(0.986);
}

.work-real__card:hover .work-real__visual img,
.work-real__card:focus-visible .work-real__visual img { transform: scale(1.001); }

@media (hover: hover) and (pointer: fine) {
  body.is-work-view-ready .work-real__visual { cursor: none; }
}

@media (hover: none), (pointer: coarse) {
  .work-real__view-cursor { display: none; }
}

.work-real__card-body {
  padding-top: 21px;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-real__card:hover .work-real__card-body,
.work-real__card:focus-visible .work-real__card-body,
.work-real__card.is-view-active .work-real__card-body {
  transform: translateY(-4px);
}

.work-real__card-label {
  margin: 0 0 10px;
  color: var(--card-accent);
  font: 500 var(--work-type-label)/1.45 var(--work-mono);
  letter-spacing: 0.045em;
  transition: color 260ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-real__card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.work-real__card h2 {
  margin: 0;
  color: var(--work-ink);
  font-size: clamp(25px, 2.25vw, 39px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1.12;
  transition: color 280ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-real__card-action {
  flex: 0 0 auto;
  color: var(--work-muted);
  font: 500 var(--work-type-label)/1 var(--work-mono);
  letter-spacing: 0.06em;
  transition: color 180ms ease, transform 180ms ease;
}

.work-real__card:hover .work-real__card-action,
.work-real__card:focus-visible .work-real__card-action,
.work-real__card.is-view-active .work-real__card-action { color: var(--card-accent); transform: translateX(3px); }

.work-real__card-description {
  max-width: 640px;
  margin: 13px 0 0;
  color: var(--work-muted);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.65;
  transition: color 300ms ease, transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-real__card:hover .work-real__card-label,
.work-real__card:focus-visible .work-real__card-label,
.work-real__card.is-view-active .work-real__card-label {
  color: color-mix(in srgb, var(--card-accent) 88%, var(--work-ink));
  transform: translateX(3px);
}

.work-real__card:hover h2,
.work-real__card:focus-visible h2,
.work-real__card.is-view-active h2 {
  color: var(--card-accent);
  transform: translateX(3px);
}

.work-real__card:hover .work-real__card-description,
.work-real__card:focus-visible .work-real__card-description,
.work-real__card.is-view-active .work-real__card-description {
  color: color-mix(in srgb, var(--card-accent) 56%, var(--work-ink));
  transform: translateX(3px);
}

.work-real__other {
  margin-top: clamp(120px, 15vw, 220px);
  padding-top: clamp(38px, 5vw, 70px);
  border-top: 1px solid var(--work-line);
}

.work-real__other-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: clamp(30px, 4vw, 56px); }
.work-real__other-head p { margin: 0; color: var(--work-blue); font: 500 var(--work-type-label)/1 var(--work-mono); letter-spacing: 0.08em; }
.work-real__other-head h2 { margin: 12px 0 0; font-size: clamp(31px, 3.4vw, 54px); font-weight: 900; letter-spacing: -0.055em; line-height: 1.08; text-wrap: balance; }
.work-real__other-head span { max-width: 330px; color: var(--work-muted); font-size: 14px; font-weight: 500; line-height: 1.7; }

[data-other-archive] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.work-real__card--archive-pack {
  width: 100%;
}

.work-real__card--archive-pack::before {
  aspect-ratio: 2.5 / 1;
}

.other-archive-pack {
  container-type: inline-size;
  aspect-ratio: 2.5 / 1;
  min-height: 330px;
  background:
    linear-gradient(120deg, rgba(246, 242, 255, 0.98), rgba(255, 253, 249, 0.98) 45%, rgba(238, 244, 255, 0.98));
  box-shadow:
    0 30px 80px -56px rgba(75, 62, 127, 0.55),
    inset 0 1px rgba(255, 255, 255, 0.9);
}

.other-archive-pack::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(rgba(115, 100, 162, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 100, 162, 0.055) 1px, transparent 1px);
  background-size: 4.1cqw 4.1cqw;
  content: "";
  -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.36) 60%, transparent);
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.36) 60%, transparent);
}

.other-archive-pack::after {
  z-index: 20;
  border-color: rgba(255, 255, 255, 0.92);
}

.other-archive-pack__glow {
  position: absolute;
  z-index: 1;
  top: -40%;
  left: -12%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(169, 145, 255, 0.24), rgba(155, 187, 255, 0.11) 37%, transparent 69%);
  filter: blur(10px);
  pointer-events: none;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease;
}

.other-archive-pack__heading {
  position: absolute;
  z-index: 8;
  top: 14%;
  left: 5.2%;
  display: flex;
  width: 30%;
  flex-direction: column;
  color: #282332;
  pointer-events: none;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.other-archive-pack__heading small {
  color: #7c6cba;
  font: 500 clamp(7px, 0.95cqw, 13px)/1 var(--work-mono);
  letter-spacing: 0.13em;
}

.other-archive-pack__heading strong {
  margin-top: 2.5cqw;
  font-family: var(--work-sans);
  font-size: clamp(42px, 7cqw, 112px);
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 0.76;
}

.other-archive-pack__heading i {
  display: flex;
  gap: 0.8cqw;
  align-items: center;
  margin-top: 2.5cqw;
  color: #8b8495;
  font: 500 clamp(7px, 0.92cqw, 12px)/1 var(--work-mono);
  font-style: normal;
  letter-spacing: 0.07em;
}

.other-archive-pack__heading i::before {
  width: 2.7cqw;
  height: 1px;
  background: #9f8ad7;
  content: "";
}

.other-archive-pack__stack {
  position: absolute;
  z-index: 3;
  top: 7%;
  right: 2.8%;
  width: 64%;
  height: 86%;
  pointer-events: none;
  perspective: 1200px;
}

.other-archive-pack__thumb {
  position: absolute;
  top: 10%;
  left: 4%;
  display: block;
  width: 43%;
  height: 77%;
  overflow: hidden;
  border: 1px solid rgba(91, 77, 128, 0.17);
  border-radius: clamp(10px, 1.3cqw, 20px);
  background: #f5f2ee;
  box-shadow:
    0 24px 46px -27px rgba(42, 35, 61, 0.52),
    0 4px 12px rgba(42, 35, 61, 0.08);
  transform-origin: 50% 100%;
  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms ease,
    box-shadow 520ms ease;
  will-change: transform;
}

.work-real__card--archive-pack .other-archive-pack__thumb img,
.work-real__card--archive-pack:hover .other-archive-pack__thumb img,
.work-real__card--archive-pack:focus-visible .other-archive-pack__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.96);
  transform: scale(1.025);
  transition: filter 520ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.other-archive-pack__thumb::after {
  position: absolute;
  inset: 52% 0 0;
  background: linear-gradient(transparent, rgba(24, 20, 34, 0.7));
  content: "";
  pointer-events: none;
}

.other-archive-pack__thumb > i,
.other-archive-pack__thumb > b {
  position: absolute;
  z-index: 2;
  bottom: 6%;
  color: #fff;
  font-style: normal;
  pointer-events: none;
}

.other-archive-pack__thumb > i {
  left: 6%;
  color: rgba(255, 255, 255, 0.66);
  font: 500 clamp(6px, 0.78cqw, 10px)/1 var(--work-mono);
  letter-spacing: 0.08em;
}

.other-archive-pack__thumb > b {
  right: 6%;
  font-family: var(--work-sans);
  font-size: clamp(8px, 1.05cqw, 14px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.other-archive-pack__thumb--1 {
  z-index: 7;
  transform: translate3d(-4%, 8%, 34px) rotate(-5deg);
}

.other-archive-pack__thumb--2 {
  z-index: 6;
  transform: translate3d(34%, -3%, 18px) rotate(2.5deg);
}

.other-archive-pack__thumb--3 {
  z-index: 5;
  transform: translate3d(72%, 8%, 5px) rotate(-1.5deg);
}

.other-archive-pack__thumb--4 {
  z-index: 4;
  transform: translate3d(108%, -1%, -8px) rotate(4deg);
}

.other-archive-pack__index {
  position: absolute;
  z-index: 9;
  bottom: 8.5%;
  left: 5.2%;
  display: grid;
  width: 28%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7cqw 1.4cqw;
  color: #777080;
  pointer-events: none;
}

.other-archive-pack__index i {
  display: flex;
  gap: 0.55cqw;
  align-items: center;
  font: 500 clamp(6px, 0.82cqw, 11px)/1.2 var(--work-mono);
  font-style: normal;
  white-space: nowrap;
}

.other-archive-pack__index b {
  color: #9a84d1;
  font-weight: 500;
}

.other-archive-pack .work-real__case-number {
  z-index: 22;
}

.work-real__card--archive-pack:hover .other-archive-pack__glow,
.work-real__card--archive-pack:focus-visible .other-archive-pack__glow {
  opacity: 1.25;
  transform: translate3d(7%, 5%, 0) scale(1.08);
}

.work-real__card--archive-pack:hover .other-archive-pack__heading,
.work-real__card--archive-pack:focus-visible .other-archive-pack__heading {
  transform: translate3d(0, -2%, 0);
}

.work-real__card--archive-pack:hover .other-archive-pack__thumb,
.work-real__card--archive-pack:focus-visible .other-archive-pack__thumb {
  box-shadow:
    0 32px 55px -28px rgba(42, 35, 61, 0.62),
    0 5px 15px rgba(42, 35, 61, 0.09);
}

.work-real__card--archive-pack:hover .other-archive-pack__thumb img,
.work-real__card--archive-pack:focus-visible .other-archive-pack__thumb img {
  filter: saturate(1) contrast(1);
  transform: scale(1.055);
}

.work-real__card--archive-pack:hover .other-archive-pack__thumb--1,
.work-real__card--archive-pack:focus-visible .other-archive-pack__thumb--1 {
  transform: translate3d(-11%, 10%, 42px) rotate(-7deg);
}

.work-real__card--archive-pack:hover .other-archive-pack__thumb--2,
.work-real__card--archive-pack:focus-visible .other-archive-pack__thumb--2 {
  transform: translate3d(29%, -8%, 23px) rotate(1deg);
}

.work-real__card--archive-pack:hover .other-archive-pack__thumb--3,
.work-real__card--archive-pack:focus-visible .other-archive-pack__thumb--3 {
  transform: translate3d(75%, 10%, 8px) rotate(-1deg);
}

.work-real__card--archive-pack:hover .other-archive-pack__thumb--4,
.work-real__card--archive-pack:focus-visible .other-archive-pack__thumb--4 {
  transform: translate3d(116%, -5%, -5px) rotate(6deg);
}

.work-real__reveal { opacity: 1; transform: none; }
.js .work-real__reveal { opacity: 0; transform: translateY(22px); transition: opacity 520ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .work-real__reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --work-width: min(100% - 52px, 800px); }
  .work-real__header-inner { min-height: 68px; }
  .work-real__hero { grid-template-columns: 1fr; gap: 30px; }
  .work-real__summary { max-width: 580px; }
  .other-archive-pack { aspect-ratio: 2 / 1; min-height: 340px; }
  .work-real__card--archive-pack::before { aspect-ratio: 2 / 1; min-height: 340px; }
  .other-archive-pack__heading { width: 34%; }
  .other-archive-pack__stack { right: 1%; width: 65%; }
}

@media (max-width: 620px) {
  :root { --work-width: calc(100% - 30px); }
  .work-real__header-inner { min-height: 60px; }
  .work-real__brand { gap: 10px; font-size: 14px; }
  .work-real__brand-mark { width: 30px; height: 30px; }
  .work-real__header-link { font-size: 12px; line-height: 1.2; }
  .work-real__main { padding-top: 66px; padding-bottom: 134px; }
  .work-real__grid { grid-template-columns: 1fr; gap: 68px; }
  .work-real__title { font-size: clamp(58px, 17.5vw, 88px); }
  .work-real__visual { border-radius: 15px; }
  .work-real__case-number { top: 12px; left: 12px; }
  .work-real__card-body { padding-top: 16px; }
  .work-real__card h2 { font-size: 29px; }
  .work-real__other { margin-top: 104px; }
  .work-real__other-head { align-items: flex-start; flex-direction: column; gap: 18px; }
  .work-real__other-head span { max-width: none; }
  [data-other-archive] { grid-template-columns: 1fr; gap: 68px; }
  .other-archive-pack { aspect-ratio: 4 / 5; min-height: 430px; }
  .work-real__card--archive-pack::before { aspect-ratio: 4 / 5; min-height: 430px; }
  .other-archive-pack__heading { top: 9%; left: 7%; width: 72%; }
  .other-archive-pack__heading strong { margin-top: 4cqw; font-size: 13cqw; line-height: 0.78; }
  .other-archive-pack__heading i { margin-top: 4cqw; }
  .other-archive-pack__stack { top: 43%; right: 1%; width: 94%; height: 50%; }
  .other-archive-pack__thumb { width: 46%; height: 78%; }
  .other-archive-pack__thumb--1 { transform: translate3d(-2%, 9%, 34px) rotate(-5deg); }
  .other-archive-pack__thumb--2 { transform: translate3d(33%, -2%, 18px) rotate(2.5deg); }
  .other-archive-pack__thumb--3 { transform: translate3d(68%, 8%, 5px) rotate(-1.5deg); }
  .other-archive-pack__thumb--4 { transform: translate3d(103%, 0, -8px) rotate(4deg); }
  .other-archive-pack__index { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work-real__reveal,
  .js .work-real__reveal { opacity: 1; transform: none; transition: none; }
  .work-real__view-cursor,
  .work-real__view-label b { transition: none; }
  .work-real__card::before,
  .work-real__card > .work-real__visual,
  .work-real__card > .work-real__card-body,
  .work-real__card h2,
  .work-real__card-label,
  .work-real__card-description { transition: none !important; }
  .work-real__card:hover::before,
  .work-real__card:focus-visible::before,
  .work-real__card.is-view-active::before { transform: translateY(8px) scale(0.986); }
  .work-real__card:hover > .work-real__visual,
  .work-real__card:focus-visible > .work-real__visual,
  .work-real__card.is-view-active > .work-real__visual,
  .work-real__card:hover > .work-real__card-body,
  .work-real__card:focus-visible > .work-real__card-body,
  .work-real__card.is-view-active > .work-real__card-body { transform: none; }
  .other-archive-pack__glow,
  .other-archive-pack__heading,
  .other-archive-pack__thumb,
  .other-archive-pack__thumb img { transition: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Restored opening formation                                                  */
/* -------------------------------------------------------------------------- */

.work-formation {
  --formation-progress: 0;
  position: relative;
  width: 100%;
  height: 160svh;
  background: var(--work-paper);
  isolation: isolate;
}

.work-formation__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 650px;
  overflow: clip;
  background: var(--work-paper);
  isolation: isolate;
}

.work-formation__scene {
  position: absolute;
  inset: 0;
}

.work-formation__scene::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 38%, rgba(245, 205, 81, 0.2), transparent 28%),
    radial-gradient(circle at 51% 28%, rgba(73, 95, 224, 0.12), transparent 31%),
    radial-gradient(circle at 82% 60%, rgba(234, 63, 118, 0.13), transparent 29%);
  content: "";
  opacity: calc(1 - var(--formation-progress));
  pointer-events: none;
}

.work-formation__grid {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  width: min(92vw, 1500px);
  height: min(700px, calc(100svh - 176px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) minmax(92px, 0.42fr) minmax(0, 1fr);
  gap: clamp(11px, 1.25vw, 20px);
  align-items: center;
  perspective: 1100px;
  transform: translate(-50%, -50%);
}

.work-formation__tile {
  --formation-accent: #f5cd51;
  --formation-wash: #fcf3d1;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  transform-origin: center;
}

.work-formation__tile:nth-child(-n + 3) { grid-row: 1; }
.work-formation__tile:nth-child(n + 4) { grid-row: 3; }
.work-formation__tile:nth-child(1),
.work-formation__tile:nth-child(4) { grid-column: 1; }
.work-formation__tile:nth-child(2),
.work-formation__tile:nth-child(5) { grid-column: 2; }
.work-formation__tile:nth-child(3),
.work-formation__tile:nth-child(6) { grid-column: 3; }

.work-formation__tile:nth-child(3n + 2) {
  --formation-accent: #495fe0;
  --formation-wash: #d2d8f7;
}

.work-formation__tile:nth-child(3n) {
  --formation-accent: #ea3f76;
  --formation-wash: #f7cddd;
}

.work-formation__tile::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--formation-accent) 28%, transparent);
  background: color-mix(in srgb, var(--formation-wash) 74%, #fff);
  content: "";
  transform: translate(4px, 5px);
}

.work-formation__mask {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.15);
  border-radius: 3px;
  background: var(--formation-wash);
  box-shadow: 0 18px 34px -29px rgba(23, 23, 23, 0.32);
}

.work-formation__visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.work-formation__title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 100%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.work-formation__title h1,
.work-formation__ink p {
  display: flex;
  margin: 0;
  padding: 0.08em 0.02em 0.11em;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  font-family: var(--work-sans);
  font-size: clamp(72px, 7.25vw, 116px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.work-formation__title h1 {
  color: var(--work-ink);
}

.work-formation__title h1 span {
  position: relative;
  display: block;
  /* Leave a small horizontal safety area for the heavy glyph overhang and
     the final 1.035× title scale; the negative margin keeps the heading
     optically in the same place. */
  padding: 0.08em 0.075em 0.12em;
  margin-inline: -0.075em;
  overflow: hidden;
}

.work-formation__title h1 i {
  display: block;
  font-style: normal;
  transform-origin: center;
}

.work-formation__title h1 span:last-child::after {
  position: absolute;
  right: 3%;
  bottom: 0;
  left: 8%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5cd51 0 48%, #ea3f76 48%);
  content: "";
  transform: scaleX(var(--formation-progress)) rotate(-1.2deg);
  transform-origin: left center;
}

.work-formation__registration {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 100%;
  height: 1px;
  isolation: isolate;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.work-formation__ink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #f5cd51;
  mix-blend-mode: multiply;
  opacity: 0.5;
  transform: translate(-8px, -3px) rotate(-0.28deg);
  transform-origin: center;
}

.work-formation__ink--blue {
  color: #495fe0;
  transform: translate(2px, 4px) rotate(0.1deg);
}

.work-formation__ink--pink {
  color: #ea3f76;
  transform: translate(8px, -1px) rotate(0.25deg);
}

.work-formation__ink p {
  color: currentColor;
  transform: translateY(-50%);
}

.work-formation__registration-marks {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(70%, 1080px);
  height: min(46svh, 420px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.work-formation__registration-marks i {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: rgba(23, 23, 23, 0.22);
  border-style: solid;
  border-width: 0;
}

.work-formation__registration-marks i:nth-child(1) {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}

.work-formation__registration-marks i:nth-child(2) {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}

.work-formation__registration-marks i:nth-child(3) {
  right: 0;
  bottom: 0;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.work-formation__registration-marks i:nth-child(4) {
  bottom: 0;
  left: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.work-formation__progress {
  position: absolute;
  bottom: 26px;
  left: 50%;
  z-index: 5;
  width: min(92vw, 1500px);
  height: 1px;
  background: rgba(23, 23, 23, 0.12);
  transform: translateX(-50%);
}

.work-formation__progress i {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #f5cd51 0 33.333%,
    #495fe0 33.333% 66.666%,
    #ea3f76 66.666%
  );
  transform: scaleX(0);
  transform-origin: left center;
}

.work-formation.is-in-view .work-formation__tile,
.work-formation.is-in-view .work-formation__mask,
.work-formation.is-in-view .work-formation__visual,
.work-formation.is-in-view [data-formation-word],
.work-formation.is-in-view [data-formation-ink],
.work-formation.is-in-view [data-formation-ink-inner],
.work-formation.is-in-view [data-formation-fragment],
.work-formation.is-in-view .work-formation__registration-marks i {
  will-change: transform, opacity, clip-path;
}

/* Jenny's falling design fragments. */

.work-formation__fragments {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.work-formation__fragment {
  --fragment-scale: 1;
  --fragment-rotation: 0deg;
  --drop-drift: 0px;
  position: absolute;
  transform-origin: center;
}

.work-formation__fragment-drop {
  opacity: 0;
  transform:
    translate3d(var(--drop-drift), -62vh, 0)
    rotate(calc(var(--fragment-rotation) * -1.7))
    scale(calc(var(--fragment-scale) * 0.84));
  transform-origin: center;
}

.js body.is-ready .work-formation__fragment-drop {
  animation: formation-fragment-drop 1.02s cubic-bezier(0.2, 0.78, 0.2, 1) both;
  animation-delay: 70ms;
}

.js body.is-ready .work-formation__fragment:nth-child(2) .work-formation__fragment-drop { animation-delay: 135ms; }
.js body.is-ready .work-formation__fragment:nth-child(3) .work-formation__fragment-drop { animation-delay: 200ms; }
.js body.is-ready .work-formation__fragment:nth-child(4) .work-formation__fragment-drop { animation-delay: 265ms; }
.js body.is-ready .work-formation__fragment:nth-child(5) .work-formation__fragment-drop { animation-delay: 330ms; }
.js body.is-ready .work-formation__fragment:nth-child(6) .work-formation__fragment-drop { animation-delay: 395ms; }
.js body.is-ready .work-formation__fragment:nth-child(7) .work-formation__fragment-drop { animation-delay: 460ms; }
.js body.is-ready .work-formation__fragment:nth-child(8) .work-formation__fragment-drop { animation-delay: 525ms; }

@keyframes formation-fragment-drop {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--drop-drift), -62vh, 0)
      rotate(calc(var(--fragment-rotation) * -1.7))
      scale(calc(var(--fragment-scale) * 0.84));
  }
  58% {
    opacity: 1;
    transform: translate3d(0, 10px, 0) rotate(var(--fragment-rotation)) scale(var(--fragment-scale));
  }
  74% {
    opacity: 1;
    transform: translate3d(0, -5px, 0) rotate(var(--fragment-rotation)) scale(var(--fragment-scale));
  }
  88% {
    opacity: 1;
    transform: translate3d(0, 2px, 0) rotate(var(--fragment-rotation)) scale(var(--fragment-scale));
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--fragment-rotation)) scale(var(--fragment-scale));
  }
}

.work-formation__fragment--research {
  --fragment-scale: 1.28;
  --fragment-rotation: -3.2deg;
  --drop-drift: -28px;
  top: 29%;
  left: 7%;
}

.fragment-research {
  position: relative;
  display: grid;
  width: 154px;
  height: 86px;
  padding: 13px 14px;
  align-content: center;
  border: 1px solid rgba(23, 23, 23, 0.32);
  background:
    linear-gradient(rgba(73, 95, 224, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 95, 224, 0.09) 1px, transparent 1px),
    #fffdf5;
  background-size: 13px 13px;
  box-shadow: 5px 6px 0 rgba(245, 205, 81, 0.72);
}

.fragment-research span {
  position: relative;
  z-index: 2;
  font: 500 var(--work-type-micro)/1 var(--work-mono);
  letter-spacing: 0.13em;
}

.fragment-research strong {
  position: relative;
  z-index: 2;
  margin-top: 3px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.fragment-research i {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 46px;
  background: linear-gradient(135deg, #ea3f76 0 49%, #f5cd51 50%);
  clip-path: polygon(20% 0, 100% 0, 100% 100%);
}

.work-formation__fragment--prototype {
  --fragment-scale: 1.22;
  --fragment-rotation: -2deg;
  --drop-drift: 16px;
  top: 23%;
  left: 24%;
}

.fragment-prototype {
  display: grid;
  width: 48px;
  height: 142px;
  place-items: center;
  border: 1px solid #2d43bb;
  border-radius: 16px;
  background: #5265e4;
  box-shadow: 4px 5px 0 rgba(210, 216, 247, 0.9);
  color: #fff;
  font: 500 10px/1 var(--work-mono);
  letter-spacing: 0.09em;
  writing-mode: vertical-rl;
}

.work-formation__fragment--spark {
  --fragment-scale: 1.2;
  --fragment-rotation: 4deg;
  --drop-drift: -20px;
  top: 28%;
  left: 38.5%;
}

.fragment-spark {
  color: #eaf24a;
  font-size: 68px;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(23, 23, 23, 0.72);
  text-shadow: 3px 3px 0 rgba(245, 205, 81, 0.5);
}

.work-formation__fragment--cursor {
  --fragment-scale: 1.25;
  --fragment-rotation: 2deg;
  --drop-drift: 24px;
  top: 26%;
  right: 24%;
}

.fragment-cursor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.fragment-cursor i {
  display: block;
  width: 26px;
  height: 34px;
  background: #171717;
  clip-path: polygon(0 0, 100% 72%, 58% 76%, 42% 100%);
  transform: rotate(-8deg);
}

.fragment-cursor span {
  padding: 8px 12px;
  border: 1px solid #3149c8;
  border-radius: 999px;
  background: #5265e4;
  box-shadow: 3px 4px 0 rgba(210, 216, 247, 0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.work-formation__fragment--human-ai {
  --fragment-scale: 1.18;
  --fragment-rotation: 2.5deg;
  --drop-drift: 34px;
  top: 23%;
  right: 10%;
}

.fragment-human-ai {
  display: flex;
  width: 74px;
  height: 146px;
  padding: 8px;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #171717;
  border-radius: 15px;
  background: #fff;
  box-shadow: 5px 6px 0 #f7cddd;
  writing-mode: vertical-rl;
}

.fragment-human-ai span,
.fragment-human-ai strong {
  font: 500 11px/1 var(--work-mono);
  letter-spacing: 0.08em;
}

.fragment-human-ai strong {
  color: #ea3f76;
  font-weight: 700;
}

.work-formation__fragment--ux {
  --fragment-scale: 1.24;
  --fragment-rotation: -1.7deg;
  --drop-drift: -30px;
  bottom: 36%;
  left: 13%;
}

.fragment-ux {
  display: flex;
  align-items: center;
}

.fragment-ux span,
.fragment-ux strong {
  display: grid;
  width: 76px;
  height: 58px;
  place-items: center;
  border: 1px solid #5265e4;
  border-radius: 999px;
  background: #fff;
  color: #5265e4;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.055em;
}

.fragment-ux strong {
  margin-left: -8px;
  border-color: #e0b72e;
  background: #eaf24a;
  color: #ea5a30;
}

.work-formation__fragment--flow {
  --fragment-scale: 1.18;
  --fragment-rotation: 1.7deg;
  --drop-drift: 24px;
  right: 21%;
  bottom: 35%;
}

.fragment-flow {
  position: relative;
  display: grid;
  width: 190px;
  height: 64px;
  grid-template-columns: 1fr 34px 1fr;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.3);
  border-radius: 16px;
  background: #fff;
  box-shadow: 5px 6px 0 rgba(247, 205, 221, 0.88);
}

.fragment-flow span,
.fragment-flow strong {
  position: relative;
  z-index: 2;
  display: grid;
  height: 100%;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.fragment-flow span { background: #ea3f76; }
.fragment-flow strong { background: #5265e4; }

.fragment-flow i {
  position: relative;
  z-index: 3;
  display: block;
  width: 34px;
  height: 2px;
  background: #171717;
}

.fragment-flow i::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid #171717;
  border-right: 2px solid #171717;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.work-formation__fragment--components {
  --fragment-scale: 1.24;
  --fragment-rotation: 3deg;
  --drop-drift: 32px;
  right: 8%;
  bottom: 34%;
}

.fragment-components {
  position: relative;
  display: grid;
  width: 82px;
  height: 82px;
  padding: 5px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid rgba(23, 23, 23, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 5px 6px 0 rgba(210, 216, 247, 0.9);
}

.fragment-components i {
  display: block;
  border: 1px solid rgba(23, 23, 23, 0.6);
  border-radius: 50% 50% 50% 16%;
  background: #ea3f76;
}

.fragment-components i:nth-child(2) {
  border-radius: 50% 50% 16% 50%;
  background: #f09caf;
}

.fragment-components i:nth-child(3) {
  border-radius: 50% 16% 50% 50%;
  background: #eaf24a;
}

.fragment-components i:nth-child(4) {
  border-radius: 16% 50% 50% 50%;
  background: #5265e4;
}

.fragment-components span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border: 1px solid #171717;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

@media (max-width: 1120px) {
  .work-formation__fragment { --fragment-scale: 0.84; }
  .work-formation__fragment--research { top: 23%; left: 1%; }
  .work-formation__fragment--prototype { top: 16%; left: 22%; }
  .work-formation__fragment--spark { top: 21%; left: 35.5%; }
  .work-formation__fragment--cursor { top: 19%; right: 27%; }
  .work-formation__fragment--human-ai { top: 15%; right: 2%; }
  .work-formation__fragment--ux { bottom: 29%; left: 12%; }
  .work-formation__fragment--flow { right: 24%; bottom: 28%; }
  .work-formation__fragment--components { right: 1%; bottom: 27%; }
}

@media (max-width: 809px) {
  .work-formation,
  .work-formation.is-static {
    height: auto;
  }

  .work-formation__pin,
  .work-formation.is-static .work-formation__pin {
    position: relative;
    height: auto;
    min-height: max(620px, 100svh);
  }

  .work-formation__grid { display: none; }

  .work-formation__registration-marks {
    width: calc(100% - 30px);
    height: min(38svh, 300px);
  }

  .work-formation__registration-marks i {
    width: 25px;
    height: 25px;
  }

  .work-formation__ink { transform: translate(-5px, -3px) rotate(-0.25deg); }
  .work-formation__ink--blue { transform: translate(1px, 3px) rotate(0.08deg); }
  .work-formation__ink--pink { transform: translate(5px, -1px) rotate(0.2deg); }

  .work-formation__ink p,
  .work-formation__title h1 {
    gap: 0.14em;
    font-size: clamp(44px, 12vw, 68px);
  }

  .work-formation__progress { bottom: 82px; }
  .work-formation__fragment { --fragment-scale: 0.72; }
  .work-formation__fragment--research { top: 16%; left: -4%; }
  .work-formation__fragment--prototype { top: 13%; left: 23%; }
  .work-formation__fragment--spark { top: 18%; right: 8%; left: auto; }
  .work-formation__fragment--cursor { top: 31%; right: 3%; }
  .work-formation__fragment--human-ai { display: none; }
  .work-formation__fragment--ux { bottom: 28%; left: -2%; }
  .work-formation__fragment--flow { right: -5%; bottom: 26%; }
  .work-formation__fragment--components { display: none; }

  .work-formation.is-static .work-formation__fragment {
    animation: formation-fragment-static-exit 0.42s cubic-bezier(0.22, 1, 0.36, 1) 2.35s forwards;
  }
}

@keyframes formation-fragment-static-exit {
  to {
    opacity: 0;
    transform: translateY(38px) scale(0.9);
  }
}

@media (max-width: 520px) {
  .work-formation__ink p,
  .work-formation__title h1 {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: clamp(48px, 15vw, 66px);
    line-height: 0.92;
  }

  .work-formation__registration,
  .work-formation__title {
    top: 48%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-formation,
  .work-formation.is-static {
    height: auto;
  }

  .work-formation__pin,
  .work-formation.is-static .work-formation__pin {
    position: relative;
  }

  .work-formation__grid,
  .work-formation__fragments {
    display: none;
  }

  .work-formation__registration-marks i {
    opacity: 0.42 !important;
  }

  .work-formation__ink {
    opacity: 0.28 !important;
  }

  .work-formation__progress i {
    transform: scaleX(1) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Embroidery Language / interface gallery cover                               */
/* -------------------------------------------------------------------------- */

.embroidery-motion-cover {
  --embroidery-brown: #87745d;
  --embroidery-cream: #f3e6cf;
  --embroidery-gold: #e9c28b;
  background:
    radial-gradient(circle at 76% 20%, rgba(244, 217, 176, 0.15), transparent 28%),
    linear-gradient(135deg, #806d57, var(--embroidery-brown) 52%, #796650);
  color: #fffaf1;
}

.embroidery-motion-cover__weave {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(73, 53, 38, 0.52),
      transparent 20%,
      transparent 80%,
      rgba(73, 53, 38, 0.52)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 8px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(40, 25, 15, 0.024) 0,
      rgba(40, 25, 15, 0.024) 1px,
      transparent 1px,
      transparent 8px
    );
  pointer-events: none;
}

.embroidery-motion-cover__track {
  position: absolute;
  z-index: 1;
  inset: 6.5% 0 7%;
  display: flex;
  gap: 3%;
  align-items: stretch;
  width: 100%;
  padding-left: 38%;
  animation: embroidery-gallery-sweep 22.4s linear infinite both;
  will-change: transform;
}

.embroidery-motion-cover__slide,
.embroidery-motion-cover__slide.is-active {
  position: relative;
  flex: 0 0 24%;
  min-width: 0;
  opacity: 0.9;
  filter: saturate(0.96);
  transform: scale(0.96);
}

.embroidery-motion-cover__slide::after {
  position: absolute;
  inset: 6% 12% 3%;
  border-radius: 30%;
  background: rgba(44, 30, 19, 0.3);
  filter: blur(14px);
  content: "";
  transform: translateY(13%);
}

.embroidery-motion-cover .embroidery-motion-cover__screen {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  transition: none;
}

.work-real__card:hover .embroidery-motion-cover .embroidery-motion-cover__screen,
.work-real__card:focus-visible .embroidery-motion-cover .embroidery-motion-cover__screen {
  transform: none;
}

.embroidery-motion-cover__header {
  position: absolute;
  z-index: 5;
  top: 15px;
  right: 18px;
  left: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 250, 241, 0.82);
  font: 500 clamp(7px, 0.68vw, 10px)/1 "DM Mono", monospace;
  letter-spacing: 0.09em;
  pointer-events: none;
}

.embroidery-motion-cover__header b {
  font-weight: 500;
}

.embroidery-motion-cover__header i {
  font-style: normal;
  opacity: 0.72;
}

.embroidery-motion-cover__status {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 14px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255, 250, 241, 0.92);
  font: 500 clamp(8px, 0.78vw, 11px)/1.1 "Noto Sans SC", sans-serif;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.embroidery-motion-cover__status b {
  font: 500 clamp(7px, 0.68vw, 10px)/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}

.embroidery-motion-cover__status b i {
  color: var(--embroidery-gold);
  font-style: normal;
}

.embroidery-motion-cover__dots {
  position: absolute;
  z-index: 5;
  bottom: 16px;
  left: 50%;
  display: flex;
  gap: 5px;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.embroidery-motion-cover__dots i,
.embroidery-motion-cover__dots i.is-active {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.38);
}

.embroidery-motion-cover__dots i:nth-child(1) {
  animation: embroidery-dot-one 22.4s linear infinite;
}

.embroidery-motion-cover__dots i:nth-child(2) {
  animation: embroidery-dot-two 22.4s linear infinite;
}

.embroidery-motion-cover__dots i:nth-child(3) {
  animation: embroidery-dot-three 22.4s linear infinite;
}

.embroidery-motion-cover__dots i:nth-child(4) {
  animation: embroidery-dot-four 22.4s linear infinite;
}

.work-real__card:hover .embroidery-motion-cover__track,
.work-real__card:focus-visible .embroidery-motion-cover__track,
.work-real__card:hover .embroidery-motion-cover__dots i,
.work-real__card:focus-visible .embroidery-motion-cover__dots i {
  animation-play-state: paused;
}

@keyframes embroidery-gallery-sweep {
  0%,
  11% {
    transform: translate3d(0, 0, 0);
  }

  16%,
  27% {
    transform: translate3d(-27%, 0, 0);
  }

  32%,
  43% {
    transform: translate3d(-54%, 0, 0);
  }

  48%,
  59% {
    transform: translate3d(-81%, 0, 0);
  }

  64%,
  75% {
    transform: translate3d(-54%, 0, 0);
  }

  80%,
  91% {
    transform: translate3d(-27%, 0, 0);
  }

  96%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes embroidery-dot-one {
  0%,
  11%,
  96%,
  100% {
    width: 17px;
    background: var(--embroidery-cream);
  }

  16%,
  91% {
    width: 4px;
    background: rgba(255, 250, 241, 0.38);
  }
}

@keyframes embroidery-dot-two {
  0%,
  11%,
  32%,
  75%,
  96%,
  100% {
    width: 4px;
    background: rgba(255, 250, 241, 0.38);
  }

  16%,
  27%,
  80%,
  91% {
    width: 17px;
    background: var(--embroidery-cream);
  }
}

@keyframes embroidery-dot-three {
  0%,
  27%,
  48%,
  59%,
  80%,
  100% {
    width: 4px;
    background: rgba(255, 250, 241, 0.38);
  }

  32%,
  43%,
  64%,
  75% {
    width: 17px;
    background: var(--embroidery-cream);
  }
}

@keyframes embroidery-dot-four {
  0%,
  43%,
  64%,
  100% {
    width: 4px;
    background: rgba(255, 250, 241, 0.38);
  }

  48%,
  59% {
    width: 17px;
    background: var(--embroidery-cream);
  }
}

@media (max-width: 620px) {
  .embroidery-motion-cover__track {
    inset: 7% 0 8%;
    gap: 4%;
    padding-left: 34%;
    animation-name: embroidery-gallery-sweep-mobile;
  }

  .embroidery-motion-cover__slide,
  .embroidery-motion-cover__slide.is-active {
    flex-basis: 32%;
  }

  .embroidery-motion-cover__header {
    right: 14px;
    left: 62px;
  }

  .embroidery-motion-cover__status {
    right: 14px;
    bottom: 11px;
    left: 14px;
  }

  .embroidery-motion-cover__dots {
    bottom: 12px;
  }
}

@keyframes embroidery-gallery-sweep-mobile {
  0%,
  11% {
    transform: translate3d(0, 0, 0);
  }

  16%,
  27% {
    transform: translate3d(-36%, 0, 0);
  }

  32%,
  43% {
    transform: translate3d(-72%, 0, 0);
  }

  48%,
  59% {
    transform: translate3d(-108%, 0, 0);
  }

  64%,
  75% {
    transform: translate3d(-72%, 0, 0);
  }

  80%,
  91% {
    transform: translate3d(-36%, 0, 0);
  }

  96%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .embroidery-motion-cover__track,
  .embroidery-motion-cover__dots i {
    animation: none;
  }
}

/* Family safety — the original baked cover is rebuilt as live, layered typography. */
.family-safety-cover {
  --family-shift-x: 0px;
  --family-shift-y: 0px;
  --family-tilt-x: 0deg;
  --family-tilt-y: 0deg;
  --family-light-x: 50%;
  --family-light-y: 42%;
  container-type: inline-size;
  perspective: 950px;
  background: #041326;
}

.family-safety-cover::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.027) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.027) 1px, transparent 1px);
  background-size: 7.8cqw 7.8cqw;
  content: "";
  opacity: 0.2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.family-safety-cover::after {
  z-index: 24;
  border-color: rgba(221, 250, 242, 0.48);
  opacity: 0.75;
}

.work-real__card .work-real__visual.family-safety-cover img.family-safety-cover__plate,
.work-real__card:hover .work-real__visual.family-safety-cover img.family-safety-cover__plate,
.work-real__card:focus-visible .work-real__visual.family-safety-cover img.family-safety-cover__plate {
  position: absolute;
  z-index: 0;
  top: -4%;
  left: -4%;
  width: 108%;
  height: 108%;
  max-width: none;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04) brightness(0.9);
  transform:
    translate3d(
      calc(var(--family-shift-x) * -0.24),
      calc(var(--family-shift-y) * -0.2),
      0
    )
    scale(1.035);
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms ease;
  will-change: transform;
}

.family-safety-cover__aurora {
  position: absolute;
  z-index: 1;
  inset: -24%;
  background:
    radial-gradient(
      circle at var(--family-light-x) var(--family-light-y),
      rgba(120, 255, 217, 0.26),
      rgba(89, 154, 255, 0.11) 18%,
      transparent 42%
    ),
    linear-gradient(116deg, rgba(69, 121, 255, 0.08), transparent 42%, rgba(37, 219, 154, 0.09));
  mix-blend-mode: screen;
  opacity: 0.5;
  transform: translate3d(calc(var(--family-shift-x) * 0.32), calc(var(--family-shift-y) * 0.25), 0);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease;
  pointer-events: none;
  animation: family-safety-aurora 9s ease-in-out infinite alternate;
}

.family-safety-cover__orbit {
  position: absolute;
  z-index: 2;
  top: -31%;
  right: -6%;
  width: 57%;
  aspect-ratio: 1;
  border: 1px solid rgba(207, 255, 238, 0.14);
  border-radius: 50%;
  opacity: 0;
  transform:
    translate3d(calc(var(--family-shift-x) * 0.55), calc(var(--family-shift-y) * 0.42), 0)
    scale(0.86);
  transition:
    opacity 900ms ease 160ms,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
  pointer-events: none;
}

.family-safety-cover__orbit::before,
.family-safety-cover__orbit::after {
  position: absolute;
  border-radius: inherit;
  content: "";
}

.family-safety-cover__orbit::before {
  inset: 12%;
  border: 1px dashed rgba(224, 255, 245, 0.12);
}

.family-safety-cover__orbit::after {
  top: 49%;
  left: -4px;
  width: 8px;
  height: 8px;
  background: #8ff5cc;
  box-shadow: 0 0 0 6px rgba(143, 245, 204, 0.1);
}

.family-safety-cover__deck {
  position: absolute;
  z-index: 4;
  top: 12%;
  right: 3%;
  width: 33%;
  height: 70%;
  pointer-events: none;
  transform:
    translate3d(calc(var(--family-shift-x) * 0.78), calc(var(--family-shift-y) * 0.62), 0)
    rotateX(var(--family-tilt-x))
    rotateY(var(--family-tilt-y));
  transform-style: preserve-3d;
  transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.family-safety-cover__step {
  position: absolute;
  top: 10%;
  left: 18%;
  display: flex;
  width: 51%;
  aspect-ratio: 0.72;
  flex-direction: column;
  padding: 11% 10%;
  border: 1px solid rgba(226, 255, 246, 0.24);
  border-radius: 9%;
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.025)),
    rgba(4, 24, 41, 0.18);
  box-shadow:
    0 19px 42px rgba(0, 5, 18, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.12);
  color: rgba(236, 255, 249, 0.86);
  font-style: normal;
  opacity: 0;
  overflow: hidden;
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  translate: 56% 22%;
  scale: 0.82;
  transition:
    translate 850ms cubic-bezier(0.16, 1, 0.3, 1),
    scale 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms ease,
    background 420ms ease,
    opacity 480ms ease;
  will-change: translate, scale, transform;
}

.family-safety-cover__step::after {
  position: absolute;
  right: 9%;
  bottom: 8%;
  width: 22%;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.55;
  transform: scaleX(0.45);
  transform-origin: right;
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}

.family-safety-cover__step small,
.family-safety-cover__step em {
  font-family: var(--work-mono);
  font-style: normal;
  letter-spacing: 0.08em;
}

.family-safety-cover__step small {
  color: rgba(229, 255, 247, 0.62);
  font-size: clamp(6px, 1.05cqw, 12px);
}

.family-safety-cover__step b {
  margin-top: auto;
  font-family: var(--work-sans);
  font-size: clamp(13px, 2.8cqw, 28px);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.family-safety-cover__step em {
  margin-top: 7%;
  color: rgba(229, 255, 247, 0.5);
  font-size: clamp(5px, 0.85cqw, 9px);
}

.family-safety-cover__step--1 {
  transform: translate3d(-32%, 12%, -32px) rotate(-13deg);
}

.family-safety-cover__step--2 {
  transform: translate3d(3%, 3%, -10px) rotate(-2deg);
}

.family-safety-cover__step--3 {
  transform: translate3d(38%, 14%, 12px) rotate(10deg);
}

.family-safety-cover__copy {
  position: absolute;
  z-index: 8;
  top: 24%;
  left: 7.5%;
  display: block;
  width: min(75%, 670px);
  color: #f8fffc;
  pointer-events: none;
  transform: translate3d(calc(var(--family-shift-x) * -0.16), calc(var(--family-shift-y) * -0.12), 26px);
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.family-safety-cover__kicker {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin-bottom: 2.6cqw;
  color: rgba(224, 255, 246, 0.62);
  font: 500 clamp(6px, 1.08cqw, 12px)/1 var(--work-mono);
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(10px);
}

.family-safety-cover__kicker i {
  width: 2.5cqw;
  height: 1px;
  background: #9ef0cf;
  box-shadow: 0 0 12px rgba(158, 240, 207, 0.55);
}

.family-safety-cover__copy strong {
  display: block;
  font-family: var(--work-sans);
  font-size: clamp(22px, 4.55cqw, 48px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-shadow: 0 3px 18px rgba(0, 9, 19, 0.24);
}

.family-safety-cover__title-line {
  display: block;
  overflow: hidden;
}

.family-safety-cover__title-line > i {
  display: block;
  font-style: normal;
  opacity: 0;
  transform: translateY(114%);
}

.family-safety-cover__title-line--second {
  margin-top: 0.35cqw;
  font-size: 0.78em;
  letter-spacing: 0.035em;
}

.family-safety-cover__title-line em,
.family-safety-cover__title-line b {
  font-style: normal;
  transition: color 420ms ease, letter-spacing 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.family-safety-cover__title-line em {
  color: #a5f4d4;
}

.family-safety-cover__title-line b {
  display: inline-grid;
  width: 1.18em;
  margin: 0 0.16em;
  place-items: center;
  color: #70aef8;
  font-size: 0.78em;
  font-weight: 500;
  transform: rotate(0deg);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms ease;
}

.family-safety-cover__quote {
  position: absolute;
  z-index: 9;
  right: 7%;
  bottom: 7.7%;
  left: 7.5%;
  display: grid;
  grid-template-columns: 2.7cqw minmax(0, 1fr) auto;
  gap: 1.3cqw;
  align-items: end;
  color: rgba(237, 252, 248, 0.7);
  font: 400 clamp(6px, 1.12cqw, 12px)/1.55 var(--work-sans);
  letter-spacing: 0.015em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(9px);
}

.family-safety-cover__quote > i {
  height: 1px;
  margin-bottom: 0.72em;
  background: #93e9c6;
  box-shadow: 0 0 10px rgba(147, 233, 198, 0.45);
  transform: scaleX(0);
  transform-origin: left;
}

.family-safety-cover__quote small {
  color: rgba(237, 252, 248, 0.48);
  font: 500 clamp(5px, 0.85cqw, 9px)/1.3 var(--work-mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.family-safety-cover__signal {
  position: absolute;
  z-index: 10;
  top: 8%;
  right: 4.5%;
  display: flex;
  gap: 0.75cqw;
  align-items: center;
  pointer-events: none;
}

.family-safety-cover__signal i {
  display: block;
  width: 0.65cqw;
  min-width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(226, 255, 247, 0.34);
  opacity: 0;
  transform: scale(0);
}

.family-safety-cover__signal i:nth-child(2) {
  background: #75b6fa;
}

.family-safety-cover__signal i:nth-child(3) {
  background: #9cf0cf;
}

.family-safety-cover.is-family-visible .family-safety-cover__orbit {
  opacity: 1;
  transform:
    translate3d(calc(var(--family-shift-x) * 0.55), calc(var(--family-shift-y) * 0.42), 0)
    scale(1);
}

.family-safety-cover.is-family-visible .family-safety-cover__step {
  opacity: 0.52;
  translate: 0 0;
  scale: 1;
}

.family-safety-cover.is-family-visible .family-safety-cover__step--1 {
  transition-delay: 120ms;
}

.family-safety-cover.is-family-visible .family-safety-cover__step--2 {
  transition-delay: 210ms;
}

.family-safety-cover.is-family-visible .family-safety-cover__step--3 {
  transition-delay: 300ms;
}

.family-safety-cover.is-family-visible .family-safety-cover__kicker {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 500ms ease 250ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 250ms;
}

.family-safety-cover.is-family-visible .family-safety-cover__title-line > i {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 300ms ease 300ms,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 300ms;
}

.family-safety-cover.is-family-visible .family-safety-cover__title-line--second > i {
  transition-delay: 410ms;
}

.family-safety-cover.is-family-visible .family-safety-cover__quote {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms ease 650ms,
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 650ms;
}

.family-safety-cover.is-family-visible .family-safety-cover__quote > i {
  transform: scaleX(1);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 760ms;
}

.family-safety-cover.is-family-visible .family-safety-cover__signal i {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 300ms ease calc(480ms + var(--signal-delay, 0ms)),
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(480ms + var(--signal-delay, 0ms));
}

.family-safety-cover__signal i:nth-child(2) {
  --signal-delay: 90ms;
}

.family-safety-cover__signal i:nth-child(3) {
  --signal-delay: 180ms;
}

.family-safety-cover.is-family-hover .family-safety-cover__aurora {
  opacity: 0.78;
}

.family-safety-cover.is-family-hover .family-safety-cover__step {
  opacity: 0.82;
  border-color: rgba(224, 255, 245, 0.42);
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.04)),
    rgba(4, 24, 41, 0.22);
}

.family-safety-cover.is-family-hover .family-safety-cover__step--1 {
  transform: translate3d(-39%, 5%, -32px) rotate(-15deg);
}

.family-safety-cover.is-family-hover .family-safety-cover__step--2 {
  transform: translate3d(3%, -2%, -10px) rotate(-1deg);
}

.family-safety-cover.is-family-hover .family-safety-cover__step--3 {
  transform: translate3d(46%, 7%, 12px) rotate(13deg);
}

.family-safety-cover.is-family-hover .family-safety-cover__step::after {
  transform: scaleX(1);
}

.family-safety-cover.is-family-hover .family-safety-cover__title-line em {
  color: #c0ffe6;
  letter-spacing: 0.07em;
}

.family-safety-cover.is-family-hover .family-safety-cover__title-line b {
  color: #9fcfff;
  transform: rotate(180deg);
}

@keyframes family-safety-aurora {
  from {
    filter: hue-rotate(-4deg);
  }

  to {
    filter: hue-rotate(7deg);
  }
}

@media (max-width: 620px) {
  .family-safety-cover__copy {
    top: 21%;
    left: 7%;
    width: 82%;
  }

  .family-safety-cover__copy strong {
    font-size: 5cqw;
  }

  .family-safety-cover__deck {
    right: 0;
    width: 36%;
    opacity: 0.72;
  }

  .family-safety-cover__quote {
    right: 6%;
    bottom: 7%;
    left: 7%;
    grid-template-columns: 2.7cqw minmax(0, 1fr);
  }

  .family-safety-cover__quote small {
    display: none;
  }

  .family-safety-cover__step em {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .family-safety-cover *,
  .family-safety-cover *::before,
  .family-safety-cover *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .family-safety-cover__orbit,
  .family-safety-cover__step,
  .family-safety-cover__kicker,
  .family-safety-cover__title-line > i,
  .family-safety-cover__quote,
  .family-safety-cover__signal i {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transform: none;
  }

  .family-safety-cover__step {
    opacity: 0.46;
  }

  .family-safety-cover__quote > i {
    transform: scaleX(1);
  }
}

/* Embroidery cover: retain the original hero artwork and add only small, warm motion cues. */
.work-real__visual.embroidery-motion-cover {
  background: #8d785f;
}

.work-real__visual.embroidery-motion-cover > .embroidery-motion-cover__plate {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001) !important;
  transition: none !important;
}

.embroidery-motion-cover__background-clean {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background: url("/assets/embroidery-background-clean-v1.png") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 48%,
    rgba(0, 0, 0, 0.4) 52%,
    rgba(0, 0, 0, 0.92) 57%,
    #000 60%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 48%,
    rgba(0, 0, 0, 0.4) 52%,
    rgba(0, 0, 0, 0.92) 57%,
    #000 60%,
    #000 100%
  );
  pointer-events: none;
}

/* Only the transparent phone-and-hand foreground moves; the mural plate stays fixed. */
.embroidery-motion-cover__phone-hand {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-origin: 82.5% 91%;
  will-change: transform;
  animation: embroidery-phone-hand-settle 4.35s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.embroidery-motion-cover__phone-hand-asset {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(1.3%, 0.6%, 0) scale(0.935);
  transform-origin: right bottom;
}

.embroidery-motion-cover > .embroidery-motion-cover__weave,
.embroidery-motion-cover > .embroidery-motion-cover__track,
.embroidery-motion-cover > .embroidery-motion-cover__header,
.embroidery-motion-cover > .embroidery-motion-cover__status,
.embroidery-motion-cover > .embroidery-motion-cover__dots {
  display: none;
}

.embroidery-motion-cover__screen-shine {
  position: absolute;
  z-index: 3;
  top: 14.8%;
  right: 13.7%;
  width: 19%;
  height: 76.8%;
  overflow: hidden;
  border-radius: 8% 8% 7% 7%;
  opacity: 0.42;
  pointer-events: none;
}

.embroidery-motion-cover__screen-shine::after {
  position: absolute;
  inset: -20% -45%;
  background: linear-gradient(
    110deg,
    transparent 39%,
    rgba(255, 252, 236, 0.04) 45%,
    rgba(255, 252, 236, 0.42) 50%,
    rgba(255, 252, 236, 0.06) 55%,
    transparent 61%
  );
  content: "";
  transform: translateX(-74%);
  animation: embroidery-screen-shine 7.8s cubic-bezier(0.32, 0.04, 0.25, 1) infinite;
}

.embroidery-motion-cover__spark {
  position: absolute;
  z-index: 4;
  display: block;
  width: clamp(5px, 0.64vw, 10px);
  height: clamp(5px, 0.64vw, 10px);
  border: 1px solid rgba(255, 245, 213, 0.84);
  border-radius: 999px;
  background: rgba(248, 202, 127, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 235, 193, 0.1), 0 0 19px rgba(255, 220, 160, 0.36);
  opacity: 0;
  pointer-events: none;
}

.embroidery-motion-cover__spark--one {
  top: 36%;
  right: 24.6%;
  animation: embroidery-spark-one 6.2s ease-in-out infinite;
}

.embroidery-motion-cover__spark--two {
  top: 59%;
  right: 10.2%;
  width: clamp(4px, 0.48vw, 7px);
  height: clamp(4px, 0.48vw, 7px);
  animation: embroidery-spark-two 6.2s ease-in-out 1.4s infinite;
}

.work-real__card:hover .embroidery-motion-cover__screen-shine::after,
.work-real__card:hover .embroidery-motion-cover__spark,
.work-real__card:focus-visible .embroidery-motion-cover__screen-shine::after,
.work-real__card:focus-visible .embroidery-motion-cover__spark {
  animation-play-state: paused;
}

@keyframes embroidery-screen-shine {
  0%,
  24% { transform: translateX(-74%); }
  45%,
  100% { transform: translateX(74%); }
}

@keyframes embroidery-phone-hand-settle {
  0%,
  24%,
  100% { transform: translate3d(0, 0, 0) rotate(0); }
  38% { transform: translate3d(11px, -11px, 0) rotate(1.08deg); }
  50% { transform: translate3d(-10px, 7px, 0) rotate(-0.92deg); }
  62% { transform: translate3d(6px, -5px, 0) rotate(0.48deg); }
  74% { transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes embroidery-spark-one {
  0%,
  23%,
  100% { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.65); }
  35% { opacity: 0.82; transform: translate3d(0, 0, 0) scale(1); }
  51% { opacity: 0; transform: translate3d(3px, -8px, 0) scale(1.32); }
}

@keyframes embroidery-spark-two {
  0%,
  24%,
  100% { opacity: 0; transform: translate3d(0, 4px, 0) scale(0.68); }
  37% { opacity: 0.72; transform: translate3d(0, 0, 0) scale(1); }
  54% { opacity: 0; transform: translate3d(-3px, -7px, 0) scale(1.24); }
}

@media (prefers-reduced-motion: reduce) {
  .embroidery-motion-cover__screen-shine::after,
  .embroidery-motion-cover__spark,
  .embroidery-motion-cover__phone-hand {
    animation: none !important;
  }

  .embroidery-motion-cover__spark {
    display: none;
  }
}

/* Fresh Rescue cover: scan the evidence, then separate the decision layers. */
.work-real__visual.fresh-rescue-cover {
  --fresh-plate-x: 0px;
  --fresh-plate-y: 0px;
  --fresh-copy-x: 0px;
  --fresh-copy-y: 0px;
  --fresh-evidence-x: 0px;
  --fresh-evidence-y: 0px;
  --fresh-package-x: 0px;
  --fresh-package-y: 0px;
  --fresh-package-r: 0deg;
  --fresh-light-x: 52%;
  --fresh-light-y: 48%;
  container-type: inline-size;
  background: #171a18;
  perspective: 1200px;
}

.work-real__visual.fresh-rescue-cover::before {
  position: absolute;
  z-index: 8;
  inset: 0;
  background:
    radial-gradient(
      circle at var(--fresh-light-x) var(--fresh-light-y),
      rgba(126, 225, 150, 0.16),
      transparent 27%
    ),
    linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.08) 49%, transparent 62%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
  mix-blend-mode: screen;
}

.work-real__visual.fresh-rescue-cover > .fresh-rescue-cover__plate,
.work-real__card:hover .work-real__visual.fresh-rescue-cover > .fresh-rescue-cover__plate,
.work-real__card:focus-visible .work-real__visual.fresh-rescue-cover > .fresh-rescue-cover__plate {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(0.98) contrast(1.01);
  transform: translate3d(var(--fresh-plate-x), var(--fresh-plate-y), 0) scale(1.014) !important;
  transition:
    opacity 680ms ease,
    filter 900ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}

.fresh-rescue-cover.is-fresh-ready:not(.is-fresh-visible) > .fresh-rescue-cover__plate {
  opacity: 0.2;
  filter: saturate(0.55) contrast(0.9) brightness(0.72);
  transform: translate3d(0, 0, 0) scale(1.075) !important;
}

.fresh-rescue-cover__depth {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 620ms ease,
    filter 620ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.fresh-rescue-cover__depth > img,
.work-real__card:hover .fresh-rescue-cover__depth > img,
.work-real__card:focus-visible .fresh-rescue-cover__depth > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.025);
  transform: scale(1.014) !important;
  transition: none !important;
}

.fresh-rescue-cover__depth--copy {
  clip-path: polygon(0 8%, 55% 8%, 55% 89%, 0 89%);
  filter: drop-shadow(0 8px 12px rgba(20, 23, 20, 0.14));
  transform: translate3d(calc(var(--fresh-copy-x) - 22px), var(--fresh-copy-y), 0);
}

.fresh-rescue-cover__depth--evidence {
  z-index: 3;
  clip-path: polygon(48% 8%, 84% 8%, 84% 100%, 48% 100%);
  filter: drop-shadow(0 11px 15px rgba(15, 20, 16, 0.18));
  transform: translate3d(var(--fresh-evidence-x), calc(var(--fresh-evidence-y) + 26px), 0);
}

.fresh-rescue-cover__depth--package {
  z-index: 4;
  clip-path: polygon(76% 50%, 100% 50%, 100% 100%, 76% 100%);
  filter: drop-shadow(-10px 8px 16px rgba(16, 19, 16, 0.16));
  transform: translate3d(
    calc(var(--fresh-package-x) + 25px),
    calc(var(--fresh-package-y) + 18px),
    0
  ) rotate(var(--fresh-package-r));
  transform-origin: 87% 82%;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__depth {
  opacity: 0.96;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__depth--copy {
  transform: translate3d(var(--fresh-copy-x), var(--fresh-copy-y), 0);
  transition-delay: 110ms;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__depth--evidence {
  transform: translate3d(var(--fresh-evidence-x), var(--fresh-evidence-y), 0);
  transition-delay: 190ms;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__depth--package {
  transform: translate3d(var(--fresh-package-x), var(--fresh-package-y), 0)
    rotate(var(--fresh-package-r));
  transition-delay: 270ms;
}

.fresh-rescue-cover__scanner {
  position: absolute;
  z-index: 5;
  top: -8%;
  bottom: -8%;
  left: -24%;
  display: block;
  width: 18%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-8deg);
  mix-blend-mode: screen;
}

.fresh-rescue-cover__scanner::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(54, 184, 103, 0.07) 28%,
    rgba(155, 255, 187, 0.31) 50%,
    rgba(54, 184, 103, 0.08) 72%,
    transparent
  );
  content: "";
}

.fresh-rescue-cover__scanner i {
  position: absolute;
  top: 0;
  right: 22%;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(195, 255, 210, 0.9), transparent);
  box-shadow: 0 0 18px rgba(78, 231, 123, 0.78);
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__scanner {
  animation: fresh-rescue-scan 6.8s 1.05s cubic-bezier(0.55, 0.08, 0.35, 1) infinite;
}

.fresh-rescue-cover__focus {
  position: absolute;
  z-index: 6;
  top: 14.5%;
  left: 53.2%;
  display: block;
  width: 22.4%;
  height: 67%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--fresh-evidence-x), var(--fresh-evidence-y), 0) scale(0.95);
  transition:
    opacity 380ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fresh-rescue-cover__focus i {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  border-color: rgba(212, 255, 221, 0.88);
  border-style: solid;
  filter: drop-shadow(0 0 7px rgba(85, 226, 125, 0.5));
}

.fresh-rescue-cover__focus i:nth-child(1) {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.fresh-rescue-cover__focus i:nth-child(2) {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0;
}

.fresh-rescue-cover__focus i:nth-child(3) {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

.fresh-rescue-cover__focus i:nth-child(4) {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px;
}

.fresh-rescue-cover__date-codes {
  position: absolute;
  z-index: 7;
  top: 2.2%;
  right: 2.1%;
  display: flex;
  gap: clamp(3px, 0.46cqw, 8px);
  pointer-events: none;
}

.fresh-rescue-cover__date-codes i {
  display: block;
  padding: clamp(3px, 0.35cqw, 6px) clamp(5px, 0.66cqw, 10px);
  border: 1px solid rgba(230, 255, 235, 0.32);
  border-radius: 999px;
  background: rgba(19, 91, 47, 0.3);
  box-shadow: 0 7px 15px rgba(12, 57, 29, 0.12);
  color: rgba(245, 255, 247, 0.82);
  font: 700 clamp(7px, 0.72cqw, 10px)/1 var(--work-mono);
  font-style: normal;
  letter-spacing: 0.045em;
  opacity: 0;
  transform: translateY(-14px) scale(0.9);
  transition:
    opacity 420ms ease,
    background-color 320ms ease,
    border-color 320ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__date-codes i {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__date-codes i:nth-child(1) {
  transition-delay: 360ms;
  animation: fresh-rescue-code 5.1s 1.4s ease-in-out infinite;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__date-codes i:nth-child(2) {
  transition-delay: 430ms;
  animation: fresh-rescue-code 5.1s 1.72s ease-in-out infinite;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__date-codes i:nth-child(3) {
  transition-delay: 500ms;
  animation: fresh-rescue-code 5.1s 2.04s ease-in-out infinite;
}

.fresh-rescue-cover__signal {
  position: absolute;
  z-index: 7;
  right: 3.2%;
  bottom: 3.6%;
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.38cqw, 6px);
  pointer-events: none;
}

.fresh-rescue-cover__signal i {
  display: block;
  width: clamp(4px, 0.55cqw, 8px);
  aspect-ratio: 1;
  border: 1px solid rgba(250, 255, 249, 0.72);
  border-radius: 50%;
  background: #55b879;
  box-shadow: 0 0 0 0 rgba(104, 230, 145, 0);
  opacity: 0;
  transform: scale(0.2);
  transition:
    opacity 260ms ease,
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fresh-rescue-cover__signal i:nth-child(2) {
  background: #f0cd54;
}

.fresh-rescue-cover__signal i:nth-child(3) {
  background: #ec542d;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__signal i {
  opacity: 0.92;
  transform: scale(1);
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__signal i:nth-child(1) {
  transition-delay: 600ms;
  animation: fresh-rescue-signal 3.2s 1.25s ease-out infinite;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__signal i:nth-child(2) {
  transition-delay: 680ms;
}

.fresh-rescue-cover.is-fresh-visible .fresh-rescue-cover__signal i:nth-child(3) {
  transition-delay: 760ms;
}

.fresh-rescue-cover.is-fresh-hover::before {
  opacity: 0.78;
}

.fresh-rescue-cover.is-fresh-hover .fresh-rescue-cover__depth {
  opacity: 1;
  filter: drop-shadow(0 16px 18px rgba(13, 24, 16, 0.22));
  transition-delay: 0ms;
}

.fresh-rescue-cover.is-fresh-hover .fresh-rescue-cover__focus {
  opacity: 0.88;
  transform: translate3d(var(--fresh-evidence-x), var(--fresh-evidence-y), 0) scale(1);
  animation: fresh-rescue-focus 1.8s ease-in-out infinite alternate;
}

.fresh-rescue-cover.is-fresh-hover .fresh-rescue-cover__date-codes i {
  border-color: rgba(230, 255, 235, 0.72);
  background: rgba(21, 115, 55, 0.68);
}

.fresh-rescue-cover > .work-real__case-number {
  z-index: 12;
}

@keyframes fresh-rescue-scan {
  0%,
  14% {
    opacity: 0;
    transform: translateX(0) skewX(-8deg);
  }
  21% {
    opacity: 0.76;
  }
  43% {
    opacity: 0.38;
    transform: translateX(760%) skewX(-8deg);
  }
  48%,
  100% {
    opacity: 0;
    transform: translateX(760%) skewX(-8deg);
  }
}

@keyframes fresh-rescue-code {
  0%,
  9%,
  100% {
    color: rgba(245, 255, 247, 0.82);
    transform: translateY(0) scale(1);
  }
  15% {
    color: #fff;
    transform: translateY(-2px) scale(1.04);
  }
  23% {
    color: rgba(245, 255, 247, 0.82);
    transform: translateY(0) scale(1);
  }
}

@keyframes fresh-rescue-signal {
  0% {
    box-shadow: 0 0 0 0 rgba(104, 230, 145, 0.38);
  }
  34%,
  100% {
    box-shadow: 0 0 0 clamp(5px, 0.75cqw, 11px) rgba(104, 230, 145, 0);
  }
}

@keyframes fresh-rescue-focus {
  from {
    filter: brightness(0.92);
  }
  to {
    filter: brightness(1.16);
  }
}

@media (max-width: 620px) {
  .fresh-rescue-cover__date-codes i {
    padding: 3px 5px;
  }

  .fresh-rescue-cover__date-codes i:nth-child(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fresh-rescue-cover *,
  .fresh-rescue-cover *::before,
  .fresh-rescue-cover *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .fresh-rescue-cover__plate,
  .fresh-rescue-cover__depth,
  .fresh-rescue-cover__date-codes i,
  .fresh-rescue-cover__signal i {
    opacity: 1 !important;
    transform: none !important;
  }

  .fresh-rescue-cover__scanner,
  .fresh-rescue-cover__focus {
    display: none;
  }
}

/* Fresh Rescue V2: a label-sorting story built from the original collage. */
.work-real__visual.fresh-rescue-story {
  --rescue-plate-x: 0px;
  --rescue-plate-y: 0px;
  --rescue-title-x: 0px;
  --rescue-title-y: 0px;
  --rescue-evidence-x: 0px;
  --rescue-evidence-y: 0px;
  --rescue-package-x: 0px;
  --rescue-package-y: 0px;
  --rescue-package-r: 0deg;
  --rescue-light-x: 52%;
  --rescue-light-y: 48%;
  container-type: inline-size;
  background: #151816;
  perspective: 1400px;
}

.work-real__visual.fresh-rescue-story::before {
  position: absolute;
  z-index: 12;
  inset: 0;
  background:
    radial-gradient(
      circle at var(--rescue-light-x) var(--rescue-light-y),
      rgba(155, 255, 181, 0.2),
      transparent 26%
    ),
    linear-gradient(108deg, transparent 35%, rgba(255, 255, 255, 0.1) 49%, transparent 63%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
  mix-blend-mode: screen;
}

.work-real__visual.fresh-rescue-story > .fresh-rescue-story__plate,
.work-real__card:hover .work-real__visual.fresh-rescue-story > .fresh-rescue-story__plate,
.work-real__card:focus-visible .work-real__visual.fresh-rescue-story > .fresh-rescue-story__plate {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(1) contrast(1.015);
  transform: translate3d(var(--rescue-plate-x), var(--rescue-plate-y), 0) scale(1.012) !important;
  transition:
    opacity 700ms ease,
    filter 620ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: filter, transform;
}

.fresh-rescue-story.is-rescue-ready:not(.is-rescue-visible) > .fresh-rescue-story__plate {
  opacity: 0.15;
  filter: saturate(0.45) brightness(0.66) blur(2px);
  transform: translate3d(0, 0, 0) scale(1.09) !important;
}

.fresh-rescue-story__shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background:
    linear-gradient(90deg, rgba(8, 12, 9, 0.18), transparent 38%, rgba(8, 12, 9, 0.08)),
    rgba(10, 15, 11, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}

.fresh-rescue-story__layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transition:
    opacity 500ms ease,
    filter 520ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.fresh-rescue-story__layer > span {
  position: absolute;
  inset: 0;
  display: block;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.fresh-rescue-story__layer img,
.work-real__card:hover .fresh-rescue-story__layer img,
.work-real__card:focus-visible .fresh-rescue-story__layer img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.012) !important;
  transition: none !important;
}

.fresh-rescue-story__layer--title img,
.work-real__card:hover .fresh-rescue-story__layer--title img,
.work-real__card:focus-visible .fresh-rescue-story__layer--title img {
  transform: scale(1) !important;
}

.fresh-rescue-story__layer--title {
  z-index: 4;
  clip-path: polygon(0 8%, 55% 8%, 55% 89%, 0 89%);
  filter: drop-shadow(10px 12px 15px rgba(10, 16, 11, 0.16));
  transform: translate3d(calc(var(--rescue-title-x) - 44px), var(--rescue-title-y), 18px)
    scale(0.97);
}

.fresh-rescue-story__layer--evidence {
  z-index: 5;
  clip-path: polygon(47.5% 7%, 84.5% 7%, 84.5% 100%, 47.5% 100%);
  filter: drop-shadow(0 18px 20px rgba(8, 16, 10, 0.18));
  transform: translate3d(
    var(--rescue-evidence-x),
    calc(var(--rescue-evidence-y) + 48px),
    38px
  ) scale(0.95);
}

.fresh-rescue-story__layer--package {
  z-index: 6;
  clip-path: polygon(75% 48%, 100% 48%, 100% 100%, 75% 100%);
  filter: drop-shadow(-16px 14px 18px rgba(8, 16, 10, 0.2));
  transform: translate3d(
    calc(var(--rescue-package-x) + 48px),
    calc(var(--rescue-package-y) + 34px),
    58px
  ) rotate(calc(var(--rescue-package-r) + 4deg)) scale(0.95);
  transform-origin: 88% 82%;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__layer {
  opacity: 1;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__layer--title {
  transform: translate3d(var(--rescue-title-x), var(--rescue-title-y), 18px) scale(1);
  transition-delay: 90ms;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__layer--evidence {
  transform: translate3d(var(--rescue-evidence-x), var(--rescue-evidence-y), 38px) scale(1.01);
  transition-delay: 190ms;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__layer--package {
  transform: translate3d(var(--rescue-package-x), var(--rescue-package-y), 58px)
    rotate(var(--rescue-package-r)) scale(1.012);
  transition-delay: 290ms;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__layer--evidence > span {
  animation: fresh-rescue-story-evidence 5.8s 1.2s ease-in-out infinite alternate;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__layer--package > span {
  animation: fresh-rescue-story-package 6.7s 1.6s ease-in-out infinite alternate;
}

.fresh-rescue-story__scanner {
  position: absolute;
  z-index: 9;
  top: -12%;
  bottom: -12%;
  left: -19%;
  display: block;
  width: 13%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-8deg);
  mix-blend-mode: screen;
}

.fresh-rescue-story__scanner::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(77, 211, 115, 0.06) 24%,
    rgba(177, 255, 197, 0.34) 52%,
    rgba(77, 211, 115, 0.08) 76%,
    transparent 100%
  );
  content: "";
}

.fresh-rescue-story__scanner i {
  position: absolute;
  top: 0;
  right: 24%;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(222, 255, 229, 0.95), transparent);
  box-shadow: 0 0 20px rgba(100, 255, 143, 0.84);
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__scanner {
  animation: fresh-rescue-story-scan 6.2s 1s cubic-bezier(0.55, 0.08, 0.35, 1) infinite;
}

.fresh-rescue-story__sorter {
  position: absolute;
  z-index: 14;
  top: 32%;
  right: 3.5%;
  display: block;
  width: clamp(68px, 14cqw, 112px);
  height: 58%;
  pointer-events: none;
  transform-style: preserve-3d;
}

.fresh-rescue-story__ticket {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 100%;
  aspect-ratio: 2.55 / 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(20, 29, 21, 0.22);
  border-radius: clamp(4px, 0.7cqw, 9px);
  background: #fffdf6;
  box-shadow:
    0 14px 26px rgba(12, 19, 13, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  color: #182019;
  font-style: normal;
  opacity: 0;
  transform: translate3d(24%, 0, -20px) rotate(8deg) scale(0.62);
  transform-origin: 88% 50%;
  transition:
    opacity 220ms ease,
    transform 660ms cubic-bezier(0.2, 1.3, 0.3, 1);
}

.fresh-rescue-story__ticket::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(4px, 0.7cqw, 7px);
  background: #49a76a;
  content: "";
}

.fresh-rescue-story__ticket::after {
  position: absolute;
  top: 50%;
  right: 7%;
  width: clamp(3px, 0.55cqw, 6px);
  aspect-ratio: 1;
  border: 1px solid rgba(23, 31, 24, 0.28);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.fresh-rescue-story__ticket b {
  font: 800 clamp(9px, 1.28cqw, 14px)/1 var(--work-sans);
  letter-spacing: -0.025em;
}

.fresh-rescue-story__ticket--use::before {
  background: #efc846;
}

.fresh-rescue-story__ticket--best::before {
  background: #ef5738;
}

.fresh-rescue-story__ticket--use {
  top: 34%;
  transition-delay: 0ms;
}

.fresh-rescue-story__ticket--best {
  top: 68%;
  transition-delay: 0ms;
}

.fresh-rescue-story__pulse {
  position: absolute;
  z-index: 11;
  right: 3.5%;
  bottom: 3.2%;
  display: flex;
  gap: clamp(3px, 0.42cqw, 7px);
  align-items: center;
  pointer-events: none;
}

.fresh-rescue-story__pulse i {
  display: block;
  width: clamp(4px, 0.58cqw, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #58b978;
  opacity: 0;
  transform: scale(0.2);
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fresh-rescue-story__pulse i:nth-child(2) {
  background: #edcb4d;
}

.fresh-rescue-story__pulse i:nth-child(3) {
  background: #ef5738;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__pulse i {
  opacity: 0.94;
  transform: scale(1);
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__pulse i:nth-child(1) {
  transition-delay: 480ms;
  animation: fresh-rescue-story-pulse 2.8s 1.3s ease-out infinite;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__pulse i:nth-child(2) {
  transition-delay: 560ms;
}

.fresh-rescue-story.is-rescue-visible .fresh-rescue-story__pulse i:nth-child(3) {
  transition-delay: 640ms;
}

.fresh-rescue-story.is-rescue-hover::before {
  opacity: 0.72;
}

.fresh-rescue-story.is-rescue-hover > .fresh-rescue-story__plate {
  filter: saturate(0.78) brightness(0.74) blur(0.32px);
  transform: translate3d(var(--rescue-plate-x), var(--rescue-plate-y), 0) scale(1.035) !important;
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__shade {
  opacity: 0.28;
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__layer {
  opacity: 1;
  filter: drop-shadow(0 24px 25px rgba(7, 14, 9, 0.28));
  transition-delay: 0ms;
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__layer--title {
  transform: translate3d(
    var(--rescue-title-x),
    var(--rescue-title-y),
    42px
  ) scale(1.003);
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__layer--evidence {
  transform: translate3d(
    var(--rescue-evidence-x),
    calc(var(--rescue-evidence-y) - 5px),
    76px
  ) scale(1.035);
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__layer--package {
  transform: translate3d(
    calc(var(--rescue-package-x) + 5px),
    calc(var(--rescue-package-y) - 7px),
    108px
  ) rotate(calc(var(--rescue-package-r) + 1.1deg)) scale(1.055);
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__layer > span {
  animation-play-state: paused;
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__scanner {
  animation-duration: 2.75s;
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__ticket {
  opacity: 1;
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__ticket--sell {
  transform: translate3d(-176%, 0, 92px) rotate(-4deg) scale(1);
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__ticket--use {
  transform: translate3d(-112%, 0, 108px) rotate(2.5deg) scale(1);
  transition-delay: 65ms;
}

.fresh-rescue-story.is-rescue-hover .fresh-rescue-story__ticket--best {
  transform: translate3d(-48%, 0, 122px) rotate(-2deg) scale(1);
  transition-delay: 130ms;
}

.fresh-rescue-story > .work-real__case-number {
  z-index: 18;
}

@keyframes fresh-rescue-story-scan {
  0%,
  13% {
    opacity: 0;
    transform: translateX(0) skewX(-8deg);
  }
  21% {
    opacity: 0.72;
  }
  44% {
    opacity: 0.34;
    transform: translateX(910%) skewX(-8deg);
  }
  49%,
  100% {
    opacity: 0;
    transform: translateX(910%) skewX(-8deg);
  }
}

@keyframes fresh-rescue-story-evidence {
  from {
    transform: translate3d(0, -1px, 0) scale(1);
  }
  to {
    transform: translate3d(0, 2px, 0) scale(1.004);
  }
}

@keyframes fresh-rescue-story-package {
  from {
    transform: translate3d(-1px, 1px, 0) rotate(-0.18deg);
  }
  to {
    transform: translate3d(2px, -2px, 0) rotate(0.22deg);
  }
}

@keyframes fresh-rescue-story-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(104, 230, 145, 0.42);
  }
  42%,
  100% {
    box-shadow: 0 0 0 clamp(6px, 0.9cqw, 12px) rgba(104, 230, 145, 0);
  }
}

@media (max-width: 620px) {
  .fresh-rescue-story__sorter {
    display: none;
  }

  .fresh-rescue-story.is-rescue-hover .fresh-rescue-story__layer--evidence {
    transform: translate3d(var(--rescue-evidence-x), var(--rescue-evidence-y), 56px) scale(1.025);
  }

  .fresh-rescue-story.is-rescue-hover .fresh-rescue-story__layer--package {
    transform: translate3d(var(--rescue-package-x), var(--rescue-package-y), 72px)
      rotate(var(--rescue-package-r)) scale(1.04);
  }
}

@media (hover: none), (pointer: coarse) {
  .fresh-rescue-story__sorter {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fresh-rescue-story *,
  .fresh-rescue-story *::before,
  .fresh-rescue-story *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .fresh-rescue-story__plate {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .fresh-rescue-story__layer {
    display: none;
  }

  .fresh-rescue-story__scanner,
  .fresh-rescue-story__sorter {
    display: none;
  }

  .fresh-rescue-story__pulse i {
    opacity: 0.9;
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Other design archive: a single, ordinary project card                      */
/* -------------------------------------------------------------------------- */

/* Keep the archive in the same two-column rhythm as the selected projects.
   It intentionally occupies one slot, rather than becoming a full-width
   collage that competes with the main case studies. */
[data-other-archive] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 7vw, 120px) clamp(28px, 3.2vw, 60px);
}

.work-real__card--archive-pack {
  grid-column: 1;
  width: 100%;
}

.other-archive-pack {
  container-type: inline-size;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #10121b;
  box-shadow: 0 22px 46px -38px color-mix(in srgb, var(--card-accent) 36%, transparent);
}

.other-archive-pack::before {
  display: none;
  content: none;
}

.other-archive-pack::after {
  z-index: 1;
  inset: 9px;
  border-color: rgba(255, 255, 255, 0.38);
}

.other-archive-pack__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
  filter: saturate(0.94) contrast(1.02);
  transform: scale(1.001);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease;
}

.other-archive-pack__badge {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(18, 19, 30, 0.54);
  box-shadow: 0 7px 20px rgba(14, 14, 22, 0.15);
  color: rgba(255, 255, 255, 0.94);
  font: 500 10px/1 var(--work-mono);
  letter-spacing: 0.075em;
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}

.other-archive-pack .work-real__case-number {
  z-index: 3;
}

.work-real__archive-copy {
  padding-top: 21px;
}

.other-archive-pack__index {
  position: static;
  z-index: auto;
  bottom: auto;
  left: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: auto;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--work-line);
  color: var(--work-muted);
  list-style: none;
  pointer-events: auto;
}

.other-archive-pack__index li {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: baseline;
  font: 500 10px/1.35 var(--work-mono);
  letter-spacing: 0.03em;
}

.other-archive-pack__index b {
  flex: 0 0 auto;
  color: var(--card-accent);
  font-weight: 500;
}

.other-archive-pack__index span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-real__card--archive-pack:hover .other-archive-pack__image,
.work-real__card--archive-pack:focus-visible .other-archive-pack__image {
  filter: saturate(1.03) contrast(1.04);
  transform: scale(1.028);
}

.other-archive-pack__night-wash,
.other-archive-pack__rope-motion,
.other-archive-pack__star-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.other-archive-pack__night-wash {
  z-index: 1;
  background:
    radial-gradient(circle at 52% 24%, rgba(15, 25, 60, 0.08), rgba(3, 6, 18, 0.3) 72%),
    linear-gradient(rgba(2, 5, 18, 0.18), rgba(1, 3, 12, 0.4));
  opacity: 0;
}

.js .work-real__card--archive-pack:not(.is-visible) .other-archive-pack__night-wash {
  opacity: 0.46;
}

.work-real__card--archive-pack.is-visible .other-archive-pack__night-wash {
  animation: archive-night-lift 1.25s ease-out 0.08s both;
}

.other-archive-pack__rope-motion {
  z-index: 2;
  opacity: 0.78;
  transform-origin: 50% 29%;
  will-change: opacity, transform;
}

.other-archive-pack__rope-motion svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 29%;
  will-change: transform;
}

.other-archive-pack__rope-glow,
.other-archive-pack__rope-glint {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.other-archive-pack__rope-glow {
  stroke: rgba(255, 252, 178, 0.58);
  stroke-width: 1.35;
  filter: drop-shadow(0 0 4px rgba(255, 241, 111, 0.28));
}

.other-archive-pack__rope-glint {
  stroke: rgba(255, 249, 174, 0.94);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-dasharray: 42 188;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px rgba(255, 226, 77, 0.44));
}

.js .work-real__card--archive-pack:not(.is-visible) .other-archive-pack__rope-motion {
  opacity: 0;
  transform: translate3d(0, -2.8cqw, 0) rotate(-0.55deg);
}

.work-real__card--archive-pack.is-visible .other-archive-pack__rope-motion {
  animation: archive-rope-settle 1.65s cubic-bezier(0.2, 0.82, 0.22, 1) 0.16s both;
}

.work-real__card--archive-pack.is-visible .other-archive-pack__rope-motion svg {
  animation: archive-rope-breeze 6.8s ease-in-out 1.75s infinite;
}

.work-real__card--archive-pack.is-visible .other-archive-pack__rope-glint {
  animation: archive-rope-glint 5.6s linear 1.85s infinite;
}

.work-real__card--archive-pack:hover .other-archive-pack__rope-motion svg,
.work-real__card--archive-pack:focus-visible .other-archive-pack__rope-motion svg,
.work-real__card--archive-pack.is-view-active .other-archive-pack__rope-motion svg {
  animation: archive-rope-gust 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.other-archive-pack__star-field {
  z-index: 4;
  overflow: hidden;
  transform-origin: 50% 50%;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-real__card--archive-pack:hover .other-archive-pack__star-field,
.work-real__card--archive-pack:focus-visible .other-archive-pack__star-field,
.work-real__card--archive-pack.is-view-active .other-archive-pack__star-field {
  transform: scale(1.028);
}

.other-archive-pack__star-field i {
  position: absolute;
  top: var(--star-y);
  left: var(--star-x);
  display: block;
  width: var(--star-size);
  aspect-ratio: 1;
  background: #ffd935;
  clip-path: polygon(
    50% 0,
    61% 34%,
    98% 35%,
    68% 56%,
    79% 94%,
    50% 72%,
    21% 94%,
    32% 56%,
    2% 35%,
    39% 34%
  );
  filter:
    drop-shadow(0 0 2px rgba(255, 243, 118, 0.95))
    drop-shadow(0 0 9px rgba(255, 204, 29, 0.72));
  opacity: 0.96;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  will-change: opacity, transform, filter;
}

.js .work-real__card--archive-pack:not(.is-visible) .other-archive-pack__star-field i {
  opacity: 0;
  transform:
    translate3d(
      calc(-50% + var(--star-drift)),
      calc(-50% - 42cqw),
      0
    )
    rotate(var(--star-spin))
    scale(0.34);
}

.work-real__card--archive-pack.is-visible .other-archive-pack__star-field i {
  animation:
    archive-star-drop 1.45s cubic-bezier(0.18, 0.72, 0.2, 1.05) var(--star-delay) both,
    archive-star-twinkle 3.8s ease-in-out calc(var(--star-delay) + 1.5s) infinite;
}

@keyframes archive-night-lift {
  from { opacity: 0.46; }
  to { opacity: 0; }
}

@keyframes archive-rope-settle {
  0% {
    opacity: 0;
    transform: translate3d(0, -2.8cqw, 0) rotate(-0.55deg);
  }
  54% {
    opacity: 0.86;
    transform: translate3d(0, 0.52cqw, 0) rotate(0.24deg);
  }
  76% {
    opacity: 0.8;
    transform: translate3d(0, -0.2cqw, 0) rotate(-0.11deg);
  }
  89% {
    transform: translate3d(0, 0.08cqw, 0) rotate(0.045deg);
  }
  100% {
    opacity: 0.78;
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes archive-rope-breeze {
  0%,
  100% { transform: translate3d(0, 0, 0) rotate(-0.055deg); }
  32% { transform: translate3d(0.08cqw, 0.1cqw, 0) rotate(0.095deg); }
  68% { transform: translate3d(-0.07cqw, -0.06cqw, 0) rotate(-0.085deg); }
}

@keyframes archive-rope-gust {
  0% { transform: translate3d(0, 0, 0) rotate(0); }
  24% { transform: translate3d(0.18cqw, 0.26cqw, 0) rotate(0.38deg); }
  49% { transform: translate3d(-0.12cqw, -0.13cqw, 0) rotate(-0.24deg); }
  72% { transform: translate3d(0.06cqw, 0.08cqw, 0) rotate(0.12deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes archive-rope-glint {
  to { stroke-dashoffset: -460; }
}

@keyframes archive-star-drop {
  0% {
    opacity: 0;
    filter:
      blur(2px)
      drop-shadow(0 0 2px rgba(255, 243, 118, 0.32));
    transform:
      translate3d(
        calc(-50% + var(--star-drift)),
        calc(-50% - 42cqw),
        0
      )
      rotate(var(--star-spin))
      scale(0.34);
  }
  62% {
    opacity: 1;
    transform:
      translate3d(
        calc(-50% - 0.6cqw),
        calc(-50% + 1.3cqw),
        0
      )
      rotate(13deg)
      scale(1.16);
  }
  77% {
    transform:
      translate3d(
        calc(-50% + 0.3cqw),
        calc(-50% - 0.72cqw),
        0
      )
      rotate(-6deg)
      scale(0.93);
  }
  89% {
    transform:
      translate3d(-50%, calc(-50% + 0.22cqw), 0)
      rotate(2deg)
      scale(1.04);
  }
  100% {
    opacity: 0.96;
    filter:
      drop-shadow(0 0 2px rgba(255, 243, 118, 0.95))
      drop-shadow(0 0 9px rgba(255, 204, 29, 0.72));
    transform: translate3d(-50%, -50%, 0) rotate(0) scale(1);
  }
}

@keyframes archive-star-twinkle {
  0%,
  100% {
    opacity: 0.82;
    filter:
      drop-shadow(0 0 1px rgba(255, 243, 118, 0.82))
      drop-shadow(0 0 5px rgba(255, 204, 29, 0.45));
  }
  48% {
    opacity: 1;
    filter:
      drop-shadow(0 0 3px rgba(255, 250, 167, 1))
      drop-shadow(0 0 13px rgba(255, 207, 29, 0.92));
  }
}

@media (max-width: 620px) {
  [data-other-archive] {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .work-real__card--archive-pack {
    grid-column: 1;
  }

  .other-archive-pack {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .other-archive-pack__badge {
    top: 12px;
    right: 12px;
    padding: 7px 9px;
    font-size: 9px;
  }

  .other-archive-pack__index {
    gap: 8px 12px;
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .other-archive-pack__image {
    transition: none !important;
  }

  .other-archive-pack__night-wash,
  .other-archive-pack__rope-motion,
  .other-archive-pack__star-field {
    display: none !important;
  }
}

/* The cover no longer uses the three floating date-label tickets. */
.fresh-rescue-story__sorter {
  display: none !important;
}

/* Keep the Fresh Rescue collage intact; no rectangular duplicate slices. */
.fresh-rescue-story__layer {
  display: none !important;
}

/* Retire the earlier green scanner/status-dot treatment for the focus version. */
.fresh-rescue-story__scanner,
.fresh-rescue-story__pulse {
  display: none !important;
}

/* Fresh Rescue: animate complete visual blocks without breaking their content. */
.fresh-rescue-story__pieces {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.work-real__visual.fresh-rescue-story > .fresh-rescue-story__plate,
.work-real__card:hover .work-real__visual.fresh-rescue-story > .fresh-rescue-story__plate,
.work-real__card:focus-visible .work-real__visual.fresh-rescue-story > .fresh-rescue-story__plate {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.fresh-rescue-story__piece {
  --drop-delay: 0s;
  --drop-x: 0px;
  --drop-rotate: 0deg;
  position: absolute;
  inset: 0;
  display: block;
  background: url("/assets/cases/fresh-rescue-01.jpg") center / cover no-repeat;
  mix-blend-mode: normal;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.fresh-rescue-story__piece--header {
  clip-path: inset(0 0 90.5% 0);
  --drop-delay: 0.08s;
  --drop-x: -18px;
  --drop-rotate: -1.8deg;
}

.fresh-rescue-story__piece--left-panel {
  clip-path: none;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 9.5% / 49.5% 90.5% no-repeat,
    linear-gradient(#000 0 0) 49.4% 48.7% / 5.3% 7.4% no-repeat,
    linear-gradient(#000 0 0) 49.4% 58% / 9.2% 9.8% no-repeat,
    linear-gradient(#000 0 0) 49.4% 75.7% / 5.4% 9.8% no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 9.5% / 49.5% 90.5% no-repeat,
    linear-gradient(#000 0 0) 49.4% 48.7% / 5.3% 7.4% no-repeat,
    linear-gradient(#000 0 0) 49.4% 58% / 9.2% 9.8% no-repeat,
    linear-gradient(#000 0 0) 49.4% 75.7% / 5.4% 9.8% no-repeat;
  transform-origin: 30% 58%;
  --drop-delay: 0.18s;
  --drop-x: -26px;
  --drop-rotate: -2.8deg;
}

.fresh-rescue-story__piece--title-wall {
  clip-path: polygon(
    18.5% 34.5%,
    41.5% 34.5%,
    41.5% 47.8%,
    34.8% 47.8%,
    34.8% 58.2%,
    36.4% 58.2%,
    36.4% 69.8%,
    50.8% 69.8%,
    50.8% 83.2%,
    18.2% 83.2%,
    18.2% 72.6%,
    10.1% 72.6%,
    10.1% 58.1%,
    10.2% 47.7%,
    18.5% 47.7%
  );
  transform-origin: 29% 61%;
  --drop-delay: 0.82s;
  --drop-x: -30px;
  --drop-rotate: -3.2deg;
}

.fresh-rescue-story__piece--right-collage {
  clip-path: none;
  -webkit-mask:
    linear-gradient(#000 0 0) 49.5% 9.5% / 50.5% 39.2% no-repeat,
    linear-gradient(#000 0 0) 55% 48.7% / 45% 7.4% no-repeat,
    linear-gradient(#000 0 0) 49.5% 56.1% / 50.5% 1.9% no-repeat,
    linear-gradient(#000 0 0) 58.6% 58% / 41.4% 9.8% no-repeat,
    linear-gradient(#000 0 0) 49.5% 67.8% / 50.5% 7.9% no-repeat,
    linear-gradient(#000 0 0) 54.8% 75.7% / 45.2% 9.8% no-repeat,
    linear-gradient(#000 0 0) 49.5% 85.5% / 50.5% 14.5% no-repeat;
  mask:
    linear-gradient(#000 0 0) 49.5% 9.5% / 50.5% 39.2% no-repeat,
    linear-gradient(#000 0 0) 55% 48.7% / 45% 7.4% no-repeat,
    linear-gradient(#000 0 0) 49.5% 56.1% / 50.5% 1.9% no-repeat,
    linear-gradient(#000 0 0) 58.6% 58% / 41.4% 9.8% no-repeat,
    linear-gradient(#000 0 0) 49.5% 67.8% / 50.5% 7.9% no-repeat,
    linear-gradient(#000 0 0) 54.8% 75.7% / 45.2% 9.8% no-repeat,
    linear-gradient(#000 0 0) 49.5% 85.5% / 50.5% 14.5% no-repeat;
  transform-origin: 74% 55%;
  --drop-delay: 0.78s;
  --drop-x: 30px;
  --drop-rotate: 2.4deg;
}

.is-rescue-visible .fresh-rescue-story__piece {
  animation:
    fresh-rescue-block-drop
    1.28s
    var(--drop-delay)
    cubic-bezier(0.2, 0.78, 0.2, 1.08)
    both;
}

.fresh-rescue-story.is-rescue-visible > .fresh-rescue-story__plate {
  animation: fresh-rescue-base-assemble 3.25s ease both;
}

.fresh-rescue-story__pieces::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -24%;
  bottom: -24%;
  left: -34%;
  width: 19%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.12) 24%,
      rgba(255, 249, 226, 0.54) 52%,
      rgba(255, 255, 255, 0.1) 78%,
      transparent
    );
  mix-blend-mode: screen;
  opacity: 0;
  transform: skewX(-12deg) translate3d(-160%, 0, 0);
  pointer-events: none;
}

.is-rescue-visible .fresh-rescue-story__pieces::after {
  animation: fresh-rescue-assembly-flash 3.45s ease-in-out both;
}

@keyframes fresh-rescue-block-drop {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--drop-x), -128%, 0)
      rotate(var(--drop-rotate))
      scale(0.94);
    filter:
      brightness(1.08)
      saturate(1.08)
      drop-shadow(0 24px 14px rgba(7, 23, 12, 0.3));
  }

  12% {
    opacity: 1;
  }

  66% {
    opacity: 1;
    transform: translate3d(0, 2.2%, 0) rotate(-0.65deg) scale(1.01);
    filter:
      brightness(1.04)
      saturate(1.04)
      drop-shadow(0 11px 9px rgba(7, 23, 12, 0.24));
  }

  79% {
    transform: translate3d(0, -1.05%, 0) rotate(0.35deg) scale(0.995);
  }

  90% {
    transform: translate3d(0, 0.38%, 0) rotate(-0.12deg) scale(1.003);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent);
  }
}

@keyframes fresh-rescue-base-assemble {
  0%,
  70% {
    opacity: 1;
    filter: brightness(0.16) saturate(0.3) contrast(0.78) blur(2px);
  }

  88% {
    filter: brightness(0.68) saturate(0.8) contrast(0.94) blur(0.3px);
  }

  100% {
    opacity: 1;
    filter: brightness(1) saturate(1) contrast(1.015) blur(0);
  }
}

@keyframes fresh-rescue-assembly-flash {
  0%,
  77% {
    opacity: 0;
    transform: skewX(-12deg) translate3d(-160%, 0, 0);
  }

  81% {
    opacity: 0.12;
  }

  88% {
    opacity: 0.58;
  }

  96% {
    opacity: 0.08;
    transform: skewX(-12deg) translate3d(720%, 0, 0);
  }

  100% {
    opacity: 0;
    transform: skewX(-12deg) translate3d(720%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fresh-rescue-story__piece {
    display: none !important;
    animation: none !important;
  }

  .fresh-rescue-story__pieces::after {
    display: none !important;
    animation: none !important;
  }
}

/* Fresh Rescue final treatment: one calm whole-cover reveal. */
.fresh-rescue-story__pieces,
.fresh-rescue-story__shade,
.fresh-rescue-story__scanner,
.fresh-rescue-story__pulse {
  display: none !important;
}

.fresh-rescue-story::before,
.fresh-rescue-story::after {
  opacity: 0 !important;
  animation: none !important;
}

.fresh-rescue-story.is-rescue-visible {
  animation: fresh-rescue-simple-enter 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fresh-rescue-story.is-rescue-visible > .fresh-rescue-story__plate {
  animation: fresh-rescue-simple-image 920ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fresh-rescue-story.is-rescue-hover > .fresh-rescue-story__plate,
.work-real__card:hover .work-real__visual.fresh-rescue-story > .fresh-rescue-story__plate,
.work-real__card:focus-visible .work-real__visual.fresh-rescue-story > .fresh-rescue-story__plate {
  opacity: 1;
  filter: brightness(1.025) saturate(1.035) contrast(1.02) !important;
  transform: translate3d(0, 0, 0) scale(1.012) !important;
}

@keyframes fresh-rescue-simple-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes fresh-rescue-simple-image {
  from {
    opacity: 0.28;
    filter: brightness(0.72) saturate(0.72) contrast(0.94) blur(2.2px);
  }

  to {
    opacity: 1;
    filter: brightness(1) saturate(1) contrast(1.015) blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fresh-rescue-story.is-rescue-visible,
  .fresh-rescue-story.is-rescue-visible > .fresh-rescue-story__plate {
    animation: none !important;
  }
}