/* ============================================================
   MCNEISH SOLUTION LLC — HOME PAGE SPECIFIC STYLES
   ============================================================ */

/* ─── CRITICAL TRANSFORMATION SLIDER STYLES ─────────────────
   These MUST be in static CSS, not injected by JS, to prevent
   un-styled flash where the SVG dial renders at full viewport.
   ──────────────────────────────────────────────────────────── */
.transformation-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  user-select: none;
  cursor: none;
  background: var(--void);
}

.ts-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ts-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 2px;
  background: var(--copper);
  z-index: 10;
  cursor: none;
  pointer-events: none;
}

.ts-dial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: var(--charcoal);
  border: 2px solid var(--copper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(184, 115, 51, 0.4), var(--shadow-deep);
  pointer-events: none;
  overflow: hidden;
}

.ts-dial svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ts-label-before,
.ts-label-after {
  position: absolute;
  top: var(--space-24, 1.5rem);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(10, 11, 13, 0.7);
  border: var(--border-copper);
  pointer-events: none;
  z-index: 11;
}

.ts-label-before {
  left: var(--space-24, 1.5rem);
  color: var(--ash-light);
}

.ts-label-after {
  right: var(--space-24, 1.5rem);
  color: var(--copper);
}

.ts-date {
  position: absolute;
  bottom: var(--space-20, 1.25rem);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 11;
}
.ts-date-before { left: var(--space-24, 1.5rem); }
.ts-date-after  { right: var(--space-24, 1.5rem); }

/* ─── HERO SECTION ───────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--void);
}

/* Background WebGL canvas / fallback scene */
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

.hero__layer {
  position: absolute;
  inset: 0;
}

.hero__layer--base {
  opacity: 0;
  transition: opacity 1s;
}

/* Show fallback bg image if canvas not supported */
.no-webgl .hero__layer--base { opacity: 0.45; }

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(70%) contrast(1.05);
  transform: scale(1.04);
  transform-origin: center;
}

/* Grain layer */
.hero__layer--grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px;
  mix-blend-mode: overlay;
  animation: grain-flicker 0.12s steps(1) infinite;
  opacity: 0.5;
}

/* Vignette */
.hero__layer--vignette {
  background: radial-gradient(ellipse at 65% 50%,
    transparent 30%,
    rgba(10, 11, 13, 0.6) 65%,
    rgba(10, 11, 13, 0.95) 100%);
}

/* Work lamp */
.hero__lamp {
  position: absolute;
  top: 20%;
  left: 30%;
  width: 4px;
  height: 4px;
  animation: lamp-oscillate 8s ease-in-out infinite;
  pointer-events: none;
}

.hero__lamp-cone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-top: 220px solid rgba(184, 115, 51, 0.08);
  filter: blur(30px);
}

/* Side-by-Side Hero Layout Wrapper */
.hero-grid-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-40);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: center;
  width: 100%;
}

/* Left Column: Perfect 1:1 Square Before/After Slider */
.hero-slider-col {
  position: relative;
  width: 100%;
  max-width: 460px;
  justify-self: center;
}

.lenticular-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Forces a perfect, even-sided square */
  border-radius: 4px;
  border: var(--border-steel);
  box-shadow: var(--shadow-deep), var(--shadow-copper);
  overflow: hidden;
  z-index: 10;
  cursor: ew-resize;
}

.lenticular-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lenticular-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Grayscale/desaturated treatment for the 'before' state */
.before-layer img {
  filter: grayscale(80%) contrast(1.1) brightness(0.7);
}

/* Bright copper grade for the 'after' state */
.after-layer {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  z-index: 2;
  border-right: 1px solid var(--copper);
}

.after-layer img {
  filter: contrast(1.05) brightness(0.9);
}

.lenticular-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 20%, rgba(10, 11, 13, 0.75) 85%);
  z-index: 3;
  pointer-events: none;
}

/* Right Column: Hero brand text block */
.hero__content {
  max-width: 600px;
  justify-self: flex-start;
}

/* Eyebrow */
.hero__eyebrow {
  margin-bottom: var(--space-24);
  overflow: hidden;
}

.hero__eyebrow .t-label {
  display: block;
  transform: translateY(100%);
  opacity: 0;
}

/* Headline lines */
.hero__headline {
  margin-bottom: var(--space-40);
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line-inner {
  display: block;
  transform: translateY(110%);
}

.hero__line-inner--copper {
  color: var(--copper-lit);
}

/* CTA group */
.hero__cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  margin-bottom: var(--space-40);
  opacity: 0;
  transform: translateY(20px);
}

/* Emergency line */
.hero__emergency-line {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  opacity: 0;
}

.hero__phone {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--ash-light);
  text-transform: uppercase;
  transition: color var(--duration-mid) var(--ease-out-expo);
}

.hero__phone:hover { color: var(--copper); }

/* Hero bottom gradient into next section */
.hero__bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--void));
  z-index: 2;
  pointer-events: none;
}


/* ─── INTERACTIVE MATERIAL SWATCH LIBRARY (Visualizer #5) ── */
.material-library-section {
  background: var(--void);
  padding: var(--space-128) 0;
}

.material-library-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-64);
  background: var(--steel);
  border: var(--border-steel);
  box-shadow: var(--shadow-deep);
  padding: var(--space-48);
  border-radius: 4px;
}

.swatches-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

.swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
  padding: var(--space-16);
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background 0.3s, border-color 0.3s;
}

.swatch-item:hover,
.swatch-item.active {
  background: rgba(184, 115, 51, 0.05);
  border-color: rgba(184, 115, 51, 0.3);
}

.swatch-thumbnail {
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Procedural gradients for Swatch Thumbnails */
.swatch-thumbnail--wood {
  background: linear-gradient(35deg, #3c2a1c 0%, #684a32 50%, #3c2a1c 100%);
}
.swatch-thumbnail--stone {
  background: linear-gradient(135deg, #1f232b 0%, #404654 60%, #1a1e24 100%);
}
.swatch-thumbnail--tile {
  background: 
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 10px 10px,
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 10px 10px,
    #252C35;
}
.swatch-thumbnail--plaster {
  background: radial-gradient(circle, #F0EAE0 0%, #D4C9BA 100%);
}
.swatch-thumbnail--metal {
  background: linear-gradient(45deg, #B87333 0%, #E8943A 50%, #804a1b 100%);
}
.swatch-thumbnail--reclaimed {
  background: linear-gradient(75deg, #2e1d11 0%, #593b25 100%);
}

.swatch-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--ash-light);
  text-transform: uppercase;
}

.swatch-detail-panel {
  background: var(--void);
  border: var(--border-steel);
  border-radius: 4px;
  overflow: hidden;
}

.panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.swatch-large-preview {
  width: 100%;
  height: 180px;
  border-bottom: var(--border-steel);
  background-size: cover;
  background-position: center;
  filter: brightness(0.85) contrast(1.05);
  transition: background-image 0.5s ease-in-out;
}

.swatch-large-preview.swatch-thumbnail--wood {
  background-image: url('../../images/projects/hardwood-living-room.jpg');
}
.swatch-large-preview.swatch-thumbnail--stone {
  background-image: url('../../images/projects/commercial-renovation.jpg');
}
.swatch-large-preview.swatch-thumbnail--tile {
  background-image: url('../../images/projects/basement-renovation.jpg');
}
.swatch-large-preview.swatch-thumbnail--plaster {
  background-image: url('../../images/projects/painting-navy-walls.jpg');
}
.swatch-large-preview.swatch-thumbnail--metal {
  background-image: url('../../images/projects/basement-demolition.jpg');
}
.swatch-large-preview.swatch-thumbnail--reclaimed {
  background-image: url('../../images/projects/wall-demolition.jpg');
}

.swatch-info-card {
  padding: var(--space-32);
}

.spec-list {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: var(--space-16);
}

.spec-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ash);
  margin-bottom: var(--space-8);
}

.spec-line span:first-child {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--copper);
}


/* ─── PHILOSOPHY DEEP PARALLAX QUOTE ────────────────────── */
.philosophy-quote-section {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--lapis);
  z-index: 10;
}

.parallax-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.parallax-bg-layer {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(184, 115, 51, 0.05) 0%, transparent 60%);
  transform: translateY(0);
}

.quote-wrapper {
  max-width: 800px;
  text-align: center;
}

.display-quote {
  color: var(--ivory);
  line-height: 1.3;
}


/* ─── TRANSFORMATION SECTION ─────────────────────────────── */
.transformation-section {
  background: var(--void);
  padding: var(--space-128) 0 0 0;
}

.transformation-section__headline {
  max-width: 600px;
  margin-bottom: var(--space-48);
  color: var(--ivory);
}

.transformation-section__slider {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.transformation-section__slider .transformation-slider {
  aspect-ratio: unset;
  height: 100%;
}

.transformation-section__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24) 0 var(--space-48);
  border-bottom: var(--border-steel);
}


/* ─── EMERGENCY SECTION ──────────────────────────────────── */
.emergency-section {
  background: var(--void);
  border-top: var(--border-steel);
  border-bottom: var(--border-steel);
  position: relative;
  overflow: hidden;
  padding: var(--space-128) 0;
}

.emergency-section.emergency-pulse {
  animation: emergency-pulse 4s ease-in-out infinite;
}

.emergency-section__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 87, 51, 0.04) 0%,
    transparent 60%);
  animation: emergency-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

.emergency-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.emergency-section__indicators {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-32);
}


/* ─── FEATURED PROJECTS ──────────────────────────────────── */
.projects-feature {
  background: var(--void);
  padding: var(--space-128) 0;
  overflow: hidden; /* Prevent rotated panels from overflowing */
}

.projects-feature__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-48);
}

.projects-feature__panels {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-24);
  align-items: start;
}

/* Angled panels */
.project-panel {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--steel);
  border: var(--border-steel);
  cursor: pointer;
  /* Containment prevents rotated panels from overflowing viewport */
  contain: paint;
}

.project-panel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%);
  transition: filter var(--duration-mid) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.project-panel:hover .project-panel__image {
  filter: grayscale(0%);
  transform: scale(1.03);
}

.project-panel__corner {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  width: 24px;
  height: 24px;
  opacity: 0.6;
  z-index: 2;
  transition: opacity var(--duration-fast);
}

.project-panel:hover .project-panel__corner { opacity: 1; }

.project-panel__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-32);
  background: linear-gradient(to top, rgba(10, 11, 13, 0.9) 0%, rgba(10, 11, 13, 0.3) 60%, transparent 100%);
  z-index: 2;
  transform: translateY(10px);
  transition: transform var(--duration-mid) var(--ease-out-expo);
}

.project-panel:hover .project-panel__info {
  transform: translateY(0);
}

.featured-panel {
  height: 520px;
  transform: rotate(var(--panel-angle, 0)) scale(0.97);
  transition: transform var(--duration-slow) var(--ease-out-expo),
              box-shadow var(--duration-slow) var(--ease-out-expo),
              z-index 0s;
  z-index: 1;
}

.featured-panel:hover {
  transform: rotate(0deg) scale(1);
  z-index: 10;
  box-shadow: var(--shadow-deep), var(--shadow-copper);
}

.featured-panel--1 { height: 580px; }
.featured-panel--2 { height: 480px; align-self: end; }
.featured-panel--3 { height: 500px; }


/* ─── READY TO BEGIN CTA SECTION ─────────────────────────── */
.cta-transformation {
  background: var(--void);
  border-top: var(--border-steel);
  padding: var(--space-128) 0;
}


/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-48);
    text-align: center;
    justify-items: center;
  }

  .hero-slider-col {
    max-width: 380px;
  }

  .hero__content {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__cta-group {
    justify-content: center;
  }

  .hero__emergency-line {
    justify-content: center;
  }

  .material-library-container {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .projects-feature__panels {
    grid-template-columns: 1fr 1fr;
  }

  .featured-panel--3 { display: none; }
}

@media (max-width: 768px) {
  .hero-slider-col {
    max-width: 300px;
  }

  .swatches-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-feature__panels {
    grid-template-columns: 1fr;
  }

  .featured-panel {
    height: 360px !important;
    transform: none !important;
  }

  .featured-panel--2 { display: none; }

  .transformation-section__slider {
    aspect-ratio: 4 / 3;
  }

  .projects-feature__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .emergency-section {
    padding: var(--space-80) 0;
  }
}


/* ─── LIGHT MODE OVERRIDES ───────────────────────────────── */
html.light-mode .hero {
  background: var(--void);
}

html.light-mode .hero__scene {
  opacity: 0.5;
}

html.light-mode .hero__layer--vignette {
  background: radial-gradient(ellipse at 65% 50%,
    transparent 30%,
    rgba(245, 239, 235, 0.5) 65%,
    rgba(245, 239, 235, 0.9) 100%);
}

html.light-mode .hero__lamp-cone {
  border-top-color: rgba(158, 92, 32, 0.06);
}

html.light-mode .hero__bottom-fade {
  background: linear-gradient(to bottom, transparent, var(--void));
}

html.light-mode .lenticular-container {
  box-shadow: 0 8px 32px rgba(44, 37, 29, 0.12), 0 0 40px rgba(158, 92, 32, 0.08);
}

html.light-mode .material-library-section {
  background: var(--void);
}

html.light-mode .material-library-container {
  background: var(--steel);
  box-shadow: var(--shadow-deep);
}

html.light-mode .philosophy-quote-section {
  background: var(--lapis);
}

html.light-mode .transformation-section {
  background: var(--void);
}

html.light-mode .transformation-slider {
  background: var(--charcoal);
}

html.light-mode .emergency-section {
  background: var(--void);
}

html.light-mode .emergency-section__bg {
  background: radial-gradient(ellipse at 50% 100%,
    rgba(200, 50, 21, 0.03) 0%,
    transparent 60%);
}

html.light-mode .projects-feature {
  background: var(--void);
}

html.light-mode .project-panel__info {
  background: linear-gradient(to top, rgba(245, 239, 235, 0.95) 0%, rgba(245, 239, 235, 0.4) 60%, transparent 100%);
}

html.light-mode .cta-transformation {
  background: var(--steel);
}

html.light-mode .ts-label-before,
html.light-mode .ts-label-after {
  background: rgba(245, 239, 235, 0.85);
}

html.light-mode .ts-dial {
  background: var(--steel);
}

html.light-mode .swatch-detail-panel {
  background: var(--steel);
}