/* =============================================================================
   HOMEPAGE.CSS — Jaipur Stone Industries
   Homepage-specific styles. Hero slider first.
   ============================================================================= */


/* =============================================================================
   HERO SLIDER
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Container
   100vh, clips all absolutely-positioned slide children.
   background-color acts as a fallback while the first slide loads.
   ----------------------------------------------------------------------------- */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #0C0C0C;
}


/* -----------------------------------------------------------------------------
   Individual slide
   All slides are stacked via position:absolute.
   Opacity handles the crossfade — transitions only this one property.
   z-index: 0 → 1 on activation ensures the incoming slide always sits on top.
   ----------------------------------------------------------------------------- */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 1100ms ease;
}

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

/* Dark scrim — sits above the image, below the heading.
   Provides consistent text legibility across all placeholder shades.
   When real photography is added, adjust the alpha to match image brightness. */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.44);
  z-index: 1;
  pointer-events: none;
}


/* -----------------------------------------------------------------------------
   Slide image wrapper
   The zoom animation lives here, not on the slide itself, so that the
   scale transform is isolated from the opacity fade.

   CSS @keyframes guarantees the zoom always starts at scale(1.0) the moment
   is-active is applied — regardless of what transform value the element held
   before (e.g. mid-zoom from a previous activation).
   ----------------------------------------------------------------------------- */
@keyframes hero-zoom {
  from { transform: scale(1.0);   }
  to   { transform: scale(1.065); }
}

.hero-slide__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Resting state: scale is reset.
     will-change promotes the element to its own compositor layer. */
  transform: scale(1.0);
  will-change: transform;
}

/* Zoom plays while slide is active */
.hero-slide.is-active .hero-slide__image {
  /*
   * Duration > slide duration (8s > 6s) so the zoom is always mid-progress
   * when the next slide takes over — creating the slow continuous pull feel.
   * linear keeps the motion constant; ease-in would front-load the movement.
   * forwards holds the final frame so there's no snap-back during the fade-out.
   */
  animation: hero-zoom 8000ms linear forwards;
}

/* Placeholder fills entire image wrapper during development */
.hero-slide__image .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}

/* Real <img> treatment — for when placeholders are replaced */
.hero-slide__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* -----------------------------------------------------------------------------
   Heading overlay
   Centered vertically and horizontally over all slides.
   pointer-events: none lets clicks pass through to the arrow buttons below.
   ----------------------------------------------------------------------------- */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  padding: 0 var(--container-padding);
  /* Compensate upward slightly for optical center (classic editorial layout) */
  padding-bottom: 3vh;
}

.hero-title {
  font-family: var(--font-heading);
  /*
   * 4rem (64px) reads as "large and confident" without tipping into
   * fashion-editorial oversized. At 100vw the 40-character string breaks
   * naturally into two visually balanced lines.
   */
  font-size: 4rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: rgba(234, 234, 234, 0.93);
  text-align: center;
  max-width: 860px;
  pointer-events: auto;
  /*
   * Minimal shadow: enough to separate text from bright image areas,
   * not enough to create a visible glow halo.
   */
  text-shadow: 0 1px 28px rgba(0, 0, 0, 0.28);
}


/* -----------------------------------------------------------------------------
   Navigation arrows
   Vertically centered, near screen edges, stroke-only SVG icons.
   Restrained: only opacity changes on hover — no translate, no scale.
   ----------------------------------------------------------------------------- */
.hero-nav {
  /* Positioning */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  /* Reset browser button defaults */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;

  /* Hit area larger than visual — easier to click near the edge */
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* Default: dim but visible */
  color: rgba(234, 234, 234, 0.38);
  transition: color 220ms ease;
}

.hero-nav:hover {
  color: rgba(234, 234, 234, 0.88);
}

.hero-nav:focus-visible {
  outline: 1px solid rgba(234, 234, 234, 0.4);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero-nav:active {
  color: rgba(234, 234, 234, 0.65);
}

.hero-nav--prev {
  left: 36px;
}

.hero-nav--next {
  right: 36px;
}

.hero-nav svg {
  display: block;
  flex-shrink: 0;
  /* Inherit color as stroke */
  stroke: currentColor;
}


/* =============================================================================
   PRODUCTS SECTION
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Section grid
   3 equal columns. 6 items naturally form 2 rows.
   Reuses --grid-gap from the global spacing system (2.5rem).
   ----------------------------------------------------------------------------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}


/* -----------------------------------------------------------------------------
   Product tile
   The entire tile is an <a> — cursor, focus, and click all handled here.
   overflow: hidden is the clipping context for the image zoom.
   No border — this is an image-first layout.
   ----------------------------------------------------------------------------- */
.products-tile {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  /* Fallback background visible before placeholder/image loads */
  background-color: var(--color-bg-tertiary);
}

.products-tile:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 1px;
}


/* -----------------------------------------------------------------------------
   Image layer
   Fills tile completely. Handles the zoom transform.

   Asymmetric transition technique:
   · The DEFAULT rule's transition controls the REVERSE (zoom-out) direction.
   · The :hover rule's transition controls the FORWARD (zoom-in) direction.
   CSS picks up whichever `transition` is active at the moment the state changes.

   zoom-in  → slow, ease-out (graceful pull): 680ms
   zoom-out → fast, ease    (sharp release):  280ms
   ----------------------------------------------------------------------------- */
.products-tile__image {
  position: absolute;
  inset: 0;
  transform: scale(1.0);
  transition: transform 280ms ease;          /* zoom-out speed */
  will-change: transform;
}

.products-tile:hover .products-tile__image {
  transform: scale(1.04);
  transition: transform 680ms ease-out;      /* zoom-in speed */
}

/* Placeholder fills image layer during development */
.products-tile__image .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}

/* Real <img> treatment — for when placeholders are replaced */
.products-tile__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* -----------------------------------------------------------------------------
   Overlay
   Gradient scrim at tile bottom. Holds the name label.
   Stays completely static — the zoom is the only interaction signal.
   pointer-events:none lets the parent <a> handle clicks.
   ----------------------------------------------------------------------------- */
.products-tile__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(
    to top,
    rgba(6, 6, 6, 0.78) 0%,
    rgba(6, 6, 6, 0.20) 52%,
    transparent 100%
  );
  pointer-events: none;
}


/* -----------------------------------------------------------------------------
   Material name
   Only text inside each tile. Uppercase, tracked, light-weight.
   Sized to be readable as signage rather than body copy.
   ----------------------------------------------------------------------------- */
.products-tile__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(234, 234, 234, 0.82);
  line-height: 1;
}


/* =============================================================================
   PROJECTS PREVIEW SECTION
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Grid
   2 equal columns. 4 cards form 2 rows naturally.
   Reuses --grid-gap (2.5rem) from the global spacing system.
   ----------------------------------------------------------------------------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}


/* -----------------------------------------------------------------------------
   Project card
   Entire card is an <a> — one clickable surface, no nested interactive elements.
   overflow: hidden is the sole clipping context for the image zoom.
   3:2 aspect ratio per spec.
   ----------------------------------------------------------------------------- */
.project-card {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  background-color: var(--color-bg-tertiary);
}

.project-card:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 1px;
}


/* -----------------------------------------------------------------------------
   Image layer
   Same asymmetric transition technique as product tiles.
   Scale delta is smaller here (1.035 vs 1.04) — larger card area means the
   same pixel movement reads as more dramatic, so we dial it back.

   zoom-out → 280ms ease        (snappy release)
   zoom-in  → 680ms ease-out    (slow architectural pull)
   ----------------------------------------------------------------------------- */
.project-card__image {
  position: absolute;
  inset: 0;
  transform: scale(1.0);
  transition: transform 280ms ease;
  will-change: transform;
}

.project-card:hover .project-card__image {
  transform: scale(1.035);
  transition: transform 680ms ease-out;
}

/* Placeholder fills image layer during development */
.project-card__image .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}

/* Real <img> treatment */
.project-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* -----------------------------------------------------------------------------
   Overlay
   Deeper gradient than product tiles — two text lines need more visual room.
   The 0% → 40% ramp is opaque enough to seat both name and location clearly.
   Static: overlay does not change on hover.
   ----------------------------------------------------------------------------- */
.project-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: var(--space-8) var(--space-8);
  background: linear-gradient(
    to top,
    rgba(6, 6, 6, 0.82) 0%,
    rgba(6, 6, 6, 0.42) 38%,
    rgba(6, 6, 6, 0.10) 62%,
    transparent 100%
  );
  pointer-events: none;
}


/* -----------------------------------------------------------------------------
   Project name
   Readable as a label. Not a headline — medium weight keeps it restrained.
   ----------------------------------------------------------------------------- */
.project-card__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: rgba(234, 234, 234, 0.92);
  line-height: 1.25;
  margin-bottom: var(--space-1);
}


/* -----------------------------------------------------------------------------
   Project location
   Contextual only. Muted, smaller — sits clearly below the name without
   competing for visual weight.
   ----------------------------------------------------------------------------- */
.project-card__location {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.06em;
  color: rgba(154, 154, 154, 0.78);
  line-height: 1;
}


/* =============================================================================
   INFRASTRUCTURE PREVIEW SECTION
   Single full-width 16:9 editorial feature with bottom-left overlay.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Feature container
   aspect-ratio: 16/9 on the container itself — no wrapper needed.
   overflow: hidden clips both the image zoom and the overlay.
   ----------------------------------------------------------------------------- */
.infra-feature {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg-tertiary);
}


/* -----------------------------------------------------------------------------
   Image layer
   Same asymmetric transition pattern as other sections.

   Scale: 1.025 — "extremely subtle" per spec.
   At 1400px container width a 16:9 frame is ~788px tall. scale(1.025) moves
   each edge by ~10px. Barely perceptible — appropriate for a large static feature.

   zoom-out → 280ms ease      (consistent with site-wide snap-back)
   zoom-in  → 900ms ease-out  (slower than project tiles — larger area, more noticeable motion)
   ----------------------------------------------------------------------------- */
.infra-feature__image {
  position: absolute;
  inset: 0;
  transform: scale(1.0);
  transition: transform 280ms ease;
  will-change: transform;
}

.infra-feature:hover .infra-feature__image {
  transform: scale(1.025);
  transition: transform 900ms ease-out;
}

/* Placeholder fills image layer during development */
.infra-feature__image .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}

/* Real <img> treatment */
.infra-feature__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* -----------------------------------------------------------------------------
   Overlay
   Bottom-left positioned — editorial, not centered.
   Gradient is deeper than project cards: the title and supporting line together
   span more vertical space and need a wider opaque base.
   Completely static — no hover state. The image zoom is the only signal.
   pointer-events: none keeps the section's own hover detection clean.
   ----------------------------------------------------------------------------- */
.infra-feature__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: var(--space-12) var(--space-12);
  background: linear-gradient(
    to top,
    rgba(6, 6, 6, 0.86) 0%,
    rgba(6, 6, 6, 0.52) 28%,
    rgba(6, 6, 6, 0.14) 52%,
    transparent 100%
  );
  pointer-events: none;
  /* Constrain text block to left portion — leaves right side image-dominant */
  max-width: 600px;
}


/* -----------------------------------------------------------------------------
   Label
   Section identifier. Accent color, uppercase — acts as an editorial tag.
   ----------------------------------------------------------------------------- */
.infra-feature__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  line-height: 1;
}


/* -----------------------------------------------------------------------------
   Title
   Institutional weight: medium (500), not bold. Restrained.
   Sized to read clearly over the image without dominating it.
   ----------------------------------------------------------------------------- */
.infra-feature__title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  color: rgba(234, 234, 234, 0.93);
  line-height: 1.15;
  margin-bottom: var(--space-3);
  margin: 0 0 var(--space-3) 0;
}


/* -----------------------------------------------------------------------------
   Supporting line
   One sentence only. Body font, muted — provides context without competing.
   ----------------------------------------------------------------------------- */
.infra-feature__line {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  color: rgba(154, 154, 154, 0.72);
  line-height: 1.5;
  margin: 0;
}


/* =============================================================================
   CLOSING STATEMENT SECTION
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Text block
   Narrower than the container — concentrates the statement,
   prevents the line from stretching too wide at 1400px.
   ----------------------------------------------------------------------------- */
.closing-block {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
}


/* -----------------------------------------------------------------------------
   Main statement
   Weight 400 (regular), not semibold — restraint signals certainty,
   not effort. Slightly tight letter-spacing gives it architectural compression.
   ----------------------------------------------------------------------------- */
.closing-statement {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);   /* 2.75rem = 44px */
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-8) 0;
}


/* -----------------------------------------------------------------------------
   Signature
   Colophon-style: company name + founding year. Muted, uppercase, tracked.
   Acts as a full stop — institutional not promotional.
   ----------------------------------------------------------------------------- */
.closing-signature {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
}