/* ==========================================================
   De10x hero: 3D video reel
   Loaded LAST in <head> (after style.css) so it wins the cascade.
   Pure CSS 3D, no libraries. Cards are stills; only the few
   facing the viewer ever load a video (see hero-reel.js).
   ========================================================== */

.hr-section {
  --hr-bg: #000;
  --hr-accent: #4ee2e2;
  --hr-cw: 206px;                 /* card width, JS also reads this */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hr-bg);
}

/* soft brand glow behind the reel, same idea as the studio-light feel on Cinrra */
.hr-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 72% 46%, rgba(78, 226, 226, 0.13), transparent 70%),
    radial-gradient(40% 50% at 92% 8%, rgba(78, 226, 226, 0.07), transparent 70%);
}

.hr-stage { position: relative; }
.hr-copy h1 { font-size: clamp(2.05rem, 1.1rem + 2.6vw, 3.45rem); }

.hr-grid {
  position: relative;
  z-index: 3;
  max-width: 80rem;
  margin: 0 auto;
  padding: 3rem 1rem 0;
  min-height: min(88vh, 800px);
  display: flex;
  align-items: center;
  pointer-events: none;           /* let the reel underneath receive drag + hover */
}
.hr-copy {
  max-width: 35rem;
  text-align: left;
  padding-bottom: 3rem;
}
.hr-copy > * { pointer-events: auto; }
.hr-copy .hero-instant { text-align: left; }
.hr-copy h1 { margin-bottom: 1.5rem; }
.hr-copy .tw-wrap { text-align: left; }
.hr-copy .hr-lede { max-width: 28rem; margin-bottom: 2rem; }
.hr-copy .hr-cta { justify-content: flex-start; }
.hr-copy .hr-badge { margin-bottom: 1.5rem; }

/* left-edge legibility veil, sits over the reel and under the copy */
.hr-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, var(--hr-bg) 0%, var(--hr-bg) 28%, rgba(0, 0, 0, 0.78) 42%, transparent 64%);
}
/* bottom blend into the next section */
.hr-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, var(--hr-bg), transparent);
}

/* ---------- 3D scene ---------- */
.hr-scene {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 65%;
  z-index: 1;
  perspective: 1700px;
  perspective-origin: calc(42% + var(--px, 0) * 7%) calc(44% + var(--py, 0) * 7%);
  touch-action: pan-y;            /* vertical page scroll still works over the reel */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.hr-scene.is-drag { cursor: grabbing; }
.hr-scene:focus-visible { box-shadow: inset 0 0 0 2px var(--hr-accent); }

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

.hr-card {
  position: absolute;
  left: calc(var(--cw) / -2);
  top: calc(var(--ch) / -2);
  width: var(--cw);
  height: var(--ch);
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  overflow: hidden;
  background: #0a0f10;
  cursor: pointer;
  color: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(var(--a)) translateZ(var(--r));
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  transition: filter 0.35s ease, border-color 0.25s ease;
  filter: brightness(var(--dim, 1));
  -webkit-tap-highlight-color: transparent;
}
.hr-card:focus-visible { outline: 2px solid var(--hr-accent); outline-offset: 3px; }
.hr-card.is-hot { border-color: rgba(78, 226, 226, 0.7); }

.hr-card img,
.hr-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hr-card video { opacity: 0; transition: opacity 0.4s ease; }
.hr-card.is-live video { opacity: 1; }

.hr-card .hr-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600; font-size: 11px; line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.hr-card .hr-tag::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hr-accent);
}

/* floor reflection glow under the ring */
.hr-floor {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 70%;
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(78, 226, 226, 0.16), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

/* ---------- cursor ring (fine pointers only) ---------- */
.hr-cursor {
  position: absolute;
  left: 0; top: 0;
  z-index: 4;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 1px solid rgba(78, 226, 226, 0.55);
  display: grid;
  place-items: center;
  font-weight: 700; font-size: 11px; line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(78, 226, 226, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(0.5);
  transition: opacity 0.2s ease, background 0.2s ease, width 0.2s, height 0.2s, margin 0.2s;
}
.hr-cursor.is-on { opacity: 1; }
.hr-cursor.is-play { background: rgba(78, 226, 226, 0.9); color: #001314; width: 76px; height: 76px; margin: -38px 0 0 -38px; }
@media (hover: none), (pointer: coarse) { .hr-cursor { display: none; } }

/* ---------- pause control (WCAG 2.2.2) ---------- */
.hr-pause {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #e4e4e7;
  font-weight: 600; font-size: 12px; line-height: 1;
  cursor: pointer;
}
.hr-pause:hover { border-color: var(--hr-accent); color: #fff; }
.hr-pause:focus-visible { outline: 2px solid var(--hr-accent); outline-offset: 2px; }
.hr-pause svg { width: 12px; height: 12px; }

/* ---------- lightbox ---------- */
.hr-lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hr-lb.is-open { display: flex; }
.hr-lb-box { position: relative; max-width: min(92vw, 520px); max-height: 90vh; }
.hr-lb video {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}
.hr-lb-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #111;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.hr-lb-close:hover { background: var(--hr-accent); color: #001314; }
.hr-lb-cap { margin-top: 10px; text-align: center; font-size: 13px; color: #a1a1aa; }

/* ---------- tablet + mobile: copy first, reel underneath ---------- */
@media (max-width: 1023px) {
  .hr-grid { min-height: 0; padding-top: 2.5rem; display: block; }
  .hr-copy { max-width: none; padding-bottom: 0; }
  .hr-copy .hr-lede { margin-bottom: 1.5rem; }
  .hr-copy .hr-badge { margin-bottom: 1rem; }
  .hr-copy h1 { margin-bottom: 1rem; }
  .hr-section { --hr-cw: 160px; }
  .hr-scene {
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: 2.25rem;
    perspective: 1100px;
    perspective-origin: 50% 40%;
  }
  .hr-fade { display: none; }
  .hr-section::before {
    background: radial-gradient(70% 40% at 50% 78%, rgba(78, 226, 226, 0.14), transparent 70%);
  }
  .hr-ring { top: 46%; }
  .hr-pause { right: 12px; bottom: 12px; }
}
@media (max-width: 480px) {
  .hr-section { --hr-cw: 140px; }
  .hr-scene { height: 380px; margin-top: 2rem; }
}


/* small laptops: keep the reel clear of the copy */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hr-section { --hr-cw: 180px; }
  .hr-scene { width: 56%; perspective-origin: 46% 44%; }
  .hr-copy { max-width: 29rem; }
  .hr-copy .hr-lede { max-width: 26rem; }
  .hr-fade { background: linear-gradient(90deg, var(--hr-bg) 0%, var(--hr-bg) 34%, rgba(0,0,0,0.7) 48%, transparent 68%); }
}

/* ---------- reduced motion: still ring, no autoplay, no cursor ---------- */
@media (prefers-reduced-motion: reduce) {
  .hr-card video { display: none; }
  .hr-card { transition: none; }
}

/* no-JS: show the copy and a static strip of stills instead of an empty hole */
.hr-nojs { display: none; }
html:not(.js) .hr-scene { display: none; }