/* ==========================================================================
   3D ROTATING CAROUSEL
   Uses CSS trigonometric functions (Chrome 111+, Firefox 108+, Safari 15.8+).
   Panel count and index are set via inline --panel-count / --i style props.
   ========================================================================== */

/* ── Custom property registration (enables animation) ───────────────── */

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Scene defaults ──────────────────────────────────────────────────── */

.carousel-scene-wrapper {
  /* Geometry */
  --panel-width:    280px;
  --panel-height:   168px;
  --panel-distance: 20px;
  --perspective:    1100px;
  --tilt-angle:     -8deg;
  --rotation-speed: 28s;

  /* Derived (do not override) */
  --step:   calc(360deg / var(--panel-count));
  --radius: calc(
    (var(--panel-width) / 2) / tan(180deg / var(--panel-count))
  );

  /* Panel surface */
  --panel-empty-color:   rgba(255, 255, 255, 0.04);
  --panel-image-opacity: 0.9;
  --border-radius:       10px;

  /* Animated border */
  --border-width:           1.5px;
  --border-drag-value:      20%;
  --border-primary-color:   var(--color-accent);
  --border-secondary-color: rgba(124, 58, 237, 0.3);
  --border-spin-speed:      4s;

  /* Central logo colors */
  --animated-logo-antennas-color:  var(--color-text);
  --animated-logo-tv-border-color: var(--color-text);
  --animated-logo-v-color:         var(--color-accent);
  --animated-logo-tv-screen-color: var(--color-accent);

  /* Layout */
  width: var(--panel-width);
  height: var(--panel-height);
  position: relative;
  margin: 0 auto;
  perspective: var(--perspective);
  transform-style: preserve-3d;
  will-change: transform;

  /* Correct for tilt: the rotateX shifts the visual centre downward;
     pull the scene up so it sits in the middle of its flex slot. */
  transform: translateY(-40px);
}

/* ── Central logo ────────────────────────────────────────────────────── */

.carousel-logo-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 65px;
  pointer-events: none;
  transform-origin: center center;
  animation: logoSway 6s ease-in-out infinite;
  will-change: transform;
}

.carousel-logo-wrapper svg { width: 100%; height: 100%; display: block; }

.carousel-logo-wrapper svg .antennas  { fill: var(--animated-logo-antennas-color); }
.carousel-logo-wrapper svg .tv_border { fill: var(--animated-logo-tv-border-color); }
.carousel-logo-wrapper svg .vura_v    { fill: var(--animated-logo-v-color); }
.carousel-logo-wrapper svg .tv_screen {
  fill: var(--animated-logo-tv-screen-color);
  fill-opacity: 0.15;
  filter: blur(1px);
  animation: randomFlicker 10s step-end infinite;
}

/* ── Rotating plate ──────────────────────────────────────────────────── */

.carousel-plate-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotatePlate var(--rotation-speed) linear infinite;
  pointer-events: none;
  will-change: transform;
}

/* ── Panel ───────────────────────────────────────────────────────────── */

.panel-wrapper {
  width: var(--panel-width);
  height: var(--panel-height);
  position: absolute;
  background: var(--panel-empty-color);
  border-radius: var(--border-radius);
  backface-visibility: visible;
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--i) * var(--step)))
    translateZ(calc(var(--radius) + var(--panel-distance)));
  pointer-events: all;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  overflow: hidden;
}

.panel-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--panel-image-opacity);
  border-radius: var(--border-radius);
  display: block;
  pointer-events: none;
}

/* Panel info overlay */
.panel-wrapper__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-3);
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  pointer-events: none;
}

.panel-wrapper__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Animated conic border — ALL panels, always visible ─────────────── */
/* Phase is offset per panel via --i so each spins at a different point  */

.panel-wrapper::after,
.panel-wrapper::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--border-width);
  background-image: conic-gradient(
    from var(--angle),
    transparent var(--border-drag-value),
    var(--border-secondary-color),
    var(--border-primary-color)
  );
  border-radius: var(--border-radius);
  --mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* Stagger start phase per panel so borders don't all look identical */
  animation: spinBorder var(--border-spin-speed) linear infinite;
  animation-delay: calc(var(--i) * -0.6s);
  pointer-events: none;
}

.panel-wrapper::before {
  filter: blur(0.1rem);
}

/* ── Scene / hero placement ──────────────────────────────────────────── */

/* Hero variant — breathing room for the 3D tilt perspective.
   Reduced from 140px / 80px to tighten the layout.               */
.home-hero-carousel__scene {
  margin-top:    50px;
  margin-bottom: 50px;
}

/* ── Keyframes ───────────────────────────────────────────────────────── */

@keyframes rotatePlate {
  from { transform: rotateX(var(--tilt-angle)) rotateY(0deg); }
  to   { transform: rotateX(var(--tilt-angle)) rotateY(360deg); }
}

@keyframes spinBorder {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}

@keyframes logoSway {
  0%,  100% { transform: translate(-50%, -50%) rotateX(var(--tilt-angle)) rotateY(-12deg); }
  50%       { transform: translate(-50%, -50%) rotateX(var(--tilt-angle)) rotateY(12deg); }
}

@keyframes randomFlicker {
  0%,  10% { fill-opacity: 0.15; filter: brightness(1); }
  11%      { fill-opacity: 0.60; filter: brightness(2); }
  12%      { fill-opacity: 0.15; }
  13%      { fill-opacity: 0.50; filter: brightness(1.8); }
  14%      { fill-opacity: 0.15; }
  40%      { fill-opacity: 0.15; }
  41%      { fill-opacity: 0.80; filter: brightness(2.5) drop-shadow(0 0 15px var(--border-primary-color)); }
  42%      { fill-opacity: 0.15; }
  70%      { fill-opacity: 0.15; }
  71%      { fill-opacity: 0.40; }
  72%      { fill-opacity: 0.10; }
  73%      { fill-opacity: 0.60; }
  74%      { fill-opacity: 0.15; }
  75%      { fill-opacity: 0.50; }
  76%      { fill-opacity: 0.15; }
  90%      { fill-opacity: 0.30; }
  91%      { fill-opacity: 0.15; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .carousel-scene-wrapper {
    --panel-width:    150px;
    --panel-height:   90px;
    --perspective:    650px;
    --tilt-angle:     -12deg;
    transform: translateY(-20px);
  }

  .carousel-logo-wrapper {
    width: 80px;
    height: 40px;
  }

  .home-hero-carousel__scene {
    margin-top:    30px;
    margin-bottom: 30px;
  }
}