/* MONTANI Premium Deluxe - High-End Visual Design */
:root {
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(30px, -40px); }
  66% { transform: translate(-25px, 35px); }
}

@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-35px, 25px); }
  66% { transform: translate(40px, -30px); }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(0, 74, 173, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(156, 90, 37, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 0%, rgba(0, 74, 173, 0.04) 0%, transparent 60%);
  background-size: 200% 200%;
  animation: gradientShift 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }

.double-bezel {
  background: var(--cream);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.5px;
  border-radius: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: all 0.6s var(--ease-fluid);
}

.double-bezel > * {
  border-radius: calc(clamp(1.5rem, 4vw, 2.5rem) - 0.375rem);
  overflow: hidden;
}

.hero-card { @apply double-bezel; }

.hero-card-inner {
  background: linear-gradient(135deg, #ffffff 0%, #fafaf9 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.02);
}

@keyframes morphFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, -60px) rotateX(8deg) scaleY(0.95);
    filter: blur(1.2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scaleY(1);
    filter: blur(0);
  }
}

@keyframes morphSlideLeft {
  from {
    opacity: 0;
    transform: translate3d(48px, 0, -50px) rotateY(-6deg);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg);
    filter: blur(0);
  }
}

@keyframes morphSlideRight {
  from {
    opacity: 0;
    transform: translate3d(-48px, 0, -50px) rotateY(6deg);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg);
    filter: blur(0);
  }
}

.morph-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, -60px);
  filter: blur(1.2px);
  animation: morphFadeUp 0.85s var(--ease-fluid) forwards;
}

.btn {
  position: relative;
  transition: all 0.45s var(--ease-snap);
  transform-origin: center;
  overflow: visible;
}

.btn::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 74, 173, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 24px 48px rgba(0, 74, 173, 0.2);
  }

  .btn:hover::after { opacity: 1; }
  .btn:active { transform: translateY(-1px) scale(0.98); }
}

@keyframes scrollVelocity {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(1.1); }
  100% { transform: scaleY(1); }
}

.velocity-element {
  will-change: transform;
  transition: transform 0.6s var(--ease-glide);
}

.problem, .pillar, .case, .journey-step, .diff-item {
  perspective: 1200px;
  transition: all 0.65s var(--ease-fluid);
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .problem:hover, .pillar:hover, .case:hover, .journey-step:hover, .diff-item:hover {
    transform: translateY(-8px) translateZ(24px) rotateX(2deg);
    box-shadow: 0 32px 64px rgba(0, 31, 82, 0.18);
  }

  .case:hover { transform: translateY(-8px) translateZ(24px) rotateX(2.5deg) rotateZ(0.5deg); }
}

.animated-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 74, 173, 0.3), transparent);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.section { position: relative; transition: all 0.8s var(--ease-fluid); }

nav {
  transition: all 0.5s var(--ease-fluid);
  backdrop-filter: blur(12px);
}

nav.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 16px 40px rgba(0, 31, 82, 0.12);
  border-bottom-color: rgba(0, 74, 173, 0.08);
}

.faq details {
  overflow: hidden;
  transition: all 0.65s var(--ease-fluid);
}

.faq details[open] {
  box-shadow: 0 16px 40px rgba(0, 31, 82, 0.1);
  transform: translateY(-2px);
}

.faq summary { cursor: pointer; transition: color 0.45s var(--ease-fluid); }
.faq details:hover summary { color: var(--blue); }
.faq details[open] summary { color: var(--blue); }

.btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline 0.3s ease;
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #f9f9f9 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--copper));
  width: 0%;
  z-index: 1001;
  transition: width 0.3s var(--ease-fluid);
}

@media (max-width: 1020px) {
  .problem:hover, .pillar:hover, .case:hover {
    transform: translateY(-6px) translateZ(12px);
    box-shadow: 0 20px 40px rgba(0, 31, 82, 0.12);
  }

  .btn:hover { transform: translateY(-2px) scale(1.01); }
}

@media (max-width: 640px) {
  .morph-reveal, .morph-reveal-left, .morph-reveal-right {
    animation: morphFadeUp 0.6s var(--ease-fluid) forwards !important;
    transform: translate3d(0, 16px, 0) !important;
  }

  .problem:hover, .pillar:hover, .case:hover { transform: translateY(-3px); }
  .btn:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .morph-reveal, .morph-reveal-left, .morph-reveal-right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}