/* ============================================
   PARALLAX LAYER — Phase 2 addition
   Minuano-style multi-layer scroll parallax.
   Additive to base.css. Every layer is a 
   data-attribute-controlled container so 
   art/video can swap in without touching JS.
   ============================================ */

/* ---- Scene scaffold ----
   Each .scene is a viewport-tall block that
   stacks background layers behind foreground
   content. The JS reads data-parallax-speed
   on .parallax-layer children. */
.scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
.scene--tall { min-height: 130vh; }
.scene--short { min-height: 70vh; }

/* Background layers stack behind the foreground.
   z-index sets stacking: bg-far < bg-mid < bg-near < foreground. */
.parallax-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  pointer-events: none;
  /* layers can be bigger than the viewport so they don't show gaps as they translate */
}

.parallax-layer--bg {
  /* far layer — moves slowest */
  z-index: 0;
  height: 130%;
  top: -15%;
}
.parallax-layer--mid {
  z-index: 1;
  height: 120%;
  top: -10%;
}
.parallax-layer--near {
  z-index: 2;
  height: 110%;
  top: -5%;
}

.parallax-layer picture { display: block; width: 100%; height: 100%; }
.parallax-layer img,
.parallax-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scene scrim — darkens bottom so foreground text reads.
   Use lower opacity on category scenes, heavier on hero. */
.scene__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.65) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 50%, transparent 75%);
}
.scene__scrim--light {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 25%, transparent 55%, rgba(0,0,0,0.5) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 40%, transparent 70%);
}

/* Foreground content layer — scrolls at normal page speed */
.scene__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: 100vh;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.scene__content > * {
  /* Children must span full width — flex column otherwise shrinks them */
  width: 100%;
}
.scene__content--center {
  justify-content: center;
}
.scene__content--top {
  justify-content: flex-start;
  padding-top: var(--space-6);
}

/* Foreground content moves slightly slower than viewport for an
   extra depth cue — its own data-parallax-speed controls this. */
.parallax-fg {
  will-change: transform;
}

/* Painted top strip for sections that need to feel torn into */
.painted-strip {
  position: relative;
  width: 100%;
  height: clamp(60px, 8vw, 120px);
  overflow: hidden;
  margin-top: -1px;
  z-index: 5;
  background-image: url('../img/painting-texture.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.85;
  mask-image: linear-gradient(180deg, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 100%);
}
.painted-strip--bottom {
  mask-image: linear-gradient(180deg, transparent 0%, black 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 70%);
}

/* ---- Hero scene type ----
   Override of foreground type sizes so the parallax hero feels 
   more theatrical than the original short hero. */
.scene .hero__eyebrow { margin-bottom: var(--space-3); }
.scene .hero__title {
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  margin-bottom: var(--space-3);
}
.scene .hero__sub { font-size: 1.15rem; }

/* ---- Scroll-cue ---- */
.scroll-cue {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  color: var(--ink-muted);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--ink-muted), transparent);
  animation: drip 2s ease-in-out infinite;
}
@keyframes drip {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ---- Category-tease scene ----
   Showcases each category with its palette as a parallax stop. */
.cat-tease {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.cat-tease__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.cat-tease__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.cat-tease__title a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.cat-tease__title a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.cat-tease__desc {
  max-width: 48ch;
  color: var(--ink-muted);
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}

/* Scenes get their palette via .scene.page-men, etc. — reuses the same 
   page-* tokens already defined in base.css. */

/* ---- Parallax-respecting reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .parallax-layer,
  .parallax-fg {
    transform: none !important;
    transition: none !important;
  }
  .scroll-cue::after { animation: none; }
}

/* ---- Mobile dampening ----
   On small screens we keep the visual stack but dial parallax depth way back. 
   The JS reads this via a CSS-variable flag (see js/parallax.js). */
:root {
  --parallax-strength: 1;
}
@media (max-width: 720px) {
  :root { --parallax-strength: 0.4; }
  .scene { min-height: 90vh; }
  .scene--tall { min-height: 110vh; }
}