/* Cinematic layer — loaded only by the comparison guides.
   Kept in its own file so every existing page renders byte-identically.

   Design rule that outranks every visual goal: A FAILED ANIMATION MUST NEVER
   HIDE CONTENT. An earlier version parked elements at opacity:0 / scaleX(0)
   and let the scroll timeline bring them in; when the timeline did not
   advance, whole sections stayed invisible. So nothing here animates opacity
   on content, and every resting state is the readable one:

     - text blocks animate transform only, with fill-mode backwards, so the
       worst case is a block sitting ~18px low — still fully readable;
     - bars use fill-mode none, so their resting state is the correct, full
       length and a stalled timeline simply shows a finished chart;
     - only the decorative progress rail may end up invisible, which costs
       the reader nothing.

   Everything animated is transform (compositor-only), so this layer cannot
   move layout or cost CLS. No JavaScript, so no INP cost and nothing for the
   CSP to block. prefers-reduced-motion switches the whole layer off. */

/* ---------- scroll progress rail (decorative) ---------- */

.cine-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}

.cine-progress span {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--aqua), var(--blue) 55%, var(--coral));
}

/* ---------- hero ---------- */

.cine-title span {
  display: inline-block;
  background: linear-gradient(100deg, var(--ink) 20%, var(--aqua) 50%, var(--ink) 80%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ---------- price bars ---------- */
/* The real length is the inline --pct width, so the value is correct even if
   the reveal never runs; the animation only wipes it into view. */

.cine-bars {
  margin: 22px 0 6px;
  display: grid;
  gap: 12px;
}

.cine-bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 168px) minmax(0, 1fr) 74px;
  align-items: center;
  gap: 14px;
}

.cine-bar-row > b {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.25;
}

.cine-bar-track {
  height: 30px;
  border-radius: 999px;
  background: rgba(6, 43, 51, .07);
  overflow: hidden;
}

.cine-bar-fill {
  height: 100%;
  width: calc(var(--pct) * 1%);
  border-radius: 999px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--aqua), var(--blue));
}

.cine-bar-row.is-best .cine-bar-fill {
  background: linear-gradient(90deg, var(--aqua), #14b39c);
}

.cine-bar-row.is-high .cine-bar-fill {
  background: linear-gradient(90deg, #ffb38a, var(--coral));
}

.cine-bar-row > i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
}

@media (max-width: 620px) {
  .cine-bar-row {
    grid-template-columns: minmax(0, 1fr) 66px;
    grid-template-areas: "label value" "track track";
    gap: 6px 10px;
  }
  .cine-bar-row > b { grid-area: label; }
  .cine-bar-row > i { grid-area: value; }
  .cine-bar-track { grid-area: track; height: 24px; }
}

/* ---------- verdict strip ---------- */

.cine-verdict {
  margin: 26px 0;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 60%, #12525c 100%);
  color: var(--paper);
  box-shadow: var(--shadow-premium);
}

.cine-verdict strong {
  display: block;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--aqua-light);
  margin-bottom: 8px;
}

.cine-verdict p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--paper);
}

.cine-verdict p + p { margin-top: 10px; }

/* ---------- keyframes ---------- */

@keyframes cine-rise {
  from { transform: translate3d(0, 18px, 0); }
  to   { transform: none; }
}

@keyframes cine-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes cine-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes cine-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

@keyframes cine-sheen {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* ---------- entry animation (time-based, always completes) ---------- */

.cine-hero .article-hero-media img {
  animation: cine-kenburns 1400ms cubic-bezier(.22, .61, .36, 1) both;
}

.cine-title span {
  animation: cine-sheen 2600ms cubic-bezier(.4, 0, .2, 1) 260ms both;
}

/* ---------- scroll-driven reveals (progressive enhancement) ---------- */

@supports (animation-timeline: view()) {
  .cine-progress span {
    animation: cine-progress linear both;
    animation-timeline: scroll(root block);
  }

  /* fill backwards: worst case the block rests 18px low — always readable */
  .cine-reveal {
    animation: cine-rise cubic-bezier(.22, .61, .36, 1) backwards;
    animation-timeline: view(block);
    animation-range: entry 6% cover 24%;
  }

  /* fill none: worst case the bar rests at its correct full length */
  .cine-bar-fill {
    animation: cine-grow cubic-bezier(.22, .61, .36, 1) none;
    animation-timeline: view(block);
    animation-range: entry 12% cover 34%;
  }

  /* Stagger table rows so a long comparison reads as a sequence, not a jump. */
  .cine-table tbody tr {
    animation: cine-rise cubic-bezier(.22, .61, .36, 1) backwards;
    animation-timeline: view(block);
    animation-range: entry 2% cover 18%;
  }
}

/* ---------- motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  .cine-progress { display: none; }

  .cine-hero .article-hero-media img,
  .cine-title span,
  .cine-reveal,
  .cine-bar-fill,
  .cine-table tbody tr {
    animation: none !important;
    transform: none !important;
  }

  .cine-title span {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
  }
}