/* ============================================================
   Surf City Blinds — Motion treatments
   experiment-motion-v1 branch
   ============================================================
   Separate from styles.css so the motion layer is reviewable
   on its own. Applies only to site-overlay-*.html pages.
   All motion disables under prefers-reduced-motion: reduce.
   ============================================================ */


/* ============================================================
   Motion custom properties
   ============================================================ */

:root {
  --motion-fade-duration:   300ms;
  --motion-fade-distance:   24px;
  --motion-slat-tilt-top:   6;   /* degrees, used in JS */
  --motion-slat-tilt-mid:   8;
  --motion-slat-tilt-bot:   6;
  --motion-slat-gap:        6px;
  --motion-slat-height:     14px; /* 3 × 1px lines + 2 × 6px gaps */
}


/* ============================================================
   1. Hero parallax
   ============================================================
   Two layers inside .hero:
     .hero-bg    — background image, moved at 50% scroll rate by JS
     .hero-content — foreground content, normal scroll rate
   The bg layer extends -50% top and -50% bottom so the
   parallax offset never shows empty space within the hero.
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  /* Explicit min-height prevents layout shift before image loads */
  min-height: 480px;
}

.hero-bg {
  position: absolute;
  top: -50%;
  left: 0;
  right: 0;
  bottom: -50%;
  background-image: url('../images/hero-bg.png');
  background-size: cover;
  background-position: center;
  /* Fallback matches hero bg — no flash of empty space if image 404s */
  background-color: var(--color-bg-deep);
  will-change: transform;
}

/* Foreground content sits above the parallax bg layer */
.hero-content {
  position: relative;
  z-index: 1;
}


/* ============================================================
   Overlay variants
   ============================================================ */

/* Solid: dark overlay at 65% opacity */
.hero-overlay-solid .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(42, 37, 32, 0.65);
}

/* Gradient: directional dark overlay, 75% → 35% opacity */
.hero-overlay-gradient .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(42, 37, 32, 0.75),
    rgba(42, 37, 32, 0.35)
  );
}


/* ============================================================
   2. Section fade-in on entry
   ============================================================
   JS adds .is-visible when 10% of the section enters the
   viewport. Hero is excluded — it's already in view at load.
   ============================================================ */

.js-section-fade {
  opacity: 0;
  transform: translateY(var(--motion-fade-distance));
  transition:
    opacity var(--motion-fade-duration) ease-out,
    transform var(--motion-fade-duration) ease-out;
}

.js-section-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   3. Slat dividers
   ============================================================
   Three 1px horizontal lines, 6px apart, full viewport width.
   JS rotates each slat as the divider scrolls through the
   viewport, peaking at the midpoint and returning to flat.
   ============================================================ */

.slat-divider {
  display: block;
  position: relative;
  width: 100%;
  height: var(--motion-slat-height);
  border: none;
  background: none;
  margin: 0;
  padding: 0;
}

.slat-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  transform-origin: center center;
  will-change: transform;
}

.slat-line:nth-child(1) { top: 0; }
.slat-line:nth-child(2) { top: var(--motion-slat-gap); }
.slat-line:nth-child(3) { top: calc(var(--motion-slat-gap) * 2); }

/* Light slats: used when section above is dark (#2A2520) */
.slat-divider--on-dark .slat-line  { background-color: rgba(212, 199, 181, 0.25); }

/* Dark slats: used when section above is warm or white */
.slat-divider--on-light .slat-line { background-color: rgba(42, 37, 32, 0.15); }


/* ============================================================
   Reduced motion — all effects disabled
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Static hero bg — no parallax travel */
  .hero-bg {
    top: 0;
    bottom: 0;
    transform: none !important;
  }

  /* Sections render at final visible state immediately */
  .js-section-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Slats stay visible but flat */
  .slat-line {
    transform: none !important;
  }
}