/* ============================================================
   Sara Akef, interactive layer
   Motion-from-stills, work lightbox, enquiry form
   Inherits theme tokens from .site (site.css)
   ============================================================ */

/* ---------- motion-from-stills (shared) ---------- */
.mseq{position:relative;width:100%;height:100%;overflow:hidden;background:var(--photo-bg);}
.mseq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;
  filter:brightness(1.07) contrast(1.02) saturate(1.05);transition:opacity .28s linear;}
.mseq img.on{opacity:1;z-index:2;pointer-events:auto;}
.mseq.warm img{filter:brightness(1.08) contrast(1.0) saturate(1.08) sepia(.06);}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
/* work rows: slow cross dissolve between production stills */
.row .ph .mseq img{transition:opacity .9s ease;}
/* photo-count badge, visible at rest so the row announces itself */
.shot-badge{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  font:600 10.5px/1 "Hanken Grotesk",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,246,236,.9);
  background:rgba(13,10,8,.5);backdrop-filter:blur(4px);padding:6px 10px;border-radius:999px;pointer-events:none;
  transition:background-color .3s,color .3s;}
.shot-badge svg{width:11px;height:11px;}
.shot-badge.live{background:var(--terra-fill);color:#fff;}
.shot-badge .dot{width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block;animation:pulse 1.6s ease-in-out infinite;}
/* video marker, offset so it never lands under the photo count */
.shot-badge.vid{left:auto;right:12px;}

/* watch link in the work popup */
.wl-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;}
.wl-foot .lb-note{margin-top:0;text-align:right;}
.wl-watch{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 "Hanken Grotesk",sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#FBF6EC;text-decoration:none;
  border:1px solid rgba(251,246,236,.28);border-radius:999px;padding:9px 15px;min-height:40px;
  transition:background-color .25s,border-color .25s;}
.wl-watch:hover{background:var(--terra-fill);border-color:var(--terra-fill);color:#fff;}
.wl-watch svg{width:14px;height:14px;}

/* ---------- reel lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,6,5,.94);backdrop-filter:blur(7px);
  display:grid;place-items:start center;padding:clamp(18px,4vh,42px) 5vw;
  overflow-y:auto;overscroll-behavior:contain;animation:lbIn .32s ease;}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-close{position:fixed;top:22px;right:28px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(251,246,236,.3);background:transparent;color:#FBF6EC;font-size:18px;cursor:pointer;z-index:93;
  transition:background .2s,border-color .2s;display:grid;place-items:center;}
.lb-close:hover{background:var(--terra-fill);border-color:var(--terra-fill);}
.lb-stage{width:min(1080px,92vw);}
.lb-frame{width:100%;aspect-ratio:3/4;max-height:80vh;background:#0d0a08;border-radius:6px;overflow:hidden;position:relative;
  box-shadow:0 50px 130px -30px rgba(0,0,0,.85);margin:0 auto;}
@media(min-width:900px){.lb-frame{aspect-ratio:16/10;}}
.lb-frame .mseq img{transition:opacity .42s ease;}
.lb-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(8,6,5,.5));}
.lb-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:60px 30px 26px;
  background:linear-gradient(0deg,rgba(8,6,5,.92),rgba(8,6,5,0));color:#FBF6EC;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}
.lb-cap .t{font-family:"Bodoni Moda",serif;font-size:clamp(26px,3.4vw,42px);font-weight:500;line-height:1;}
.lb-cap .t .fa{font-size:.6em;color:rgba(251,246,236,.7);margin-left:8px;}
.lb-cap .s{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,246,236,.65);margin-top:8px;}
.lb-cap .live{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 "Hanken Grotesk",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FBF6EC;}
.lb-cap .live i{width:7px;height:7px;border-radius:50%;background:var(--terra);animation:pulse 1.4s ease-in-out infinite;}
.lb-note{text-align:center;color:rgba(251,246,236,.45);font-size:12px;letter-spacing:.04em;margin-top:16px;}

}

/* ---------- work lightbox ---------- */
.wl-stage{width:min(1080px,92vw);}
.wl-frame{position:relative;width:100%;aspect-ratio:16/10;max-height:clamp(220px,calc(100vh - 430px),64vh);background:#0d0a08;border-radius:6px;overflow:hidden;
  box-shadow:0 50px 130px -30px rgba(0,0,0,.85);}
.wl-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .35s ease;
  pointer-events:none;filter:brightness(1.05) contrast(1.02) saturate(1.04);}
.wl-frame img.on{opacity:1;z-index:2;pointer-events:auto;}
.wl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(251,246,236,.28);background:rgba(13,10,8,.5);color:#FBF6EC;font-size:24px;line-height:1;
  cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,border-color .2s;}
.wl-nav:hover{background:var(--terra-fill);border-color:var(--terra-fill);}
.wl-nav.prev{left:14px;} .wl-nav.next{right:14px;}
.wl-count{position:absolute;right:16px;top:14px;z-index:3;font:600 11px/1 "Hanken Grotesk",sans-serif;letter-spacing:.14em;
  color:#FBF6EC;background:rgba(13,10,8,.55);padding:7px 10px;border-radius:999px;backdrop-filter:blur(4px);}
.wl-thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.wl-thumb{width:78px;height:56px;padding:0;border-radius:4px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(251,246,236,.2);background:#0d0a08;opacity:.55;transition:opacity .2s,border-color .2s;}
.wl-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.wl-thumb:hover{opacity:.85;}
.wl-thumb.on{opacity:1;border-color:var(--terra);}
.wl-meta{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;margin-top:22px;color:#FBF6EC;align-items:start;}
.wl-id h3{font-family:"Bodoni Moda",serif;font-size:clamp(26px,3vw,40px);font-weight:500;line-height:1.02;}
.wl-id h3 .fa{font-size:.6em;color:rgba(251,246,236,.72);}
.wl-sub{margin-top:8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);}
.wl-facts{margin:0;display:grid;grid-template-columns:1fr;gap:7px;}
.wl-facts>div{display:grid;grid-template-columns:84px 1fr;gap:14px;padding-bottom:7px;border-bottom:1px solid rgba(251,246,236,.12);}
.wl-facts>div:last-child{border-bottom:none;}
.wl-facts dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,246,236,.45);padding-top:2px;}
.wl-facts dd{margin:0;font-size:13.5px;color:rgba(251,246,236,.9);line-height:1.45;}
@media(max-width:760px){
  .wl-frame{aspect-ratio:4/3;max-height:clamp(200px,calc(100vh - 380px),48vh);}
  .wl-meta{grid-template-columns:1fr;gap:18px;margin-top:16px;}
  .wl-thumb{width:60px;height:44px;}
  .wl-nav{width:38px;height:38px;font-size:20px;}
}

/* ---------- enquiry form ---------- */
.eq{align-items:flex-start;overflow:auto;padding:5vh 4vw;display:flex;justify-content:center;}
.eq-panel{width:min(680px,100%);background:var(--bg);color:var(--fg);border:1px solid var(--hair);
  border-radius:20px;padding:30px;box-shadow:0 40px 110px -30px rgba(0,0,0,.7);}
.eq-head h3{font-family:"Bodoni Moda",serif;font-size:clamp(26px,3vw,36px);font-weight:500;line-height:1.05;}
.eq-head p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--fg-2);}
.eq-types{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 20px;}
.eq-type{font:600 12px/1 "Hanken Grotesk",sans-serif;padding:9px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair);background:transparent;color:var(--fg-2);transition:all .2s;}
.eq-type:hover{color:var(--fg);border-color:var(--fg-3);}
.eq-type.on{background:var(--terra-fill);border-color:var(--terra-fill);color:#fff;}
.eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.eq-field{display:flex;flex-direction:column;gap:6px;}
.eq-field.eq-wide{grid-column:1/-1;}
.eq-field span{font:600 10.5px/1 "Hanken Grotesk",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);}
.eq-field input,.eq-field textarea{width:100%;border:1px solid var(--hair);background:transparent;color:var(--fg);
  border-radius:10px;padding:11px 13px;font:400 14.5px/1.45 "Hanken Grotesk",sans-serif;outline:none;resize:vertical;
  transition:border-color .2s;}
.eq-field input:focus,.eq-field textarea:focus{border-color:var(--terra);}
.eq-field input::placeholder,.eq-field textarea::placeholder{color:var(--fg-3);}
.eq-check{display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-size:13px;color:var(--fg-2);line-height:1.45;cursor:pointer;}
.eq-check input{margin-top:2px;accent-color:var(--terra);}
.eq-err{margin-top:14px;font-size:13.5px;color:var(--terra);}
.eq-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap;}
.eq-note{font-size:12px;color:var(--fg-3);}
.eq-send{background:var(--terra-fill);color:#fff;border:none;border-radius:999px;padding:13px 26px;cursor:pointer;
  font:600 14px/1 "Hanken Grotesk",sans-serif;transition:background .2s,transform .2s,opacity .2s;}
.eq-send:hover{background:var(--terra-deep);transform:translateY(-1px);}
.eq-send:disabled{opacity:.4;cursor:default;transform:none;}
.eq-done{text-align:center;padding:22px 6px;}
.eq-tick{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--terra-fill);color:#fff;
  display:grid;place-items:center;font-size:24px;}
.eq-done h3{font-family:"Bodoni Moda",serif;font-size:30px;font-weight:500;}
.eq-done p{margin:10px auto 22px;max-width:42ch;font-size:14.5px;line-height:1.6;color:var(--fg-2);}
@media(max-width:760px){
  .eq-panel{padding:22px 18px;border-radius:16px;}
  .eq-grid{grid-template-columns:1fr;}
  .eq-foot{flex-direction:column;align-items:stretch;}
  .eq-send{width:100%;}
}

.eq-tick.draft{background:var(--fg);color:var(--bg);}
.eq-note a,.eq-done a{color:var(--terra);border-bottom:1px solid var(--terra);}
.foot-contact{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.foot-enq{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;cursor:pointer;
  border:none;background:var(--terra-fill);color:#fff;font:600 13.5px/1 "Hanken Grotesk",sans-serif;
  transition:background .2s,transform .2s;}
.foot-enq:hover{background:var(--terra-deep);transform:translateY(-1px);}


/* a poster standing in as a row cover: show it whole, do not crop the artwork */
.row .ph-poster .mseq img,.row .ph-poster>img{object-fit:contain;background:var(--photo-bg);transform:none;}
.row:hover .ph-poster .mseq img,.row:hover .ph-poster>img{transform:none;}

/* keep her centred in the row crop, per production */
.row .ph .mseq img,.row .ph>img{object-position:var(--focus,50% 50%);}