﻿.morph-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

.blob-premium {
  position: absolute;
  filter: blur(140px);
  opacity: 0.22;
  animation: morph-shape 25s ease-in-out infinite alternate;
}

.blob-premium--1 {
  width: min(800px, 90vw);
  height: min(800px, 90vw);
  top: -10%;
  left: -10%;
  background: #2563eb;
  animation: morph-shape 25s ease-in-out infinite alternate,
             drift-1 25s linear infinite;
}

.blob-premium--2 {
  width: min(700px, 80vw);
  height: min(700px, 80vw);
  bottom: -5%;
  right: -5%;
  background: #312e81;
  animation: morph-shape 25s ease-in-out infinite alternate,
             drift-2 30s linear infinite;
}

.morph-bg__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);
}

@keyframes morph-shape {
  0%,
  100% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  34% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
}

@keyframes drift-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(50px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-30px, 80px) scale(0.95);
  }
}

@keyframes drift-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-60px, 80px) scale(0.9);
  }
  66% {
    transform: translate(40px, -30px) scale(1.15);
  }
}

@keyframes orbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes orbit-rev {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes scroll-dot {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes scroll-arrow {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@keyframes float-drift {
  0%,
  100% {
    transform: rotate(var(--tilt, -6deg)) translateY(0) scale(var(--scale, 1));
  }
  50% {
    transform: rotate(var(--tilt, -6deg)) translateY(-10px) scale(var(--scale, 1));
  }
}

@keyframes cursor-nudge {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(4px, 6px);
  }
}

@keyframes ghost-float {
  0%,
  100% {
    transform:
      rotateX(var(--gx, 0deg))
      rotateY(var(--gy, 0deg))
      rotateZ(var(--gz, 0deg))
      translate3d(0, 0, 0);
  }
  50% {
    transform:
      rotateX(calc(var(--gx, 0deg) + 4deg))
      rotateY(calc(var(--gy, 0deg) - 3deg))
      rotateZ(var(--gz, 0deg))
      translate3d(8px, -14px, 24px);
  }
}

@keyframes flip-tick {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0.35;
  }
}

.reveal {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px);
  transition:
    opacity 1.35s var(--ease),
    transform 1.35s var(--ease),
    filter 1.35s var(--ease);
  overflow: visible;
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.reveal-delay-1 {
  transition-delay: 0.16s;
}

.reveal-delay-2 {
  transition-delay: 0.32s;
}

.reveal-delay-3 {
  transition-delay: 0.48s;
}

.gallery-item.reveal {
  opacity: 0;
  filter: blur(20px);
  transform: translateY(40px) scale(0.985);
  transition:
    opacity 1.2s var(--ease),
    transform 1.2s var(--ease),
    filter 1.2s var(--ease);
  will-change: opacity, transform, filter;
}

.gallery-item.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.page-hero__lead.reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(18px);
  transition:
    opacity 1.15s var(--ease),
    transform 1.15s var(--ease),
    filter 1.15s var(--ease);
}

.page-hero__lead.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.btn.reveal {
  overflow: visible;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px);
  transition:
    opacity 1.35s var(--ease),
    transform 1.35s var(--ease),
    filter 1.35s var(--ease);
  will-change: opacity, transform, filter;
}

.btn.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.btn.reveal.reveal-delay-1 {
  transition-delay: 0.16s;
}

.btn.reveal.reveal-delay-2 {
  transition-delay: 0.32s;
}

.btn.reveal.reveal-delay-3 {
  transition-delay: 0.48s;
}

.btn.reveal.is-visible:hover {
  transform: scale(1.05);
}

.btn.reveal.is-visible:active {
  transform: scale(0.95);
}
