/* ===================================================================
   GLOBAL ENHANCEMENTS - Rounded Images & Text Mask Animations
   Applied across the entire website
   ================================================================= */

/* ===================================================================
   ROUNDED CORNERS FOR ALL IMAGES
   ================================================================= */

/* Base image styling - rounded corners */
img {
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Specific image contexts */
.hero-slide img,
.luxury-hero__background img,
section img,
article img,
.card img,
.team-member img,
.service-card img,
.testimonial img,
.blog-post img,
.gallery img,
.portfolio img {
  border-radius: 12px;
}

/* Larger radius for hero and featured images */
.hero-image,
.featured-image,
.banner-image,
.header-image {
  border-radius: 16px;
}

/* Smaller radius for thumbnails and avatars */
.thumbnail,
.avatar,
.profile-pic,
.user-image {
  border-radius: 8px;
}

/* Circular images for specific use cases */
.avatar-circle,
.profile-circle,
.team-avatar {
  border-radius: 50%;
}

/* Card images */
.card-image,
.post-image,
.article-image {
  border-radius: 12px 12px 0 0; /* Rounded top corners only */
}

/* Logo exceptions - keep logos sharp if needed */
.logo,
.brand-logo,
.partner-logo {
  border-radius: 0; /* Override for logos */
}

/* Hover effect for interactive images */
img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Disable hover for non-interactive images */
.no-hover img,
img.static {
  transform: none !important;
}

/* ===================================================================
   TEXT MASK ANIMATIONS - GLOBAL
   ================================================================= */

/* Base animation classes */
.text-reveal {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: textMaskReveal 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.text-reveal-left {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: textRevealLeft 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.text-reveal-right {
  opacity: 0;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  animation: textRevealRight 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.text-reveal-bottom {
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: textRevealBottom 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Stagger delays for multiple elements */
.text-reveal-delay-1 { animation-delay: 0.2s; }
.text-reveal-delay-2 { animation-delay: 0.4s; }
.text-reveal-delay-3 { animation-delay: 0.6s; }
.text-reveal-delay-4 { animation-delay: 0.8s; }
.text-reveal-delay-5 { animation-delay: 1s; }

/* Apply mask animations ONLY to hero section text */
/* All other text elements will display normally without mask animations */

/* Hero section text animations */
.luxury-hero h1,
.luxury-hero__title,
.luxury-hero__subtitle,
.luxury-hero p,
.hero-section h1,
.hero-section h2,
.hero-section p,
.hero-title,
.hero-subtitle,
.hero-description {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.luxury-hero h1.animate,
.luxury-hero__title.animate,
.luxury-hero__subtitle.animate,
.luxury-hero p.animate,
.hero-section h1.animate,
.hero-section h2.animate,
.hero-section p.animate,
.hero-title.animate,
.hero-subtitle.animate,
.hero-description.animate {
  animation: textRevealLeft 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Hero buttons */
.luxury-hero .btn,
.luxury-hero .button,
.hero-section .btn,
.hero-section .button {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.luxury-hero .btn.animate,
.luxury-hero .button.animate,
.hero-section .btn.animate,
.hero-section .button.animate {
  animation: textRevealBottom 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* ===================================================================
   KEYFRAME ANIMATIONS
   ================================================================= */

/* Reveal from left */
@keyframes textRevealLeft {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0);
  }
}

/* Reveal from right */
@keyframes textRevealRight {
  0% {
    opacity: 0;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0);
  }
}

/* Reveal from bottom */
@keyframes textRevealBottom {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateY(0);
  }
}

/* General mask reveal */
@keyframes textMaskReveal {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ===================================================================
   GLOBAL FLOATING GLOW BACKGROUNDS
   Applied subtly behind main sections across the site
   ================================================================= */

/* Ensure main page sections can host background glows */
.page-section {
  position: relative;
  overflow: hidden;
}

/* Reusable floating glow orbs behind content */
.page-section::before,
.page-section::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(48px);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.page-section::before {
  width: 260px;
  height: 260px;
  top: 10%;
  right: 5%;
  background: radial-gradient(circle at center, #892f55 0%, transparent 60%);
  animation: globalGlowFloat1 18s ease-in-out infinite;
}

.page-section::after {
  width: 300px;
  height: 300px;
  bottom: 5%;
  left: 8%;
  background: radial-gradient(circle at center, #8b7d73 0%, transparent 65%);
  animation: globalGlowFloat2 22s ease-in-out infinite;
}

@keyframes globalGlowFloat1 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-12px, -18px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes globalGlowFloat2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(14px, 16px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */

@media (max-width: 768px) {
  /* Smaller border radius on mobile */
  img {
    border-radius: 8px;
  }
  
  .hero-image,
  .featured-image {
    border-radius: 12px;
  }
  
  /* Faster animations on mobile */
  .text-reveal,
  .text-reveal-left,
  .text-reveal-right,
  .text-reveal-bottom {
    animation-duration: 0.6s;
  }
}

/* ===================================================================
   ACCESSIBILITY - REDUCED MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  /* Disable all mask animations */
  .text-reveal,
  .text-reveal-left,
  .text-reveal-right,
  .text-reveal-bottom,
  .animate-on-scroll,
  .section-title,
  .page-title,
  .heading-primary,
  .heading-secondary,
  .text-content p,
  .description,
  .intro-text,
  ul li,
  ol li,
  .card-title,
  .card-description,
  .btn,
  .button {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  
  /* Keep rounded corners */
  img {
    border-radius: 12px;
  }
  
  /* Disable hover transforms */
  img:hover {
    transform: none !important;
  }
}

/* ===================================================================
   UTILITY CLASSES
   ================================================================= */

/* Force rounded corners */
.rounded-sm { border-radius: 4px !important; }
.rounded { border-radius: 8px !important; }
.rounded-md { border-radius: 12px !important; }
.rounded-lg { border-radius: 16px !important; }
.rounded-xl { border-radius: 20px !important; }
.rounded-2xl { border-radius: 24px !important; }
.rounded-full { border-radius: 50% !important; }
.rounded-none { border-radius: 0 !important; }

/* Disable animations for specific elements */
.no-animate {
  animation: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}

/* Instant reveal (no animation) */
.instant-reveal {
  opacity: 1 !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}