/* LOOM Studio — "We build it together" (Step 3): the real delivery moment.
   The client's phone: they share only an idea + a name, LOOM replies with the
   live link, they tap it, and LilithMaison.com opens in Safari and scrolls.
   Auto-plays as a looping story; pauses off-screen; reduced-motion safe. */

/* retire the old PeachWeb screenshots wherever Framer mounts them */
img[src*="vxl"], img[src*="vexel"], #i6igp4t-2, #i6igp4t-2-2 { display:none !important; }

.loom-build{
  position:relative; width:100%;
  display:flex; justify-content:center; align-items:flex-end; padding-top:14px;
}
.loom-build__phone{
  position:relative; height:clamp(390px,46vw,540px); width:auto; aspect-ratio:430/932;
  border-radius:44px; padding:11px;
  background:linear-gradient(150deg,#26222e,#0b0a11 62%);
  box-shadow:0 2px 4px #000, 0 40px 92px -28px #5328ffaa, inset 0 0 0 1.6px #ffffff22;
}
.loom-build__island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:29%; height:19px; background:#000; border-radius:100px; z-index:40;
  box-shadow:inset 0 0 0 1px #ffffff08;
}
.loom-build__screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:31px; background:#0b141a;
}

/* iOS status bar — reused in both scenes; color set per scene */
.ios-sb{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5px 0 3px; height:14px;
}
.ios-sb__time{ font:600 13px/1 -apple-system,"SF Pro Text",Inter,Arial,sans-serif; letter-spacing:.3px; }
.ios-sb__ic{ display:flex; align-items:center; gap:5px; }
.ios-sb .sbi{ display:block; height:11px; width:auto; }
.ios-sb .sbi-bat{ height:12px; }
.ios-sb.is-light{ color:#fff; }
.ios-sb.is-dark{ color:#0b0b0d; }

/* generic SVG chrome icon */
.gi{ width:1em; height:1em; display:block; }

/* scenes */
.lb-scene{ position:absolute; inset:0; display:flex; flex-direction:column; }
.lb-scene--safari{
  transform:translateY(101%); transition:transform .6s cubic-bezier(.66,0,.2,1); z-index:20;
}
.loom-build.is-safari .lb-scene--safari{ transform:translateY(0); }

/* ───────────── WhatsApp ───────────── */
.wa{ height:100%; display:flex; flex-direction:column; background:#0b141a; }
.wa__bar{
  flex:0 0 auto; display:flex; flex-direction:column;
  padding:11px 12px 9px; background:#1f2c34; color:#e9edef;
}
.wa__row{ display:flex; align-items:center; gap:9px; margin-top:7px; }
.wa__back{ color:#7e57ff; display:flex; align-items:center; }
.wa__back .gi{ width:11px; height:18px; }
.wa__av{
  width:31px; height:31px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:grid; place-items:center; background:linear-gradient(135deg,#7c3aed,#ec4899);
  color:#fff; font:800 11px/1 Inter,sans-serif;
}
.wa__av img{ width:64%; height:64%; object-fit:contain; }
.wa__id{ display:flex; flex-direction:column; line-height:1.12; }
.wa__id b{ font:600 13px/1.2 Inter,Arial,sans-serif; }
.wa__id em{ font:400 10px/1.2 Inter,Arial,sans-serif; font-style:normal; color:#8696a0; }
.wa__icons{ margin-left:auto; display:flex; align-items:center; gap:15px; color:#cfd9de; }
.wa__icons .gi{ width:18px; height:18px; }

.wa__body{
  flex:1 1 auto; overflow:hidden; padding:10px 9px 11px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
  background:
    radial-gradient(120% 80% at 80% 0%, #11202a 0%, #0b141a 60%),
    #0b141a;
}
.wa__msg{
  max-width:82%; padding:6px 9px 17px; border-radius:9px; position:relative;
  font:400 12px/1.36 Inter,Arial,sans-serif; color:#e9edef;
  box-shadow:0 1px 1px #00000055; word-wrap:break-word;
  opacity:0; transform:translateY(9px) scale(.95);
  transition:opacity .26s ease, transform .3s cubic-bezier(.2,.85,.25,1);
}
.wa__msg.show{ opacity:1; transform:none; }
.wa__msg--out{ align-self:flex-end; background:#005c4b; border-bottom-right-radius:3px; }
.wa__msg--in { align-self:flex-start; background:#202c33; border-bottom-left-radius:3px; }
.wa__meta{
  position:absolute; right:8px; bottom:4px; display:flex; align-items:center; gap:3px;
  font:400 9px/1 Inter,sans-serif; color:#ffffff85; white-space:nowrap;
}
.wa__tick{ color:#53bdeb; font-size:11px; letter-spacing:-3px; padding-right:2px; }

/* typing bubble */
.wa__typing{
  align-self:flex-start; background:#202c33; border-radius:9px; padding:10px 12px;
  display:flex; gap:4px; opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s;
}
.wa__typing.show{ opacity:1; transform:none; }
.wa__typing i{ width:6px; height:6px; border-radius:50%; background:#8696a0; animation:wa-bounce 1.25s infinite; }
.wa__typing i:nth-child(2){ animation-delay:.18s; }
.wa__typing i:nth-child(3){ animation-delay:.36s; }
@keyframes wa-bounce{ 0%,62%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }

/* incoming link-preview message */
.wa__link{
  align-self:flex-start; width:84%; background:#202c33; border-radius:9px; overflow:hidden;
  cursor:pointer; opacity:0; transform:translateY(9px) scale(.95);
  transition:opacity .3s ease, transform .32s cubic-bezier(.2,.85,.25,1);
  box-shadow:0 1px 1px #00000055;
}
.wa__link.show{ opacity:1; transform:none; }
.wa__link__img{ width:100%; aspect-ratio:1200/630; object-fit:cover; display:block; background:#000; }
.wa__link__meta{ padding:7px 10px 2px; }
.wa__link__meta b{ display:block; font:600 11px/1.25 Inter,sans-serif; color:#e9edef; }
.wa__link__meta em{ font:400 10px/1.35 Inter,sans-serif; font-style:normal; color:#8696a0; display:block; margin-top:1px; }
.wa__link__meta u{ display:block; margin-top:3px; font:400 9px/1.4 Inter,sans-serif; color:#6b7c85; text-decoration:none; letter-spacing:.2px; }
.wa__link__url{
  position:relative; padding:7px 10px 16px; margin-top:3px;
  font:400 12px/1.3 Inter,sans-serif; color:#53bdeb; word-break:break-all;
}

/* tap ripple over the link */
.wa__tap{
  position:absolute; width:40px; height:40px; border-radius:50%; z-index:6; pointer-events:none;
  left:50%; top:62%; transform:translate(-50%,-50%) scale(.3); opacity:0;
  background:radial-gradient(circle,#ffffff66 0%,#ffffff00 70%); border:2px solid #ffffffcc;
}
.wa__tap.go{ animation:wa-tap .72s ease-out; }
@keyframes wa-tap{ 0%{ opacity:.95; transform:translate(-50%,-50%) scale(.3);} 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.7);} }

/* ───────────── Safari (full-bleed: site fills the whole phone screen) ───────────── */
.sf{ position:absolute; inset:0; background:#000; }
.sf__view{ position:absolute; inset:0; overflow:hidden; background:#0a0710; }
.sf__view video, .sf__view img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Safari chrome floats over the site, like real mobile Safari */
.sf__top{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; flex-direction:column; padding:11px 11px 9px;
  background:linear-gradient(#f4f4f6f7,#f4f4f6f0 58%,#f4f4f600);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sf__row{ display:flex; align-items:center; gap:9px; margin-top:6px; }
.sf__btn{ color:#0a84ff; flex:0 0 auto; display:flex; align-items:center; }
.sf__btn .gi{ width:15px; height:15px; }
.sf__btn--back .gi{ width:12px; height:18px; }
.sf__addr{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; height:32px;
  border-radius:10px; background:#ffffffe6; color:#1c1c1e;
  font:500 12.5px/1 -apple-system,Inter,sans-serif; overflow:hidden; white-space:nowrap;
  box-shadow:0 1px 3px #0000001f;
}
.sf__lock{ color:#3a3a3c; display:flex; align-items:center; }
.sf__lock .lk{ width:9px; height:10px; }
.sf__bar{ position:absolute; left:0; bottom:0; height:2.5px; width:0; background:#0a84ff; }
.sf__bottom{
  position:absolute; bottom:0; left:0; right:0; z-index:5; height:46px;
  display:flex; align-items:center; justify-content:space-around; color:#0a84ff;
  background:linear-gradient(to top,#f4f4f6f2,#f4f4f6e0 55%,#f4f4f600);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sf__bottom .bi{ width:20px; height:20px; }

@media (prefers-reduced-motion: reduce){
  .lb-scene--safari{ transition:none; }
  .wa__msg, .wa__link, .wa__typing{ transition:none; }
  .wa__tap{ display:none; }
}