/* =====================================================
   Mido Hasan — About My Story — Floating Images
   /assets/css/23__my-story.css

   MIDO PHASE 10.7.3A ABOUT STORY SCROLL-SCRUBBED REVEAL ACTIVE

   Changes vs 10.7.3:
   - One-time IntersectionObserver reveal replaced with scroll-scrubbed progress.
   - CSS transforms driven by --story-progress (0→1) set by JS.
   - No CSS transitions on images (JS drives position each frame).
   - Only transform + opacity animated — compositor-safe.
   - No will-change. No filter. No box-shadow animation.
   - prefers-reduced-motion: images shown at final position immediately.
   - Mobile: simplified inline layout, subtle fade only.
   ===================================================== */

/* --------------------------------------------------------------------------
   Scene container
   -------------------------------------------------------------------------- */
.mht-story-scene {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-block: clamp(100px, 14vw, 160px);
  background: transparent;
}
.mht-story-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(142,99,163,.10), transparent 68%);
}
.mht-about-story__scene-inner {
  position: relative;
  min-height: clamp(540px, 64vw, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* --story-progress is set by JS: 0 = tucked, 1 = final position */
  --story-progress: 0;
}

/* --------------------------------------------------------------------------
   Floating image cards — base
   Initial state: opacity 0, at center offset, scaled down.
   Transform driven by --story-progress via inline style (JS sets per frame).
   No CSS transition — JS handles interpolation.
   -------------------------------------------------------------------------- */
.mht-story-img {
  position: absolute;
  width: clamp(140px, 15vw, 210px);
  height: clamp(140px, 15vw, 210px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(183,140,255,.22);
  background: rgba(27,22,32,.6);
  box-shadow: 0 10px 32px rgba(0,0,0,.32);
  /* Opacity and transform set by JS via inline style */
  opacity: 0;
  transform: rotate(var(--story-rotate, 0deg)) translate3d(var(--story-ix, 0px), var(--story-iy, 0px), 0) scale(0.88);
  /* No transition — scroll-scrubbed by JS */
}
.mht-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Image final positions — CLOSE cluster around central card.
   Central card: max-width min(560px, 58%), centered.
   Left card edge ≈ 21% of scene. Right ≈ 79%.
   Images at 6–12% from edges overlap/touch card.

   z-index: 1 = behind card  |  z-index: 3 = in front of card
   --story-ix/iy: initial offset (tucked toward center) — JS reads these
   via getComputedStyle or uses inline vars. JS uses data attrs instead.
   -------------------------------------------------------------------------- */

/* 1 — top-left, BEHIND */
.mht-story-img--1 {
  top: 4%;  left: 10%;
  z-index: 1;
  --story-rotate: -5deg;
  --story-ix:  80px;
  --story-iy:  60px;
}
/* 2 — top-center-left, BEHIND */
.mht-story-img--2 {
  top: -2%; left: 22%;
  z-index: 1;
  --story-rotate: 3deg;
  --story-ix:  30px;
  --story-iy:  50px;
}
/* 3 — top-right, IN FRONT */
.mht-story-img--3 {
  top: 3%;  right: 10%;
  z-index: 3;
  --story-rotate: 4deg;
  --story-ix: -80px;
  --story-iy:  60px;
}
/* 4 — mid-left, IN FRONT */
.mht-story-img--4 {
  top: 38%; left: 6%;
  z-index: 3;
  --story-rotate: -3deg;
  --story-ix:  90px;
  --story-iy:   0px;
}
/* 5 — mid-right, IN FRONT */
.mht-story-img--5 {
  top: 36%; right: 6%;
  z-index: 3;
  --story-rotate: 5deg;
  --story-ix: -90px;
  --story-iy:   0px;
}
/* 6 — bottom-left, BEHIND */
.mht-story-img--6 {
  bottom: 4%; left: 12%;
  z-index: 1;
  --story-rotate: 3deg;
  --story-ix:  70px;
  --story-iy: -60px;
}
/* 7 — bottom-center-right, BEHIND */
.mht-story-img--7 {
  bottom: -1%; right: 22%;
  z-index: 1;
  --story-rotate: -4deg;
  --story-ix: -30px;
  --story-iy: -50px;
}
/* 8 — bottom-right, IN FRONT */
.mht-story-img--8 {
  bottom: 4%; right: 8%;
  z-index: 3;
  --story-rotate: -2deg;
  --story-ix: -80px;
  --story-iy: -60px;
}

/* --------------------------------------------------------------------------
   Central content card — z-index 2 (sandwiched between behind + front imgs)
   -------------------------------------------------------------------------- */
.mht-about-story__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
}
.mht-about-story__card {
  max-width: min(560px, 58%);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 3.5vw, 44px);
  border-radius: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.mht-about-story__kicker {
  justify-content: center;
  margin-bottom: var(--sp-5, 20px);
}
.mht-about-story__heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
  padding-bottom: .08em;
  margin: 0 0 clamp(18px, 2.8vw, 28px);
  overflow: visible;
}
.mht-about-story__heading-white {
  color: var(--text-primary, #F6F2F7);
  display: block;
}
.mht-about-story__heading-gradient {
  background: linear-gradient(135deg, #8E63A3 0%, #B78CFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  padding-bottom: .12em;
  line-height: 1.2;
}
.mht-about-story__body {
  color: var(--text-secondary, #AFA4B8);
  font-family: var(--font-sans);
  font-size: clamp(.92rem, 1.05vw, 1rem);
  line-height: 1.78;
  margin: 0 0 clamp(20px, 3vw, 28px);
  text-align: center;
}
.mht-about-story__actions {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Reduced-motion — show images at final position immediately, no animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mht-story-img {
    opacity: 1 !important;
    transform: rotate(var(--story-rotate, 0deg)) translate3d(0, 0, 0) scale(1) !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet (761px – 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 761px) {
  .mht-about-story__scene-inner {
    min-height: clamp(480px, 70vw, 680px);
  }
  .mht-story-img { display: block; }
  .mht-story-img--7,
  .mht-story-img--8 { display: none; }
  .mht-story-img--1 { top: 4%;  left: 4%;  --story-ix:  70px; --story-iy: 50px; }
  .mht-story-img--2 { top: 0%;  left: 20%; --story-ix:  25px; --story-iy: 45px; }
  .mht-story-img--3 { top: 4%;  right: 4%; --story-ix: -70px; --story-iy: 50px; }
  .mht-story-img--4 { top: 42%; left: 1%;  --story-ix:  80px; --story-iy:  0px; }
  .mht-story-img--5 { top: 40%; right: 1%; --story-ix: -80px; --story-iy:  0px; }
  .mht-story-img--6 { bottom: 3%; left: 6%; --story-ix: 60px;  --story-iy: -50px; }
  .mht-about-story__card {
    max-width: min(480px, 62%);
  }
  .mht-story-scene {
    padding-inline: clamp(16px, 3vw, 32px);
  }
}

/* --------------------------------------------------------------------------
   Mobile (≤760px) — inline images, simple fade, no absolute positioning
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .mht-story-scene {
    padding-block: clamp(48px, 8vw, 80px);
    padding-inline: clamp(16px, 5vw, 24px);
  }
  .mht-about-story__scene-inner {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .mht-story-img { display: none !important; }
  /* Show 4 images as inline flex row */
  .mht-story-img--1,
  .mht-story-img--2,
  .mht-story-img--3,
  .mht-story-img--4 {
    display: block !important;
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: clamp(64px, 18vw, 90px) !important;
    height: clamp(64px, 18vw, 90px) !important;
    /* Mobile: simple opacity fade — no translate scroll-scrub */
    opacity: 0;
    transform: rotate(var(--story-rotate, 0deg)) scale(0.9) !important;
    transition: opacity 500ms ease, transform 500ms ease !important;
    z-index: 1 !important;
    flex-shrink: 0;
    order: 0;
  }
  /* Mobile revealed state — class added by JS on intersection */
  .mht-about-story__scene-inner.story-revealed .mht-story-img--1,
  .mht-about-story__scene-inner.story-revealed .mht-story-img--2,
  .mht-about-story__scene-inner.story-revealed .mht-story-img--3,
  .mht-about-story__scene-inner.story-revealed .mht-story-img--4 {
    opacity: 1 !important;
    transform: rotate(var(--story-rotate, 0deg)) scale(1) !important;
  }
  .mht-about-story__content {
    order: 10;
    width: 100%;
    flex: 0 0 100%;
    margin-top: 20px;
  }
  .mht-about-story__card {
    max-width: 100% !important;
    text-align: left;
  }
  .mht-about-story__kicker  { justify-content: flex-start; }
  .mht-about-story__actions { justify-content: flex-start; }
  .mht-about-story__body    { text-align: left !important; }

  @media (prefers-reduced-motion: reduce) {
    .mht-story-img--1,
    .mht-story-img--2,
    .mht-story-img--3,
    .mht-story-img--4 {
      opacity: 1 !important;
      transform: rotate(var(--story-rotate, 0deg)) scale(1) !important;
      transition: none !important;
    }
  }
}

/* =====================================================
   Phase 10.10.24 — calmer editorial My Story layout
   Fewer visible photos, controlled side clusters, solid card surface.
   ===================================================== */
.mht-about-story__card {
  background:
    radial-gradient(circle at 18% 0%, rgba(183, 140, 255, 0.14), transparent 38%),
    linear-gradient(145deg, #2F1F3A 0%, #141017 54%, #0D0D0D 100%);
  border: 1px solid rgba(197, 166, 211, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(246, 242, 247, 0.07),
    0 22px 58px rgba(0, 0, 0, 0.38);
}
.mht-story-img {
  width: clamp(118px, 12vw, 170px);
  height: clamp(118px, 12vw, 170px);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.mht-story-img--1 {
  top: 16%; left: 15%;
  z-index: 1;
  --story-rotate: -3deg;
  --story-ix: 68px;
  --story-iy: 36px;
}
.mht-story-img--2 {
  bottom: 18%; left: 18%;
  z-index: 3;
  --story-rotate: 2deg;
  --story-ix: 56px;
  --story-iy: -42px;
}
.mht-story-img--3 {
  top: 12%; right: 16%;
  z-index: 1;
  --story-rotate: 3deg;
  --story-ix: -68px;
  --story-iy: 38px;
}
.mht-story-img--4 {
  bottom: 20%; right: 18%;
  z-index: 3;
  --story-rotate: -2deg;
  --story-ix: -56px;
  --story-iy: -42px;
}
.mht-story-img--5 {
  top: 50%; right: 8%;
  z-index: 2;
  width: clamp(96px, 9vw, 138px);
  height: clamp(96px, 9vw, 138px);
  --story-rotate: 2deg;
  --story-ix: -42px;
  --story-iy: 0px;
}
.mht-story-img--6,
.mht-story-img--7,
.mht-story-img--8 {
  display: none !important;
}
@media (max-width: 1024px) and (min-width: 761px) {
  .mht-story-img--5 { display: none !important; }
  .mht-story-img--1 { top: 12%; left: 5%; }
  .mht-story-img--2 { bottom: 14%; left: 6%; }
  .mht-story-img--3 { top: 12%; right: 5%; }
  .mht-story-img--4 { bottom: 14%; right: 6%; }
}