/* Homepage showcase video: proximity 3D tilt. Behaviour: scripts/hero-tilt.js
   The script writes --ht-rx / --ht-ry (degrees), --ht-lift and --ht-glow (0..1) and the
   cursor position --ht-mx / --ht-my on .dshero-stage; everything here reads those. */
.dshero-stage.ht-js {
  --ht-rx: 0; --ht-ry: 0; --ht-lift: 0; --ht-glow: 0; --ht-mx: 50%; --ht-my: 50%;
  --ht-acc: var(--accent-rgb, var(--cl-accent-rgb, 163, 191, 240));
  perspective: 1700px;
  perspective-origin: 50% 40%;
}

/* the box */
.ht-js .dshero-window {
  transform: rotateX(calc(var(--ht-rx) * 1deg)) rotateY(calc(var(--ht-ry) * 1deg)) translateY(calc(var(--ht-lift) * -6px)) scale(calc(1 + var(--ht-lift) * 0.012));
  transform-origin: 50% 50%;
  will-change: transform;
  /* a coloured shadow that slides opposite the tilt, like light from above */
  box-shadow:
    var(--shadow-xl, 0 30px 60px -30px rgba(0, 0, 0, 0.8)),
    var(--edge-top, inset 0 1px 0 rgba(255, 255, 255, 0.06)),
    calc(var(--ht-ry) * -4px) calc(40px + var(--ht-rx) * 5px) 90px -30px rgba(var(--ht-acc), calc(0.12 + var(--ht-glow) * 0.38)),
    0 0 0 1px rgba(var(--ht-acc), calc(var(--ht-glow) * 0.25));
}
/* the glow behind tilts along so the two stay lined up */
.ht-js .dshero-halo {
  transform: translateX(-50%) rotateX(calc(var(--ht-rx) * 1deg)) rotateY(calc(var(--ht-ry) * 1deg)) translateY(calc(var(--ht-lift) * -6px)) scale(calc(1 + var(--ht-lift) * 0.02));
  opacity: calc(0.9 + var(--ht-glow) * 0.1);
  filter: blur(calc(14px + var(--ht-glow) * 6px));
}
.ht-js .dshero-aurora { opacity: calc(0.85 + var(--ht-glow) * 0.15); transition: opacity 0.6s ease; }

/* soft glare that follows the cursor (sits above the video, never blocks clicks) */
.ht-glare {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(520px circle at var(--ht-mx) var(--ht-my), rgba(255, 255, 255, 0.16), rgba(var(--ht-acc), 0.08) 35%, transparent 62%),
    linear-gradient(calc(115deg + var(--ht-ry) * 3deg), transparent 35%, rgba(255, 255, 255, 0.05) 50%, transparent 65%);
  mix-blend-mode: screen;
  opacity: var(--ht-glow);
}
/* the frame's edge lights up nearest the cursor */
.ht-edge {
  position: absolute; inset: 0; z-index: 7; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--ht-mx) var(--ht-my), rgba(var(--ht-acc), 1), rgba(var(--ht-acc), 0.25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--ht-glow);
}
/* the badge floats a little above the video */
.ht-js .dshero-badge {
  transform: translate(calc(var(--ht-ry) * -0.9px), calc(var(--ht-rx) * 0.9px)) translateZ(0);
  box-shadow: 0 calc(6px + var(--ht-lift) * 8px) calc(14px + var(--ht-lift) * 12px) -8px rgba(0, 0, 0, 0.7);
}

/* see-through layer over the video: keeps the tilt tracking, one click plays */
.ht-catch {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: end center; padding: 0 0 22px;
  border: 0; border-radius: inherit; background: transparent; cursor: pointer;
}
.ht-catch:focus-visible { outline: 2px solid rgba(var(--ht-acc), 0.9); outline-offset: -4px; }
.ht-catch__hint {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  font: 700 12.5px/1 var(--font-body, Urbanist, sans-serif); letter-spacing: 0.02em; color: #fff;
  background: rgba(10, 10, 14, 0.62); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ht-catch__hint i { width: 0; height: 0; border-left: 8px solid rgb(var(--ht-acc)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; filter: drop-shadow(0 0 6px rgba(var(--ht-acc), 0.9)); }
.is-ht-on .ht-catch__hint, .ht-catch:focus-visible .ht-catch__hint { opacity: 1; transform: none; }

/* phones / touch: no tilt, the video just works */
@media (hover: none) {
  .ht-js .dshero-window, .ht-js .dshero-halo { transform: translateX(0); }
  .ht-js .dshero-halo { transform: translateX(-50%); }
  .ht-glare, .ht-edge { display: none; }
}