/**
 * Maison Blanc — 3D depth theme (CSS only, pairs with js/enhancements.js + main.js)
 */

:root {
  --shadow-depth: 0 24px 48px rgba(26, 26, 26, 0.12), 0 8px 16px rgba(26, 26, 26, 0.06);
  --shadow-depth-lg: 0 32px 64px rgba(26, 26, 26, 0.14);
  --perspective-scene: 1200px;
}

@keyframes divider-gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Page enter */
body.page-enter main,
body.page-enter-pending main {
  animation: none;
}

body.page-enter {
  animation: page-fade-in 0.65s ease both;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hero depth scene */
.hero.hero--depth {
  perspective: var(--perspective-scene);
  transform-style: preserve-3d;
}

.hero.hero--depth .hero-slides,
.hero.hero--depth .hero__overlay,
.hero.hero--depth .hero__content {
  transform-style: preserve-3d;
  will-change: transform;
}

.hero.hero--depth .hero-slides {
  transform: translateZ(-40px) scale(1.04);
}

.hero.hero--depth .hero__overlay {
  transform: translateZ(-20px);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-depth);
}

.hero .glass-panel {
  padding: var(--space-xl) var(--space-lg);
  max-width: 42rem;
  margin-inline: auto;
}

/* 3D cards */
.card-3d {
  transform-style: preserve-3d;
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease;
  box-shadow: var(--shadow-sm);
}

.card-3d:hover {
  box-shadow: var(--shadow-depth);
}

.gallery-tilt {
  perspective: 900px;
}

.gallery-item.gallery-tilt {
  transform-style: preserve-3d;
}

.gallery-item.gallery-tilt:hover {
  transform: rotateX(2deg) rotateY(-2deg) translateZ(8px);
}

.faq-item.glass-panel:not(.faq-item--flat) {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-border-refined);
}

/* Contact form card surface is defined in spacing-layout.css (loads after this sheet on contact.html) */

.page-header--gradient {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
  text-align: center;
}

.cross-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
}

.cross-links a {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border-refined);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cross-links a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Subpage section dividers — support main#main (all pages) and legacy #page-content */
.page-dining main#main > section:not(.hero)::before,
.page-dining #page-content > section:not(.hero)::before,
.page-dining main#main > header.page-header::before,
.page-dining #page-content > header.page-header::before,
.page-rooms main#main > section:not(.hero)::before,
.page-rooms #page-content > section:not(.hero)::before,
.page-rooms main#main > header.page-header::before,
.page-rooms #page-content > header.page-header::before,
.page-about main#main > section:not(.hero)::before,
.page-about #page-content > section:not(.hero)::before,
.page-about main#main > header.page-header::before,
.page-about #page-content > header.page-header::before,
.page-experiences main#main > section:not(.hero)::before,
.page-experiences #page-content > section:not(.hero)::before,
.page-experiences main#main > header.page-header::before,
.page-experiences #page-content > header.page-header::before,
.page-location main#main > section:not(.hero)::before,
.page-location main#main > header.page-header::before,
.page-offers main#main > section:not(.hero)::before,
.page-offers main#main > header.page-header::before,
.page-gallery main#main > section:not(.hero)::before,
.page-gallery main#main > header.page-header::before,
.page-contact main#main > section:not(.hero)::before,
.page-contact main#main > header.page-header::before,
.page-faq main#main > section:not(.hero)::before,
.page-faq main#main > header.page-header::before,
.page-amenities main#main > section:not(.hero)::before,
.page-amenities main#main > header.page-header::before {
  content: "";
  display: block;
  width: min(88%, 42rem);
  height: 1px;
  margin: 0 auto var(--space-xl);
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-champagne, #c9b896) 20%,
    rgba(201, 184, 150, 0.35) 50%,
    var(--color-champagne, #c9b896) 80%,
    transparent
  );
  background-size: 200% 100%;
  animation: divider-gradient-flow 6s linear infinite;
  opacity: 0.75;
}

.page-dining .hero + .page-header,
.page-rooms .hero + .page-header {
  padding-top: var(--space-xl);
}

@media (prefers-reduced-motion: reduce) {
  body.page-enter {
    animation: none;
  }

  .card-3d:hover,
  .gallery-item.gallery-tilt:hover {
    transform: none;
  }

  .page-dining main#main > section:not(.hero)::before,
  .page-dining #page-content > section:not(.hero)::before,
  .page-rooms main#main > section:not(.hero)::before,
  .page-rooms #page-content > section:not(.hero)::before,
  .page-about main#main > section:not(.hero)::before,
  .page-about #page-content > section:not(.hero)::before,
  .page-about main#main > header.page-header::before,
  .page-experiences main#main > section:not(.hero)::before,
  .page-experiences #page-content > section:not(.hero)::before {
    animation: none;
  }
}