/* ============================================================
   Component: The Other Half / Monday Happens (monday.css)
   BEM Architecture: block_element--modifier
   Matched to Figma Node 0:6448
   ============================================================ */

/* Outer scroll track for driving the sticky sequence */
.section_monday {
  position: relative;
  width: 100%;
  min-height: 380vh;
  z-index: 2;
  background-color: #FFFFFF;
}

/* Sticky full-viewport frame with 104px top & bottom padding */
.monday_sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 104px;
  padding-bottom: 104px;
  padding-inline: 16px;
  overflow: hidden;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .monday_sticky {
    padding-inline: 48px;
  }
}

@media (min-width: 1280px) {
  .monday_sticky {
    padding-inline: 80px;
  }
}

/* Background Ambient Gradient Layer (Figma image 210074) */
.monday_bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Ambient subtle warm accents matching Figma reference */
  background: radial-gradient(circle at 92% 75%, rgba(254, 215, 170, 0.35) 0%, rgba(254, 215, 170, 0) 55%),
              radial-gradient(circle at 10% 85%, rgba(251, 207, 232, 0.3) 0%, rgba(251, 207, 232, 0) 50%);
}

.monday_bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;
  opacity: 0.95;
}

/* Subtle Bottom Overlay Fade (#0000000F) */
.monday_bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0588) 100%);
  pointer-events: none;
  z-index: 5;
}

/* Main Content Container - Centered between 104px top & bottom padding */
.monday_container {
  position: relative;
  z-index: 2;
  max-width: 960px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ------------------------------------------------------------
   Section Header (Eyebrow & Headline Only)
   Remains centered, stable, and matches visual scale
   ------------------------------------------------------------ */
.monday_header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}

@media (min-width: 768px) {
  .monday_header {
    margin-bottom: 36px;
  }
}

.monday_eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--font-size-eyebrow, 14px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.1);
  letter-spacing: var(--letter-spacing-eyebrow, 0.08em);
  text-transform: uppercase;
  color: #7C3AED;
  margin-bottom: 14px;
}

.monday_title {
  font-family: var(--font-heading);
  font-size: clamp(2.35rem, 4.4vw, 58px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.14;
  letter-spacing: -0.028em;
  background: linear-gradient(90deg, #7C3AED 0%, #B83280 40%, #ED64A6 65%, #F97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  max-width: 946px;
  text-align: center;
}

@media (max-width: 767px) {
  .monday_title {
    font-size: 40px;
    font-weight: 500;
  }
}

/* ------------------------------------------------------------
   Continuous Paragraph Feed (Coming from below)
   Active item sharp at top; upcoming item softly blurred below
   Zero dark/grey box overlays - pure typography blur & opacity
   ------------------------------------------------------------ */
.monday_feed {
  position: relative;
  width: 100%;
  max-width: 946px;
  height: 280px;
  margin: 0 auto;
  overflow: hidden;
}

@media (min-width: 768px) {
  .monday_feed {
    height: 300px;
  }
}

/* Moving conveyor track */
.monday_feed-track {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  will-change: transform;
}

@media (min-width: 768px) {
  .monday_feed-track {
    gap: 32px;
  }
}

/* Individual paragraph items - all font-weight: 500 */
.monday_feed-item {
  width: 100%;
  max-width: 946px;
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 2.15vw, 29px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.016em;
  color: var(--color-text-primary, #020101);
  text-align: center;
  margin: 0 auto;
  will-change: opacity, filter;
  transition: opacity 0.12s linear, filter 0.12s linear;
}

/* Default initial styling matching Figma screenshot */
.monday_feed-item:first-child {
  opacity: 1;
  filter: blur(0px);
}

.monday_feed-item:nth-child(2) {
  opacity: 0.32;
  filter: blur(4px);
}

.monday_feed-item:nth-child(n+3) {
  opacity: 0;
  filter: blur(6px);
}

.monday_br {
  display: none;
}

@media (min-width: 768px) {
  .monday_br {
    display: inline;
  }
}

/* ------------------------------------------------------------
   Reduced Motion Accessibility
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .section_monday {
    min-height: auto;
    padding-block: 104px;
  }

  .monday_sticky {
    position: relative;
    height: auto;
    min-height: auto;
    padding-block: 0;
  }

  .monday_feed {
    height: auto;
    overflow: visible;
  }

  .monday_feed-track {
    transform: none;
    gap: 36px;
  }

  .section_monday .monday_feed-item {
    opacity: 1;
    filter: none;
    transform: none;
  }
}