/* =====================================================================================
   SIGNATURE v7: THE TITLE CARD (2026-09-21)
   One opening-titles move, in three layers, the way studio title sequences are built:
     back   the footage, cutting through the slate as you scroll
     middle the Lolli Brands mark, traced to vector from the client's own file
     front  Anthony Lolli and TereZa Hakobyan-Lolli, cut out and standing in front of it
   Each new scene opens as an iris from the lens ring in the mark (the logo's own camera lens).
   The exit pushes the camera through that lens into the wall.
   ===================================================================================== */
.titles { position: relative; background: var(--stage); color: var(--on-stage); }
.titles__pin { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }

/* back: the scenes. Stacked; the active one sits on top and irises open from the lens */
.titles__scenes { position: absolute; inset: 0; z-index: 0; }
.titles__scene { position: absolute; inset: 0; overflow: hidden; clip-path: circle(var(--r, 0%) at var(--lx, 33%) var(--ly, 50%)); will-change: clip-path; }
.titles__scene:first-child { --r: 150%; }
html:not(.js) .titles__scene:not(:first-child), html.shot .titles__scene:not(:first-child) { display: none; }
.titles__scene > img, .titles__scene > video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(var(--s, 1.06)); filter: saturate(.82) contrast(1.06); }
.titles__veil { --veil: 1; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 80% at 34% 42%, rgba(11, 10, 13, .38) 0%, rgba(11, 10, 13, .62) 75%), linear-gradient(180deg, rgba(11, 10, 13, .58) 0%, rgba(11, 10, 13, .2) 30%, rgba(11, 10, 13, .24) 60%, rgba(11, 10, 13, .92) 100%);
  opacity: var(--veil, 1); }

/* middle: the mark, huge, behind the people */
.titles__mark { position: absolute; z-index: 2; left: 14vw; width: 58vw; top: 8svh; opacity: .96; transform-origin: var(--mox, 33.16%) var(--moy, 61.71%); will-change: transform, opacity; pointer-events: none; }
.titles__mark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 60px rgba(0, 0, 0, .35)); }

/* front: the founders, cut out, standing on the bottom edge and dissolving into the dark */
.titles__cut { position: absolute; z-index: 3; bottom: 0; right: 4vw; height: 83svh; aspect-ratio: 1682 / 2480; will-change: transform, opacity; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%), linear-gradient(270deg, transparent 0, #000 7%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 72%, transparent 99%), linear-gradient(270deg, transparent 0, #000 7%); mask-composite: intersect; }
.titles__cut img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; filter: drop-shadow(0 30px 70px rgba(0, 0, 0, .55)); }

/* type: the line, the scene caption and the cue */
.titles__type { position: absolute; z-index: 4; left: var(--margin); right: var(--margin); bottom: max(5svh, 84px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; pointer-events: none; }
/* the bottom line is a title card: the promise on the first cut, then each film's name on its own cut */
.titles__type { grid-template-columns: minmax(0, 1fr); }
.titles__h1, .titles__film { grid-area: 1 / 1; align-self: end; transition: opacity .5s var(--ease-productive), transform .7s var(--ease-expressive); }
.titles__h1 { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 4.1vw, 4.8rem); line-height: .88; letter-spacing: .006em; max-width: 24ch; }
.titles__film { display: grid; gap: .45em; opacity: 0; transform: translateY(24px); }
.titles__film b { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 6.8rem); line-height: .86; letter-spacing: .006em; max-width: 13ch; }
.titles__film > span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-stage-2); }
.titles.is-film .titles__h1 { opacity: 0; transform: translateY(-18px); }
.titles.is-film .titles__film { opacity: 1; transform: none; }
.titles__lede { grid-area: 2 / 1; margin-top: 14px; font-size: .98rem; line-height: 1.4; color: var(--on-stage-2); max-width: 34ch; transition: opacity .4s var(--ease-productive); }
.titles.is-film .titles__lede { opacity: 0; }
.titles__slug { position: absolute; z-index: 4; left: var(--margin); right: var(--margin); top: calc(var(--header-h) + 10px); display: flex; justify-content: flex-end; gap: 16px; color: var(--on-stage-2); pointer-events: none; }
.titles__slug .mono { letter-spacing: .12em; }
.titles__cue { position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-stage-2); display: grid; justify-items: center; gap: 8px; }
.titles__cue i { width: 1px; height: 34px; background: currentColor; display: block; transform-origin: top; animation: cue 2.4s var(--ease-expressive) infinite; }

/* the wall picks up directly under the titles */
.titles + .wallhead-bar { background: var(--stage); padding: clamp(40px, 6vw, 96px) var(--margin) clamp(18px, 2.4vw, 34px); display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.wallhead-bar .h2 { color: var(--on-stage); }
.wallhead-bar .btn { border-color: var(--rule-stage); }

/* phones: the same three layers, restaged. The mark bleeds off both edges up top, the pair stands on the bottom edge */
@media (max-width: 860px) {
  .titles__mark { left: -9vw; width: 118vw; top: 14svh; }
  .titles__film b { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .titles__lede { font-size: .9rem; }
  .titles__cut { left: 0; right: 0; margin-inline: auto; height: 62svh; width: calc(62svh * 1682 / 2480); }
  .titles__type { grid-template-columns: 1fr; bottom: 82px; }
  .titles__h1 { font-size: clamp(1.9rem, 8.6vw, 2.8rem); }
  .titles__cue { display: none; }
}

/* reduced motion and capture mode: the composed opening frame, no pin, no swaps, no zoom */
html.shot .titles__pin { height: 900px; }
@media (prefers-reduced-motion: reduce) { .titles__cue i { animation: none; } }