/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/components/landing/landing.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
html {
  scroll-behavior: smooth;
}

.landing-gradient-text {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #50ebff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(80 235 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #80f0ff var(--tw-gradient-to-position);
  background-clip: text;
  color: transparent;
}

.landing-glass {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.03);
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.landing-glass-hover {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.landing-glass-hover:hover {
  border-color: rgb(80 235 255 / 0.5);
  background-color: rgb(80 235 255 / 0.05);
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.landing-card-glow {
  position: relative;
}

.landing-card-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(45deg, transparent, rgba(80, 235, 255, 0.3), transparent);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s;
}

.landing-card-glow:hover::after {
  opacity: 1;
}

/* Apple-style Refractive Glass Header */
.header-refractive-glass {
  backdrop-filter: blur(20px) saturate(130%) contrast(98%) brightness(105%);
  -webkit-backdrop-filter: blur(20px) saturate(130%) contrast(98%) brightness(105%);
  transition: all 0.3s ease;
  background: linear-gradient(
    to bottom,
    rgba(25, 25, 25, 0.5),
    rgba(15, 15, 15, 0.4)
  );
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
    0 10px 30px -10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Glass Texture (Noise) */
.header-refractive-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Beveled Edge (High-end look) */
.header-refractive-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05),
    transparent 1px,
    transparent
  );
  pointer-events: none;
  z-index: 10;
}

/* Aggressive Refraction Filter Hook */
.refraction-filter-active {
  filter: url(#aggressive-refraction);
}