/* Rotating 3D carousel on the homepage landing screen (index.html only, after landing.css).
   Built from the "STOWE high-compact radius transparent 3D canvas" brief:
   7 square blocks on a cylinder, -9° tilt, 255px orbit radius at the reference size,
   6° a second, dark-navy frames, cyan glow on hover, transparent stage.
   Every class starts with "cz-" so nothing here touches the rest of the site. */

.cz {
  /* Nearly everything below is a multiple of --cz-size, so this one line resizes the whole ring.
     It's capped by height as well as width so a short laptop screen still fits it. */
  --cz-size: clamp(120px, min(calc(12 * var(--vw)), calc(20.5 * var(--vh))), 260px);  /* block width and height */
  --cz-radius: calc(var(--cz-size) * 1.52);           /* orbit radius, about 1.5x the block as in the brief */
  --cz-tilt: -9deg;      /* cylinder pitch */
  --cz-navy: #021c30;    /* block frame */
  --cz-glow: #00f0ff;    /* hover / focus glow */
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Transparent stage: the landing's navy fade shows straight through */
.cz-stage {
  position: relative;
  width: 100%;
  height: calc(var(--cz-size) * 2.25);
  perspective: calc(var(--cz-size) * 7.6); /* depth stays in proportion as the ring grows */
  perspective-origin: 50% 40%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  /* clip only sideways, so the tilted top and bottom edges never get cut */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 0;
  -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%);
}

/* Soft teal pool of light under the ring, so it sits in the landing instead of floating */
.cz-stage::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(117, 185, 176, 0.42), rgba(117, 185, 176, 0.14) 55%, transparent);
  filter: blur(6px);
  pointer-events: none;
}
.cz-stage::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 185, 121, 0.55), transparent);
  pointer-events: none;
}

/* The cylinder. carousel.js turns it; with no script it simply rests facing block 1 */
.cz-ring {
  position: relative;
  width: var(--cz-size);
  height: var(--cz-size);
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  transform: rotateX(var(--cz-tilt)) rotateY(0deg);
  will-change: transform;
}

.cz-node {
  position: absolute;
  inset: 0;
  transform: rotateY(calc(var(--i) * 51.4286deg)) translateZ(var(--cz-radius));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Back of each block: plain Stowe navy, seen as blocks pass round the far side (as in the reference video) */
.cz-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 3px solid #0b2f4a;
  background:
    radial-gradient(circle at 50% 42%, rgba(117, 185, 176, 0.16), transparent 58%),
    linear-gradient(160deg, #0a2a40, var(--cz-navy));
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0.85;
  pointer-events: none;
}

.cz-link {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 10px;
  border: 3px solid var(--cz-navy);
  background: var(--cz-navy);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.65);
  color: #fff;
  text-decoration: none;
  filter: brightness(var(--cz-lit, 1));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.cz-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cz-link:hover,
.cz-link:focus-visible {
  border-color: var(--cz-glow);
  box-shadow: 0 0 16px var(--cz-glow), inset 0 0 8px rgba(0, 240, 255, 0.25);
  outline: none;
}

/* Caption stays inside the block */
.cz-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 6px 9px;
  background: linear-gradient(rgba(2, 28, 48, 0), rgba(2, 28, 48, 0.96) 62%);
  color: var(--cz-glow);
  font: 700 clamp(10.5px, calc(var(--cz-size) * 0.064), 17px)/1.25 Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Live service-desk card under the carousel ---------- */
.cz-foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  /* tuck the card up into the empty space under the ring */
  margin-top: calc(var(--cz-size) * -0.16);
}
.cz-live {
  width: min(100%, calc(var(--cz-size) * 3.6), 760px);
  min-width: min(100%, 460px);
  box-sizing: border-box;
  padding: clamp(14px, calc(1.1 * var(--vw)), 22px) clamp(16px, calc(1.3 * var(--vw)), 26px);
  border-radius: clamp(16px, calc(1.1 * var(--vw)), 22px);
  border: 1px solid rgba(117, 185, 176, 0.42);
  background:
    radial-gradient(120% 140% at 0 0, rgba(117, 185, 176, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(12, 34, 45, 0.86), rgba(7, 23, 31, 0.9));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 4px rgba(117, 185, 176, 0.07),
    0 24px 50px -22px rgba(0, 0, 0, 0.75),
    0 0 40px -10px rgba(117, 185, 176, 0.35);
  color: #c7d0e6;
}
.cz-live-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, calc(1 * var(--vw)), 16px);
}
.cz-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 9px;
  border-radius: 999px;
  background: rgba(95, 211, 168, 0.14);
  border: 1px solid rgba(95, 211, 168, 0.4);
  font-size: clamp(10px, calc(0.62 * var(--vw)), 12.5px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8ff0c9;
}
.cz-live-badge .lp-led { background: #5fd3a8; }
.cz-live-badge .lp-led::after { border-color: rgba(95, 211, 168, 0.6); }
.cz-live-title {
  font-family: Archivo, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, calc(0.9 * var(--vw)), 18px);
  letter-spacing: -0.01em;
  color: #fff;
}
.cz-live-upd { margin-left: auto; font-size: clamp(10.5px, calc(0.6 * var(--vw)), 12.5px); color: #8fa3b8; white-space: nowrap; }
.cz-live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cz-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0 clamp(10px, calc(0.9 * var(--vw)), 18px);
}
.cz-metric:first-child { padding-left: 0; }
.cz-metric:last-child { padding-right: 0; }
.cz-metric + .cz-metric { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.cz-metric b {
  font-family: Archivo, sans-serif;
  font-weight: 500;
  font-size: clamp(24px, calc(1.9 * var(--vw)), 44px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cz-metric b.is-teal { color: #75b9b0; }
.cz-metric-lbl {
  font-size: clamp(11.5px, calc(0.68 * var(--vw)), 14px);
  color: #9fb0c4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cz-bar {
  position: relative;
  height: 3px;
  margin-top: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.cz-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #75b9b0, #d8b979);
  transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Sizes ---------- */
@media (max-width: 900px)  { .cz { --cz-size: 168px; } }
@media (max-width: 600px)  {
  .cz { --cz-size: 124px; }
  .cz-stage { height: calc(var(--cz-size) * 1.75); }
  .cz-cap { font-size: 9.5px; }
  .cz-foot { margin-top: 0; }
  .cz-live { min-width: 0; width: 100%; }
  .cz-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .cz-metric:nth-child(3) { border-left: 0; padding-left: 0; }
  .cz-metric:nth-child(2) { padding-right: 0; }
}
@media (max-width: 380px)  { .cz { --cz-size: 112px; } }
/* Short laptop screens: a little less space under the ring */
@media (min-width: 901px) and (max-height: 820px) { .cz { gap: 4px; } }

/* ---------- Reduced motion / battery saver: no spinning, all seven shown flat ---------- */
@media (prefers-reduced-motion: reduce) {
  .cz-stage { height: auto; perspective: none; -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .cz-stage::before, .cz-stage::after { display: none; }
  .cz-ring {
    width: 100%;
    height: auto;
    transform: none !important;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .cz-node { position: relative; inset: auto; transform: none; aspect-ratio: 1; }
  .cz-node::after { display: none; }
  .cz-link { filter: none; transition: none; }
  /* 4 on top, 3 centred underneath */
  .cz-node:nth-child(n + 5) { transform: translateX(calc(50% + 5px)); }
  /* The spinning ring leaves empty space underneath, so .cz-foot normally gets pulled up
     into it. The flat grid has no such gap, and the pull-up was making the service-desk
     card sit on top of the bottom row's captions. */
  .cz-foot { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  .cz-ring { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cz-node:nth-child(n + 5) { transform: none; }
  .cz-node:nth-child(7) { grid-column: 2; }
}