/* ============================================================
   CAZURI REALE — coridor 3D de poze. Doua sine de carduri vin din
   adancime spre privitor; perspectiva produce si marirea, si
   deplasarea laterala. Totul in cqw => forma identica la orice
   dimensiune. Port 1:1 al componentei "ImageStreamHero".
   Coridorul NU are fundal propriu: face parte din cardul alb al
   sectiunii, iar pozele se sting in alb prin scrim-ul de mai jos.
   ============================================================ */

/* desktop: margine interioara la iesire 64.4cqw (prag 50 => OK), crestere/card 1.333 */

/* mobil  : margine interioara la iesire 59.3cqw (prag 50 => OK), crestere/card 1.369 */

.cstream {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: transparent;
  min-height: clamp(360px, 42vw, 560px);
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
  isolation: isolate;
}
.cstream__rails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 30cqw;
  perspective-origin: 50% 55%;
}
.cstream__space { position: absolute; inset: 0; transform-style: preserve-3d; }
.cstream__card {
  position: absolute;
  overflow: hidden;
  left: 50%;
  top: 55%;
  width: 18cqw;
  height: 25cqw;
  margin-left: -9cqw;
  margin-top: -12.5cqw;
  border-radius: 0.4cqw;
  backface-visibility: hidden;
  animation-duration: 18s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.cstream__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cstream__card--r { animation-name: cstreamR; }
.cstream__card--l { animation-name: cstreamL; }

/* intarziere negativa per card => coridorul e plin din primul frame */
.cstream__card:nth-of-type(10n+1) { animation-delay: 0.00s; }
.cstream__card:nth-of-type(10n+2) { animation-delay: -1.80s; }
.cstream__card:nth-of-type(10n+3) { animation-delay: -3.60s; }
.cstream__card:nth-of-type(10n+4) { animation-delay: -5.40s; }
.cstream__card:nth-of-type(10n+5) { animation-delay: -7.20s; }
.cstream__card:nth-of-type(10n+6) { animation-delay: -9.00s; }
.cstream__card:nth-of-type(10n+7) { animation-delay: -10.80s; }
.cstream__card:nth-of-type(10n+8) { animation-delay: -12.60s; }
.cstream__card:nth-of-type(10n+9) { animation-delay: -14.40s; }
.cstream__card:nth-of-type(10n+10) { animation-delay: -16.20s; }

@keyframes cstreamR {
  0.00% { transform: translate3d(-11.00cqw,0,-258.46cqw) rotateY(-6.00deg); }
  4.17% { transform: translate3d(-3.79cqw,0,-225.92cqw) rotateY(-6.92deg); }
  8.33% { transform: translate3d(2.73cqw,0,-197.04cqw) rotateY(-7.83deg); }
  12.50% { transform: translate3d(8.60cqw,0,-171.43cqw) rotateY(-8.75deg); }
  16.67% { transform: translate3d(13.87cqw,0,-148.70cqw) rotateY(-9.67deg); }
  20.83% { transform: translate3d(18.56cqw,0,-128.54cqw) rotateY(-10.58deg); }
  25.00% { transform: translate3d(22.72cqw,0,-110.65cqw) rotateY(-11.50deg); }
  29.17% { transform: translate3d(26.37cqw,0,-94.78cqw) rotateY(-12.42deg); }
  33.33% { transform: translate3d(29.57cqw,0,-80.70cqw) rotateY(-13.33deg); }
  37.50% { transform: translate3d(32.34cqw,0,-68.21cqw) rotateY(-14.25deg); }
  41.67% { transform: translate3d(34.71cqw,0,-57.13cqw) rotateY(-15.17deg); }
  45.83% { transform: translate3d(36.73cqw,0,-47.30cqw) rotateY(-16.08deg); }
  50.00% { transform: translate3d(38.42cqw,0,-38.58cqw) rotateY(-17.00deg); }
  54.17% { transform: translate3d(39.81cqw,0,-30.84cqw) rotateY(-17.92deg); }
  58.33% { transform: translate3d(40.94cqw,0,-23.98cqw) rotateY(-18.83deg); }
  62.50% { transform: translate3d(41.84cqw,0,-17.89cqw) rotateY(-19.75deg); }
  66.67% { transform: translate3d(42.53cqw,0,-12.48cqw) rotateY(-20.67deg); }
  70.83% { transform: translate3d(43.06cqw,0,-7.69cqw) rotateY(-21.58deg); }
  75.00% { transform: translate3d(43.43cqw,0,-3.44cqw) rotateY(-22.50deg); }
  79.17% { transform: translate3d(43.69cqw,0,0.33cqw) rotateY(-23.42deg); }
  83.33% { transform: translate3d(43.85cqw,0,3.68cqw) rotateY(-24.33deg); }
  87.50% { transform: translate3d(43.94cqw,0,6.65cqw) rotateY(-25.25deg); }
  91.67% { transform: translate3d(43.98cqw,0,9.28cqw) rotateY(-26.17deg); }
  95.83% { transform: translate3d(44.00cqw,0,11.62cqw) rotateY(-27.08deg); }
  100.00% { transform: translate3d(44.00cqw,0,13.70cqw) rotateY(-28.00deg); }
}

@keyframes cstreamL {
  0.00% { transform: translate3d(11.00cqw,0,-258.46cqw) rotateY(6.00deg); }
  4.17% { transform: translate3d(3.79cqw,0,-225.92cqw) rotateY(6.92deg); }
  8.33% { transform: translate3d(-2.73cqw,0,-197.04cqw) rotateY(7.83deg); }
  12.50% { transform: translate3d(-8.60cqw,0,-171.43cqw) rotateY(8.75deg); }
  16.67% { transform: translate3d(-13.87cqw,0,-148.70cqw) rotateY(9.67deg); }
  20.83% { transform: translate3d(-18.56cqw,0,-128.54cqw) rotateY(10.58deg); }
  25.00% { transform: translate3d(-22.72cqw,0,-110.65cqw) rotateY(11.50deg); }
  29.17% { transform: translate3d(-26.37cqw,0,-94.78cqw) rotateY(12.42deg); }
  33.33% { transform: translate3d(-29.57cqw,0,-80.70cqw) rotateY(13.33deg); }
  37.50% { transform: translate3d(-32.34cqw,0,-68.21cqw) rotateY(14.25deg); }
  41.67% { transform: translate3d(-34.71cqw,0,-57.13cqw) rotateY(15.17deg); }
  45.83% { transform: translate3d(-36.73cqw,0,-47.30cqw) rotateY(16.08deg); }
  50.00% { transform: translate3d(-38.42cqw,0,-38.58cqw) rotateY(17.00deg); }
  54.17% { transform: translate3d(-39.81cqw,0,-30.84cqw) rotateY(17.92deg); }
  58.33% { transform: translate3d(-40.94cqw,0,-23.98cqw) rotateY(18.83deg); }
  62.50% { transform: translate3d(-41.84cqw,0,-17.89cqw) rotateY(19.75deg); }
  66.67% { transform: translate3d(-42.53cqw,0,-12.48cqw) rotateY(20.67deg); }
  70.83% { transform: translate3d(-43.06cqw,0,-7.69cqw) rotateY(21.58deg); }
  75.00% { transform: translate3d(-43.43cqw,0,-3.44cqw) rotateY(22.50deg); }
  79.17% { transform: translate3d(-43.69cqw,0,0.33cqw) rotateY(23.42deg); }
  83.33% { transform: translate3d(-43.85cqw,0,3.68cqw) rotateY(24.33deg); }
  87.50% { transform: translate3d(-43.94cqw,0,6.65cqw) rotateY(25.25deg); }
  91.67% { transform: translate3d(-43.98cqw,0,9.28cqw) rotateY(26.17deg); }
  95.83% { transform: translate3d(-44.00cqw,0,11.62cqw) rotateY(27.08deg); }
  100.00% { transform: translate3d(-44.00cqw,0,13.70cqw) rotateY(28.00deg); }
}

/* scrim ALB in trei straturi: stinge pozele in cardul din spate (sus/jos),
   inchide „gatul" coridorului si estompeaza marginile laterale */
.cstream::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,.2) 24%, rgba(255,255,255,.32) 64%, #fff 100%),
    radial-gradient(ellipse 54% 40% at 50% 55%, rgba(255,255,255,.86), rgba(255,255,255,0) 74%),
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 8%, rgba(255,255,255,0) 92%, #fff 100%);
}
.cstream__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  min-height: inherit;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.2rem, 4vw, 2.6rem);
  text-align: center;
  color: var(--ink);
}
.cstream__body h3 { color: var(--ink); text-wrap: balance; }
.cstream__lead {
  max-width: 44ch;
  margin-inline: auto;
  color: var(--ink-60);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  text-wrap: balance;
}

/* Pauza, nu oprire: fiecare card e deja lasat in zbor de intarzierea
   negativa, deci ingheata ca un cadru terminat, nu se prabuseste pe axa. */
@media (prefers-reduced-motion: reduce) {
  .cstream__card { animation-play-state: paused; }
}
/* Optimizare telefon: cat timp sectiunea nu e pe ecran, cele 20 de straturi 3D
   nu mai sunt compuse la fiecare cadru (clasa pusa din JS). */
.cstream.is-offscreen .cstream__card { animation-play-state: paused; }

@media (max-width: 720px) {
  .cstream { min-height: 450px; }
  .cstream__card--r { animation-name: cstreamRm; }
  .cstream__card--l { animation-name: cstreamLm; }
  .cstream__lead { font-size: .88rem; }
  .cstream__body { padding-block: 2rem 1.8rem; }
  /* banda urca, ca textul sa stea sub ea, nu peste ea */
  .cstream__rails { perspective-origin: 50% 42%; }
  .cstream__card { top: 42%; }
  /* voal mai discret: pe telefon banda e mai mare si merita sa se vada */
  .cstream::after {
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,.08) 16%, rgba(255,255,255,.22) 40%, rgba(255,255,255,.82) 58%, #fff 100%),
      radial-gradient(ellipse 46% 28% at 50% 42%, rgba(255,255,255,.62), rgba(255,255,255,0) 76%),
      linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 5%, rgba(255,255,255,0) 95%, #fff 100%);
  }
}

@keyframes cstreamRm {
  0.00% { transform: translate3d(-8.00cqw,0,-191.89cqw) rotateY(-6.00deg); }
  4.17% { transform: translate3d(-3.28cqw,0,-164.69cqw) rotateY(-6.92deg); }
  8.33% { transform: translate3d(0.99cqw,0,-140.82cqw) rotateY(-7.83deg); }
  12.50% { transform: translate3d(4.83cqw,0,-119.88cqw) rotateY(-8.75deg); }
  16.67% { transform: translate3d(8.28cqw,0,-101.51cqw) rotateY(-9.67deg); }
  20.83% { transform: translate3d(11.35cqw,0,-85.38cqw) rotateY(-10.58deg); }
  25.00% { transform: translate3d(14.07cqw,0,-71.24cqw) rotateY(-11.50deg); }
  29.17% { transform: translate3d(16.46cqw,0,-58.83cqw) rotateY(-12.42deg); }
  33.33% { transform: translate3d(18.56cqw,0,-47.94cqw) rotateY(-13.33deg); }
  37.50% { transform: translate3d(20.37cqw,0,-38.38cqw) rotateY(-14.25deg); }
  41.67% { transform: translate3d(21.92cqw,0,-30.00cqw) rotateY(-15.17deg); }
  45.83% { transform: translate3d(23.24cqw,0,-22.64cqw) rotateY(-16.08deg); }
  50.00% { transform: translate3d(24.34cqw,0,-16.19cqw) rotateY(-17.00deg); }
  54.17% { transform: translate3d(25.26cqw,0,-10.53cqw) rotateY(-17.92deg); }
  58.33% { transform: translate3d(26.00cqw,0,-5.56cqw) rotateY(-18.83deg); }
  62.50% { transform: translate3d(26.59cqw,0,-1.20cqw) rotateY(-19.75deg); }
  66.67% { transform: translate3d(27.04cqw,0,2.62cqw) rotateY(-20.67deg); }
  70.83% { transform: translate3d(27.38cqw,0,5.98cqw) rotateY(-21.58deg); }
  75.00% { transform: translate3d(27.63cqw,0,8.93cqw) rotateY(-22.50deg); }
  79.17% { transform: translate3d(27.80cqw,0,11.51cqw) rotateY(-23.42deg); }
  83.33% { transform: translate3d(27.90cqw,0,13.78cqw) rotateY(-24.33deg); }
  87.50% { transform: translate3d(27.96cqw,0,15.76cqw) rotateY(-25.25deg); }
  91.67% { transform: translate3d(27.99cqw,0,17.51cqw) rotateY(-26.17deg); }
  95.83% { transform: translate3d(28.00cqw,0,19.04cqw) rotateY(-27.08deg); }
  100.00% { transform: translate3d(28.00cqw,0,20.38cqw) rotateY(-28.00deg); }
}

@keyframes cstreamLm {
  0.00% { transform: translate3d(8.00cqw,0,-191.89cqw) rotateY(6.00deg); }
  4.17% { transform: translate3d(3.28cqw,0,-164.69cqw) rotateY(6.92deg); }
  8.33% { transform: translate3d(-0.99cqw,0,-140.82cqw) rotateY(7.83deg); }
  12.50% { transform: translate3d(-4.83cqw,0,-119.88cqw) rotateY(8.75deg); }
  16.67% { transform: translate3d(-8.28cqw,0,-101.51cqw) rotateY(9.67deg); }
  20.83% { transform: translate3d(-11.35cqw,0,-85.38cqw) rotateY(10.58deg); }
  25.00% { transform: translate3d(-14.07cqw,0,-71.24cqw) rotateY(11.50deg); }
  29.17% { transform: translate3d(-16.46cqw,0,-58.83cqw) rotateY(12.42deg); }
  33.33% { transform: translate3d(-18.56cqw,0,-47.94cqw) rotateY(13.33deg); }
  37.50% { transform: translate3d(-20.37cqw,0,-38.38cqw) rotateY(14.25deg); }
  41.67% { transform: translate3d(-21.92cqw,0,-30.00cqw) rotateY(15.17deg); }
  45.83% { transform: translate3d(-23.24cqw,0,-22.64cqw) rotateY(16.08deg); }
  50.00% { transform: translate3d(-24.34cqw,0,-16.19cqw) rotateY(17.00deg); }
  54.17% { transform: translate3d(-25.26cqw,0,-10.53cqw) rotateY(17.92deg); }
  58.33% { transform: translate3d(-26.00cqw,0,-5.56cqw) rotateY(18.83deg); }
  62.50% { transform: translate3d(-26.59cqw,0,-1.20cqw) rotateY(19.75deg); }
  66.67% { transform: translate3d(-27.04cqw,0,2.62cqw) rotateY(20.67deg); }
  70.83% { transform: translate3d(-27.38cqw,0,5.98cqw) rotateY(21.58deg); }
  75.00% { transform: translate3d(-27.63cqw,0,8.93cqw) rotateY(22.50deg); }
  79.17% { transform: translate3d(-27.80cqw,0,11.51cqw) rotateY(23.42deg); }
  83.33% { transform: translate3d(-27.90cqw,0,13.78cqw) rotateY(24.33deg); }
  87.50% { transform: translate3d(-27.96cqw,0,15.76cqw) rotateY(25.25deg); }
  91.67% { transform: translate3d(-27.99cqw,0,17.51cqw) rotateY(26.17deg); }
  95.83% { transform: translate3d(-28.00cqw,0,19.04cqw) rotateY(27.08deg); }
  100.00% { transform: translate3d(-28.00cqw,0,20.38cqw) rotateY(28.00deg); }
}

/* ============================================================
   CYL — carusel curbat: pozele stau pe suprafata unui cilindru
   care se roteste continuu (referinta: REC-20260824234556).
   Fiecare card e asezat cu rotateY(pas * i) translateZ(raza),
   deci curbura e reala, nu simulata; se roteste UN singur
   element (.cyl__stage), nu 14 — o singura animatie compusa.
   Cardurile din spate dispar prin backface-visibility, exact
   cand sunt vazute din profil (latime zero), deci fara salt.
   ============================================================ */
.cyl {
  --cyl-n: 18;
  --cyl-cw: clamp(132px, 15vw, 218px);
  --cyl-gap: 14px;
  /* raza pentru care coarda dintre doua carduri vecine = latime + gap:
     1 / (2 * sin(180deg/18)) = 2.8794. Cu 18 carduri arcul e mai lin —
     un card se ingusteaza cu doar 1.5% pe pas, deci nu se casca goluri. */
  --cyl-r: calc((var(--cyl-cw) + var(--cyl-gap)) * 2.8794);
  --cyl-step: 20deg;

  position: relative;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  height: calc(var(--cyl-cw) * 1.333 + 26px);
  perspective: calc(var(--cyl-r) * 2.6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.cyl__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: cylSpin 72s linear infinite;
}
/* `translateZ(-r)` aduce fata cilindrului exact in planul sectiunii. Fara el,
   cardul din fata sta cu o raza mai aproape de privitor si iese cu ~62% mai
   mare decat restul — arcul bombeaza in loc sa se retraga. */
@keyframes cylSpin {
  from { transform: translateZ(calc(var(--cyl-r) * -1)) rotateY(0deg); }
  to   { transform: translateZ(calc(var(--cyl-r) * -1)) rotateY(-360deg); }
}
.cyl__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cyl-cw);
  height: calc(var(--cyl-cw) * 1.333);
  margin: calc(var(--cyl-cw) * -0.6665) 0 0 calc(var(--cyl-cw) / -2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  backface-visibility: hidden;
  transform: rotateY(calc(var(--cyl-step) * var(--i))) translateZ(var(--cyl-r));
  box-shadow: 0 18px 40px -26px rgba(16, 24, 32, .5);
}
.cyl__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) { .cyl__stage { animation-play-state: paused; } }
.cyl.is-offscreen .cyl__stage { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .cyl:hover .cyl__stage { animation-play-state: paused; }
}

@media (max-width: 720px) {
  /* Pe latimea unui telefon incap ~2 carduri, oricat de mic ar fi arcul
     (numarul vizibil = latime container / (latime card + gap), nu depinde de
     raza). Deci in loc de multe carduri minuscule: cardul din fata mare, cu
     vecinii doar ghicindu-se la margini. Iese si pana la marginile cardului
     alb, ca sa castige latime. */
  .cyl {
    --cyl-cw: 158px;
    margin-inline: calc(var(--card-inset) * -1);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  }
}