/**
 * DDS Celestial Deco Parallax Hero Styles
 * Art Deco precision meets celestial elegance
 */

/* ==========================================
   CSS VARIABLES & THEME
   ========================================== */

:root {
  /* Teal & Gold Celestial Palette */
  --celestial-teal-dark: #1a5a52;
  --celestial-teal: #006b5e;
  --celestial-teal-light: #00d4aa;
  --celestial-gold: #d4a574;
  --celestial-gold-light: #f4a460;
  --celestial-gold-dark: #b8941f;
  --celestial-cream: #f4e4c1;

  /* Atmosphere & Depth */
  --atmosphere-fog: rgba(26, 90, 82, 0.3);
  --moon-glow: rgba(244, 164, 96, 0.25);

  /* Z-index layers */
  --z-background: 0;       /* Mountain color.webp base */
  --z-stars: 10;           /* Stars in front of background */
  --z-mountain-layer: 30;
  --z-mountain-line: 40;   /* Line art in front of stars */
  --z-atmosphere: 45;
  --z-text-overlay: 48;   /* gradient overlay */
  --z-content: 50;
}

/* ==========================================
   PARALLAX HERO CONTAINER
   ========================================== */

.parallax-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--celestial-teal-dark) 0%, #0a0807 100%);
}

/* ULTRA-STRONG protective scrim for guaranteed text legibility */
.parallax-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 48; /* Between atmosphere (45) and content (50) */
  /* Dual gradient: vertical + radial for maximum text protection */
  background:
    /* Radial gradient centered on text area - strongest protection */
    radial-gradient(
      ellipse 80% 60% at 50% 40%,
      rgba(10, 8, 7, 0.85) 0%,
      rgba(10, 8, 7, 0.7) 30%,
      rgba(10, 8, 7, 0.5) 50%,
      rgba(10, 8, 7, 0.3) 70%,
      transparent 100%
    ),
    /* Vertical gradient - darker at top where text lives */
    linear-gradient(
      180deg,
      rgba(10, 8, 7, 0.85) 0%,      /* ULTRA dark at top */
      rgba(10, 8, 7, 0.7) 20%,      /* Dark continuing */
      rgba(10, 8, 7, 0.5) 40%,      /* Medium */
      rgba(10, 8, 7, 0.3) 60%,      /* Light */
      rgba(10, 8, 7, 0.15) 80%,     /* Very light */
      transparent 100%              /* Clear at bottom */
    );
  pointer-events: none;
}

/* Static mode for reduced motion */
.parallax-hero.static-mode {
  background: var(--celestial-teal-dark);
}

.parallax-hero.static-mode .parallax-layer {
  transform: none !important;
  opacity: 0.6;
}

.parallax-hero.static-mode .hero-content {
  opacity: 0;
  animation: fadeInUp 1.2s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   LAYER 0: BACKGROUND IMAGE (FIXED)
   ========================================== */

.parallax-background {
  position: absolute;
  inset: 0;
  z-index: var(--z-background);
  background-image: url('../images/mountain color.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Teal overlay to integrate with brand colors */
.parallax-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 90, 82, 0.4) 0%,
    rgba(0, 107, 94, 0.3) 50%,
    rgba(10, 8, 7, 0.5) 100%
  );
  pointer-events: none;
}

/* ==========================================
   LAYER 1: STARS CANVAS
   ========================================== */

#stars-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-stars);
  width: 100%;
  height: 150vh; /* Extend below fold */
  pointer-events: none;
  mix-blend-mode: screen; /* Blend stars beautifully */
}

/* ==========================================
   LAYER 2: MOUNTAIN LAYERS (ABSTRACT)
   ========================================== */

.mountain-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(480px, 70vh, 850px);
  z-index: var(--z-mountain-layer);
  background-image:
    url('../images/mountain layer.webp'),
    url('../images/mountain layer.PNG');
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
  transform-origin: bottom center;
}

/* ==========================================
   LAYER 3: MOUNTAIN LINE ART (GEOMETRIC)
   ========================================== */

.mountain-line-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(450px, 65vh, 800px);
  z-index: var(--z-mountain-line);
  background-image:
    url('../images/mountain line.webp'),
    url('../images/mountain line.PNG');
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.95;
  pointer-events: none;
  transform-origin: bottom center;
}

/* Golden accent on line art */
.mountain-line-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--celestial-gold) 100%
  );
  opacity: 0.1;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ==========================================
   ATMOSPHERIC OVERLAY
   ========================================== */

.atmosphere-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-atmosphere);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--atmosphere-fog) 70%,
    rgba(10, 8, 7, 0.7) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

/* ==========================================
   LAYER 4: HERO CONTENT
   ========================================== */

.hero-content {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  color: #ffffff;
  isolation: isolate; /* Create stacking context for ::before backdrop */
  /* Initial state for entrance animation */
  opacity: 0;
  transform: translateY(30px);
}

/* PREMIUM text backdrop panel - world-class legibility */
.hero-content::before {
  content: '';
  position: absolute;
  /* Centered positioning - backdrop wraps tightly around content area */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1200px;
  height: auto;
  min-height: min(500px, 60vh);
  /* ULTRA-STRONG dark glass panel */
  background:
    /* Layered gradients for depth */
    linear-gradient(
      135deg,
      rgba(10, 8, 7, 0.75) 0%,       /* MUCH darker base */
      rgba(0, 107, 94, 0.7) 30%,     /* Teal tint */
      rgba(26, 90, 82, 0.7) 70%,     /* Teal variation */
      rgba(10, 8, 7, 0.75) 100%      /* Dark again */
    ),
    /* Additional solid base layer for guaranteed contrast */
    rgba(10, 8, 7, 0.6);
  /* HEAVY backdrop blur for premium glass effect */
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  /* Stronger border for definition */
  border: 2px solid rgba(212, 165, 116, 0.25);
  border-radius: 32px;
  z-index: -1;
  pointer-events: none;
  /* MULTI-LAYER shadows for depth and separation */
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(0, 107, 94, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.hero-content h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;  /* Increased from 700 for stronger presence */
  line-height: 1.15; /* Slightly increased for better readability */
  letter-spacing: -0.015em; /* Slightly looser for clarity */
  margin: 0 0 1.5rem;
  color: var(--celestial-cream);
  /* WORLD-CLASS multi-layer text shadow for maximum legibility */
  text-shadow:
    /* Layer 1: Tight dark shadow for definition */
    0 1px 2px rgba(0, 0, 0, 0.9),
    /* Layer 2: Medium shadow for depth */
    0 3px 8px rgba(0, 0, 0, 0.8),
    /* Layer 3: Large shadow for separation from background */
    0 6px 20px rgba(0, 0, 0, 0.7),
    /* Layer 4: Extra large shadow for ultimate depth */
    0 10px 40px rgba(0, 0, 0, 0.6),
    /* Layer 5: Gold glow for premium feel */
    0 0 60px rgba(212, 165, 116, 0.4),
    /* Layer 6: Extended gold glow */
    0 0 100px rgba(212, 165, 116, 0.2);
  /* Text stroke for crisp outline (webkit) */
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
  /* Paint order for optimal rendering */
  paint-order: stroke fill;
}

.hero-content .subtitle {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;  /* Increased from 300 for better legibility */
  line-height: 1.7;  /* Increased for better readability */
  max-width: 800px;
  margin: 0 auto 2.5rem;
  color: #ffffff;  /* Pure white instead of 0.9 opacity for maximum contrast */
  /* ENHANCED multi-layer text shadow */
  text-shadow:
    /* Layer 1: Tight shadow for definition */
    0 1px 3px rgba(0, 0, 0, 0.9),
    /* Layer 2: Medium shadow for depth */
    0 2px 8px rgba(0, 0, 0, 0.7),
    /* Layer 3: Large shadow for separation */
    0 4px 16px rgba(0, 0, 0, 0.6),
    /* Layer 4: Extra large shadow for maximum legibility */
    0 8px 32px rgba(0, 0, 0, 0.5);
  /* Subtle text stroke for crisp edges */
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.2);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.hero-cta-primary,
.hero-cta-secondary {
  padding: 1rem 2.5rem;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.hero-cta-primary {
  background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--celestial-gold-light) 100%);
  color: #0a0807;
  box-shadow:
    0 4px 20px rgba(212, 165, 116, 0.4),
    0 0 40px rgba(212, 165, 116, 0.2);
}

.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 30px rgba(212, 165, 116, 0.5),
    0 0 60px rgba(212, 165, 116, 0.3);
}

.hero-cta-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.hero-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* ==========================================
   SCROLL INDICATOR (Animated)
   ========================================== */

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.scroll-indicator-text {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.6);
}

.scroll-indicator-icon {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  position: relative;
  display: flex;
  justify-content: center;
}

.scroll-indicator-icon::before {
  content: '';
  position: absolute;
  top: 6px;
  width: 4px;
  height: 8px;
  background: var(--celestial-gold);
  border-radius: 2px;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(8px);
  }
}

.scroll-indicator:hover .scroll-indicator-icon {
  border-color: var(--celestial-gold);
}

.scroll-indicator:hover .scroll-indicator-text {
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   ENHANCED CTA MICRO-INTERACTIONS
   ========================================== */

.hero-cta-primary,
.hero-cta-secondary {
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep effect on hover */
.hero-cta-primary::after,
.hero-cta-secondary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3) 50%,
    transparent
  );
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.hero-cta-primary:hover::after,
.hero-cta-secondary:hover::after {
  left: 100%;
}

/* Enhanced primary CTA */
.hero-cta-primary {
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-cta-primary:hover {
  transform: translateY(-4px) scale(1.02);
  background-position: 100% 50%;
  box-shadow:
    0 8px 32px rgba(212, 165, 116, 0.5),
    0 0 60px rgba(212, 165, 116, 0.3),
    0 0 100px rgba(212, 165, 116, 0.15);
}

.hero-cta-primary:active {
  transform: translateY(-2px) scale(0.98);
}

/* Enhanced secondary CTA */
.hero-cta-secondary {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-cta-secondary:hover {
  transform: translateY(-4px) scale(1.02);
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--celestial-gold);
  box-shadow:
    0 8px 32px rgba(0, 107, 94, 0.3),
    0 0 40px rgba(0, 212, 170, 0.15);
}

.hero-cta-secondary:active {
  transform: translateY(-2px) scale(0.98);
}

/* ==========================================
   GEOMETRIC ACCENTS (ART DECO)
   ========================================== */

.deco-accent {
  position: absolute;
  pointer-events: none;
}

.deco-accent-left {
  top: 30%;
  left: 5%;
  width: 2px;
  height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--celestial-gold) 50%,
    transparent 100%
  );
  opacity: 0.4;
}

.deco-accent-right {
  top: 30%;
  right: 5%;
  width: 2px;
  height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--celestial-gold) 50%,
    transparent 100%
  );
  opacity: 0.4;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 768px) {
  .mountain-layer {
    height: clamp(400px, 68vh, 700px);
  }

  .mountain-line-layer {
    height: clamp(370px, 63vh, 650px);
  }

  .hero-content h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  .hero-content .subtitle {
    font-size: clamp(1rem, 3vw, 1.25rem);
  }

  .hero-cta {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .deco-accent-left,
  .deco-accent-right {
    display: none;
  }

  /* Hero backdrop responsive adjustments */
  .hero-content::before {
    width: 92%;
    min-height: min(400px, 55vh);
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .mountain-layer {
    height: clamp(350px, 66vh, 600px);
  }

  .mountain-line-layer {
    height: clamp(320px, 61vh, 550px);
  }

  #stars-canvas {
    opacity: 0.7;
  }

  .atmosphere-overlay {
    opacity: 0.3;
  }

  .hero-content {
    padding: clamp(1.5rem, 4vw, 3rem);
  }

  /* Hero backdrop responsive adjustments for small mobile */
  .hero-content::before {
    top: 10vh;
    bottom: 10vh;
    left: 3%;
    right: 3%;
    border-radius: 16px;
  }
}

/* Tablet landscape and medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
  .mountain-layer {
    height: clamp(460px, 69vh, 780px);
  }

  .mountain-line-layer {
    height: clamp(430px, 64vh, 730px);
  }
}

/* Large screens and desktops */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* No moon layer - removed for simplified design */
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
  .parallax-hero {
    max-height: 100vh;
  }

  .mountain-layer {
    height: clamp(520px, 72vh, 900px);
  }

  .mountain-line-layer {
    height: clamp(480px, 67vh, 850px);
  }
}

/* Short screens (landscape phones, etc.) */
@media (max-height: 600px) and (orientation: landscape) {
  .parallax-hero {
    min-height: 100vh;
  }

  .mountain-layer {
    height: clamp(300px, 70vh, 500px);
  }

  .mountain-line-layer {
    height: clamp(270px, 65vh, 450px);
  }

  .hero-content h1 {
    font-size: clamp(1.75rem, 6vh, 3rem);
  }

  .hero-content .subtitle {
    font-size: clamp(0.9rem, 2.5vh, 1.125rem);
    margin-bottom: 1.5rem;
  }

  .hero-cta {
    gap: 0.75rem;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
  }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

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

  /* Disable backdrop blur for reduced motion */
  .hero-content::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 107, 94, 0.12); /* Increase from 0.08 to compensate */
    /* Add stronger shadow since blur is disabled */
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.6),
      0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hero-content h1,
  .hero-content .subtitle {
    text-shadow: none;
  }

  .hero-cta-primary {
    border: 2px solid var(--celestial-gold-dark);
  }

  .hero-cta-secondary {
    border: 2px solid #ffffff;
  }

  /* Stronger backdrop for high contrast */
  .hero-content::before {
    background: rgba(0, 107, 94, 0.2); /* Increase from 0.15 */
    border: 2px solid rgba(0, 107, 94, 0.6); /* Increase from 0.5 */
    /* Stronger shadow for high contrast */
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.7),
      0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
  .parallax-hero {
    min-height: auto;
    page-break-inside: avoid;
  }

  #stars-canvas,
  .atmosphere-overlay,
  .deco-accent {
    display: none;
  }

  .hero-content {
    min-height: auto;
    padding: 2rem;
  }
}