@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');
@import url('./nuux-brand.css');

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-family: var(--ff-sans, 'DM Sans', system-ui, sans-serif);
  background: var(--white, #f7f7f4);
  color: var(--forest, #1a2e24);
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-links--open {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(247, 247, 244, 0.97);
  padding: 1rem 2rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  gap: 0.25rem;
  backdrop-filter: blur(14px);
}

@media (min-width: 901px) {
  .nav-hamburger {
    display: none;
  }
}

.static-demo-banner {
  background: rgba(143, 168, 144, 0.25);
  color: var(--forest);
  text-align: center;
  font-size: 0.78rem;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid var(--rule);
}

/* Home hero — crossfade + Ken Burns (replaces background video on static site) */
.hero-bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #1a2e24;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-slide-crossfade 40s ease-in-out infinite;
  will-change: opacity;
}

.hero-bg-slide--1 { animation-delay: 0s; }
.hero-bg-slide--2 { animation-delay: 10s; }
.hero-bg-slide--3 { animation-delay: 20s; }
.hero-bg-slide--4 { animation-delay: 30s; }

.hero-bg-slide img {
  position: absolute;
  width: 118%;
  height: 118%;
  left: -9%;
  top: -9%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
}

.hero-bg-slide--1 img {
  animation: hero-slide-kenburns-a 40s ease-in-out infinite;
}

.hero-bg-slide--2 img {
  animation: hero-slide-kenburns-b 40s ease-in-out infinite;
  animation-delay: 10s;
}

.hero-bg-slide--3 img {
  animation: hero-slide-kenburns-c 40s ease-in-out infinite;
  animation-delay: 20s;
}

.hero-bg-slide--4 img {
  animation: hero-slide-kenburns-d 40s ease-in-out infinite;
  animation-delay: 30s;
}

@keyframes hero-slide-crossfade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes hero-slide-kenburns-a {
  0%, 2% { transform: scale(1.04) translate(0, 0); }
  22% { transform: scale(1.11) translate(-1.2%, -0.8%); }
  25%, 100% { transform: scale(1.04) translate(0, 0); }
}

@keyframes hero-slide-kenburns-b {
  0%, 2% { transform: scale(1.06) translate(-0.5%, 0); }
  22% { transform: scale(1.12) translate(1%, -1.2%); }
  25%, 100% { transform: scale(1.06) translate(-0.5%, 0); }
}

@keyframes hero-slide-kenburns-c {
  0%, 2% { transform: scale(1.05) translate(0.8%, -0.4%); }
  22% { transform: scale(1.1) translate(-1.4%, 0.6%); }
  25%, 100% { transform: scale(1.05) translate(0.8%, -0.4%); }
}

@keyframes hero-slide-kenburns-d {
  0%, 2% { transform: scale(1.07) translate(-0.6%, 0.5%); }
  22% { transform: scale(1.13) translate(0.9%, -0.5%); }
  25%, 100% { transform: scale(1.07) translate(-0.6%, 0.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-slideshow .hero-bg-slide {
    animation: none;
    opacity: 0;
  }

  .hero-bg-slideshow .hero-bg-slide--1 {
    opacity: 1;
  }

  .hero-bg-slideshow .hero-bg-slide img {
    animation: none;
    transform: scale(1.06);
    width: 110%;
    height: 110%;
    left: -5%;
    top: -5%;
  }
}

/* About #inspiration — gallery photos at 50% opacity behind tile copy */
#inspiration .insp-tile-media img {
  opacity: 0.5;
}

.insp-tile-media.has-face-blur .face-blur-mask {
  position: absolute;
  z-index: 1;
  left: var(--fb-left);
  top: var(--fb-top);
  width: var(--fb-w);
  height: var(--fb-h);
  border-radius: 50%;
  pointer-events: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(26, 46, 36, 0.08);
}