/* Reel coverflow: vertical reels in 3D, the one in front plays, the rest lean back on both sides. Drag, swipe,
   arrow keys or the dock move between them (coverflow.js sets each card's transform). The stage always runs
   left → right, also on the Hebrew page, so the arrows match what you see. */
.cf-sec { padding: 120px 0 0; text-align: center; }
.cf-sec .sub { margin-inline: auto; }
.cf { position: relative; isolation: isolate; margin-top: 8px; }
.cf::before { content: ""; position: absolute; inset: 10% 10% 20%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, #ff6a1324, transparent 70%); pointer-events: none; }
.cf-stage { position: relative; height: min(620px, 74vh); display: flex; align-items: center; justify-content: center; perspective: 1100px; transform-style: preserve-3d;
  touch-action: pan-y; user-select: none; cursor: grab; direction: ltr; }
.cf-stage.dragging { cursor: grabbing; }
.cf-floor { position: absolute; bottom: 0; left: 50%; width: min(560px, 80%); height: 36px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, #000000b3, transparent 70%); filter: blur(12px); pointer-events: none; }
.cf-card { position: absolute; width: var(--cf-w, 300px); aspect-ratio: 9 / 16; padding: 6px; border: 1px solid var(--line2); border-radius: 28px; background: #16181c;
  box-shadow: inset 0 1px #ffffff14, 0 24px 48px #000000a6; backface-visibility: hidden; will-change: transform; cursor: pointer;
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .5s ease, border-color .25s ease-out; }
.cf-card.on { border-color: #ff6a1399; }
.cf-stage.dragging .cf-card { transition: none; }
.cf-card video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; background: #000; pointer-events: none; }
.cf-card .cf-shade { position: absolute; inset: 6px; border-radius: 22px; background: #000; opacity: var(--shade, 0); transition: opacity .4s ease-out; pointer-events: none; }
.cf-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.cf-bottom { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 24px; }
.cf-info { min-height: 60px; }
.cf-info h3 { margin: 0 0 6px; font: 600 24px/1.2 var(--font-display); letter-spacing: -.015em; }
.cf-info p { margin: 0; color: var(--muted); font-size: 14px; }
.cf-dock { display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 20px; border: 1px solid var(--line2); border-radius: 40px; background: #17181bd9;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); direction: ltr; }
.cf-pos { display: flex; gap: 6px; padding-right: 14px; border-right: 1px solid var(--line2); color: var(--muted); font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.cf-pos b { color: var(--text); font-weight: 500; }
.cf-dock button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; transition: background-color .15s ease-out; }
.cf-dock button:hover, .cf-dock .cf-play { background: #ffffff12; }
.cf-dock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-dock .cf-play svg { fill: currentColor; stroke: none; width: 14px; height: 14px; }
.cf-hint { margin: 0; color: var(--dim); font-size: 12px; }

@media (max-width: 600px) {
  .cf-sec { padding-top: 88px; }
  .cf-stage { height: 480px; perspective: 900px; }
  .cf-card { border-radius: 22px; padding: 4px; }
  .cf-card video, .cf-card .cf-shade { border-radius: 18px; }
  .cf-info h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .cf-card, .cf-card .cf-shade { transition: none; } }