:root{
  --brand:#e31b23; --ink:#0e1726; --soft:#fff; --muted:#6b7280;
  --ribbon-h:42px; --cf-card-w:min(72vw,360px); --cf-card-h:calc(var(--cf-card-w)*1.25);
}

.coverflow-hero{
  position:relative; min-height:100vh; padding:calc(var(--ribbon-h) + 36px) 20px 48px;
  display:flex; align-items:center; background:var(--soft); overflow:hidden;
}
.coverflow-hero .container{max-width:1200px;margin:auto;width:100%;text-align:center}
.header h1{font-size:clamp(26px,5vw,48px);margin:0 0 8px;color:var(--ink);font-weight:900}
.header p{color:var(--muted);margin:0 0 18px}

/* small toggle */
.cf-lang-switch{display:inline-flex;gap:8px;margin-top:6px}
.cf-lang-btn{border:1px solid var(--brand);background:#fff;color:var(--brand);padding:4px 8px;border-radius:999px;font-weight:800;cursor:pointer}
.cf-lang-btn.is-active, .cf-lang-btn:hover{background:var(--brand);color:var(--ribbon-color, #fff)}

/* ribbon */
.ribbon{position:absolute;inset-inline:0;top:0;height:var(--ribbon-h);
  display:flex;align-items:center;background:var(--ribbon-bg, linear-gradient(90deg,var(--brand),#ff3b3b));
  color:var(--ribbon-color, #fff);font-weight:800;overflow:hidden}
.ribbon__track{white-space:nowrap;animation:slide-rtl var(--ribbon-speed, 18s) linear infinite}
.ribbon__track span{padding:0 24px}
@keyframes slide-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* show/hide language chunks */
.coverflow-hero .cf-lang{display:none}
.coverflow-hero[data-lang="ar"] .cf-lang.cf-ar{display:inline}
.coverflow-hero[data-lang="en"] .cf-lang.cf-en{display:inline}

/* coverflow stage */
.cf-stage{
  perspective:1600px; position:relative; height:var(--cf-card-h);
  display:flex; align-items:center; justify-content:center; margin-top:10px;
}
.cf-card{
  position:absolute; width:var(--cf-card-w); height:var(--cf-card-h);
  border-radius:22px; background:#fff; overflow:hidden;
  box-shadow:0 20px 40px rgba(2,6,23,.15);
  transform-origin:center center; transition:transform .6s ease, opacity .6s ease, filter .6s ease;
  display:flex; align-items:flex-end; justify-content:center;
}
.cf-card img{
  width:100%; height:100%; object-fit:contain;
  background:radial-gradient(120% 80% at 50% 80%, #fff 0%, #fff5f5 60%, #ffffff 100%);
}

/* labels */
.cf-tag{
  position:absolute; top:12px; inset-inline-start:12px;
  background:var(--brand); color:var(--ribbon-color, #fff); font-weight:800; font-size:12px;
  padding:6px 9px; border-radius:999px; box-shadow:0 6px 16px rgba(227,27,35,.25)
}

/* positions */
.cf-card[data-pos="0"]{ transform:translateX(0) rotateY(0) scale(1); z-index:4; filter:none; opacity:1 }
.cf-card[data-pos="-1"]{ transform:translateX(-50%) rotateY(-28deg) scale(.9); z-index:3; filter:saturate(.95) contrast(.97); opacity:.95 }
.cf-card[data-pos="1"] { transform:translateX(50%) rotateY(28deg) scale(.9); z-index:3; filter:saturate(.95) contrast(.97); opacity:.95 }
.cf-card[data-pos="-2"]{ transform:translateX(-90%) rotateY(-36deg) scale(.82); z-index:2; opacity:.65; filter:grayscale(.05) }
.cf-card[data-pos="2"] { transform:translateX(90%) rotateY(36deg) scale(.82); z-index:2; opacity:.65; filter:grayscale(.05) }

.controls{display:flex;gap:10px;justify-content:center;margin-top:16px}
.btn{
  border:2px solid var(--brand); background:#fff; color:var(--brand); font-weight:800;
  border-radius:999px; padding:10px 14px; cursor:pointer; transition:.2s;
}
.btn:hover{background:var(--brand);color:var(--ribbon-color, #fff);transform:translateY(-2px)}

@media (max-width:700px){ :root{ --cf-card-w:78vw } }