/* ========================================================================
   HL2MP — “Why HL2DM?” 3D ring + mobile swipe fallback
   ===================================================================== */

.why3d-section h2{ margin-bottom:8px; }

/* subtle subtitle line under the gradient header */
.cine-subtitle{
  text-align:center;
  margin: 6px auto 12px;
  max-width: 92vw;
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: clamp(14px, .9rem + .4vw, 18px);
  background: linear-gradient(90deg, var(--cine-primary,#00e5ff), var(--cine-accent,#ff00ea));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 8px rgba(0,229,255,.18),
    0 0 10px rgba(255,0,234,.12);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.45));
}
@media (max-width: 720px){
  .cine-subtitle{ margin: 4px auto 10px; }
}

/* ===============================
   3D ring carousel (desktop)
   =============================== */

.why3d-frame{
  border:0; background:none; padding:0;
  display:flex; justify-content:center;
  overflow:visible;
}

/* Master variables — radius auto-computed so slides never collide */
.why3d{
  --u: 2.2;                 /* overall scale knob (desktop default) */
  --N: 9;                   /* number of slides */
  --pi: 3.14159265;
  --gap: 1.08;              /* >1 = extra spacing between slides */

  /* Base geometry */
  --slide-w:     calc(186px * var(--u));
  --slide-h:     calc(116px * var(--u));
  --container-w: calc(210px * var(--u));
  --rad:         calc(12px  * var(--u));
  --persp:       calc(1000px * var(--u));

  /* Auto radius: circumference ≥ N * slide width * gap */
  --tz: calc((var(--N) * var(--slide-w) * var(--gap)) / (2 * var(--pi)));

  /* container height + a little extra so HUD bottoms aren’t cropped */
  --extra-h:     calc(var(--slide-h) * 0.45);
  --container-h: calc(140px * var(--u) + var(--extra-h));

  --spin: 60s;              /* full rotation duration */
}

.why3d-container{
  width: min(var(--container-w), 100vw - 24px);
  height: var(--container-h);
  position: relative;
  perspective: var(--persp);
  -webkit-perspective: var(--persp);
  perspective-origin: 50% 50%;
  overflow: visible;
  margin-inline: auto;
  max-width: 100vw;
}

#why-carousel{
  width:100%; height:100%;
  position:absolute;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  animation: why-rot var(--spin) linear infinite;
  -webkit-animation: why-rot var(--spin) linear infinite;
}
#why-carousel:hover{ animation-play-state: paused; -webkit-animation-play-state: paused; }

#why-carousel figure{
  position:absolute; display:block;
  width: var(--slide-w); height: var(--slide-h);
  left:50%; top:50%;
  transform: translate(-50%, -50%);   /* base; rotate/translateZ appended below */
  background:#000; overflow:hidden; border-radius: var(--rad);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 9 slides at 40° steps */
#why-carousel figure:nth-child(1) { transform: translate(-50%, -50%) rotateY(  0deg) translateZ(var(--tz)); }
#why-carousel figure:nth-child(2) { transform: translate(-50%, -50%) rotateY( 40deg) translateZ(var(--tz)); }
#why-carousel figure:nth-child(3) { transform: translate(-50%, -50%) rotateY( 80deg) translateZ(var(--tz)); }
#why-carousel figure:nth-child(4) { transform: translate(-50%, -50%) rotateY(120deg) translateZ(var(--tz)); }
#why-carousel figure:nth-child(5) { transform: translate(-50%, -50%) rotateY(160deg) translateZ(var(--tz)); }
#why-carousel figure:nth-child(6) { transform: translate(-50%, -50%) rotateY(200deg) translateZ(var(--tz)); }
#why-carousel figure:nth-child(7) { transform: translate(-50%, -50%) rotateY(240deg) translateZ(var(--tz)); }
#why-carousel figure:nth-child(8) { transform: translate(-50%, -50%) rotateY(280deg) translateZ(var(--tz)); }
#why-carousel figure:nth-child(9) { transform: translate(-50%, -50%) rotateY(320deg) translateZ(var(--tz)); }

#why-carousel img{
  display:block; width:100%; height:100%;
  object-fit: cover; object-position: center bottom;
  filter: grayscale(1);
  transition: transform .5s ease, filter .5s ease;
  cursor: pointer;
}
#why-carousel img:hover{ filter: grayscale(0); transform: scale(1.2); }

/* Spin */
@keyframes why-rot{ from{ transform: rotateY(0deg);} to{ transform: rotateY(360deg);} }
@-webkit-keyframes why-rot{ from{ -webkit-transform: rotateY(0deg);} to{ -webkit-transform: rotateY(360deg);} }

@media (prefers-reduced-motion: reduce){
  #why-carousel{ animation: none; -webkit-animation: none; }
}

/* ===== Responsive scale (no overlap; radius auto-updates) ===== */
@media (max-width: 1100px){ .why3d{ --u: 1.8; } }
@media (max-width: 900px) { .why3d{ --u: 1.45; } }
@media (max-width: 720px) { .why3d{ --u: 1.18; --gap: 1.10; } }

/* Mobile: clamp scale to viewport width (robust on iOS Safari) */
@media (max-width: 560px){
  .why3d{
    /* Baseline 360px viewport => ~0.62 scale; capped at 1.0 */
    --u: clamp(0.62, ((100vw - 24px) / 360), 1.0);
    --gap: 1.12;
  }
}
@media (max-width: 420px){
  .why3d{
    --u: clamp(0.55, ((100vw - 20px) / 360), 0.88);
    --gap: 1.14;
  }
}

/* ===============================
   Mobile fallback — swipe slider
   =============================== */

/* Hidden by default; only shown on small screens */
.why-swipe{ display:none; }

/* The track is a horizontal scroller with scroll-snap */
.why-swipe-track{
  display:flex;
  gap: 10px;
  overflow-x:auto;
  padding: 10px 14px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
}
.why-swipe-track::-webkit-scrollbar{ display:none; } /* WebKit */

/* Cards */
.why-swipe-card{
  flex: 0 0 auto;
  width: min(92vw, 520px);         /* never exceed viewport; cap on large phones */
  aspect-ratio: 16 / 9;            /* nice video-ish shape */
  border-radius: 14px;
  border: 1px solid rgba(150,180,210,.22);
  background:#000;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  overflow:hidden;
  scroll-snap-align: center;
}

/* Images fill each card */
.why-swipe-card img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center bottom;
  display:block;
  filter: grayscale(1);
  transition: transform .25s ease, filter .25s ease;
}
.why-swipe-card:active img{ transform: scale(0.98); filter: grayscale(0); }

/* ===== Toggle: ring on desktop, swipe on phones ===== */
@media (max-width: 720px){
  /* hide the 3D ring on small screens */
  .why3d-frame{ display:none !important; }
  /* show the swipe slider */
  .why-swipe{ display:block; }
}

/* Small phones: tighten spacing a bit */
@media (max-width: 420px){
  .why-swipe-track{ gap:8px; padding-inline:10px; }
  .why-swipe-card{ width: min(95vw, 480px); border-radius:12px; }
}