/* ========================================================================
   RETARGETING MODULE — case study deck
   Subject: DigiStudio · Retargeting Module · Business Team Presentation
   Extends cinematic-light.css (tokens, stage, chrome, type, animations)
   and selfie-light.css (.s-split, .scene-foot, .stamp-mark, .it emphasis).
   This file holds only the scene-specific layouts for this deck.
   --------------------------------------------------------------------- */

/* ---- Screenshot placeholder frame -------------------------------------
   Wraps an <image-slot> so the user can drag a real product screenshot in.
   The frame supplies the editorial caption + browser-chrome dressing. */
.shot {
  position: relative;
  width: 100%;
  margin-left: auto;
  background: var(--ink-3);
  border: 1px solid var(--hairline-2);
  border-radius: 16px;
  box-shadow: 0 40px 90px -45px rgba(34, 28, 48, 0.55);
  overflow: hidden;
}
.shot .shot-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--ink-1), var(--ink-3));
}
.shot .dots { display: inline-flex; gap: 7px; }
.shot .dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(34, 28, 48, 0.14);
}
.shot .dots i:nth-child(1) { background: var(--coral-soft); }
.shot .dots i:nth-child(2) { background: var(--amber-soft); }
.shot .dots i:nth-child(3) { background: var(--teal-soft); }
.shot .shot-cap {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.shot .shot-cap b { color: var(--paper); font-weight: 500; }
.shot .shot-body {
  position: relative;
  display: grid;
  place-items: stretch;
  padding: 22px;
  gap: 18px;
}
.shot .shot-body.duo { grid-template-columns: 1fr 1fr; }
/* Vertical stack for two panels of differing aspect ratio (square + wide) */
.shot .shot-body.stack { grid-template-columns: 1fr; }
/* Trio: two cards on top, a full-width table spanning both columns below */
.shot .shot-body.trio { grid-template-columns: 1fr 1fr; }
.shot .shot-body.trio > image-slot:nth-child(3) { grid-column: 1 / -1; }

/* The droppable slot itself — themed to the editorial light ground */
.shot image-slot {
  display: block;
  width: 100%;
  background: repeating-linear-gradient(45deg,
    rgba(34, 28, 48, 0.022) 0px, rgba(34, 28, 48, 0.022) 7px,
    transparent 7px, transparent 14px);
  border-radius: 10px;
}

/* A slot with an authored screenshot sits on a clean white ground (so any
   object-fit:contain slack is invisible against the shot's own white bg)
   and gets a hairline + soft shadow to read as a real product surface. */
.shot image-slot[src] {
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 40px -28px rgba(14, 26, 48, 0.45);
}

/* A small annotation chip pinned onto a shot to point at a UI affordance */
.shot-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ink-3);
  border: 1px solid var(--amber-soft);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  box-shadow: 0 12px 28px -14px rgba(34, 28, 48, 0.5);
  z-index: 3;
}
.shot-note .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 12px var(--amber-soft);
}

/* ========================================================================
   COVER
   --------------------------------------------------------------------- */
.s-cover {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 200px;
}
.s-cover .bg-amber {
  width: 1100px; height: 1000px;
  background: radial-gradient(circle, oklch(78% 0.12 65 / 0.22), transparent 60%);
  top: -260px; right: -260px;
}
.s-cover .bg-teal {
  width: 900px; height: 900px;
  background: radial-gradient(circle, oklch(70% 0.10 200 / 0.20), transparent 62%);
  bottom: -300px; left: -240px;
}
.s-cover .eyebrow { margin-bottom: 30px; }
.s-cover h1 {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 134px;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
.s-cover h1 .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
  letter-spacing: -0.02em;
}
.s-cover .sub {
  margin-top: 38px;
  max-width: 760px;
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.4;
  color: var(--paper-dim);
}
.s-cover .star-strip {
  display: flex;
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--hairline);
  max-width: 1000px;
}
.s-cover .star-strip .step {
  flex: 1;
  padding: 22px 28px 0 0;
  border-right: 1px solid var(--hairline);
}
.s-cover .star-strip .step:last-child { border-right: 0; padding-right: 0; }
.s-cover .star-strip .step .n {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--amber);
}
.s-cover .star-strip .step .t {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--paper);
}

/* ========================================================================
   SITUATION — schematic drop-off funnel
   --------------------------------------------------------------------- */
.s-funnel .bg-coral {
  width: 1000px; height: 900px;
  background: radial-gradient(circle, oklch(60% 0.16 28 / 0.22), transparent 60%);
  bottom: -240px; right: -200px;
}
.funnel-card {
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  background: linear-gradient(165deg, var(--ink-3), var(--ink-1));
  border: 1px solid var(--hairline-2);
  border-radius: 18px;
  padding: 34px 38px 40px;
  box-shadow: 0 40px 90px -45px rgba(34, 28, 48, 0.5);
}
.funnel-card .fc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-dim);
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--hairline);
}
.funnel-card .fc-head .em { color: var(--paper); }
.funnel-step {
  position: relative;
  display: flex; align-items: center; gap: 20px;
  margin: 0 auto 14px;
}
.funnel-step .name {
  width: 150px; flex: none;
  font-family: var(--grotesk); font-weight: 500; font-size: 18px;
  color: var(--paper); text-align: right;
}
.funnel-step .bar {
  height: 46px; border-radius: 8px;
  background: linear-gradient(90deg, var(--amber), oklch(62% 0.14 55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  transform-origin: left center;
}
.scene[data-active="true"] .funnel-step .bar {
  animation: fn-grow 1100ms var(--ease-cine) both;
  animation-delay: var(--d, 0ms);
}
@keyframes fn-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.funnel-step .leak {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--coral); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.funnel-step .leak::before { content: "▼"; font-size: 11px; }
.funnel-card .fc-foot {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-family: var(--serif); font-style: italic; font-size: 19px;
  line-height: 1.5; color: var(--paper-dim);
}
.funnel-card .fc-foot .em { color: var(--coral); font-style: normal; font-family: var(--grotesk); font-weight: 500; }

/* ========================================================================
   TASK — mandate / objectives card
   --------------------------------------------------------------------- */
.s-task .bg-amber {
  width: 1000px; height: 900px;
  background: radial-gradient(circle, oklch(78% 0.12 65 / 0.18), transparent 60%);
  top: -180px; right: -160px;
}
.mandate {
  width: 100%; max-width: 760px; margin-left: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.mandate .obj {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr; align-items: start; gap: 26px;
  background: var(--ink-3);
  border: 1px solid var(--hairline-2);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 24px 60px -42px rgba(34, 28, 48, 0.5);
}
.mandate .obj .idx {
  font-family: var(--serif); font-style: italic; font-size: 46px;
  line-height: 1; color: var(--amber);
}
.mandate .obj .k {
  font-family: var(--grotesk); font-weight: 600; font-size: 25px;
  letter-spacing: -0.01em; color: var(--paper); margin: 4px 0 8px;
}
.mandate .obj .v {
  font-family: var(--grotesk); font-weight: 400; font-size: 18px;
  line-height: 1.5; color: var(--paper-dim);
}

/* ========================================================================
   RESULT close — STAR recap
   --------------------------------------------------------------------- */
.s-close { display: flex; flex-direction: column; justify-content: center; padding: 0 200px; height: 100%; position: relative; }
.s-close .bg-teal {
  width: 1000px; height: 900px;
  background: radial-gradient(circle, oklch(70% 0.10 200 / 0.18), transparent 62%);
  bottom: -280px; right: -220px;
}
.s-close .bg-amber {
  width: 900px; height: 900px;
  background: radial-gradient(circle, oklch(78% 0.12 65 / 0.16), transparent 62%);
  top: -240px; left: -200px;
}
.s-close h2 { max-width: 1180px; margin: 26px 0 0; text-wrap: balance; }
.recap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 70px; border-top: 1px solid var(--hairline);
}
.recap .cell { padding: 26px 32px 0 0; border-right: 1px solid var(--hairline); }
.recap .cell:last-child { border-right: 0; }
.recap .cell .n {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--amber);
}
.recap .cell .h {
  display: block; margin: 12px 0 8px;
  font-family: var(--grotesk); font-weight: 600; font-size: 22px; color: var(--paper);
}
.recap .cell .b {
  font-family: var(--grotesk); font-weight: 400; font-size: 16px;
  line-height: 1.5; color: var(--paper-dim);
}

/* Generic right-zone centering helper for screenshot scenes */
.s-split > .right.shotwrap { justify-content: center; }

/* Reduced-motion: show the visible end-state, skip the entrance motion. */
@media (prefers-reduced-motion: reduce) {
  .scene .a-rise, .scene .a-fade, .scene .a-slide, .scene .a-pop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .funnel-step .bar { animation: none !important; transform: none !important; }
}