:root {
  --hv3-red:        var(--brand-primary, #e6101c);
  --hv3-red-soft:   var(--brand-primary-h, #ff3b47);
  --hv3-amber:      var(--brand-accent, #ff9466);
  --hv3-red-rgb:    var(--brand-primary-rgb, 230, 16, 28);
  --hv3-amber-rgb:  var(--brand-accent-rgb, 255, 148, 102);

  --hv3-env:        0;
  --hv3-px:         0px;
  --hv3-py:         0px;
}

.hv3-fog-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.55 + var(--hv3-env, 0) * 0.35);
  transition: opacity 0.6s ease;
}
.hv3-fog-layer {
  position: absolute;
  inset: -8%;
  background-size: 220% 220%;
  filter: blur(36px);
  will-change: background-position, transform;
}
.hv3-fog-1 {
  background:
    radial-gradient(ellipse 42% 30% at 20% 70%, rgba(var(--hv3-red-rgb),0.40), transparent 70%),
    radial-gradient(ellipse 32% 26% at 78% 28%, rgba(var(--hv3-amber-rgb),0.20), transparent 70%);
  transform: translate3d(calc(var(--hv3-px) * 1.4), calc(var(--hv3-py) * 1.4), 0);
  animation: hv3-fog-1 32s linear infinite;
}
.hv3-fog-2 {
  background:
    radial-gradient(ellipse 36% 26% at 70% 78%, rgba(var(--hv3-red-rgb),0.28), transparent 65%),
    radial-gradient(ellipse 26% 22% at 30% 22%, rgba(255,180,140,0.12), transparent 65%);
  transform: translate3d(calc(var(--hv3-px) * -1.0), calc(var(--hv3-py) * -1.0), 0);
  animation: hv3-fog-2 42s linear infinite reverse;
}
@keyframes hv3-fog-1 {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 60%; }
}
@keyframes hv3-fog-2 {
  0%   { background-position: 100% 0%; }
  100% { background-position: 0% 50%; }
}

.hv3-beams {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.35 + var(--hv3-env, 0) * 0.55);
  transition: opacity 0.6s ease;
}
.hv3-beam {
  position: absolute;
  top: -20%;
  width: 32vw;
  height: 140%;
  background: linear-gradient(180deg,
    rgba(var(--hv3-red-rgb), 0) 0%,
    rgba(var(--hv3-red-rgb), 0.20) 45%,
    rgba(var(--hv3-amber-rgb), 0.12) 72%,
    rgba(var(--hv3-red-rgb), 0) 100%);
  filter: blur(44px);
  transform-origin: top center;
}
.hv3-beam-1 { left: 6%;  transform: rotate(-14deg); animation: hv3-beam-pulse 7s ease-in-out infinite; }
.hv3-beam-2 { left: 45%; transform: rotate(2deg);   animation: hv3-beam-pulse 9s ease-in-out infinite 1.4s;
              background: linear-gradient(180deg,
                rgba(var(--hv3-amber-rgb), 0) 0%,
                rgba(var(--hv3-amber-rgb), 0.18) 50%,
                rgba(var(--hv3-amber-rgb), 0) 100%); }
.hv3-beam-3 { right: 4%; transform: rotate(16deg);  animation: hv3-beam-pulse 8s ease-in-out infinite 2.6s; }
@keyframes hv3-beam-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.hv3-floats {
  display: none !important;
}
.hv3-float {
  position: absolute;
  background: linear-gradient(140deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.10) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    0 0 60px rgba(var(--hv3-red-rgb), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.12);
  opacity: 0;

  --hv3-fx-anim: 0px;
  --hv3-fy-anim: 0px;
  --hv3-scale: 1;
  --hv3-opa: 1;
  transform:
    translate3d(calc(var(--hv3-fx, 0px) + var(--hv3-fx-anim)),
                calc(var(--hv3-fy, 0px) + var(--hv3-fy-anim)),
                -200px)
    scale(calc(var(--hv3-scale) * 0.85));
  transition: opacity 1.4s cubic-bezier(.16,1,.3,1),
              transform 0.6s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.hv3-float.is-active {
  opacity: var(--hv3-opa, 0.92);
  transform:
    translate3d(calc(var(--hv3-fx, 0px) + var(--hv3-fx-anim, 0px)),
                calc(var(--hv3-fy, 0px) + var(--hv3-fy-anim, 0px)),
                0)
    scale(var(--hv3-scale, 1));

  transition: opacity 0.4s ease,
              transform 0.18s linear;
}
.hv3-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(var(--hv3-red-rgb), 0.7) 0%,
    transparent 30%, transparent 70%,
    rgba(var(--hv3-amber-rgb), 0.55) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hv3-float-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hv3-float-media img,
.hv3-float-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.1) contrast(1.05);
}
.hv3-float-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 0%, transparent 55%,
    rgba(0,0,0,0.85) 100%);
}
.hv3-float-label {
  position: absolute;
  bottom: 12px; left: 14px; right: 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Inter', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.hv3-float-label .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hv3-red);
  box-shadow: 0 0 10px var(--hv3-red);
  animation: hv3-rec 1.4s ease-in-out infinite;
}
@keyframes hv3-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.hv3-float-1 { top: 16%; left: 3%;  width: 14vw; height: 18vw; max-width: 220px; max-height: 290px; }
.hv3-float-2 { top: 12%; right: 4%; width: 16vw; height: 11vw; max-width: 260px; max-height: 180px; }
.hv3-float-3 { bottom: 18%; left: 5%;  width: 12vw; height: 15vw; max-width: 190px; max-height: 240px; }
.hv3-float-4 { bottom: 14%; right: 3%; width: 15vw; height: 10vw; max-width: 240px; max-height: 160px; }
.hv3-float-5 { top: 42%; left: 1%;  width: 11vw; height: 14vw; max-width: 170px; max-height: 220px; }
.hv3-float-6 { top: 38%; right: 1%; width: 11vw; height: 14vw; max-width: 170px; max-height: 220px; }

.hv3-float-timeline {
  background: linear-gradient(140deg,
    rgba(0,0,0,0.72) 0%,
    rgba(20,15,25,0.88) 100%);
  padding: 12px;
}
.hv3-float-timeline-rows {
  display: flex; flex-direction: column; gap: 5px;
  height: 100%; justify-content: center;
}
.hv3-float-timeline-row {
  display: flex; align-items: center; gap: 5px; height: 11px;
}
.hv3-float-timeline-row .strip {
  flex: 1; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg,
    rgba(var(--hv3-red-rgb), 0.45),
    rgba(var(--hv3-amber-rgb), 0.45));
  position: relative; overflow: hidden;
}
.hv3-float-timeline-row .strip::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent 4px,
    rgba(0,0,0,0.2) 4px, rgba(0,0,0,0.2) 5px);
}
.hv3-float-timeline-row .label {
  font-family: monospace; font-size: 0.5rem;
  color: rgba(255,255,255,0.5);
  width: 22px; text-align: end;
}

.hv3-particles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.35 + var(--hv3-env, 0) * 0.65);
  transition: opacity 0.6s ease;
}

@media (max-width: 900px) {
  .hv3-float-3, .hv3-float-4, .hv3-float-5, .hv3-float-6 { display: none; }
  .hv3-float-1 { width: 22vw; height: 28vw; }
  .hv3-float-2 { width: 26vw; height: 18vw; }
  .hv3-beams { opacity: calc(0.5 + var(--hv3-env, 0) * 0.4); }
  .hv3-beam { width: 50vw; filter: blur(30px); }
}
@media (max-width: 600px) {
  .hv3-floats { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hv3-beam, .hv3-fog-layer, .hv3-float-label .dot { animation: none !important; }
}

/* Reveal: fast + cheap. No blur filter, no permanent will-change.
   Transition shortened from 1.2s → 0.5s. */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.5s cubic-bezier(.16,1,.3,1),
    transform 0.5s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="slide-up"]    { transform: translateY(40px); }
[data-reveal="slide-up"].is-revealed { transform: translateY(0); }

[data-reveal="fade-in"]     { transform: none; }

[data-reveal="zoom-in"]     { transform: scale(0.96); }
[data-reveal="zoom-in"].is-revealed { transform: scale(1); }

[data-reveal="cinematic"]   { transform: translateY(40px) scale(0.98); }
[data-reveal="cinematic"].is-revealed { transform: translateY(0) scale(1); }

[data-reveal] [data-reveal-child] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s cubic-bezier(.16,1,.3,1) calc(var(--ri, 0) * 60ms),
              transform 0.45s cubic-bezier(.16,1,.3,1) calc(var(--ri, 0) * 60ms);
}
[data-reveal].is-revealed [data-reveal-child] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal] [data-reveal-child] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}