/* ============================================================
   MEDIATRIX — OUR VENTURES & GRITSCAPE (fanned deck)

   Replicates the ventures reference recording in the brand palette: copy
   top-left, three framed cards fanned around the middle and overlapping a
   boxed marquee, over a full-bleed monochrome scene (yellow here, red there)
   that drifts, swirls and parallaxes. GSAP owns every card transform — the
   CSS only sets up geometry and surfaces.
   ============================================================ */

.vdeck{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(660px,100svh,940px);
  padding-top:clamp(96px,13vh,150px);
  --mq-bottom:clamp(40px,7vh,72px);
  --card-w:clamp(150px,14.2vw,272px);
}

/* ---------- Backdrop ---------- */
.vdeck__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#3b2d00}
.vdeck__para{position:absolute;inset:-12% 0;will-change:transform}
.vdeck__photo{
  /* wider than the section and shifted right: the mark lands in the right
     third, where the reference keeps its ship. Full bleed — no dark edge. */
  position:absolute;top:0;bottom:0;left:-8%;right:-34%;will-change:transform;
}
.vdeck__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:grayscale(1) contrast(1.3) brightness(.74);
}
/* duotone: grey photo × brand yellow = black-to-yellow monochrome */
.vdeck__tint{position:absolute;inset:0;background:var(--yellow);mix-blend-mode:multiply}
.vdeck__swirl{
  position:absolute;left:58%;top:36%;width:150vmax;aspect-ratio:1;border-radius:50%;
  translate:-50% -50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,195,0,.30) 38deg,transparent 96deg,
             rgba(255,170,0,.20) 170deg,transparent 228deg,rgba(255,210,70,.16) 300deg,transparent 350deg);
  -webkit-mask-image:radial-gradient(circle,transparent 18%,#000 34%,#000 52%,transparent 70%);
  mask-image:radial-gradient(circle,transparent 18%,#000 34%,#000 52%,transparent 70%);
  filter:blur(38px);mix-blend-mode:screen;opacity:.9;
  will-change:transform;
}
/* the dark planet rim, top-right */
.vdeck__ring{
  position:absolute;right:-14vw;top:-30vh;width:min(78vw,1200px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(10,9,6,.16) 60%,transparent 61%);   /* just a tint: the photo shows through */
  box-shadow:0 0 0 1px rgba(255,195,0,.28),0 0 60px 6px rgba(255,195,0,.22),inset 0 0 80px rgba(255,195,0,.12);
  opacity:.85;will-change:transform;
}
.vdeck__shade{
  position:absolute;inset:0;
  background:
    /* only enough shade behind the copy to keep it readable */
    linear-gradient(90deg,rgba(24,17,0,.62) 0%,rgba(24,17,0,.36) 32%,transparent 58%),
    linear-gradient(180deg,var(--ink) 0%,transparent 9%,transparent 88%,var(--ink) 100%),
    radial-gradient(130% 100% at 55% 50%,transparent 62%,rgba(10,10,11,.32) 100%);
}
.vdeck__grain{
  position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px);
}

.vdeck__coord{
  position:absolute;right:var(--gutter);top:clamp(30px,4vw,54px);
  font-size:.6875rem;letter-spacing:0;color:var(--text-low);
}

/* ---------- Copy ---------- */
.vdeck__copy{position:relative;z-index:3}
.vdeck__copy > *{max-width:560px}
.vdeck__title{margin:18px 0 18px;font-size:clamp(2rem,3.6vw,3.4rem);line-height:.98}
.vdeck__title em{font-style:normal;color:var(--yellow)}
.vdeck__lede{
  max-width:46ch;margin-bottom:30px;
  font-size:.875rem;line-height:1.55;letter-spacing:0;text-transform:uppercase;color:var(--text);
}

/* ---------- Deck ---------- */
.vdeck__deck{
  position:absolute;z-index:2;left:50%;
  bottom:calc(var(--mq-bottom) + 20px);   /* card feet overlap the marquee's top half */
  translate:-44% 0;
  display:flex;align-items:flex-end;
}
/* cards tuck under each other, as in the reference fan (gap can't go negative) */
.vcard + .vcard{margin-left:calc(var(--card-w) * -.14)}
.vcard{
  position:relative;flex:none;
  width:var(--card-w);aspect-ratio:.72;
  will-change:transform;
}
.vcard__hit{
  position:absolute;inset:0;display:block;color:inherit;text-decoration:none;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.7));
}

/* bezel: chamfered corners and a notch on each long edge */
.vcard__frame,.vcard__screen{
  --c:16px;
}
.vcard__frame{
  position:absolute;inset:0;display:block;
  background:
    linear-gradient(160deg,rgba(255,213,77,.32),rgba(255,195,0,.06) 30%,transparent 55%),
    linear-gradient(180deg,#2d2a1e,#191710 60%,#23201a);
  clip-path:polygon(var(--c) 0,100% 0,100% 54%,calc(100% - 7px) 58%,calc(100% - 7px) 70%,100% 74%,
                    100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 40%,7px 36%,7px 26%,0 22%,0 var(--c));
  transition:filter .5s var(--ease-out);
}
.vcard__screen{
  position:absolute;inset:9px;display:block;overflow:hidden;border-radius:7px;
  background:
    radial-gradient(110% 70% at 50% 34%,#6b5000 0%,#302400 44%,#120f07 78%),
    #120f07;
}
.vcard__art{position:absolute;inset:0;display:block}
.vcard__art svg{width:100%;height:100%;display:block;transition:transform .8s var(--ease-out)}
.vcard__shade{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,10,11,.95) 0%,rgba(10,10,11,.45) 30%,transparent 55%),
             linear-gradient(180deg,rgba(10,10,11,.6) 0%,transparent 22%);
}
.vcard__scan{
  position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(228,228,228,.05) 0 1px,transparent 1px 4px);
}
.vcard__top{
  position:absolute;left:12px;right:12px;top:11px;
  display:flex;justify-content:space-between;gap:8px;
  font-size:.5625rem;letter-spacing:0;text-transform:uppercase;
}
.vcard__top b{font-weight:600;color:var(--yellow-soft)}
.vcard__top i{font-style:normal;color:var(--text-low)}
.vcard__top > *{white-space:nowrap}
.vcard__meta,.vcard__cta{
  position:absolute;left:12px;right:12px;
  font-size:.5625rem;letter-spacing:0;text-transform:uppercase;line-height:1.4;
}
.vcard__meta{bottom:calc(19% + 14px);color:var(--text-mid)}
.vcard__cta{bottom:calc(19% - 2px);color:var(--yellow)}
/* the resting card is image + label only; details arrive with the lift */
.vcard__meta,.vcard__cta{
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.vcard__cta{transition-delay:.05s}
.vcard__label{
  position:absolute;left:-6px;right:-6px;bottom:clamp(16px,1.6vw,26px);margin:0;
  text-align:center;pointer-events:none;
  font-size:clamp(.95rem,1.45vw,1.55rem);line-height:.95;color:var(--text-hi);
  text-shadow:0 3px 18px rgba(0,0,0,.9);
}

/* lit state while GSAP has the card lifted */
.vcard.is-active .vcard__frame{filter:brightness(1.35) saturate(1.2)}
.vcard.is-active .vcard__art svg{transform:scale(1.06)}
.vcard.is-active :is(.vcard__meta,.vcard__cta){opacity:1;transform:none}

/* ---------- Marquee ---------- */
.vdeck__marquee{
  position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);bottom:var(--mq-bottom);
  height:38px;background:rgba(255,195,0,.1);border-width:1.5px;border-radius:6px;
  -webkit-mask-image:none;mask-image:none;
}
.vdeck__marquee .marquee__track > * > span{
  display:inline-flex;align-items:center;gap:1.4em;
  font-size:.75rem;letter-spacing:0;text-transform:uppercase;color:var(--yellow-soft);
}
.vdeck__marquee .marquee__track > * > span::after{
  content:"";width:6px;height:6px;background:var(--yellow);flex:none;
}

/* ---------- Narrow screens ---------- */
@media (max-width:900px){
  .vdeck{
    min-height:0;padding-bottom:calc(var(--mq-bottom) + 20px);
    --card-w:min(29vw,210px);
  }
  .vdeck__shade{
    background:
      linear-gradient(180deg,var(--ink) 0%,rgba(10,10,11,.45) 22%,rgba(10,10,11,.15) 60%,var(--ink) 100%);
  }
  .vdeck__coord{display:none}
  .vdeck__deck{
    position:relative;left:auto;bottom:auto;translate:none;
    justify-content:center;margin-top:clamp(40px,10vw,70px);margin-bottom:-18px;
  }
  .vcard + .vcard{margin-left:calc(var(--card-w) * -.08)}
  .vdeck__marquee{position:relative;left:auto;right:auto;bottom:auto;margin-inline:var(--gutter)}
  .vcard__top{font-size:.5rem;left:9px;right:9px}
  .vcard__meta{display:none}
  .vcard__cta{opacity:1;transform:none;font-size:.5rem;left:9px;right:9px}
}