/**
 * styles.css
 * ---------------------------------------------------------------------------
 * Custom CSS for the Tabiques Salazar landing page.
 *
 * This file only contains the things Tailwind's utility classes can't do
 * out of the box: keyframe animations, the brick-coursing divider, and a
 * couple of small component tweaks. Everything else (layout, spacing,
 * color, typography) is handled with Tailwind utility classes directly
 * in index.html.
 * ---------------------------------------------------------------------------
 */

/* -----------------------------------------------------------------------
   Base
----------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAF6EF; /* fallback in case Tailwind CDN is slow to load */
}

/* Brand-colored text selection highlight */
::selection {
  background: #B5502E;
  color: #FAF6EF;
}

/* Respect users who prefer reduced motion: disable decorative animation
   and smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-slide {
    animation: none;
  }
}

/* -----------------------------------------------------------------------
   Brick-coursing divider
   Signature visual element: a strip of "bricks" laid in a running bond
   (staggered) pattern, exactly how tabique is laid in a real wall.
   Used between sections instead of a plain line.
   `.row2` offsets the pattern by half a brick so two stacked dividers
   look like two courses of a real wall.
----------------------------------------------------------------------- */
.brick-course {
  height: 14px;
  width: 100%;
  background-image:
    linear-gradient(to right, transparent 0 2px, #FAF6EF 2px 4px),
    linear-gradient(#B5502E, #B5502E);
  background-size: 56px 14px, 100% 100%;
}

.brick-course.row2 {
  background-position: 28px 0;
}

/* -----------------------------------------------------------------------
   Hero carousel
   Slides are stacked absolutely and cross-fade via the `.active` class
   (toggled from js/main.js). Each slide also has a slow continuous
   "Ken Burns" zoom so the hero feels alive without needing real video.
----------------------------------------------------------------------- */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease;
  animation: kenburns 16s ease-in-out infinite;
}

.hero-slide.active {
  opacity: 1;
  z-index: 1;
}

@keyframes kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-1%, -1%); }
  100% { transform: scale(1) translate(0, 0); }
}

/* Bouncing "scroll down" cue at the bottom of the hero */
.scroll-cue {
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

/* -----------------------------------------------------------------------
   Scroll-reveal
   Elements start slightly lower and transparent, then animate in once
   they enter the viewport (see IntersectionObserver in js/main.js).
----------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------------------
   Small component tweaks
----------------------------------------------------------------------- */

/* Thin "mortar line" border used on spec-sheet and product cards */
.mortar-card {
  border: 1px solid #E4D7C2;
}

/* Logo in the fixed nav: keep its natural brand colors always; only add a
   soft drop-shadow while floating over the hero photo so it stays legible
   on busy backgrounds. No color/hue is altered — this is a shadow only. */
.nav-logo {
  transition: filter .3s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

header[data-state="scrolled"] .nav-logo {
  filter: none;
}