/* rent-find-variants/v6-home — CENTREPIECE: an empty room that furnishes itself. One by
 * one the things a person actually said mattered — light, quiet, a desk by the window,
 * somewhere for the plants — drop into the shell, and the last thing to land is the word
 * "home". This is the campaign's closing line rendered as a picture, so it is the one
 * centrepiece with no numbers in it at all.
 *
 * Deliberately ALL CSS: keyframes with staggered delays and a reduced-motion block that
 * paints the finished room. That means the variant ships no JavaScript of its own and
 * cannot get the reduced-motion branch wrong. Loaded after base.css, common.css, sections.css. */
.room{position:relative;height:240px;border-radius:15px;overflow:hidden;
  background:linear-gradient(180deg,#191922 0%,#191922 62%,#12121a 62%,#0e0e15 100%);
  border:1px solid rgba(255,255,255,.09)}
/* the wall/floor seam, and the light that arrives with the window */
.room::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 74% 30%,rgba(255,204,0,.18),transparent 58%);
  opacity:0;animation:lite .9s ease 2.2s forwards}
@keyframes lite{to{opacity:1}}

.thing{position:absolute;opacity:0;transform:translateY(14px) scale(.9);
  animation:drop .55s cubic-bezier(.34,1.3,.5,1) forwards}
@keyframes drop{to{opacity:1;transform:none}}
/* window */
.win2{right:26px;top:24px;width:92px;height:74px;border-radius:8px;border:2px solid rgba(255,255,255,.3);
  background:linear-gradient(180deg,rgba(255,204,0,.28),rgba(65,131,242,.18));animation-delay:2s}
.win2::before,.win2::after{content:"";position:absolute;background:rgba(255,255,255,.3)}
.win2::before{left:50%;top:0;bottom:0;width:2px;margin-left:-1px}
.win2::after{top:50%;left:0;right:0;height:2px;margin-top:-1px}
/* desk under the window */
.desk{right:22px;bottom:50px;width:104px;height:9px;border-radius:3px;background:#8a6a45;animation-delay:2.6s}
.desk::before,.desk::after{content:"";position:absolute;top:9px;width:6px;height:26px;background:#6f5537}
.desk::before{left:6px}.desk::after{right:6px}
/* sofa */
.sofa2{left:44px;bottom:46px;width:118px;height:40px;border-radius:10px 10px 6px 6px;background:#3d4a63;animation-delay:1.4s}
.sofa2::before{content:"";position:absolute;left:6px;right:6px;top:-13px;height:18px;border-radius:8px;background:#4a5a78}
/* rug */
.rug{left:58px;bottom:16px;width:148px;height:22px;border-radius:9999px;
  background:linear-gradient(90deg,rgba(255,204,0,.35),rgba(255,204,0,.12));animation-delay:1s}
/* lamp */
.lamp{left:176px;bottom:46px;width:6px;height:66px;background:#5a5a66;animation-delay:1.8s}
.lamp::before{content:"";position:absolute;left:-15px;top:-20px;width:36px;height:22px;border-radius:5px 5px 12px 12px;
  background:var(--ys);box-shadow:0 12px 34px rgba(255,204,0,.5)}
/* plants */
.plant2{left:10px;bottom:42px;width:22px;height:28px;border-radius:4px 4px 8px 8px;background:#6b5138;animation-delay:3.2s}
.plant2::before{content:"";position:absolute;left:-10px;bottom:24px;width:42px;height:40px;border-radius:50% 50% 40% 40%;background:#2f7d4f}
/* the last thing to land */
.stamp2{position:absolute;left:20px;top:18px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--ys);padding:6px 14px;border-radius:9999px;
  opacity:0;transform:rotate(-3deg) scale(.7);animation:land .6s cubic-bezier(.34,1.5,.5,1) 3.9s forwards}
@keyframes land{to{opacity:1;transform:rotate(-3deg) scale(1)}}

/* what each thing stood for, ticking on in the same order the room fills */
.wants{display:grid;gap:8px;margin-top:20px}
.want{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:15px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13px;
  opacity:0;transform:translateY(8px);animation:drop .45s ease forwards}
.want:nth-child(1){animation-delay:1.1s}.want:nth-child(2){animation-delay:1.9s}
.want:nth-child(3){animation-delay:2.7s}.want:nth-child(4){animation-delay:3.4s}
.want .tick{width:22px;height:22px;border-radius:9999px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;color:var(--ink);background:var(--ys)}
.want .said{margin-left:auto;font-size:11px;color:rgba(255,255,255,.45);font-style:italic}

@media(prefers-reduced-motion:reduce){
  /* No assembly — the finished room, which is the content. */
  .thing,.want,.stamp2,.room::after{animation:none;opacity:1;transform:none}
  .stamp2{transform:rotate(-3deg)}
}

/* The room is an absolutely-positioned scene, so on a ~285px-wide card the pieces laid
   out for a 440px one start sitting on top of each other — the desk lands on the sofa and
   the lamp stands in the middle of it. Re-place them rather than scaling the whole room,
   which would blur the stamp's text. */
@media(max-width:768px){
  .room{height:210px}
  .win2{right:14px;top:20px;width:76px;height:62px}
  .desk{right:12px;bottom:44px;width:84px}
  .sofa2{left:30px;bottom:42px;width:92px;height:34px}
  .lamp{left:134px;bottom:42px;height:58px}
  .rug{left:40px;bottom:14px;width:112px}
  .plant2{left:6px;bottom:38px}
  .stamp2{left:14px;top:14px;font-size:11px;padding:5px 11px}
}