/* LOOM Studio — "We craft a concept" (Step 2): a living concept board.
   Four tiles in a mixed-aspect bento — a tall 9:16, two 1:1 squares, and a
   wide 16:9 — each independently cross-fading through the real LILITH media
   (snake films + campaign stills) at randomised intervals, so the board is
   always shifting. Ken-Burns on stills, a slow weave-sheen, per-tile metal tag. */
.loom-bento{
  display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:10px;
  width:100%; max-width:560px; margin-inline:auto; align-items:start;
}
.lb-t{
  position:relative; border-radius:15px; overflow:hidden; background:#0c0b14;
  box-shadow:0 12px 30px -16px #000a, inset 0 0 0 1px #ffffff14; isolation:isolate;
}
/* two full-time 9:16 homepage films + a 1:1 and a 16:9 rotator; columns auto-align */
.lb-hero  { grid-column:1; grid-row:1 / span 2; aspect-ratio:9/16; }
.lb-loader{ grid-column:2; grid-row:1 / span 2; aspect-ratio:9/16; }
.lb-sq    { grid-column:3; grid-row:1; aspect-ratio:1/1; }
.lb-wide  { grid-column:3; grid-row:2; aspect-ratio:16/9; }

.lb-t img, .lb-t video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease; will-change:opacity;
}
.lb-t img.on, .lb-t video.on{ opacity:1; z-index:1; }
.lb-t img.on{ animation:lb-kb 6.5s ease-out both; }
@keyframes lb-kb{ from{ transform:scale(1.12); } to{ transform:scale(1.0); } }

/* metal tag */
.lb-tag{
  position:absolute; right:7px; top:7px; z-index:4;
  font:600 8.5px/1 "neuehaasdisplayroman",Arial,sans-serif; letter-spacing:.6px;
  text-transform:uppercase; color:#fff; padding:3px 6px; border-radius:100px;
  background:#0009; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transform:translateY(-3px); transition:opacity .5s ease, transform .5s ease;
}
.lb-tag.show{ opacity:1; transform:none; }

/* slow weave-sheen, offset per tile so they never sweep together */
.lb-t::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(120deg,transparent 42%,#ffffff1c 50%,transparent 58%);
  transform:translateX(-130%); animation:lb-sheen 7.5s ease-in-out infinite;
}
.lb-rowT .lb-t:nth-child(2)::after{ animation-delay:1.9s; }
.lb-wide::after{ animation-delay:.9s; }
.lb-tall::after{ animation-delay:3.1s; }
@keyframes lb-sheen{ 0%,74%{ transform:translateX(-130%); } 90%,100%{ transform:translateX(130%); } }

@media (prefers-reduced-motion: reduce){
  .lb-t img, .lb-t video{ transition:opacity .3s linear; }
  .lb-t img.on{ animation:none; }
  .lb-t::after{ display:none; }
}

/* ── Step 1 "You share your idea" snake shots (unchanged) ── */
#i1j7jnd-2-2, #i2ekftl-2-2, #i2ekftl-2-2-2, #i1j7jnd-2-2-2{
  border-radius:16px !important; object-fit:cover !important; aspect-ratio:1/1;
  width:49% !important; height:auto;
}

/* Mobile hero readability (unchanged) */
@media (max-width:768px){
  #i2omk-2-2{
    font-size:12dvw !important; line-height:1.02 !important; max-width:92vw;
    text-shadow:0 2px 26px rgba(18,10,38,.7), 0 1px 5px rgba(18,10,38,.65) !important;
  }
  #i2omk-2-2-4{
    display:block !important; font-size:16px !important; line-height:1.4 !important;
    margin-top:12px !important; max-width:90vw;
    text-shadow:0 1px 16px rgba(18,10,38,.8), 0 1px 4px rgba(18,10,38,.7) !important;
  }
  #i54bq-2-2{ bottom:6dvh !important; }
}