/* Ported from the reference closet animation. Keyframes and the 21.18s loop are unchanged. */
.im-tank{background:url("/design-handoff/assets/side-quest/tank2.png") center/100% 100% no-repeat}.im-belt{background:url("/design-handoff/assets/side-quest/belt2.png") center/100% 100% no-repeat}.im-jeans{background:url("/design-handoff/assets/side-quest/jeans2.png") center/100% 100% no-repeat}.im-shoes{background:url("/design-handoff/assets/side-quest/shoes2.png") center/100% 100% no-repeat}.im-person{background:url("/design-handoff/assets/side-quest/person2.png") center/100% 100% no-repeat}
.k{animation-duration:21.18s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.3,1.25,.45,1)}
@property --rv{syntax:'<length>';inherits:false;initial-value:0px}
@property --sa{syntax:'<angle>';inherits:false;initial-value:0deg}
.sweep{-webkit-mask-image:conic-gradient(from var(--sa) at var(--sx) var(--sy), rgba(0,0,0,.12) 0deg, #000 50deg, rgba(0,0,0,.12) 110deg, rgba(0,0,0,.12) 180deg, #000 230deg, rgba(0,0,0,.12) 290deg);mask-image:conic-gradient(from var(--sa) at var(--sx) var(--sy), rgba(0,0,0,.12) 0deg, #000 50deg, rgba(0,0,0,.12) 110deg, rgba(0,0,0,.12) 180deg, #000 230deg, rgba(0,0,0,.12) 290deg);animation:sweep 1.4s linear infinite}
@keyframes sweep{to{--sa:360deg}}
.reveal{-webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--rv) - var(--fe)), transparent var(--rv));mask-image:radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--rv) - var(--fe)), transparent var(--rv))}
.ring{position:absolute;border-radius:999px;background:radial-gradient(circle, rgba(255,255,255,0) 52%, rgba(255,255,255,.55) 66%, rgba(255,255,255,0) 80%);pointer-events:none}
/* The ring outside the phone grows across the card and smears the purple dots. The one inside the phone stays. */
.snap .ring[style*="ringC"]{display:none}
.cut,.clean{transform-origin:50% 50%;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 10px 12px rgba(40,20,90,.3))}
.clean svg{display:block;width:100%;height:100%;overflow:visible}
.stk{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}.card:hover .stk{transform:rotate(2deg) scale(1.05) !important}
.burst{position:absolute;width:0;height:0;z-index:19}
.burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:999px;animation:spark 21.18s linear infinite both}
.shim{background:linear-gradient(90deg,rgba(62,35,19,.5) 0%,rgba(62,35,19,1) 50%,rgba(62,35,19,.5) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.2s linear infinite}
@media (prefers-reduced-motion:reduce){.sweep{animation:none}.k,.burst i{animation-play-state:paused !important;animation-delay:-18.2s !important}.shim{animation:none;color:#3E2313}}
@keyframes rw-tank{0%,38.15%{opacity:0;transform:none}41.12%{opacity:1;transform:none}47.40%{opacity:1;transform:none}50.71%{opacity:1;transform:none}54.01%{opacity:1;transform:translate(102.6px,-30.7px) scale(0.9)}56.66%{opacity:1;transform:translate(102.6px,-30.7px) scale(0.9)}58.64%,100.00%{opacity:0;transform:translate(102.6px,-30.7px) scale(0.9) scale(1.06)}}@keyframes ig-tank{0%,38.15%{opacity:0;transform:scale(1)}42.12%{opacity:1;transform:scale(1.03)}50.71%{opacity:1;transform:scale(1.03)}52.69%{opacity:0;transform:scale(1.06)}100.00%{opacity:0;transform:scale(1)}}@keyframes cl-tank{0%,56.66%{opacity:0;transform:scale(.8) rotate(-4deg)}58.97%{opacity:1;transform:scale(1.06) rotate(0deg)}59.96%{opacity:1;transform:none}63.93%{opacity:1;transform:none}68.56%{opacity:1;transform:translate(-219px,376px) scale(0.6)}94.71%{opacity:1;transform:translate(-219px,376px) scale(0.6)}98.02%,100.00%{opacity:0;transform:translate(-219px,376px) scale(0.6)}}@keyframes lb-tank{0%,52.69%{opacity:0;transform:translate(-54.67%,4px) scale(.8)}54.67%{opacity:1;transform:translate(-54.67%,0) scale(1)}63.27%{opacity:1;transform:translate(-54.67%,0)}64.59%,100.00%{opacity:0;transform:translate(-54.67%,0) scale(.9)}}@keyframes rw-belt{0%,41.12%{opacity:0;transform:none}44.10%{opacity:1;transform:none}48.39%{opacity:1;transform:none}51.70%{opacity:1;transform:none}55.00%{opacity:1;transform:translate(-101.0px,-4.7px) scale(1.0)}56.66%{opacity:1;transform:translate(-101.0px,-4.7px) scale(1.0)}58.64%,100.00%{opacity:0;transform:translate(-101.0px,-4.7px) scale(1.0) scale(1.06)}}@keyframes ig-belt{0%,41.12%{opacity:0;transform:scale(1)}45.09%{opacity:1;transform:scale(1.03)}51.70%{opacity:1;transform:scale(1.03)}53.68%{opacity:0;transform:scale(1.06)}100.00%{opacity:0;transform:scale(1)}}@keyframes cl-belt{0%,56.66%{opacity:0;transform:scale(.8) rotate(-4deg)}58.97%{opacity:1;transform:scale(1.06) rotate(0deg)}59.96%{opacity:1;transform:none}65.25%{opacity:1;transform:none}69.88%{opacity:1;transform:translate(59px,296px) scale(0.46)}94.71%{opacity:1;transform:translate(59px,296px) scale(0.46)}98.02%,100.00%{opacity:0;transform:translate(59px,296px) scale(0.46)}}@keyframes lb-belt{0%,53.68%{opacity:0;transform:translate(-54.67%,4px) scale(.8)}55.67%{opacity:1;transform:translate(-54.67%,0) scale(1)}64.59%{opacity:1;transform:translate(-54.67%,0)}65.91%,100.00%{opacity:0;transform:translate(-54.67%,0) scale(.9)}}@keyframes rw-jeans{0%,44.10%{opacity:0;transform:none}45.75%{opacity:1;transform:none}49.39%{opacity:1;transform:none}52.69%{opacity:1;transform:none}56.00%{opacity:1;transform:translate(-92.8px,9.8px) scale(0.55)}56.66%{opacity:1;transform:translate(-92.8px,9.8px) scale(0.55)}58.64%,100.00%{opacity:0;transform:translate(-92.8px,9.8px) scale(0.55) scale(1.06)}}@keyframes ig-jeans{0%,44.10%{opacity:0;transform:scale(1)}46.08%{opacity:1;transform:scale(1.03)}52.69%{opacity:1;transform:scale(1.03)}54.67%{opacity:0;transform:scale(1.06)}100.00%{opacity:0;transform:scale(1)}}@keyframes cl-jeans{0%,56.66%{opacity:0;transform:scale(.8) rotate(-4deg)}58.97%{opacity:1;transform:scale(1.06) rotate(0deg)}59.96%{opacity:1;transform:none}66.57%{opacity:1;transform:none}71.20%{opacity:1;transform:translate(137px,126px) scale(0.46)}94.71%{opacity:1;transform:translate(137px,126px) scale(0.46)}98.02%,100.00%{opacity:0;transform:translate(137px,126px) scale(0.46)}}@keyframes lb-jeans{0%,54.67%{opacity:0;transform:translate(-54.67%,4px) scale(.8)}56.66%{opacity:1;transform:translate(-54.67%,0) scale(1)}65.91%{opacity:1;transform:translate(-54.67%,0)}67.23%,100.00%{opacity:0;transform:translate(-54.67%,0) scale(.9)}}@keyframes rw-shoes{0%,45.75%{opacity:0;transform:none}46.74%{opacity:1;transform:none}50.38%{opacity:1;transform:none}53.68%{opacity:1;transform:none}56.99%{opacity:1;transform:translate(112.7px,-97.8px) scale(0.85)}56.66%{opacity:1;transform:translate(112.7px,-97.8px) scale(0.85)}58.64%,100.00%{opacity:0;transform:translate(112.7px,-97.8px) scale(0.85) scale(1.06)}}@keyframes ig-shoes{0%,45.75%{opacity:0;transform:scale(1)}47.07%{opacity:1;transform:scale(1.03)}53.68%{opacity:1;transform:scale(1.03)}55.67%{opacity:0;transform:scale(1.06)}100.00%{opacity:0;transform:scale(1)}}@keyframes cl-shoes{0%,56.66%{opacity:0;transform:scale(.8) rotate(-4deg)}58.97%{opacity:1;transform:scale(1.06) rotate(0deg)}59.96%{opacity:1;transform:none}67.89%{opacity:1;transform:none}72.52%{opacity:1;transform:translate(11px,76px) scale(0.48)}94.71%{opacity:1;transform:translate(11px,76px) scale(0.48)}98.02%,100.00%{opacity:0;transform:translate(11px,76px) scale(0.48)}}@keyframes lb-shoes{0%,55.67%{opacity:0;transform:translate(-54.67%,4px) scale(.8)}57.65%{opacity:1;transform:translate(-54.67%,0) scale(1)}67.23%{opacity:1;transform:translate(-54.67%,0)}68.56%,100.00%{opacity:0;transform:translate(-54.67%,0) scale(.9)}}
@keyframes phoneIn{0%,0.00%{opacity:0;transform:translateY(260px);animation-timing-function:cubic-bezier(.2,.8,.2,1)}0.00%{opacity:1;transform:translateY(0)}95.37%{opacity:1;transform:translateY(0);animation-timing-function:ease-in}100.00%{opacity:0;transform:translateY(260px)}}
@keyframes align{0%,15.31%{transform:scale(1);animation-timing-function:cubic-bezier(.3,0,.3,1)}15.90%{transform:scale(1.045);animation-timing-function:cubic-bezier(.3,0,.3,1)}16.83%,100.00%{transform:scale(1)}}
@keyframes brackets{0%,15.77%{opacity:1}17.09%,97.36%{opacity:0}99.34%,100.00%{opacity:1}}
@keyframes shutter{0%,15.37%{transform:scale(1)}15.77%{transform:scale(.8)}16.76%,100.00%{transform:scale(1)}}
@keyframes shutterHide{0%,17.09%{opacity:1}28.23%,97.36%{opacity:0}99.34%,100.00%{opacity:1}}
@keyframes flash{0%,15.70%{opacity:0}16.03%{opacity:.92}18.08%,100.00%{opacity:0}}
@keyframes glow{0%,16.17%{opacity:0;transform:scale(1)}17.36%{opacity:1;transform:scale(1.06)}40.13%{opacity:.9;transform:scale(1.07)}45.75%{opacity:0;transform:scale(1.08)}100.00%{opacity:0;transform:scale(1)}}
@keyframes glow3{0%,16.17%{opacity:0;transform:scale(1)}17.22%{opacity:1;transform:scale(1.03)}40.13%{opacity:.95;transform:scale(1.035)}45.75%{opacity:0;transform:scale(1.04)}100.00%{opacity:0;transform:scale(1)}}
@keyframes glow2{0%,16.17%{opacity:0;transform:scale(1)}17.09%{opacity:1;transform:scale(1.016)}40.13%{opacity:1;transform:scale(1.018)}45.42%{opacity:0;transform:scale(1.02)}100.00%{opacity:0;transform:scale(1)}}
@keyframes revealS{0%,27.24%{--rv:0px;opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}45.09%{--rv:1603px;opacity:1}96.50%{--rv:1603px;opacity:1}97.40%{--rv:1603px;opacity:0}98.15%,100.00%{--rv:0px;opacity:0}}
@keyframes revealC{0%,27.24%{--rv:0px;opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}45.09%{--rv:1250px;opacity:1}96.50%{--rv:1250px;opacity:1}97.40%{--rv:1250px;opacity:0}98.15%,100.00%{--rv:0px;opacity:0}}
/* Full-card purple. Same clock as revealC, but the circle is big enough to cover a wide hero, not just the phone stage. */
@keyframes revealCard{0%,27.24%{--rv:0px;opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}45.09%{--rv:3200px;opacity:1}96.50%{--rv:3200px;opacity:1}97.40%{--rv:3200px;opacity:0}98.15%,100.00%{--rv:0px;opacity:0}}
@keyframes ringS{0%,27.24%{opacity:1;transform:scale(0);animation-timing-function:cubic-bezier(.45,0,.25,1)}44.10%,100.00%{opacity:0;transform:scale(11)}}
@keyframes ringC{0%,27.24%{opacity:1;transform:scale(0);animation-timing-function:cubic-bezier(.45,0,.25,1)}44.10%,100.00%{opacity:0;transform:scale(11)}}
/* The words change with the purple: white only once the solid purple has reached the button, and dark again the moment that purple starts to leave. */
@keyframes inkH{0%,34.70%{color:#171A33}35.30%,96.50%{color:#FFFFFF}96.80%,100.00%{color:#171A33}}
@keyframes inkE{0%,34.70%{color:rgba(23,26,51,.55)}35.30%,96.50%{color:rgba(255,255,255,.72)}96.80%,100.00%{color:rgba(23,26,51,.55)}}
@keyframes inkL{0%,34.70%{color:#26419C}35.30%,96.50%{color:#E4DEFF}96.80%,100.00%{color:#26419C}}
@keyframes inkB{0%,34.70%{background:#26419C;color:#FFFFFF}35.30%,96.50%{background:#FFFFFF;color:#171A33}96.80%,100.00%{background:#26419C;color:#FFFFFF}}
@keyframes personPop{0%,17.75%{filter:none}36.17%,94.71%{filter:drop-shadow(0 10px 16px rgba(40,20,90,.28))}98.02%,100.00%{filter:none}}
@keyframes status{0%,17.09%{opacity:0;transform:translate(-54.67%,-6px)}28.23%{opacity:1;transform:translate(-54.67%,0)}62.61%{opacity:1;transform:translate(-54.67%,0)}64.59%,100.00%{opacity:0;transform:translate(-54.67%,0)}}
@keyframes s1{0%,41.92%{opacity:1}42.12%,100.00%{opacity:0}}
@keyframes s2{0%,41.92%{opacity:0}42.12%,54.61%{opacity:1}54.67%,100.00%{opacity:0}}
@keyframes s3{0%,54.61%{opacity:0}54.67%,59.90%{opacity:1}59.96%,100.00%{opacity:0}}
@keyframes s4{0%,59.90%{opacity:0}59.96%,100.00%{opacity:1}}
@keyframes tray{0%,61.28%{transform:translateY(240px)}63.93%{transform:translateY(0)}94.71%{transform:translateY(0)}98.02%,100.00%{transform:translateY(240px)}}
@keyframes closetTab{0%,62.61%{background:transparent;color:rgba(62,35,19,.5)}64.59%,100.00%{background:#26419C;color:#FFFFFF}}
@keyframes toast{0%,73.18%{opacity:0;transform:translate(-54.67%,8px) scale(.9)}75.17%{opacity:1;transform:translate(-54.67%,0) scale(1)}94.71%{opacity:1;transform:translate(-54.67%,0) scale(1)}96.69%,100.00%{opacity:0;transform:translate(-54.67%,0) scale(1)}}
@keyframes spark{0%,57.65%{opacity:0;transform:translate(0,0) scale(.4)}58.31%{opacity:1}60.62%,100.00%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
@keyframes shimmer{to{background-position:-200% 0}}



/* The artwork stays 852 by 776 and is scaled to fit its box.
   The photo fades to white at its own edges. The card continues the
   lightest edge color (#F6F6F8) and a soft blur of the photo instead. */
.snap{position:absolute;inset:0;background:#F6F6F8;overflow:hidden;container-type:size;contain:paint}
.snap::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:0;
  pointer-events:none;
  /* The bedroom itself is painted on the stage, in the same place as the phone.
     This layer is only the light color the photo already fades into, so a wide
     hero doesn't show a second, zoomed copy with a hard seam. */
  background:#F6F5F4;
}
.k.kicker,.k.quest-title,.k.quest-meta,.k.cta{animation-timing-function:linear}
.snap-fit{position:absolute;left:50%;top:0;width:852px;height:776px;z-index:2;transform-origin:top center;transform:translateX(-50%) scale(min(calc(100cqw / 852px), calc(100cqh / 776px)))}
.snap-reveal{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Same dots and center glow as the shipped cards, on a brighter purple. */
  background-color:#8F6FFF;
  background-image:
    radial-gradient(closest-side at 50% 46%,rgba(255,255,255,.22),rgba(255,255,255,0)),
    radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:86% 86%,18px 18px;
  background-position:center 46%,0 0;
  background-repeat:no-repeat,repeat;
  animation-name:revealCard;
  animation-timing-function:linear;
  --cx:50%;
  --cy:50%;
  --fe:180px;
}
.snap-reveal > div{display:none}
.inner{position:absolute;inset:0;width:852px;height:776px}
.snap .stage{position:absolute;left:0;top:0;width:852px;height:776px}
.snap .stage.room{
  z-index:0;
  /* Percentages here are of the whole box, so 50% from the center is the edge.
     End the fade at 46% so the rectangle itself never draws a line. */
  -webkit-mask-image:radial-gradient(ellipse 48% 46% at 50% 52%, #000 78%, transparent 100%);
  mask-image:radial-gradient(ellipse 48% 46% at 50% 52%, #000 78%, transparent 100%);
}
/* The purple over the photo uses the same soft shape, crossed with the growing circle.
   A hard rectangle here is what read as a box in both color phases. */
.stage-wash{
  /* Only the growing circle. The fill matches the card purple, with no extra fade. */
  -webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--rv) - var(--fe)), transparent var(--rv));
  mask-image:radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--rv) - var(--fe)), transparent var(--rv));
}
/* One purple for the whole card: brighter than the navy cards, same dots and one soft center glow.
   No dark-to-light fade on a separate layer. */
.snap .reveal{
  background-color:#6A45FF !important;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px) !important;
  background-size:18px 18px !important;
  background-position:0 0 !important;
  background-repeat:repeat !important;
}
.snap .snap-reveal{
  background-image:
    radial-gradient(closest-side at 50% 46%,rgba(176,198,255,.34),rgba(176,198,255,0)),
    radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px) !important;
  background-size:86% 86%,18px 18px !important;
  background-position:center 46%,0 0 !important;
  background-repeat:no-repeat,repeat !important;
}
.card.quest .phone-stage div[style*="border-radius: 40px"]{
  background:#6A45FF !important;
}
.snap [style*="rgba(255,255,255,.55) 1.2px"]{display:none}
.snap .phone-stage{z-index:2}