/* ============================================================
   Brand artifact band + interactive polish (CINEMA v4 layer)
   - .cine-artband: CONTAINED framed Higgsfield brand artwork card
     (light-first mandate 2026-07-12: the band no longer bleeds
     full-width dark across the page; the media/scrim/copy live
     INSIDE a max-width framed card — contained dark is permitted.
     Presentation matches the VET Sector Website relocation
     precedent, v3.css .cine-artband-v2 frame).
     The engine's photo-parallax still animates the image on scroll.
   - .gx shimmer: gradient display words get a slow light drift.
   - .hviz tilt: hero visual panels are pointer-tilted in 3D (JS).
   ============================================================ */
/* cq-lightfix: framed-card containment (was full-bleed) */
.cine-artband{
  position:relative;overflow:hidden;isolation:isolate;
  height:clamp(300px,46vh,540px);
  width:min(1280px,92%);margin:96px auto;
  border-radius:22px;border:1px solid #E4E7EC;
  box-shadow:0 24px 60px rgba(16,24,40,.16);
  background:#fff;
}
.cine-artband.cine-artband-v2{
  height:clamp(380px,52vh,560px);
  display:flex;align-items:center;
}
.cine-artband img,
.cine-artband video{
  position:absolute;left:0;top:-10%;
  width:100%;height:120%;object-fit:cover;display:block;
}
.cine-artband .cine-artband-scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(4,7,16,.82) 0%,rgba(4,7,16,.55) 38%,rgba(4,7,16,.08) 68%,transparent 100%);
}
/* slider/banner FX layer: per-site Higgsfield loop inside .cqbg (slide 1)
   or a photo masthead; sits under the existing scrim, photo stays as poster */
.cqbg video.cqfx,
.mast video.cqfx{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.mast video.cqfx{z-index:0}
.cine-artband .cine-artband-copy{
  position:relative;z-index:2;color:#fff;
  width:min(1240px,92%);margin:0 auto;
  max-width:none;
}
.cine-artband .cine-artband-copy>div{max-width:560px}
.cine-artband .cine-ab-kicker{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:14px;
}
.cine-artband .cine-ab-kicker::before{
  content:"";display:inline-block;width:26px;height:2px;margin-right:12px;vertical-align:middle;
  background:linear-gradient(90deg,var(--cine-accent),var(--cine-glow));
}
.cine-artband h2{
  font-family:var(--cine-display-font);
  font-size:clamp(26px,3.2vw,44px);line-height:1.12;margin:0 0 18px;color:#fff;
}
.cine-artband ul.cine-ab-points{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.cine-artband ul.cine-ab-points li{
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);
  display:flex;align-items:flex-start;gap:10px;
}
.cine-artband ul.cine-ab-points li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  background:
    linear-gradient(135deg,rgba(var(--cine-glow-rgb),.9),rgba(var(--cine-accent-rgb),.9));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7-8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7-8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cine-artband .cine-ab-cta{
  display:inline-block;padding:13px 26px;border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:.04em;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,var(--cine-accent),var(--cine-glow));
  box-shadow:0 12px 30px rgba(var(--cine-accent-rgb),.35);
  transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s;
}
.cine-artband .cine-ab-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(var(--cine-accent-rgb),.5);
}
@media (max-width:820px){
  /* cq-lightfix: keep the card contained on mobile too */
  .cine-artband{margin:56px auto}
  .cine-artband.cine-artband-v2{height:auto;min-height:0;padding:56px 26px}
  .cine-artband .cine-artband-scrim{
    background:linear-gradient(180deg,rgba(4,7,16,.78),rgba(4,7,16,.55));
  }
}
.cine-artband::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 140px rgba(0,0,0,.45);
}
.cine-artband .cine-artband-edge{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--cine-glow-rgb),.5),transparent);
}
.cine-artband .cine-artband-edge.t{top:0}
.cine-artband .cine-artband-edge.b{bottom:0}

/* gradient display words: slow luminous drift */
.gx{
  background-size:220% 220%;
  animation:cineGxDrift 9s ease-in-out infinite;
}
@keyframes cineGxDrift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* hero visual panel 3D tilt (transform driven by cinema.js) */
.hviz{will-change:transform}
.cine-tilting{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .gx{animation:none}
  .cine-artband img{transform:none!important}
  .hviz{transform:none!important}
}
@media print{
  .cine-artband{display:none!important}
}