/* Full-bleed cooperation composition based on the supplied 2048 x 1045 reference. */
#s2.cooperation-stage {
  padding: 0;
  margin: 0;
  color: #fff;
  background: linear-gradient(180deg, #000 0%, #151020 34%, #171122 68%, #070510 100%);
  scroll-margin-top: 56px;
}
#s2.cooperation-stage::before,
#s2.cooperation-stage::after { display: none; }
#s2.cooperation-stage + #s3::after { display: none; }
.cooperation-scene {
  --cooperation-character-x: 0px;
  --cooperation-character-y: 0px;
  --cooperation-bubble-x: 0px;
  --cooperation-bubble-y: 0px;
  --cooperation-play: paused;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 2048 / 1045;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 32% 24% at 50% 91%, rgba(104,56,177,.32) 0%, rgba(70,38,122,.16) 46%, transparent 78%),
    radial-gradient(ellipse 30% 38% at 91% 72%, rgba(65,38,105,.25), transparent 74%),
    linear-gradient(180deg,
      #000 0%,
      #050309 8%,
      #100b18 22%,
      #151020 38%,
      #171122 67%,
      #100a19 87%,
      #070510 100%);
}
.cooperation-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/cooperation/grain.svg');
  opacity: .16;
  mix-blend-mode: soft-light;
}
.cooperation-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, transparent 16%, transparent 100%),
    radial-gradient(ellipse 70% 48% at 50% 54%, transparent 38%, rgba(3,1,8,.18) 100%);
  box-shadow: inset 0 0 8cqw rgba(3,1,8,.14);
}
#s2 .cooperation-copy {
  position: absolute;
  z-index: 2;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: #fff;
}
#s2 .cooperation-intro { inset: 0; width: 100%; }
.cooperation-kicker {
  position: absolute;
  top: 10.3%;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  color: #a29ab3;
  font: 500 .66cqw/1.2 var(--mono);
  letter-spacing: .16em;
  white-space: nowrap;
}
#s2 .cooperation-intro h3 {
  position: absolute;
  top: 14.1%;
  left: 50%;
  width: max-content;
  max-width: 58%;
  margin: 0;
  transform: translateX(-50%);
  color: transparent;
  background: linear-gradient(96deg, #5744ff 0%, #9587ff 53%, #eeeaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.6cqw;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0;
  text-align: center;
}
#s2 .cooperation-intro h3 > span,
#s2 .cooperation-deliverables h4 span { display: block; }
#s2 .cooperation-intro h3.cooperation-title-copy {
  color: #fff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: initial;
}
#s2 .cooperation-intro h3 .cooperation-reveal-char {
  display: inline-block;
  color: var(--char-color, #fff);
  -webkit-text-fill-color: currentColor;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(.42em);
  transition:
    opacity .48s ease var(--char-delay),
    transform .58s cubic-bezier(.22,1,.36,1) var(--char-delay),
    filter .48s ease var(--char-delay);
}
#s2 .cooperation-intro h3.is-copy-visible .cooperation-reveal-char {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.cooperation-steps {
  position: absolute;
  left: 10.55%;
  top: 52.2%;
  width: 19.5%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.cooperation-steps li {
  margin: 0;
  padding: 0 0 1.34cqw;
}
.cooperation-steps li + li {
  padding-top: 1.15cqw;
  border-top: 1px solid rgba(221,211,239,.15);
}
.cooperation-steps b {
  display: block;
  margin: 0 0 .62cqw;
  color: #a486ff;
  font-size: .69cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
}
#s2 .cooperation-steps p {
  margin: 0;
  color: #bcb4c8;
  font-size: .9cqw;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0;
}
.cooperation-character {
  --character-entry-y: 0px;
  --character-scale: 1;
  --character-fade: radial-gradient(ellipse 260% 102% at 50% -2%,
    #000 0%,
    #000 83%,
    rgba(0,0,0,.98) 87%,
    rgba(0,0,0,.84) 90.5%,
    rgba(0,0,0,.55) 93.5%,
    rgba(0,0,0,.22) 95.5%,
    transparent 97.2%);
  position: absolute;
  z-index: 1;
  left: 36.35%;
  top: auto;
  bottom: -1.25%;
  width: 27.6%;
  height: auto;
  margin: 0;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(
    var(--cooperation-character-x),
    calc(var(--cooperation-character-y) + var(--character-entry-y)),
    0
  ) scale(var(--character-scale));
  transform-origin: 50% 92%;
  transition: transform .22s ease-out, opacity .82s ease, filter .82s ease;
  pointer-events: none;
  will-change: transform;
}
.cooperation-character::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 7%;
  right: 7%;
  bottom: -1%;
  height: 15%;
  display: block;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(8,5,15,.62) 0%, rgba(31,19,46,.3) 46%, transparent 80%);
  filter: blur(clamp(5px,.38cqw,8px));
  pointer-events: none;
}
.cooperation-character img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 92%;
  animation: cooperation-breathe 7s ease-in-out infinite;
  animation-play-state: var(--cooperation-play);
  opacity: 1;
  filter: none;
  -webkit-mask-image: var(--character-fade);
  mask-image: var(--character-fade);
}
.cooperation-character-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: none;
  transform-origin: 50% 92%;
  animation: cooperation-breathe 7s ease-in-out infinite;
  animation-play-state: var(--cooperation-play);
  pointer-events: none;
  -webkit-mask-image: var(--character-fade);
  mask-image: var(--character-fade);
}
.cooperation-character.is-animated .cooperation-character-canvas { opacity: 1; }
.cooperation-character.is-animated img { opacity: 0; }
.cooperation-bubble {
  --bubble-entry-y: 0px;
  --bubble-scale: 1;
  position: absolute;
  z-index: 3;
  left: 56.55%;
  top: 35.55%;
  width: 15.5%;
  min-height: 5.25cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .74cqw 1.15cqw;
  border: 1px solid rgba(211,199,255,.2);
  border-radius: 1.05cqw;
  background: linear-gradient(118deg, #6a3fff, #6135f0);
  box-shadow: 0 1.3cqw 3cqw rgba(55,23,125,.24), inset 0 1px 0 rgba(255,255,255,.16);
  color: #fff;
  opacity: 1;
  transform: translate3d(
    var(--cooperation-bubble-x),
    calc(var(--cooperation-bubble-y) + var(--bubble-entry-y)),
    0
  ) scale(var(--bubble-scale));
  transform-origin: 25% 100%;
  transition: transform .22s ease-out, opacity .55s ease, filter .55s ease;
}
.cooperation-bubble strong {
  display: block;
  margin-bottom: .42cqw;
  color: #c6b7ff;
  font-size: .67cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
}
.cooperation-bubble p {
  margin: 0;
  color: #fff;
  font-size: .82cqw;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
#s2 .cooperation-deliverables {
  left: 70.75%;
  top: 51.1%;
  width: 21.5%;
}
#s2 .cooperation-deliverables h4 {
  margin: 0;
  color: #fff;
  font-size: 1.82cqw;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0;
}
.cooperation-deliverables ul {
  display: grid;
  gap: 1.28cqw;
  margin: 3.65cqw 0 0;
  padding: 0;
  color: #bdb5c9;
  list-style: none;
}
.cooperation-deliverables li {
  position: relative;
  padding-left: 1.18cqw;
  font-size: .88cqw;
  font-weight: 400;
  line-height: 1.65;
}
.cooperation-deliverables li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: .34cqw;
  height: .34cqw;
  border-radius: 50%;
  background: #9a76ff;
  box-shadow: 0 0 .5cqw rgba(154,118,255,.38);
}
.cooperation-next {
  position: absolute;
  z-index: 4;
  top: 89.8%;
  left: 70.75%;
  width: 21.5%;
  min-height: 3.25cqw;
  padding: .6cqw 1cqw;
  overflow: hidden;
  border: 1px solid rgba(221,211,255,.2);
  border-radius: 100px;
  background: linear-gradient(100deg, #6840f7, #7c45ff 55%, #7540fa);
  box-shadow: 0 .7cqw 2cqw rgba(87,42,196,.28), inset 0 1px 0 rgba(255,255,255,.16);
  color: #fff;
  font: 600 .92cqw/1.3 var(--sans);
  letter-spacing: .015em;
  text-align: center;
  cursor: pointer;
  transition: transform .28s ease, filter .28s ease, box-shadow .28s ease, opacity .65s ease;
}
.cooperation-next::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.24) 48%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s ease;
  pointer-events: none;
}
.cooperation-next:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 1cqw 2.8cqw rgba(93,46,210,.38), inset 0 1px 0 rgba(255,255,255,.22);
}
.cooperation-next:hover::after { transform: translateX(120%); }
.cooperation-next:active { transform: translateY(-1px) scale(.99); }
.cooperation-next:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

/* Entrance choreography follows the visual hierarchy in the reference. */
.cooperation-scene.is-motion-ready .cooperation-steps li,
.cooperation-scene.is-motion-ready .cooperation-deliverables h4 span,
.cooperation-scene.is-motion-ready .cooperation-deliverables li,
.cooperation-scene.is-motion-ready .cooperation-next {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(1.2cqw);
}
.cooperation-scene.is-motion-ready .cooperation-kicker {
  opacity: 0;
  filter: blur(8px);
  transform: translate(-50%, 1.2cqw);
}
.cooperation-scene.is-motion-ready .cooperation-character {
  --character-entry-y: 3.2cqw;
  --character-scale: .94;
  opacity: 0;
  filter: blur(8px);
}
.cooperation-scene.is-motion-ready .cooperation-bubble {
  --bubble-entry-y: 1.4cqw;
  --bubble-scale: .9;
  opacity: 0;
  filter: blur(7px);
}
.cooperation-scene.is-motion-ready.is-visible .cooperation-steps li,
.cooperation-scene.is-motion-ready.is-visible .cooperation-deliverables h4 span,
.cooperation-scene.is-motion-ready.is-visible .cooperation-deliverables li,
.cooperation-scene.is-motion-ready.is-visible .cooperation-next {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity .68s ease, transform .82s cubic-bezier(.22,1,.36,1), filter .68s ease;
}
.cooperation-scene.is-motion-ready.is-visible .cooperation-kicker {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, 0);
  transition: opacity .68s ease, transform .82s cubic-bezier(.22,1,.36,1), filter .68s ease;
}
.cooperation-scene.is-motion-ready.is-visible .cooperation-character {
  --character-entry-y: 0px;
  --character-scale: 1;
  opacity: 1;
  filter: blur(0);
  transition: transform .82s cubic-bezier(.22,1,.36,1), opacity .82s ease, filter .82s ease;
}
.cooperation-scene.is-motion-ready.is-visible .cooperation-bubble {
  --bubble-entry-y: 0px;
  --bubble-scale: 1;
  opacity: 1;
  filter: blur(0);
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .55s ease, filter .55s ease;
}
.cooperation-scene.is-visible .cooperation-kicker { transition-delay: .02s; }
.cooperation-scene.is-visible .cooperation-character { transition-delay: .25s; }
.cooperation-scene.is-visible .cooperation-bubble { transition-delay: .48s; }
.cooperation-scene.is-visible .cooperation-steps li:nth-child(1) { transition-delay: .42s; }
.cooperation-scene.is-visible .cooperation-steps li:nth-child(2) { transition-delay: .54s; }
.cooperation-scene.is-visible .cooperation-steps li:nth-child(3) { transition-delay: .66s; }
.cooperation-scene.is-visible .cooperation-deliverables h4 span:nth-child(1) { transition-delay: .46s; }
.cooperation-scene.is-visible .cooperation-deliverables h4 span:nth-child(2) { transition-delay: .56s; }
.cooperation-scene.is-visible .cooperation-deliverables li:nth-child(1) { transition-delay: .68s; }
.cooperation-scene.is-visible .cooperation-deliverables li:nth-child(2) { transition-delay: .78s; }
.cooperation-scene.is-visible .cooperation-deliverables li:nth-child(3) { transition-delay: .88s; }
.cooperation-scene.is-visible .cooperation-deliverables li:nth-child(4) { transition-delay: .98s; }
.cooperation-scene.is-visible .cooperation-next { transition-delay: 1.02s; }

@keyframes cooperation-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-.07cqw) scale(1.0015); }
}

@media (max-width: 800px) {
  .cooperation-scene {
    aspect-ratio: auto;
    min-height: 0;
    padding: 52px 24px 0;
  }
  #s2 .cooperation-copy { position: relative; inset: auto; width: 100%; }
  .cooperation-kicker {
    position: relative;
    inset: auto;
    margin: 0 0 18px;
    transform: none;
    font-size: 10px;
    text-align: center;
  }
  .cooperation-scene.is-motion-ready .cooperation-kicker { transform: translateY(16px); }
  .cooperation-scene.is-motion-ready.is-visible .cooperation-kicker { transform: none; }
  #s2 .cooperation-intro h3 {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
    font-size: clamp(31px, 7.5vw, 48px);
  }
  .cooperation-steps {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 520px;
    margin: 44px auto 0;
  }
  .cooperation-steps li { padding-bottom: 18px; }
  .cooperation-steps li + li { padding-top: 18px; }
  .cooperation-steps b { margin-bottom: 9px; font-size: 12px; }
  #s2 .cooperation-steps p { font-size: 14px; line-height: 1.75; }
  .cooperation-character {
    position: relative;
    inset: auto;
    width: min(108%, 620px);
    margin: 34px auto 0;
  }
  .cooperation-character::after { height: 10%; filter: blur(5px); }
  .cooperation-bubble {
    left: auto;
    right: 5%;
    top: 48%;
    width: min(40%, 230px);
    min-height: 92px;
    padding: 14px 18px;
    border-radius: 17px;
  }
  .cooperation-bubble strong { margin-bottom: 7px; font-size: 11px; }
  .cooperation-bubble p { font-size: 12px; }
  #s2 .cooperation-deliverables {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 520px;
    margin: -6% auto 0;
    padding-bottom: 34px;
  }
  #s2 .cooperation-deliverables h4 { font-size: clamp(28px, 6.5vw, 40px); }
  .cooperation-deliverables ul { gap: 17px; margin-top: 30px; }
  .cooperation-deliverables li { padding-left: 18px; font-size: 14px; }
  .cooperation-deliverables li::before { width: 6px; height: 6px; }
  .cooperation-next {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0 auto 30px;
    padding: 13px 20px;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .cooperation-scene { padding: 42px 20px 0; }
  #s2 .cooperation-intro h3 { font-size: 30px; }
  #s2 .cooperation-steps p,
  .cooperation-deliverables li { font-size: 13px; }
  .cooperation-bubble { top: 50%; right: 3%; width: 45%; min-height: 82px; padding: 12px 14px; }
  .cooperation-bubble p { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cooperation-scene *,
  .cooperation-scene *::before,
  .cooperation-scene *::after { animation: none!important; transition: none!important; }
  .cooperation-scene.is-motion-ready .cooperation-intro h3 .cooperation-reveal-char,
  .cooperation-scene.is-motion-ready .cooperation-kicker,
  .cooperation-scene.is-motion-ready .cooperation-steps li,
  .cooperation-scene.is-motion-ready .cooperation-deliverables h4 span,
  .cooperation-scene.is-motion-ready .cooperation-deliverables li,
  .cooperation-scene.is-motion-ready .cooperation-next,
  .cooperation-scene.is-motion-ready .cooperation-character,
  .cooperation-scene.is-motion-ready .cooperation-bubble {
    opacity: 1;
    filter: none;
    transform: none;
  }
}