/* ═══ SMEG Scroll Sequence Section ═══ */

.smeg-sequence {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #e5e5e5;
  /* No overflow:hidden here — the meta-bar needs to escape below the
     section boundary to cover GPU canvas bleed. Canvas is clipped
     inside .smeg-media-wrap instead. */
}

/* Clip canvas/image inside their own wrapper. overflow:hidden + contain:paint
   prevents GPU-promoted layers from bleeding past this boundary. */
.smeg-media-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: paint;
}


/* Static hero backdrop. Matches the work-page card on first paint;
   the canvas fades over it as the user scrolls (smeg-sequence.js). */
.smeg-seq-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  z-index: 1;
  pointer-events: none;
}

.smeg-seq-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  opacity: 0;
}


/* Scroll cue — bottom centre */
.smeg-seq-scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #1a1a1a;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 10;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.smeg-seq-scroll-line {
  width: 1px;
  height: 36px;
  background: #1a1a1a;
  transform-origin: top;
  animation: smegScrollPulse 1.6s ease-in-out infinite;
}

@keyframes smegScrollPulse {
  0%, 100% { transform: scaleY(1);   opacity: 0.35; }
  50%       { transform: scaleY(0.5); opacity: 0.7;  }
}

/* Project identity is present from first paint; the image sequence remains decorative. */
.smeg-seq-text {
  position: absolute;
  bottom: clamp(5rem, 13vh, 9rem);
  left: var(--gutter);
  z-index: 10;
  pointer-events: none;
  max-width: min(460px, 44vw);
  color: #1b1d20;
}
.smeg-seq-kicker {
  display: block;
  font: 600 13px/1.3 var(--sans);
  letter-spacing: .095em;
  text-transform: uppercase;
  color: #1b1d20;
  margin-bottom: .8rem;
}

.smeg-seq-text .smeg-seq-title {
  margin: 0;
}
.smeg-seq-title img {
  width: clamp(190px, 18vw, 260px);
  height: auto;
}
.smeg-seq-descriptor {
  margin: .9rem 0 .7rem;
  font: 300 clamp(18px, 1.65vw, 24px)/1.2 var(--sans);
  letter-spacing: -.02em;
}

@media (max-width: 1100px) {
  .smeg-seq-text {
    top: calc(var(--nav-h) + 4.5rem);
    bottom: auto;
    max-width: 520px;
  }
}

@media (max-width: 600px) {
  .smeg-seq-text {
    top: calc(var(--nav-h) + 2.8rem);
    right: var(--gutter);
    max-width: none;
  }
  .smeg-seq-kicker { margin-bottom: .5rem; }
  .smeg-seq-descriptor { margin: .65rem 0 0; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .smeg-seq-scroll-line { animation: none; }
  .smeg-seq-scroll-cue { display: none; }
}