@charset "UTF-8";
/* ==========================================================================
   ONE STOP SHOP DESIGNZ — faceswap.css
   Face-swap videos (inc/faceswap.php). Loaded after motion.css, and only on
   the Face Swap page, on an order page that has a face-swap video on it, and
   on the thank-you screen.

   Also on the two products' own pages, for the photo guide and the video
   picker, and on Home while its face-swap band is showing.

   01. THE FACE SWAP PAGE   the template videos, your own video
   02. THE PHOTO GUIDE      one photo that works, six that do not
   02b. YOUR OUTFIT         keep it, pick one of mine, or send their own
   03. THE ORDER PAGE       three steps, "Generating your video", the player,
                            sending a different photo, asking for a refund
   ========================================================================== */


/* ==========================================================================
   01. THE FACE SWAP PAGE
   ========================================================================== */

/* The opening, split on a wide screen: the words and prices on the left, the
   animation of how it goes on the right. On a phone the animation follows
   the prices, so both prices stay on the first screen. */
.swaphero { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 62rem) {
  .swaphero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .swaphero .t-h1 { font-size: clamp(3rem, 1rem + 5.2vw, 6.4rem); }
}

/* How it goes, on a nine-second loop: the photo of your character on the
   left (assets/img/faceswap-character.jpg), the template video he is in on
   the right.
     0-3 s   01 the video is picked: the phone lights up and gets its tick
     3-6 s   02 the photo slides in, is read top to bottom, and a spark
             carries it across into the phone
     6-9 s   03 a flash, "Generating your video" fills, then "Ready". */
.swapshow { --swap-loop: 9s; position: relative; justify-self: center; width: min(100%, 25rem); }
.swapshow__stage { position: relative; aspect-ratio: 25 / 29; }
.swapshow__phone {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  border-radius: 22px;
  background: #000;
  box-shadow: 0 0 0 6px #121214, 0 30px 80px rgba(0, 0, 0, 0.65);
  animation: swapshow-pick var(--swap-loop) ease-in-out infinite;
}
.swapshow__phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.swapshow__phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 32%, rgba(255, 150, 70, 0.6), transparent 62%);
  opacity: 0;
  pointer-events: none;
  animation: swapshow-flash var(--swap-loop) ease-out infinite;
}
.swapshow__picked {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-ember);
  color: #fff;
  animation: swapshow-picked var(--swap-loop) ease-out infinite;
}
.swapshow__picked .icon { width: 16px; height: 16px; }
.swapshow__status {
  position: absolute;
  right: 8%;
  bottom: 6%;
  left: 8%;
  z-index: 2;
  min-height: 2.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--c-line-strong);
  background: rgba(5, 5, 5, 0.84);
  font: 500 0.6rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: swapshow-status var(--swap-loop) ease-out infinite;
}
.swapshow__making { display: block; animation: swapshow-making var(--swap-loop) linear infinite; }
.swapshow__bar { display: block; height: 3px; margin-top: 0.45rem; overflow: hidden; background: var(--c-line); }
.swapshow__bar b { display: block; height: 100%; background: var(--fire-run); transform-origin: left; animation: swapshow-bar var(--swap-loop) linear infinite; }
.swapshow__ready { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; color: var(--c-heat); animation: swapshow-ready var(--swap-loop) linear infinite; }
.swapshow__ready .icon { width: 14px; height: 14px; }
.swapshow__photo {
  position: absolute;
  bottom: 4%;
  left: 0;
  z-index: 3;
  width: 42%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
  transform: rotate(-6deg);
  animation: swapshow-photo var(--swap-loop) ease-in-out infinite;
}
/* The character picture is full length: show him from the head down. */
.swapshow__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.swapshow__scan {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(255, 74, 28, 0.35) 55%, rgba(255, 150, 70, 0.95) 98%, #fff);
  mix-blend-mode: screen;
  animation: swapshow-scan var(--swap-loop) linear infinite;
}
.swapshow__tag { position: absolute; bottom: 6px; left: 6px; padding: 0.2rem 0.4rem; background: rgba(5, 5, 5, 0.82); font: 500 0.56rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.swapshow__spark {
  position: absolute;
  top: 70%;
  left: 21%;
  z-index: 4;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, var(--c-heat) 42%, transparent 70%);
  box-shadow: 0 0 20px 8px rgba(255, 120, 40, 0.55);
  opacity: 0;
  animation: swapshow-spark var(--swap-loop) ease-in-out infinite;
}
.swapshow__steps { display: flex; gap: var(--s-3); margin-top: var(--s-5); font: 500 0.64rem/1.3 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-faint); }
.swapshow__steps li { flex: 1; padding-top: 0.6rem; border-top: 2px solid var(--c-line); }
.swapshow__steps b { margin-right: 0.3rem; font-weight: 500; }
.swapshow__steps li:nth-child(1) { animation: swapshow-step1 var(--swap-loop) linear infinite; }
.swapshow__steps li:nth-child(2) { animation: swapshow-step2 var(--swap-loop) linear infinite; }
.swapshow__steps li:nth-child(3) { animation: swapshow-step3 var(--swap-loop) linear infinite; }

@keyframes swapshow-pick {
  0% { transform: scale(0.96); box-shadow: 0 0 0 6px #121214, 0 30px 80px rgba(0, 0, 0, 0.65); }
  8%, 30% { transform: scale(1); box-shadow: 0 0 0 6px #121214, 0 0 0 8px var(--c-ember), 0 30px 80px rgba(0, 0, 0, 0.65); }
  36%, 100% { transform: scale(1); box-shadow: 0 0 0 6px #121214, 0 30px 80px rgba(0, 0, 0, 0.65); }
}
@keyframes swapshow-picked { 0%, 5% { opacity: 0; transform: scale(0.3); } 10%, 30% { opacity: 1; transform: scale(1); } 35%, 100% { opacity: 0; transform: scale(0.3); } }
@keyframes swapshow-photo {
  0%, 30% { opacity: 0; transform: translate(-20%, 10%) rotate(-14deg); }
  38%, 90% { opacity: 1; transform: rotate(-6deg); }
  100% { opacity: 0; transform: translate(-8%, 4%) rotate(-9deg); }
}
@keyframes swapshow-scan { 0%, 38% { opacity: 0; transform: translateY(-100%); } 40% { opacity: 1; } 54% { opacity: 1; transform: translateY(420%); } 56%, 100% { opacity: 0; transform: translateY(420%); } }
@keyframes swapshow-spark {
  0%, 54% { opacity: 0; top: 70%; left: 21%; transform: scale(0.6); }
  56% { opacity: 1; top: 70%; left: 21%; transform: scale(1); }
  61% { top: 40%; left: 46%; transform: scale(1.3); }
  66% { opacity: 1; top: 28%; left: 70%; transform: scale(1); }
  68%, 100% { opacity: 0; top: 28%; left: 70%; transform: scale(0.4); }
}
@keyframes swapshow-flash { 0%, 64% { opacity: 0; } 66% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes swapshow-status { 0%, 66% { opacity: 0; transform: translateY(10px); } 70%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes swapshow-bar { 0%, 69% { transform: scaleX(0); } 86%, 100% { transform: scaleX(1); } }
@keyframes swapshow-making { 0%, 86% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes swapshow-ready { 0%, 87% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes swapshow-step1 { 0%, 31% { color: var(--c-text); border-top-color: var(--c-ember); } 34%, 100% { color: var(--c-text-faint); border-top-color: var(--c-line); } }
@keyframes swapshow-step2 { 0%, 32% { color: var(--c-text-faint); border-top-color: var(--c-line); } 35%, 64% { color: var(--c-text); border-top-color: var(--c-ember); } 67%, 100% { color: var(--c-text-faint); border-top-color: var(--c-line); } }
@keyframes swapshow-step3 { 0%, 65% { color: var(--c-text-faint); border-top-color: var(--c-line); } 68%, 97% { color: var(--c-text); border-top-color: var(--c-ember); } 100% { color: var(--c-text-faint); border-top-color: var(--c-line); } }

/* Less motion asked for: the finished picture, standing still. */
@media (prefers-reduced-motion: reduce) {
  .swapshow *,
  .swapshow__steps li { animation: none !important; }
  .swapshow__picked,
  .swapshow__spark,
  .swapshow__scan,
  .swapshow__making { display: none; }
  .swapshow__photo,
  .swapshow__status,
  .swapshow__ready { opacity: 1; }
  .swapshow__steps li { color: var(--c-text); border-top-color: var(--c-ember); }
}

/* The order page while their video waits or is being made
   (oss_swap_live_show()): the same stage, made of their own photo and the
   video they picked, on a loop that never says "ready", because it is not
   yet. Their photo is read top to bottom, a spark carries it into the video,
   the video flares where it lands, and a band of light passes over it. In
   line, the same thing at a calmer pace. */
.swapshow--live { --swap-loop: 3.6s; }
.swapshow--queued { --swap-loop: 5.4s; }
.swapshow--live .swapshow__phone { animation: swapshow-live-glow var(--swap-loop) ease-in-out infinite; }
.swapshow--live .swapshow__phone::after { animation: swapshow-live-flash var(--swap-loop) ease-out infinite; }
.swapshow--live .swapshow__photo { animation: swapshow-live-float calc(var(--swap-loop) * 2) ease-in-out infinite; }
/* A face photo, not a full-length picture: keep the face in frame. */
.swapshow--live .swapshow__photo img { object-position: 50% 30%; }
.swapshow--live .swapshow__scan { animation: swapshow-live-scan var(--swap-loop) linear infinite; }
.swapshow--live .swapshow__spark { animation: swapshow-live-spark var(--swap-loop) ease-in-out infinite; }
.swapshow--live .swapshow__status { opacity: 1; animation: none; }
.swapshow--live .swapshow__making { animation: none; color: var(--c-text); }
.swapshow--live .swapshow__making::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.5em 0.1em 0;
  border-radius: 50%;
  background: var(--c-heat);
  vertical-align: middle;
  animation: swapshow-live-dot 1.2s ease-in-out infinite;
}
.swapshow--live .swapshow__bar b { width: 40%; animation: swapshow-live-bar 1.6s ease-in-out infinite; }
.swapshow--queued .swapshow__bar b { animation-duration: 2.8s; }
.swapshow__shimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 150, 70, 0.16) 46%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 150, 70, 0.16) 54%, transparent 62%) 100% 0 / 250% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: swapshow-live-shimmer var(--swap-loop) linear infinite;
}

@keyframes swapshow-live-scan { 0% { opacity: 0; transform: translateY(-100%); } 4% { opacity: 1; } 38% { opacity: 1; transform: translateY(420%); } 40%, 100% { opacity: 0; transform: translateY(420%); } }
@keyframes swapshow-live-spark {
  0%, 38% { opacity: 0; top: 70%; left: 21%; transform: scale(0.6); }
  40% { opacity: 1; top: 70%; left: 21%; transform: scale(1); }
  50% { top: 40%; left: 46%; transform: scale(1.3); }
  60% { opacity: 1; top: 28%; left: 70%; transform: scale(1); }
  63%, 100% { opacity: 0; top: 28%; left: 70%; transform: scale(0.4); }
}
@keyframes swapshow-live-flash { 0%, 59% { opacity: 0; } 63% { opacity: 0.85; } 82%, 100% { opacity: 0; } }
@keyframes swapshow-live-glow {
  0%, 58%, 100% { box-shadow: 0 0 0 6px #121214, 0 30px 80px rgba(0, 0, 0, 0.65); }
  64% { box-shadow: 0 0 0 6px #121214, 0 0 0 8px var(--c-ember), 0 0 60px rgba(255, 90, 30, 0.45), 0 30px 80px rgba(0, 0, 0, 0.65); }
}
@keyframes swapshow-live-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4.5deg) translateY(-4%); } }
@keyframes swapshow-live-shimmer { 0%, 60% { background-position: 100% 0; } 96%, 100% { background-position: 0% 0; } }
@keyframes swapshow-live-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes swapshow-live-dot { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* On their order page the words come first, and the animation is a little
   smaller so what is under it is not pushed far down on a phone. */
.design-hero .swaphero .t-h1 { font-size: clamp(2.8rem, 1rem + 6vw, 5.6rem); }
@media (min-width: 62rem) { .design-hero .swaphero .t-h1 { font-size: clamp(3rem, 0.5rem + 4.4vw, 5.6rem); } }
.design-hero .swapshow--live { width: min(100%, 21rem); }
@media (max-width: 61.99rem) {
  .design-hero .swaphero { gap: var(--s-6); }
  .design-hero .swapshow--live { width: min(82%, 18rem); }
}

@media (prefers-reduced-motion: reduce) {
  .swapshow--live .swapshow__making { display: block; }
  .swapshow--live .swapshow__bar,
  .swapshow__shimmer { display: none; }
}

/* The two ways to buy, with their prices, at the top of the page. Side by
   side on a wide screen, stacked on a phone. */
.swapoffers { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); max-width: 46rem; margin-top: var(--s-6); }
.swapoffer {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-line-strong);
  background: rgba(12, 12, 13, 0.82);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.swapoffer--main { border-color: var(--c-ember); box-shadow: inset 0 0 0 1px var(--c-ember); }
.swapoffer:hover,
.swapoffer:focus-visible { border-color: var(--c-ember); transform: translateY(-2px); }
.swapoffer__price { font: var(--fw-display) clamp(2.4rem, 2rem + 2vw, 3.2rem)/1 var(--font-display); letter-spacing: 0.01em; background: var(--fire-run); -webkit-background-clip: text; background-clip: text; color: transparent; }
.swapoffer__name { font: var(--fw-display) 1.5rem/1.05 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.swapoffer__what { color: var(--c-text-muted); font-size: 0.95rem; line-height: 1.45; }
.swapoffer__go { align-self: flex-start; margin-top: auto; }
.swapoffer__what + .swapoffer__go { margin-top: var(--s-3); }
/* A phone: still side by side, so both prices are on the first screen. */
@media (max-width: 34rem) {
  .swapoffers { grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); }
  .swapoffer { padding: var(--s-4) var(--s-3); gap: var(--s-1, 0.25rem); }
  .swapoffer__price { font-size: 2.1rem; }
  .swapoffer__name { font-size: 1.05rem; }
  .swapoffer__what { display: none; }
  .swapoffer__go { align-self: stretch; justify-content: center; margin-top: var(--s-3); padding-inline: var(--s-2); font-size: 0.72rem; }
}
/* Advanced, made by hand: the whole width under the two, a slow light
   crossing it now and then. */
.swapoffer--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--s-5);
  row-gap: var(--s-1, 0.25rem);
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--c-ember) 55%, var(--c-line-strong));
}
.swapoffer--wide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--c-ember) 16%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: swapoffer-sheen 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes swapoffer-sheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.swapoffer--wide .swapoffer__price { grid-row: 1 / span 2; }
.swapoffer--wide .swapoffer__name { align-self: end; }
.swapoffer--wide .swapoffer__what { align-self: start; }
.swapoffer--wide .swapoffer__go,
.swapoffer--wide .swapoffer__what + .swapoffer__go { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
@media (max-width: 34rem) {
  .swapoffer--wide { grid-template-columns: auto 1fr; column-gap: var(--s-3); }
  .swapoffer--wide .swapoffer__price { grid-row: auto; }
  .swapoffer--wide .swapoffer__name { align-self: center; }
  .swapoffer--wide .swapoffer__go,
  .swapoffer--wide .swapoffer__what + .swapoffer__go { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s-2); }
}
/* Ordering their own video: "How do you want it made?" as two cards, Basic
   then Advanced under it, Advanced lit like its box at the top of the page. */
.swaplevel .intake__options { display: grid; gap: var(--s-2); }
.swaplevel .intake__option span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: var(--s-4);
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.swaplevel .intake__option input:checked + span { border-color: var(--c-ember); box-shadow: inset 0 0 0 1px var(--c-ember); background: var(--c-surface-2); color: var(--c-text); }
.swaplevel__name { font: var(--fw-display) 1.3rem/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.swaplevel__what { font: 500 0.72rem/1.35 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }
.swaplevel__option--advanced span { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--c-ember) 45%, var(--c-line-strong)); }
.swaplevel__option--advanced span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--c-ember) 14%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: swapoffer-sheen 5s ease-in-out infinite;
  pointer-events: none;
}
.swaplevel__option--advanced .swaplevel__name { background: var(--fire-run); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (prefers-reduced-motion: reduce) { .swapoffer { transition: none; } .swapoffer:hover, .swapoffer:focus-visible { transform: none; } .swapoffer--wide::after, .swaplevel__option--advanced span::after { animation: none; display: none; } }

/* The templates. Phone-shaped, because that is where they get posted. */
.swapgrid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.swapcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--c-line-strong); background: var(--c-surface); }
.swapcard__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--c-surface-2); }
.swapcard__media video,
.swapcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A wide video (a crowd scene) in a phone-shaped box: the whole picture in
   the middle, over a blurred, darkened copy of its cover, never cut down to
   the person in the middle. */
.swapcard__media--wide video { z-index: 1; object-fit: contain; }
.swapcard__media--wide::before,
.swappick__frame::before {
  content: '';
  position: absolute;
  inset: -12%;
  background: var(--swap-backdrop, none) center / cover no-repeat;
  filter: blur(18px) brightness(0.42) saturate(1.15);
}
.swappick__frame { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: #000; }
.swappick__frame .swappick__video { position: relative; z-index: 1; height: 100%; object-fit: contain; background: transparent; }
.swapcard__play {
  position: absolute;
  z-index: 2;
  right: var(--s-3);
  bottom: var(--s-3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line-strong);
  background: rgba(5, 5, 5, 0.72);
  color: var(--c-text);
  cursor: pointer;
}
.swapcard__play:hover,
.swapcard__play:focus-visible { background: var(--c-text); color: var(--c-text-invert); }
.swapcard__play .icon--pause { display: none; }
.swapcard.is-playing .swapcard__play .icon--play { display: none; }
.swapcard.is-playing .swapcard__play .icon--pause { display: block; }
.swapcard__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
/* In each photo question of a video with more than one person: the person
   in the video this face goes on. */
.swapperson { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 var(--s-3); }
.swapperson[hidden] { display: none; }
.swapperson img { flex: none; width: 4.5rem; height: 4.5rem; object-fit: cover; object-position: 50% 25%; border: 1px solid var(--c-ember); background: var(--c-surface-2); }
.swapperson figcaption { color: var(--c-text-muted); font: 500 var(--t-micro)/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
/* A video with more than one person in it: it needs a photo of each. */
.swapcard__people {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--c-ember);
  background: rgba(5, 5, 5, 0.82);
  color: var(--c-text);
  font: 500 var(--t-micro)/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.swapcard__title { font: var(--fw-display) 1.5rem/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.swapcard__draft { font: 500 var(--t-micro)/1.4 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-warning); }

/* Home's band: the first few, and the way to the rest. */
.swapband__more { margin-top: var(--s-6); }

/* "Which video?" when ordering: each answer is its video (assets/js/faceswap.js
   puts them there), and the one that is picked burns. */
.swappick { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--s-3); }
.swappick__option { display: flex; flex-direction: column; border: 1px solid var(--c-line-strong); background: var(--c-surface-2); }
.swappick__video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.swappick__option span { justify-content: center; width: 100%; min-height: 2.5rem; padding: var(--s-2); border: 0; border-top: 1px solid var(--c-line); border-radius: 0; text-align: center; }
.swappick__option.is-picked { border-color: var(--c-ember); box-shadow: 0 0 0 1px var(--c-ember); }
.swappick__option.is-picked::after {
  content: "✓";
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-ember);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
/* Came from "Use this video", with plenty to choose from: only that one shows,
   and a button opens the rest. */
.swappick--one { grid-template-columns: minmax(0, 11rem); }
.swappick--one .swappick__option:not(.is-picked) { display: none; }
.swappick__change { margin-top: var(--s-3); }
/* A video with no name of its own: its number is kept for screen readers only. */
.swappick__option--unnamed span { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Your own video. */
.swapown { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 860px) {
  .swapown { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.swapown .t-lead { max-width: 46ch; }
.swapown__buy { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--c-line-strong); background: var(--c-surface); box-shadow: inset 0 2px 0 var(--c-ember); }

.swaprules { margin: 0; padding-left: 1.2em; color: var(--c-text-muted); font-size: var(--t-small); line-height: 1.6; }
.swaprules li + li { margin-top: var(--s-1); }


/* ==========================================================================
   02. THE PHOTO GUIDE
   Each picture is a drawing (oss_swap_guide_art()) until a real photo is
   chosen for it in the settings; both fill the same 4:5 frame. Green tick for
   the one that works, a cross for the rest.
   ========================================================================== */

.swapguide__tiles { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.swapguide__tile { display: flex; flex-direction: column; gap: var(--s-2); }
.swapguide__art { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--c-line-strong); background: var(--c-surface-2); }
.swapguide__tile--ok .swapguide__art { border-color: var(--c-success); box-shadow: inset 0 0 0 1px var(--c-success); }
.swapguide__svg,
.swapguide__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.swapguide__mark {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-blood);
  color: #fff;
}
.swapguide__mark .icon { width: 14px; height: 14px; }
.swapguide__tile--ok .swapguide__mark { background: var(--c-success); color: var(--c-text-invert); }
.swapguide__label { font: 500 var(--t-micro)/1.35 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text); }
.swapguide__tile--ok .swapguide__label { color: var(--c-success); }
.swapguide__text { font-size: var(--t-small); line-height: 1.5; color: var(--c-text-muted); }

/* The drawing: a head and shoulders in a lit room. */
.sg-bg    { fill: #5b534a; }
.sg-floor { fill: #3a342e; }
.sg-skin  { fill: #cfa987; }
.sg-hair  { fill: #2a201a; }
.sg-body  { fill: #96897a; }
.sg-ink   { fill: #1b1512; }
.sg-line  { fill: none; stroke: #1b1512; stroke-width: 2.6; stroke-linecap: round; }
.sg-shade { fill: #000; opacity: 0.82; }

/* The small one, inside a form: more to a row, names only. */
.swapguide--compact { margin: var(--s-3) 0 var(--s-4); }
.swapguide--compact .swapguide__lead { margin: 0 0 var(--s-3); color: var(--c-text-muted); }
.swapguide--compact .swapguide__tiles { gap: var(--s-3) var(--s-2); grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); }
.swapguide--compact .swapguide__mark { top: 4px; right: 4px; width: 20px; height: 20px; }
.swapguide--compact .swapguide__mark .icon { width: 11px; height: 11px; }
.swapguide--compact .swapguide__label { font-size: 0.625rem; letter-spacing: 0.08em; }


/* ==========================================================================
   02b. YOUR OUTFIT (inc/faceswap-look.php)
   ========================================================================== */

/* Your outfits, on the Face Swap page and to tap when ordering. */
.swapfits { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); margin-top: var(--s-6); }
.swapfit { display: flex; flex-direction: column; border: 1px solid var(--c-line-strong); background: var(--c-surface); }
.swapfit__pic { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--c-surface-2); }
.swapfit__name { padding: var(--s-3); font: var(--fw-display) 1.05rem/1.1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.swapfit-ways { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: var(--s-6); }
.swapfit-ways li { padding: var(--s-4); border: 1px solid var(--c-line); color: var(--c-text-muted); }
.swapfit-ways b { display: block; margin-bottom: var(--s-1, 0.25rem); font: var(--fw-display) 1.15rem/1.1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; color: var(--c-text); }
.swaplook-note { max-width: 62ch; margin: var(--s-5) 0 0; color: var(--c-text-muted); }

/* When ordering: the outfits as photos to tap (the script makes them so). */
.swapfit__grid { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.swapfit__option .swapfit__pic { border-bottom: 1px solid var(--c-line); }

/* ==========================================================================
   03. THE ORDER PAGE
   ========================================================================== */

/* Order received, generating, download. */
.dsteps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 36rem; }

.swapwait { position: relative; padding-left: calc(var(--s-6) + 56px); min-height: 104px; }
.swapwait--failed,
.swapwait--queued,
.swapwait--fix,
.swapwait--refund { padding-left: var(--s-6); min-height: 0; border-left: 2px solid var(--c-warning); }

/* Sending a different photo, and asking for a refund instead. */
.swapfix .t-small { color: var(--c-text-muted); }
.swapfix [type="submit"][disabled] { opacity: 0.6; cursor: progress; }
.swaprefund { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.swaprefund .t-small { margin: 0; color: var(--c-text-muted); }
.swapwait__spinner {
  position: absolute;
  left: var(--s-5);
  top: var(--s-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 22%, var(--c-heat), var(--c-ember) 70%, var(--c-blood));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: swapwait-turn 1.1s linear infinite;
}
@keyframes swapwait-turn { to { transform: rotate(1turn); } }
.swapwait__clock { margin: var(--s-3) 0 0; }

/* The ring holds still for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .swapwait__spinner { animation: none; }
}

/* The finished video: never wider than it is comfortable to watch. */
.swapwatch { max-width: 30rem; }
.swapwatch video { max-height: 80vh; background: #000; }

.swapnext { box-shadow: inset 0 2px 0 var(--c-ember); }