/* A photographic creative stage around the central conversion message. */
.closing--creative {
  --closing-play: paused;
  --closing-px: 0px;
  --closing-py: 0px;
  --closing-light-x: 55%;
  --closing-light-y: 40%;
  background: #152940;
  padding-bottom: 30px;
}
.closing--running { --closing-play: running; }
.closing__photo-background {
  position: absolute; inset: -5%; z-index: -3; pointer-events: none;
  background: url('creative-studio.webp') center / cover no-repeat;
  opacity: .3;
  animation: closing-photo-pan 25s ease-in-out infinite alternate;
  animation-play-state: var(--closing-play);
}
.closing--creative::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, #15294055, #14253ce8 30%, #14253cf0 70%, #15294066), linear-gradient(0deg, #13243b, transparent 70%);
}
.closing--creative .closing__inner { position: relative; z-index: 2; max-width: 700px; }
.closing--creative .closing__grid { background-image: linear-gradient(#b8d9f720 1px, transparent 1px), linear-gradient(90deg, #b8d9f720 1px, transparent 1px); background-size: 64px 64px; opacity: .5; transform: perspective(700px) rotateX(18deg) scale(1.15); }
.closing__light { position: absolute; inset: 0; background: radial-gradient(ellipse 500px 350px at var(--closing-light-x) var(--closing-light-y), #5283b233, transparent 90%); }
.closing__orbits { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #afd8ff30; stroke-width: 1; transform: rotate(-12deg) scale(1.06); }
.closing__orbit-trace { stroke: #ffd0a0b3; stroke-width: 1.7; stroke-dasharray: 100 370; animation: closing-orbit-flow 22s linear infinite; animation-play-state: var(--closing-play); }
.closing--creative.closing--visible .closing__signal { animation: closing-signal 12s linear infinite; animation-play-state: var(--closing-play); }
.closing--creative .closing__description { max-width: 570px; }
.closing--creative .closing__break { display: none; }
.closing--creative .closing__button { position: relative; border-radius: 18px; padding: 14px 14px 14px 25px; box-shadow: 0 15px 50px -18px #f0642a80; }
.closing--creative .closing__button-icon { border-radius: 11px; }
.closing--creative .closing__button:hover { transform: translateY(-4px) scale(1.025); }
.closing__motion-control { position: absolute; right: var(--page-gutter); top: 24px; z-index: 4; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #b8d9f76b; border-radius: 50%; background: #14253c99; color: #f7f8fb; font: 400 14px/1 var(--font-sans); cursor: pointer; }
.closing__motion-control:hover { color: #ffc16f; border-color: #ffc16f; }
.closing__motion-control:disabled { opacity: .45; cursor: default; }
.closing__art { position: relative; height: 225px; margin-top: 18px; pointer-events: none; }
.closing__photo-float { position: absolute; width: 210px; left: calc(50% - 105px); top: 25px; transform: rotate(-9deg); translate: var(--closing-px) var(--closing-py); transition: translate .7s var(--ease); }
.closing__photo-frame { background: #f7f8fb; padding: 7px; border-radius: 7px; box-shadow: 0 22px 45px #08152966; animation: closing-photo-float 9s ease-in-out infinite; animation-play-state: var(--closing-play); pointer-events: auto; transition: rotate .5s, box-shadow .5s; }
.closing__photo-frame:hover { rotate: 5deg; box-shadow: 0 30px 55px #08152999; }
.closing__photo-frame>img { display: block; width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; border-radius: 3px; }
.closing__photo-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 5px 6px; color: #223b58; font-size: .75rem; font-weight: 500; }
.closing__photo-caption>svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.6; }
.closing__photo-spark { position: absolute; right: -21px; bottom: -16px; width: 45px; height: 45px; fill: none; stroke: #ff9266; stroke-width: 3; stroke-linecap: round; animation: closing-spark-turn 20s linear infinite; animation-play-state: var(--closing-play); }
.closing__focus-mark { position: absolute; width: 75px; right: calc(50% - 157px); top: -2px; rotate: 13deg; animation: closing-symbol-float 7s ease-in-out infinite; animation-play-state: var(--closing-play); filter: drop-shadow(0 9px 15px #08152933); }
.closing__focus-orbit { transform-origin: 60px 60px; animation: closing-spark-turn 22s linear infinite; animation-play-state: var(--closing-play); }
.closing__focus-brackets { transform-origin: 60px 60px; animation: closing-focus-turn 16s ease-in-out infinite; animation-play-state: var(--closing-play); }
.closing__conversation { position: absolute; width: 62px; left: calc(50% - 159px); top: 111px; rotate: -12deg; animation: closing-symbol-float 8s -3s ease-in-out infinite; animation-play-state: var(--closing-play); }
.closing__talk-dot { animation: closing-talk 2.4s ease-in-out infinite; animation-play-state: var(--closing-play); }
.closing__talk-dot:nth-child(2) { animation-delay: .2s; }.closing__talk-dot:nth-child(3) { animation-delay: .4s; }
.closing__spark { display: none; position: absolute; width: 46px; height: 46px; stroke: #b8d9f7; stroke-width: 2; fill: none; stroke-linecap: round; animation: closing-spark-turn 28s linear infinite reverse; animation-play-state: var(--closing-play); }
@keyframes closing-photo-pan { from { transform: scale(1) translateX(-1%); } to { transform: scale(1.08) translateX(1%); } }
@keyframes closing-orbit-flow { to { stroke-dashoffset: -1410; } }
@keyframes closing-photo-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes closing-symbol-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-11px) rotate(5deg); } }
@keyframes closing-focus-turn { 0%, 20% { transform: rotate(0deg); } 70%, 100% { transform: rotate(-90deg); } }
@keyframes closing-talk { 0%, 60%, 100% { transform: translateY(0); opacity: .65; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes closing-spark-turn { to { transform: rotate(360deg); } }
@media (min-width: 1180px) {
  .closing--creative { padding-block: 110px 115px; min-height: 670px; }
  .closing__art { position: absolute; inset: 0; margin: 0; height: auto; z-index: 3; }
  .closing__photo-float { width: clamp(195px, 16vw, 255px); top: 47%; left: max(30px, calc((100% - 1420px)/2)); }
  .closing__focus-mark { width: 115px; right: max(68px, calc((100% - 1220px)/2)); top: 24%; translate: calc(var(--closing-px) * -1) calc(var(--closing-py) * -1); transition: translate .8s; }
  .closing__conversation { width: 78px; left: max(108px, calc((100% - 1180px)/2)); top: 18%; }
  .closing__spark { display: block; right: max(120px, calc((100% - 1120px)/2)); top: 65%; }
}
@media (prefers-reduced-motion: reduce) {
  .closing--creative .closing__photo-background, .closing--creative .closing__signal, .closing--creative .closing__orbit-trace, .closing--creative .closing__art * { animation: none!important; }
  .closing__photo-float, .closing__focus-mark { translate: none!important; transition: none; }
  .closing__photo-frame { transition: none; }
}