/* Give the foreground leaves separate paths through the first camera move. */
html, body { overflow-x: clip; }
.coffee-cinema .cine-leaf-left {
  --leaf-progress: clamp(0, calc(var(--cine-p, 0) * 11), 1);
  transform: translate3d(calc(var(--leaf-progress) * -116%), calc(var(--leaf-progress) * 16%), 0)
    scale(calc(1 + var(--leaf-progress) * .48)) rotate(calc(var(--leaf-progress) * -6deg));
}

.coffee-cinema .cine-leaf-right {
  --leaf-progress: clamp(0, calc((var(--cine-p, 0) - .018) * 8.5), 1);
  transform: translate3d(calc(var(--leaf-progress) * 127%), calc(var(--leaf-progress) * -20%), 0)
    scaleX(-1) scale(calc(1 + var(--leaf-progress) * .55)) rotate(calc(-62deg - var(--leaf-progress) * 9deg));
}

/* One continuous spatial motif carries the cherry interior into the warehouse film. */
.coffee-cinema .cine-kinetics {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  perspective: 900px;
}

.coffee-cinema .cine-seed-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(58vmin, 520px);
  aspect-ratio: 1;
  margin: min(-29vmin, -260px) 0 0 min(-29vmin, -260px);
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.coffee-cinema .cine-seed-arc {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(240, 220, 153, .58);
  border-left-color: transparent;
  border-bottom-color: rgba(255, 248, 208, .08);
  filter: drop-shadow(0 0 12px rgba(244, 216, 128, .15));
  will-change: transform, opacity;
}

.coffee-cinema .cine-seed-arc-2 { inset: 16%; border-width: 2px 0 1px 1px; }
.coffee-cinema .cine-seed-arc-3 { inset: 28%; border-right-color: transparent; }

.coffee-cinema .cine-portal-depth {
  position: absolute;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: left, top, width, height, opacity;
}

.coffee-cinema .cine-portal-ring,
.coffee-cinema .cine-portal-glow,
.coffee-cinema .cine-portal-gate {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.coffee-cinema .cine-portal-ring {
  border: clamp(1px, .14vmin, 2px) solid rgba(226, 197, 114, .76);
  box-shadow: inset 0 0 18px rgba(226, 197, 114, .12), 0 0 24px rgba(226, 197, 114, .14);
  transform-origin: center;
}

.coffee-cinema .cine-portal-glow {
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 239, 184, .34), rgba(222, 188, 93, .08) 42%, transparent 72%);
  filter: blur(10px);
}

.coffee-cinema .cine-portal-gate {
  width: 50%;
  background: linear-gradient(90deg, rgba(23, 48, 31, .72), rgba(81, 75, 43, .28));
  border: 1px solid rgba(222, 194, 116, .4);
  transform-origin: left center;
}

.coffee-cinema .cine-portal-gate-left { left: 0; right: auto; transform-origin: right center; }
.coffee-cinema .cine-portal-gate-right { left: 50%; right: auto; transform-origin: left center; }

@media (max-width: 759px) {
  .coffee-cinema .cine-seed-orbit { width: 72vmin; margin: -36vmin 0 0 -36vmin; }
  .coffee-cinema .cine-portal-depth { perspective: 520px; }
  .coffee-cinema .cine-portal-ring { border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .coffee-cinema .cine-kinetics { display: none !important; }
}

/* Scroll-blocked narration. Each phrase performs with the scene that introduces it. */
.coffee-cinema .cine-caption {
  left: clamp(24px, 5vw, 72px) !important;
  bottom: clamp(30px, 6vh, 72px) !important;
  z-index: 9 !important;
  display: flex;
  gap: .28em;
  width: auto;
  max-width: min(70vw, 620px);
  margin: 0;
  color: #fff9e9;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(18px, 2.15vw, 31px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.025em;
  text-shadow: 0 2px 18px rgba(4, 18, 11, .48);
  white-space: nowrap;
  pointer-events: none;
  will-change: opacity;
}

.coffee-cinema .cine-narration-word {
  display: inline-block;
  transform-origin: 50% 70%;
  will-change: transform, opacity, filter;
}

.coffee-cinema .cine-caption[data-beat="cherry"] {
  left: 50% !important;
  bottom: clamp(34px, 7vh, 78px) !important;
  transform: translateX(-50%);
  justify-content: center;
}

.coffee-cinema .cine-caption[data-beat="hand"] {
  left: auto !important;
  right: clamp(24px, 7vw, 98px);
  bottom: clamp(50px, 12vh, 130px) !important;
  justify-content: flex-end;
}

.coffee-cinema .cine-caption[data-beat="carried"] {
  left: clamp(24px, 7vw, 96px) !important;
  bottom: clamp(34px, 8vh, 90px) !important;
  font-size: clamp(17px, 1.8vw, 25px);
  letter-spacing: .005em;
}

.coffee-cinema .cine-caption[data-beat="threshold"] {
  left: 50% !important;
  bottom: clamp(38px, 9vh, 100px) !important;
  transform: translateX(-50%);
  justify-content: center;
  font-size: clamp(18px, 2vw, 28px);
}

.coffee-cinema .cine-narration-thread {
  --thread-scale: 0;
  --thread-shift: 0%;
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  bottom: clamp(21px, 4.7vh, 57px);
  z-index: 8;
  width: min(27vw, 330px);
  height: 1px;
  background: linear-gradient(90deg, rgba(238, 211, 133, .08), #ecd58f 34%, rgba(255, 244, 204, .18));
  transform: translate3d(var(--thread-shift),0,0) scaleX(var(--thread-scale));
  transform-origin: left;
  box-shadow: 0 0 10px rgba(236, 213, 143, .2);
  pointer-events: none;
  will-change: transform, opacity;
}

.coffee-cinema .cine-narration-thread[data-beat="cherry"],
.coffee-cinema .cine-narration-thread[data-beat="threshold"] {
  left: 50%;
  width: min(34vw, 400px);
  transform-origin: center;
  margin-left: min(-17vw, -200px);
}

.coffee-cinema .cine-narration-thread[data-beat="hand"] {
  left: auto;
  right: clamp(24px, 7vw, 98px);
  bottom: clamp(39px, 10.4vh, 112px);
  transform-origin: right;
}

@media (max-width: 759px) {
  .coffee-cinema .cine-caption {
    left: 24px !important;
    bottom: 42px !important;
    max-width: calc(100vw - 48px);
    gap: .24em;
    font-size: clamp(17px, 5.4vw, 23px);
  }
  .coffee-cinema .cine-caption[data-beat="hand"] {
    right: 24px;
    bottom: 76px !important;
  }
  .coffee-cinema .cine-caption[data-beat="carried"] { bottom: 44px !important; }
  .coffee-cinema .cine-caption[data-beat="threshold"] { bottom: 58px !important; }
  .coffee-cinema .cine-narration-thread { left: 24px; bottom: 30px; width: 42vw; }
  .coffee-cinema .cine-narration-thread[data-beat="hand"] { right: 24px; bottom: 64px; }
  .coffee-cinema .cine-narration-thread[data-beat="cherry"],
  .coffee-cinema .cine-narration-thread[data-beat="threshold"] { width: 54vw; margin-left: -27vw; }
}

@media (prefers-reduced-motion: reduce) {
  .coffee-cinema .cine-narration-thread { display: none !important; }
  .coffee-cinema .cine-narration-word { filter: none !important; transform: none !important; }
}