/* ═══ 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;  }
}

/* Text overlay — fades in at end of sequence */
.smeg-seq-text {
  position: absolute;
  bottom: 3.5rem;
  left: 2.5rem;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.smeg-seq-text .label {
  display: block;
  color: #0095FF;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.smeg-seq-text .smeg-seq-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  color: #1a1a1a;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}