@import "tailwindcss";

:root {
  --loyaly-cream: #fff8e8;
  --loyaly-soft-cream: #fff2c8;
  --loyaly-brand-yellow: #f4be28;
  --loyaly-bright-yellow: #ffd95a;
  --loyaly-carbon: #171512;
  --loyaly-warm-text: #4f463a;
  --loyaly-copper: #bc7122;
}

/* Legacy styles are loaded dynamically in layout.tsx. This file is kept minimal. */
html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color-scheme: light;
}

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-smooth iframe {
  pointer-events: none;
}

.loyaly-home {
  --hero-parallax-x: 0px;
  --hero-parallax-y: 0px;
  background: none !important;
  color: var(--loyaly-carbon);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/* Hero section text contrast and readability fixes */
.loyaly-home .hero-subheading {
  color: var(--loyaly-brand-yellow) !important; /* Premium brand golden yellow */
}

.loyaly-home .hero-heading {
  color: var(--loyaly-carbon) !important; /* Premium brand carbon (#171512) for high readability */
  font-weight: 900 !important; /* Ultra-bold / Black font weight override */
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.7);
}

.loyaly-home .hero-gradient-text {
  background-image: linear-gradient(105deg, #bc7122 0%, #f4be28 45%, #c9960f 60%, #8a4f0f 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
  animation: heroGradientLoop 7s linear infinite;
}

@keyframes heroGradientLoop {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .loyaly-home .hero-gradient-text { animation: none; }
}

.loyaly-home .hero-description {
  color: var(--loyaly-carbon) !important; /* darker, higher-contrast text now that the hero image shows through clearly */
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.6);
}

.loyaly-home .hero-btn-primary {
  background-color: var(--loyaly-brand-yellow) !important;
  color: var(--loyaly-carbon) !important;
  border: none !important;
  box-shadow: 0 10px 15px -3px rgba(244, 190, 40, 0.3) !important;
}

.loyaly-home .hero-btn-primary:hover {
  background-color: var(--loyaly-bright-yellow) !important;
  color: var(--loyaly-carbon) !important;
  box-shadow: 0 10px 15px -3px rgba(244, 190, 40, 0.5) !important;
}

.loyaly-home .hero-btn-secondary {
  border: 2px solid var(--loyaly-brand-yellow) !important;
  color: var(--loyaly-brand-yellow) !important;
  background-color: transparent !important;
}

.loyaly-home .hero-btn-secondary:hover {
  background-color: var(--loyaly-brand-yellow) !important;
  color: var(--loyaly-carbon) !important;
}

/* Hide sticky header during scroll down / show on scroll up on the home page */
body.is-home-page .sticky-header,
body.is-home-page .mobile-header.sticky-header,
body.is-home-page .sticky-active {
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
}

body.is-home-page.scroll-down .sticky-header,
body.is-home-page.scroll-down .mobile-header.sticky-header,
body.is-home-page.scroll-down .sticky-active {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(-100%) !important;
}

body.is-home-page.scroll-up .sticky-header,
body.is-home-page.scroll-up .mobile-header.sticky-header,
body.is-home-page.scroll-up .sticky-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Problem + Shift Custom Animations */
@keyframes flowArrow {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

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

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

@keyframes flowLine {
  0% {
    top: -150px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.animate-flow-line {
  animation: flowLine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.animate-pulse-ring-1 {
  animation: pulseRing 6s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.animate-pulse-ring-2 {
  animation: pulseRing 6s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
  animation-delay: 3s;
}

@keyframes scrollArrow {
  0% {
    transform: translateY(-8px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(8px);
    opacity: 0;
  }
}

.animate-scroll-arrow {
  animation: scrollArrow 4s ease-in-out infinite;
}

/* Header Z-Index Overrides */
.top-page-wrapper {
  position: relative !important;
  z-index: 99999999 !important;
}

.header-wrapper {
  position: relative !important;
  z-index: 99999999 !important;
}

.header,
.mobile-header,
.sticky-header,
.sticky-active,
#head {
  z-index: 99999999 !important;
}

.header.sticky-header,
.mobile-header.sticky-header {
  position: fixed !important;
  z-index: 99999999 !important;
}

/* Ensure mobile menu container, search panel, slide sidebar, and body overlay are even higher so they sit on top of the headers when open */
.body-overlay {
  z-index: 99999998 !important;
}

.mobile-header-menu-container,
.site-search,
.slide-sidebar-wrapper {
  z-index: 999999999 !important;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Disable utility animation classes used across the project */
  [class*="animate-"] {
    animation: none !important;
    transition: none !important;
  }
  /* Also pause any CSS-based keyframe animations */
  * {
    animation-play-state: paused !important;
  }
}

/* Hero carousel layout lives in HeroCarousel.tsx as a scoped <style> tag,
   matching every other home-page section — keeps it working even if this
   global stylesheet has a load/HMR hiccup. */