/* ==========================================================================
   HOME PAGE — Manik Chand Company
   Cinematic, scroll-driven sections
   ========================================================================== */

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

.hero-wrap {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 var(--pad);
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* Atmospheric backdrop gradient */
.hero-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 40%, rgba(200, 204, 208, 0.10), transparent 55%),
    radial-gradient(ellipse at 30% 80%, rgba(140, 145, 150, 0.06), transparent 50%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-up) 100%);
  z-index: 0;
}

/* Floor "ground" line */
.hero-scene::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--steel-soft) 30%,
    var(--platinum) 50%,
    var(--steel-soft) 70%,
    transparent 100%);
  opacity: 0.4;
  z-index: 0;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--ink);
  z-index: 1;
  filter: contrast(1.04) saturate(0.85) brightness(0.9);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,0.6) 38%, #000 65%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,0.6) 38%, #000 65%, #000 100%);
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

.hero-scene::before {
  background:
    radial-gradient(ellipse 78% 70% at 18% 55%, rgba(10,10,11,0.92), rgba(10,10,11,0.45) 55%, transparent 82%),
    linear-gradient(90deg, var(--ink) 0%, rgba(10,10,11,0.55) 35%, transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-up) 100%) !important;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 5;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding-top: 6rem;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(2rem, 5vh, 4rem);
}

.hero-meta-left,
.hero-meta-right {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
}

.hero-meta-right { text-align: right; }
.hero-meta strong { color: var(--platinum); font-weight: 500; }

.hero-title {
  margin-bottom: clamp(2rem, 4vh, 3rem);
  position: relative;
  text-shadow: 0 2px 30px rgba(10, 10, 11, 0.85), 0 0 60px rgba(10, 10, 11, 0.6);
}

/* Mobile: dim video heavily so the headline owns the screen */
@media (max-width: 800px) {
  .hero-video {
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 25%, #000 55%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 25%, #000 55%, #000 100%);
    object-position: center;
  }
  .hero-scene::before {
    background:
      radial-gradient(ellipse 130% 80% at 50% 45%, rgba(10,10,11,0.88), rgba(10,10,11,0.55) 60%, transparent 90%),
      linear-gradient(180deg, var(--ink) 0%, var(--ink-up) 100%) !important;
  }
  .hero-content { padding-top: 5rem; }
  .hero-title { text-shadow: 0 2px 20px rgba(10, 10, 11, 0.95); }
}

.hero-title .mask {
  margin-bottom: -0.05em;
}

.hero-sub {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}

@media (max-width: 800px) {
  .hero-sub { grid-template-columns: 1fr; gap: 2rem; }
}

.hero-sub p.lead {
  max-width: 38ch;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 5;
}

.scroll-cue .line {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, var(--platinum), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-cue .line::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--silver);
  animation: scroll-dash 2.2s ease-in-out infinite;
}

@keyframes scroll-dash {
  0% { top: -50%; }
  100% { top: 100%; }
}

/* Hero corner brackets — architectural detail */
.hero-corner {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1px solid var(--line-bright);
  z-index: 3;
}

.hero-corner.tl,
.hero-corner.tr { display: none; }
.hero-corner.bl { bottom: 1.5rem; left: 1.5rem; border-right: none; border-top: none; }
.hero-corner.br { bottom: 1.5rem; right: 1.5rem; border-left: none; border-top: none; }

@media (max-width: 768px) {
  .hero-corner { width: 32px; height: 32px; }
  .hero-meta { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .hero-meta-right { text-align: left; }
}

/* ============ Philosophy band ============ */

.philosophy {
  padding: clamp(6rem, 10vw, 9rem) var(--pad);
  background: var(--ink-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.philo-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--max);
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 800px) { .philo-grid { grid-template-columns: 1fr; } }

.philo-statement {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.philo-statement em {
  font-style: italic;
  color: var(--steel);
}

.philo-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.philo-meta-item .num {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  background: var(--steel-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

.philo-meta-item .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  line-height: 1.5;
}

/* ============ Materials sticky scroll ============ */

.materials-section {
  background: var(--ink);
  position: relative;
}

.materials-intro {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 800px) {
  .materials-intro { grid-template-columns: 1fr; gap: 2rem; }
}

/* Sticky materials viewer */
.materials-sticky {
  position: relative;
  padding: 0 var(--pad);
}

.materials-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--max);
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 900px) {
  .materials-track { grid-template-columns: 1fr; }
}

.materials-visual {
  position: sticky;
  top: 100px;
  aspect-ratio: 4 / 5;
  background: var(--ink-up);
  border: 1px solid var(--line);
  overflow: hidden;
}

@media (max-width: 900px) {
  .materials-visual {
    position: relative;
    top: 0;
    aspect-ratio: 4 / 3;
    margin-bottom: 2rem;
  }
}

.material-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}

.material-visual.active {
  opacity: 1;
  transform: scale(1);
}

.material-visual svg {
  width: 90%;
  height: 90%;
  max-width: 500px;
}

.material-visual .visual-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.material-visual .visual-label,
.reel-visual .visual-label {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 5;
}

.material-visual .visual-num,
.reel-visual .visual-num {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-bright);
  line-height: 1;
  z-index: 5;
}

.materials-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.material-item {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--line);
  cursor: none;
  transition: opacity 0.5s;
  opacity: 0.45;
}

@media (max-width: 768px) { .material-item { cursor: pointer; } }

.material-item.active { opacity: 1; }

.material-item:first-child { padding-top: 0; }

.material-item .mat-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.material-item .mat-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--steel);
}

.material-item h3 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  transition: color 0.4s, transform 0.5s var(--ease-out);
}

.material-item.active h3 {
  color: var(--silver);
  transform: translateX(8px);
}

.material-item p { max-width: 48ch; font-size: 14.5px; }

.material-item .mat-spec {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.material-item .mat-spec span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--steel);
}

.material-item .mat-spec span::before {
  content: '— ';
  color: var(--steel-soft);
}

/* ============ Process / scroll storytelling ============ */

.process {
  background: var(--silver);
  color: var(--ink);
  overflow: hidden;
  padding: clamp(6rem, 10vw, 9rem) var(--pad);
}

.process-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(10, 10, 11, 0.12);
  border: 1px solid rgba(10, 10, 11, 0.12);
  margin-top: 4rem;
}

@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

.process-step {
  background: var(--silver);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  min-height: 280px;
  transition: background 0.5s;
}

.process-step:hover { background: #F2F4F6; }

.process-step .step-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--steel-soft);
}

.process-step h3 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  margin-top: auto;
}

.process-step .icon-box {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(10, 10, 11, 0.18);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  transition: background 0.4s, border-color 0.4s;
}

.process-step:hover .icon-box {
  background: var(--ink);
  border-color: var(--ink);
}

.process-step .icon-box svg { width: 24px; height: 24px; transition: stroke 0.4s; }
.process-step:hover .icon-box svg { stroke: var(--silver); }

.process-step p { font-size: 13.5px; line-height: 1.6; }

/* ============ Projects / case study scroll ============ */

.projects {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.projects-intro {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 800px) { .projects-intro { grid-template-columns: 1fr; } }

.projects-rail {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--pad) 2rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.projects-rail::-webkit-scrollbar { display: none; }

.project-card {
  flex: 0 0 clamp(280px, 32vw, 480px);
  scroll-snap-align: start;
  position: relative;
}

.project-card .card-img {
  aspect-ratio: 4 / 5;
  background: var(--ink-up);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.project-card .card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.5) 100%);
  z-index: 2;
}

.project-card .card-svg {
  width: 100%; height: 100%;
  transition: transform 1.2s var(--ease-out);
}

.project-card:hover .card-svg { transform: scale(1.05); }

.project-card .card-meta {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  z-index: 3;
}

.project-card .card-stats {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 234, 235, 0.8);
}

.project-card h3 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
}

.project-card .card-location {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--steel);
}

.rail-controls {
  max-width: var(--max);
  margin: 1rem auto 0;
  padding: 0 var(--pad);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.rail-btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-bright);
  display: grid;
  place-items: center;
  transition: all 0.4s var(--ease-out);
}

.rail-btn:hover { background: var(--silver); color: var(--ink); border-color: var(--silver); }
.rail-btn svg { width: 16px; height: 16px; }

/* ============ Testimonial slab ============ */

.testimonial {
  background: var(--ink-soft);
  padding: clamp(6rem, 10vw, 9rem) var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.testimonial-quote {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.testimonial-quote em { font-style: italic; color: var(--steel); }

.testimonial-attr {
  text-align: center;
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.testimonial-attr strong { color: var(--platinum); font-weight: 500; }

/* ============ CTA slab ============ */

.cta-slab {
  background: var(--ink);
  padding: clamp(6rem, 12vw, 10rem) var(--pad);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-slab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(200, 204, 208, 0.08), transparent 60%);
  z-index: 0;
}

.cta-slab .container { position: relative; z-index: 2; }

.cta-slab h2 {
  margin-bottom: 1.5rem;
}

.cta-slab .cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ==========================================================================
   REEL — scroll-scrubbed image sequence + catalogue text
   ========================================================================== */
.reel-section.materials-section {
  position: relative;
  height: 720vh;
  background: var(--ink);
  color: var(--silver);
  padding: 0;
}

/* Intro band sits in normal flow at the top, then sticky panel takes over */
.reel-section .materials-intro {
  position: relative;
  z-index: 4;
  padding: clamp(5rem, 9vw, 8rem) var(--pad) clamp(2rem, 4vw, 3rem);
  max-width: var(--max);
  margin: 0 auto clamp(1rem, 3vw, 2rem);
}

.reel-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: 6rem var(--pad) 3rem;
  max-width: var(--max);
  margin: 0 auto;
}

.reel-visual {
  position: relative;
  height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#reel-canvas {
  position: relative;
  z-index: 1;
  aspect-ratio: 720 / 960;
  max-height: 88vh;
  max-width: 100%;
  height: auto;
  width: auto;
  background: #000;
  border: 1px solid rgba(232,234,235,0.06);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.06) saturate(0.85);
  will-change: contents;
  transform: translateZ(0);
  object-fit: contain;
}

.reel-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, transparent 65%, rgba(10,10,11,0.55) 100%);
}

.reel-visual .visual-label,
.reel-visual .visual-num {
  z-index: 3;
}

.reel-list {
  position: relative;
  z-index: 3;
  height: 70vh;
  /* Page is the only scroll context */
  overflow: visible;
  overscroll-behavior: none;
  touch-action: pan-y;
}

.reel-list .material-item {
  position: absolute;
  inset: 0;
  padding: 0;
  border-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reel-list .material-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.reel-list .material-item h3 { transform: none; }
.reel-list .material-item.active h3 { transform: none; color: var(--silver); }

/* Progress bar pinned to bottom of sticky viewport */
.reel-section .reel-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(232,234,235,0.12);
  overflow: hidden;
  z-index: 5;
}
.reel-section .reel-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--platinum);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.15s linear;
}

@media (max-width: 900px) {
  .reel-section.materials-section { height: 560vh; }
  .reel-section .materials-intro {
    position: relative;
    padding: 4rem 1.25rem 0.5rem;
  }
  .reel-sticky {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 1rem 1.25rem 1.5rem;
    gap: 0.75rem;
    align-items: stretch;
    height: 100vh;
  }
  .reel-visual { height: 100%; min-height: 0; }
  #reel-canvas {
    aspect-ratio: 720 / 960;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
  }

  /* Mobile: stop absolute-stacking — let the active item own its natural height
     so there's no leftover space below it. */
  .reel-list {
    position: relative;
    height: auto;
    z-index: 3;
  }
  .reel-list .material-item {
    position: relative;
    inset: auto;
    display: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    justify-content: flex-start;
    padding-top: 0.25rem;
  }
  .reel-list .material-item.active { display: flex; }
  .reel-list .material-item .mat-head { margin-bottom: 0.6rem; }
  .reel-list .material-item h3 {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    line-height: 1.05;
    margin: 0 0 0.5rem;
  }
  .reel-list .material-item p {
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0;
    max-width: 100%;
  }
  .reel-list .material-item .mat-spec {
    margin-top: 0.75rem;
    gap: 0.85rem;
  }
  .reel-list .material-item .mat-spec span {
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }

  .reel-visual .visual-label {
    top: 0.75rem;
    left: 0.75rem;
    font-size: 9px;
  }
  .reel-visual .visual-num {
    bottom: 0.5rem;
    right: 0.75rem;
    font-size: clamp(2.5rem, 9vw, 4rem);
  }
}

@media (max-width: 480px) {
  .reel-section.materials-section { height: 540vh; }
  .reel-sticky {
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
  }
  .reel-list .material-item h3 { font-size: clamp(1.4rem, 8vw, 1.9rem); }
  .reel-list .material-item p { font-size: 13px; }
}