/* What we film: full-bleed visual tiles. Each .media is a slot for a real photo or video loop; the canvas is a placeholder frame. */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(480px,44vw,660px);gap:20px;margin-top:72px}
.tile{position:relative;grid-column:span 7;border-radius:32px;background:#0d0f13;color:#fff;isolation:isolate;transition:box-shadow .5s,translate .5s}
.tile.t2,.tile.t3{grid-column:span 5}
.tile:hover{box-shadow:0 50px 90px -45px rgba(0,0,0,.55);translate:0 -4px}
@media (max-width:900px){.bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.tile,.tile.t2,.tile.t3{grid-column:auto;min-height:560px}}

.media{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit}
.media canvas,.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;animation:kb 26s ease-in-out infinite alternate;transform-origin:60% 40%}
.tile:nth-child(even) .media>*{animation-delay:-9s}
@keyframes kb{from{scale:1.02}to{scale:1.14;translate:-1.5% -1%}}
.quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:#000}
.quad .cell{position:relative;overflow:hidden}
.quad .cell canvas{animation-duration:30s}
.cell-tag{position:absolute;top:14px;left:14px;display:flex;gap:6px;font-size:10px;letter-spacing:.06em;padding:5px 8px;border-radius:7px;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}
.cell-tag b{font-weight:400;opacity:.7}
.sync{position:absolute;z-index:1;top:50%;left:50%;translate:-50% -50%;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:11px;letter-spacing:.06em;padding:8px 14px;border-radius:980px;background:rgba(255,255,255,.92);color:#1d1d1f;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(48,209,88,.25)}

.tile::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 42%,rgba(0,0,0,.86) 100%)}
.hud{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;pointer-events:none}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.05em;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;white-space:nowrap}
.tag .dot{width:7px;height:7px;box-shadow:none}
.thirds{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s;
  background:
    linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.22) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgba(255,255,255,.22) 0 calc(66.66% + .5px),transparent 0),
    linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.22) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgba(255,255,255,.22) 0 calc(66.66% + .5px),transparent 0)}
.tile:hover .thirds{opacity:1}
.meters{position:absolute;right:26px;top:50%;translate:0 -50%;display:flex;gap:4px;height:130px;align-items:flex-end;pointer-events:none}
.meters i{width:5px;height:60%;border-radius:3px;background:linear-gradient(0deg,#30d158 0 62%,#ffd60a 62% 84%,#ff3b30 84%);animation:vu .8s ease-in-out infinite alternate}
.meters i+i{animation-duration:.62s;animation-delay:-.3s}
@keyframes vu{from{height:30%}to{height:84%}}

.copy{position:absolute;left:0;right:0;bottom:0;padding:34px 36px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.copy .kicker{font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.72)}
.copy h3{font-size:clamp(32px,3.7vw,56px);font-weight:800;letter-spacing:-.05em;line-height:.98;max-width:13ch}
.copy p{color:rgba(255,255,255,.8);font-size:17px;line-height:1.42;max-width:44ch}
.copy .more{display:inline-flex;align-items:center;gap:4px;color:#fff;font-weight:600;font-size:17px;margin-top:4px}
.copy .more .svg{width:.8em;height:.8em;stroke-width:2.6;transition:transform .2s}
.copy .more:hover .svg{transform:translateX(3px)}

/* Visual slot: try a real photo or video in the browser */
.slot{position:absolute;z-index:3;top:50%;left:50%;translate:-50% -50%;opacity:0;transition:opacity .3s;display:flex;gap:8px}
.tile:hover .slot,.tile.drag .slot,.slot:focus-within{opacity:1}
@media (hover:none){.slot{opacity:1;top:auto;bottom:auto;left:auto;right:20px;translate:none;top:64px}}
.slot label,.slot button{display:inline-flex;align-items:center;cursor:pointer;font-size:13px;font-weight:600;padding:10px 16px;border-radius:980px;border:0;background:rgba(255,255,255,.92);color:#1d1d1f;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.slot button{background:rgba(0,0,0,.55);color:#fff}
.slot input{position:absolute;width:1px;height:1px;opacity:0}
.tile.drag{outline:3px solid var(--accent);outline-offset:-3px}

/* Backlight: a blurred glow in the colours of each image spills out behind the group (colour sampled in visuals.js) */
.tile .bl{position:absolute;inset:-4px;z-index:-3;border-radius:44px;background:#2f6bff;filter:blur(46px) saturate(1.5);opacity:.7;pointer-events:none;transition:background .6s;animation:blPulse 7s ease-in-out infinite}
.tile:nth-child(even) .bl{animation-delay:-3.5s}
@keyframes blPulse{0%,100%{opacity:.5;scale:1}50%{opacity:.88;scale:1.05}}