/* ═══════════════════════════════════════════════════════════════
   Tool 20 — the 3D carousel (2026-10-22)

   His word: «حط فالموقع الميزه الجديده … و حط صور و شكل كاروسيل
   بيتحرك فالموقع». So the section IS a carousel: a ring of real
   pictures that turns a card at a time, the way the panel's «خطوة
   خطوة» does, and turns under a finger or the mouse too
   (js/car3d.js). Under it, eight of the sixteen looks as the
   panel's own engine draws them — on a transparent ground, so this
   page's dark shows through them.

   The ring is wider than a phone on purpose: the side cards leave
   the frame the way they do in a real edit. The section clips them,
   so the page never scrolls sideways.
   ═══════════════════════════════════════════════════════════════ */

.c3 { overflow: hidden; padding-bottom: 72px; }
.c3 .sec-intro { margin-bottom: 18px; }

.c3-stage {
  --cw: 176px;                      /* a card's width — js/car3d.js sizes it to the stage */
  --ch: calc(var(--cw) * 16 / 9);
  position: relative;
  height: calc(var(--ch) + 168px);
  perspective: 1300px;
  perspective-origin: 50% 34%;
  touch-action: pan-y;              /* a sideways drag turns it; the page still scrolls */
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  outline: none;
}
.c3-stage.dragging { cursor: grabbing; }
.c3-stage:focus-visible::after {
  content: ''; position: absolute; inset: 6px max(16px, calc(50% - 560px));
  border-radius: var(--r-big); outline: 2px solid var(--red-lift); outline-offset: 2px;
  pointer-events: none;
}

/* the light the ring stands in */
.c3-floor {
  position: absolute; left: 50%; top: calc(42% + var(--ch) / 2 - 6px);
  width: min(980px, 130%); height: 170px; transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(47,217,190,.26), rgba(47,217,190,.07) 52%, transparent 76%),
    radial-gradient(40% 60% at 70% 50%, rgba(217,107,162,.10), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.c3-ring {
  position: absolute; left: 50%; top: 42%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.c3-card {
  position: absolute; margin: 0;
  width: var(--cw); height: var(--ch);
  left: calc(var(--cw) / -2); top: calc(var(--ch) / -2);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-200);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 22px 46px -20px rgba(0,0,0,.95);
  /* the floor's reflection (Chromium and Safari; elsewhere simply none) */
  -webkit-box-reflect: below 12px linear-gradient(transparent 66%, rgba(255,255,255,.2));
  cursor: pointer;
}
.c3-card img {
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
/* farther = darker; js/car3d.js sets --d from where the card faces */
.c3-card::after {
  content: ''; position: absolute; inset: 0;
  background: #05040A; opacity: var(--d, 0);
  pointer-events: none;
}
/* the one in front carries the glow */
.c3-card.front { box-shadow: 0 0 0 1.5px rgba(91,232,211,.75), 0 22px 46px -20px rgba(0,0,0,.95), 0 0 60px -18px rgba(47,217,190,.75); }

.c3-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--tx-3); white-space: nowrap;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-lift); background: rgba(11,10,14,.6);
  pointer-events: none;
}
.c3-hint svg { width: 18px; height: 18px; color: var(--red-soft); }

/* ── what it does ── */
.c3-points {
  list-style: none; margin: 34px auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.c3-points li {
  border-radius: var(--r-card); border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--bg-100), var(--bg-050));
  padding: 16px 18px 18px;
}
.c3-points b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.c3-points b i { font-style: normal; color: var(--red-soft); }
.c3-points span { display: block; font-size: 14px; color: var(--tx-2); line-height: 1.75; }

/* ── the looks, as the engine draws them ── */
.c3-looks-h { margin: 52px 0 6px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.c3-looks-sub { margin: 0 0 22px; text-align: center; color: var(--tx-3); font-size: 15px; }
.c3-looks {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.c3-look {
  margin: 0; border-radius: var(--r-card); border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(47,217,190,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-000), var(--bg-100));
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.c3-look:hover { transform: translateY(-4px); border-color: rgba(47,217,190,.32); box-shadow: var(--sink), 0 0 40px -24px rgba(47,217,190,.6); }
.c3-look img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
.c3-look figcaption { padding: 0 14px 14px; margin-top: -6px; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--tx); }
.c3-more { margin: 18px 0 0; text-align: center; color: var(--tx-3); font-size: 15px; }

@media (max-width: 900px) {
  .c3-points { grid-template-columns: repeat(2, 1fr); }
  .c3-looks { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .c3-look figcaption { font-size: 13px; padding: 0 8px 10px; }
}
@media (max-width: 640px) {
  .c3 { padding-bottom: 54px; }
  .c3-stage { height: calc(var(--ch) + 132px); perspective: 900px; }
  .c3-points { grid-template-columns: 1fr 1fr; gap: 10px; }
  .c3-points li { padding: 13px 14px 14px; }
  .c3-points b { font-size: 15px; }
  .c3-points span { font-size: 13px; }
  .c3-looks { grid-template-columns: repeat(2, 1fr); }
  .c3-hint { font-size: 12.5px; }
}