﻿/**
 * Alterz Clinic â€” Premium Animation Styles
 */
/* 1. Lenis Smooth Scroll Core Styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
/* 2. Elegant Preloader Overlay */
#alterz-preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #040A1C; /* Matches clinic's dark theme */
  z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: all; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s; }
#alterz-preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-content { text-align: center; color: var(--color-white, #ffffff); }
.preloader-logo { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; font-family: 'Montserrat', sans-serif; margin-bottom: var(--space-xs, 8px); display: flex; align-items: center; justify-content: center; gap: 8px; }
.preloader-logo-mark { color: var(--color-gold, #CFA32B); display: inline-block; }
.preloader-logo-dot { color: var(--color-gold, #CFA32B); }
.preloader-subtitle { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.6); font-family: 'Inter', sans-serif; }
.preloader-bar-wrap { width: 120px; height: 2px; background: rgba(255, 255, 255, 0.1); margin: var(--space-md, 20px) auto 0; border-radius: 4px; overflow: hidden; position: relative; }
.preloader-bar { width: 100%; height: 100%; background: var(--color-gold, #CFA32B); transform: scaleX(0); transform-origin: left; }
/* 3. Ambient Background Glow Blobs */
.bg-glow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; overflow: hidden; pointer-events: none; z-index: -2; }
.bg-glow-blob { position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(140px); opacity: 0.18; pointer-events: none; mix-blend-mode: screen; will-change: transform; }
.bg-glow-blob-1 { background: radial-gradient(circle, rgba(207, 163, 43, 0.3) 0%, rgba(4, 10, 28, 0) 70%); top: 10%; right: -10%; }
.bg-glow-blob-2 { background: radial-gradient(circle, rgba(46, 92, 219, 0.25) 0%, rgba(4, 10, 28, 0) 70%); top: 45%; left: -15%; }
.bg-glow-blob-3 { background: radial-gradient(circle, rgba(207, 163, 43, 0.2) 0%, rgba(4, 10, 28, 0) 70%); bottom: 15%; right: -10%; }
/* 4. GSAP FOUC Prevention & Animation Initial States */
/* Only hide elements if GSAP is successfully loaded and initialized */
.gsap-loaded .gsap-reveal { opacity: 0; visibility: hidden; }
.gsap-loaded .hero-line-span { display: inline-block; overflow: hidden; vertical-align: bottom; }
.gsap-loaded .hero-line-inner { display: inline-block; transform: translateY(100%); }
.gsap-loaded .alterz-hero h1,
.gsap-loaded .alterz-hero p,
.gsap-loaded .alterz-hero-actions { opacity: 1 !important; visibility: visible !important; animation: none !important; }
/* 5. Magnetic Hover Helpers & Micro-interactions */
.btn-alterz, .alterz-nav ul li a, .alterz-logo { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
/* 6. Sticky Header premium styling updates */
.alterz-header { transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
/* 7. Accessibility & Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
 html.lenis, html.lenis body { scroll-behavior: smooth !important; }
.bg-glow-blob, 
  #alterz-preloader,
  .preloader-bar-wrap { display: none !important; }
.gsap-loaded .gsap-reveal { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.gsap-loaded .hero-line-inner { transform: none !important; }
 }
