/* PVTS animated header: gradient waves, bubbles, particles, sparkles and pulse line */
.brand-stage {
  position: relative;
  isolation: isolate;
  min-height: 178px;
  overflow: hidden;
  background: linear-gradient(105deg, #dff8ff 0%, #e8f4ff 44%, #f9e8ff 100%);
}

.brand-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.34) 43%, rgba(255,255,255,.08));
}

.header-motion,
.header-artwork,
.bubble-field,
.particle-field,
.sparkle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.header-motion {
  z-index: -2;
  overflow: hidden;
}

.header-artwork {
  background-image: url('../../uploads/pvts/header-gradient-waves-30x4.png');
  background-position: center;
  background-size: cover;
  opacity: .92;
  transform: scale(1.035);
  animation: pvtsArtworkDrift 18s ease-in-out infinite alternate;
}

.brand-banner {
  position: relative;
  z-index: 3;
  min-height: 178px;
}

.brand-copy {
  padding: .65rem 1.15rem;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 24px;
  background: linear-gradient(100deg, rgba(255,255,255,.55), rgba(255,255,255,.78), rgba(255,255,255,.48));
  box-shadow: 0 12px 36px rgba(15, 119, 183, .09);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.motion-wave {
  position: absolute;
  left: -8%;
  width: 116%;
  border-radius: 50%;
  filter: blur(.2px);
  transform-origin: center;
  pointer-events: none;
}

.motion-wave-back {
  height: 90px;
  bottom: -68px;
  opacity: .23;
  background: linear-gradient(90deg, #7ae8ff, #4c8dff 44%, #b362ff 75%, #ff78c7);
  animation: pvtsWaveBack 12s ease-in-out infinite alternate;
}

.motion-wave-front {
  height: 78px;
  bottom: -62px;
  opacity: .25;
  background: linear-gradient(90deg, #3ac8f4, #225ff2 48%, #7b4cf0 72%, #f052bd);
  animation: pvtsWaveFront 9s ease-in-out infinite alternate-reverse;
}

.motion-bubble {
  --size: 24px;
  --x: 50%;
  --y: 80%;
  --duration: 12s;
  --delay: 0s;
  --drift: 22px;
  --drift-back: -13px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 5%, transparent 7%),
    radial-gradient(circle at 68% 72%, rgba(104,103,255,.2), transparent 47%),
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(91,214,255,.12) 48%, rgba(245,103,221,.14));
  box-shadow: inset -5px -6px 13px rgba(68,124,255,.13), 0 0 14px rgba(255,255,255,.28);
  animation: pvtsBubbleFloat var(--duration) ease-in-out var(--delay) infinite;
}

.motion-particle {
  --size: 4px;
  --x: 50%;
  --y: 50%;
  --duration: 8s;
  --delay: 0s;
  --drift: 15px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 8px 2px rgba(87,210,255,.65);
  animation: pvtsParticleFloat var(--duration) ease-in-out var(--delay) infinite alternate;
}

.motion-sparkle {
  --size: 13px;
  --x: 50%;
  --y: 50%;
  --duration: 5s;
  --delay: 0s;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: .28;
  background: linear-gradient(90deg, transparent 42%, #fff 48% 52%, transparent 58%), linear-gradient(0deg, transparent 42%, #fff 48% 52%, transparent 58%);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.95));
  animation: pvtsSparkle var(--duration) ease-in-out var(--delay) infinite;
}

.pulse-line {
  position: absolute;
  left: 0;
  bottom: 7px;
  width: 100%;
  height: 58%;
  overflow: visible;
  opacity: .5;
  pointer-events: none;
}

.pulse-line path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pulse-glow {
  stroke: rgba(66, 218, 255, .64);
  stroke-width: 7;
  filter: blur(5px);
}

.pulse-core {
  stroke: rgba(255,255,255,.92);
  stroke-width: 1.7;
  stroke-dasharray: 12 7 76 9;
  animation: pvtsPulseFlow 7s linear infinite;
  filter: drop-shadow(0 0 4px rgba(30,181,255,.9));
}

@keyframes pvtsArtworkDrift {
  0% { transform: scale(1.035) translate3d(-.8%, -.5%, 0); filter: saturate(1.02); }
  50% { transform: scale(1.055) translate3d(.5%, .6%, 0); filter: saturate(1.12); }
  100% { transform: scale(1.04) translate3d(.9%, -.3%, 0); filter: saturate(1.05); }
}

@keyframes pvtsWaveBack {
  from { transform: translate3d(-1.5%, 0, 0) rotate(-1deg) scaleY(.92); }
  to { transform: translate3d(1.5%, -9px, 0) rotate(1deg) scaleY(1.16); }
}

@keyframes pvtsWaveFront {
  from { transform: translate3d(1.2%, 1px, 0) rotate(.8deg) scaleY(1.05); }
  to { transform: translate3d(-1.4%, -7px, 0) rotate(-.8deg) scaleY(.9); }
}

@keyframes pvtsBubbleFloat {
  0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.72); }
  16% { opacity: .58; }
  52% { transform: translate3d(var(--drift), -24px, 0) scale(1); }
  84% { opacity: .42; }
  100% { opacity: 0; transform: translate3d(var(--drift-back), -82px, 0) scale(.86); }
}

@keyframes pvtsParticleFloat {
  from { opacity: .22; transform: translate3d(0, 9px, 0) scale(.72); }
  48% { opacity: .88; }
  to { opacity: .3; transform: translate3d(var(--drift), -22px, 0) scale(1.15); }
}

@keyframes pvtsSparkle {
  0%, 100% { opacity: .16; transform: rotate(0deg) scale(.55); }
  45% { opacity: .95; transform: rotate(90deg) scale(1.15); }
  62% { opacity: .48; transform: rotate(120deg) scale(.8); }
}

@keyframes pvtsPulseFlow {
  to { stroke-dashoffset: -208; }
}

@media (max-width: 767px) {
  .brand-stage,
  .brand-banner { min-height: 286px; }
  .header-artwork { background-size: auto 100%; opacity: .8; }
  .brand-copy { width: min(94%, 560px); padding: .55rem .8rem; }
  .pulse-line { height: 38%; bottom: 1px; }
  .motion-wave { width: 140%; left: -20%; }
}

@media (prefers-reduced-motion: reduce) {
  .header-artwork,
  .motion-wave,
  .motion-bubble,
  .motion-particle,
  .motion-sparkle,
  .pulse-core { animation: none !important; }
  .motion-bubble { opacity: .26; }
  .motion-particle { opacity: .42; }
  .motion-sparkle { opacity: .48; }
}

@media print {
  .header-motion { display: none !important; }
}