/*
 * LHM-HYBRID-007 — private Founder review
 * Scope: chronological manuscript journey, left-to-right transmutation,
 * and the new Atelier process blueprint. LHM-HYBRID-006 remains the frozen base.
 */

.hybrid-007-review .manuscript-story {
  --reveal: 0;
  --front: 100%;
  --atelier-life: 0;
  --edge-energy: 0;
  height: 440svh;
}

.hybrid-007-review .manuscript-state--atelier {
  z-index: 3;
  opacity: 1;
  filter: none;
}

.hybrid-007-review .manuscript-state--preservation {
  z-index: 5;
  opacity: 1;
  filter: none;
  clip-path: polygon(
    0 0,
    calc(var(--front) + .2%) 0,
    calc(var(--front) - .7%) 9%,
    calc(var(--front) + .8%) 19%,
    calc(var(--front) - .4%) 31%,
    calc(var(--front) + .65%) 44%,
    calc(var(--front) - .75%) 57%,
    calc(var(--front) + .55%) 69%,
    calc(var(--front) - .45%) 82%,
    calc(var(--front) + .3%) 92%,
    var(--front) 100%,
    0 100%
  );
  will-change: clip-path;
}

.hybrid-007-review .manuscript-state--preservation.is-transmuted {
  visibility: hidden;
}

.hybrid-007-review .manuscript-state--atelier .manuscript-sheet {
  filter:
    saturate(.86)
    sepia(.07)
    drop-shadow(0 9px 8px rgba(37, 34, 20, .28));
}

.hybrid-007-review .manuscript-dissolve {
  z-index: 8;
}

.hybrid-007-review .transmutation-mist {
  position: absolute;
  top: 50%;
  left: calc(1.5vw + min(76vw, 1180px) * var(--reveal));
  z-index: 7;
  width: clamp(34px, 5.4vw, 82px);
  height: min(57vw, 670px);
  opacity: calc(var(--edge-energy) * .46);
  pointer-events: none;
  transform: translate(-55%, -50%);
  background:
    radial-gradient(ellipse at 46% 15%, rgba(172, 224, 158, .24), transparent 52%),
    radial-gradient(ellipse at 58% 37%, rgba(112, 183, 134, .2), transparent 58%),
    radial-gradient(ellipse at 40% 62%, rgba(159, 218, 147, .22), transparent 55%),
    radial-gradient(ellipse at 54% 86%, rgba(119, 189, 135, .18), transparent 50%);
  filter: blur(12px);
  mix-blend-mode: screen;
  will-change: left, opacity;
}

.hybrid-007-review .manuscript-copy--atelier {
  padding: 0;
}

.hybrid-007-review .manuscript-copy--atelier > header {
  position: absolute;
  top: 6.2%;
  left: 5.3%;
  width: 29%;
  padding: 1.2% 1.6% 1.5%;
  border: 1px solid rgba(139, 105, 44, .22);
  background: rgba(243, 230, 191, .56);
  box-shadow: 0 8px 24px rgba(74, 56, 29, .05);
}

.hybrid-007-review .manuscript-copy--atelier > header h2 {
  margin-top: 2px;
  font-size: clamp(1.45rem, 2.05vw, 2.5rem);
}

.hybrid-007-review .manuscript-copy--atelier > header > p:last-child {
  margin-top: 8px;
  font-size: clamp(.63rem, .7vw, .82rem);
  line-height: 1.38;
}

.hybrid-007-review .manuscript-copy--atelier .atelier-principle {
  position: absolute;
  top: 8.8%;
  right: 7%;
  left: auto;
  width: 22%;
  margin: 0;
  padding: 9px 12px;
  color: #415b3a !important;
  font-size: clamp(.68rem, .76vw, .9rem);
  text-align: center;
  border-block: 1px solid rgba(148, 116, 52, .32);
  background: rgba(244, 232, 194, .35);
}

.hybrid-007-review .atelier-phases {
  position: absolute;
  inset: auto 5.4% 7.4%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hybrid-007-review .atelier-phase {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  min-height: 92px;
  padding: 12px 14px 11px;
  color: #3a4e33;
  border: 1px solid rgba(151, 117, 51, .32);
  background:
    linear-gradient(135deg, rgba(249, 239, 207, .9), rgba(231, 214, 170, .76));
  box-shadow:
    0 7px 18px rgba(74, 55, 28, .08),
    inset 0 0 24px rgba(255, 249, 218, .22);
}

.hybrid-007-review .atelier-phase::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: calc(6% / .88 * 100%);
  height: 1px;
  background: linear-gradient(90deg, #a47b30, #6a8a54);
  transform: translateY(-50%);
}

.hybrid-007-review .atelier-phase:last-child::after {
  display: none;
}

.hybrid-007-review .atelier-phase > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  color: #76551f;
  font: 680 .74rem/1 var(--serif);
  border: 1px solid rgba(153, 111, 42, .58);
  border-radius: 50%;
  background: rgba(234, 214, 161, .56);
}

.hybrid-007-review .atelier-phase h3 {
  margin: 0 0 4px;
  font-size: clamp(.75rem, .87vw, 1rem);
}

.hybrid-007-review .atelier-phase p {
  margin: 0;
  color: #514633;
  font-size: clamp(.62rem, .68vw, .78rem);
  font-weight: 570;
  line-height: 1.34;
}

.hybrid-007-review .blueprint-energy {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: var(--atelier-life);
  pointer-events: none;
}

.hybrid-007-review .blueprint-energy::before {
  content: "";
  position: absolute;
  right: 15%;
  bottom: 30%;
  left: 14%;
  height: 2px;
  opacity: .42;
  background: linear-gradient(90deg, transparent, #7ca768 12%, #d0a74d 47%, #7ca768 78%, transparent);
  filter: drop-shadow(0 0 5px rgba(126, 183, 104, .42));
  animation: blueprint-flow 8s ease-in-out infinite;
}

.hybrid-007-review .blueprint-energy i {
  --x: 18%;
  --y: 45%;
  --delay: 0s;
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d9b15a;
  box-shadow:
    0 0 7px 2px rgba(217, 177, 90, .52),
    0 0 13px rgba(123, 183, 103, .3);
  animation: blueprint-mote 7.5s var(--delay) ease-in-out infinite;
}

.hybrid-007-review .blueprint-energy i:nth-child(2) { --x: 25%; --y: 55%; --delay: -2.1s; }
.hybrid-007-review .blueprint-energy i:nth-child(3) { --x: 36%; --y: 42%; --delay: -4.3s; }
.hybrid-007-review .blueprint-energy i:nth-child(4) { --x: 46%; --y: 58%; --delay: -1.4s; }
.hybrid-007-review .blueprint-energy i:nth-child(5) { --x: 55%; --y: 39%; --delay: -5.1s; }
.hybrid-007-review .blueprint-energy i:nth-child(6) { --x: 66%; --y: 54%; --delay: -3.3s; }
.hybrid-007-review .blueprint-energy i:nth-child(7) { --x: 74%; --y: 37%; --delay: -.7s; }
.hybrid-007-review .blueprint-energy i:nth-child(8) { --x: 82%; --y: 51%; --delay: -4.8s; }
.hybrid-007-review .blueprint-energy i:nth-child(9) { --x: 88%; --y: 43%; --delay: -2.8s; }

@keyframes blueprint-flow {
  0%, 100% { opacity: .2; transform: scaleX(.72); transform-origin: left; }
  42% { opacity: .62; transform: scaleX(1); }
}

@keyframes blueprint-mote {
  0%, 68%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
  74% { opacity: .75; }
  92% { opacity: 0; transform: translate3d(17px, -25px, 0) scale(1.1); }
}

/* The required final narrative order already exists in the LHM-HYBRID-006 DOM:
   manuscript journey, then image/text forest story. No duplicate inversion. */
.hybrid-007-review .manuscript-story + .forest-story {
  border-top: 1px solid rgba(193, 154, 68, .18);
}

@media (max-width: 1100px) {
  .hybrid-007-review .transmutation-mist {
    left: calc(1vw + min(80vw, 1180px) * var(--reveal));
  }

  .hybrid-007-review .manuscript-copy--atelier > header {
    width: 32%;
  }

  .hybrid-007-review .atelier-phases {
    gap: 3%;
  }

  .hybrid-007-review .atelier-phase::after {
    width: 14%;
  }
}

@media (max-width: 850px) {
  .hybrid-007-review .manuscript-story {
    height: auto;
  }

  .hybrid-007-review .manuscript-state--preservation {
    clip-path: none;
  }

  .hybrid-007-review .manuscript-state--atelier {
    min-height: 1120px;
  }

  .hybrid-007-review .manuscript-state--atelier .manuscript-sheet {
    object-fit: cover;
    object-position: center;
  }

  .hybrid-007-review .manuscript-copy--atelier {
    display: flex;
    flex-direction: column;
    padding: 44px 34px;
    background:
      linear-gradient(180deg, rgba(245, 233, 197, .88), rgba(237, 221, 178, .83));
  }

  .hybrid-007-review .manuscript-copy--atelier::before {
    content: "";
    display: block;
    height: min(54vw, 250px);
    margin: -18px -12px 24px;
    border-bottom: 1px solid rgba(132, 103, 47, .26);
    background:
      url("assets/atelier-blueprint-007.webp") center 47% / 190% auto no-repeat;
    mix-blend-mode: multiply;
    opacity: .83;
  }

  .hybrid-007-review .manuscript-copy--atelier > header,
  .hybrid-007-review .manuscript-copy--atelier .atelier-principle {
    position: relative;
    inset: auto;
    width: auto;
  }

  .hybrid-007-review .manuscript-copy--atelier > header {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .hybrid-007-review .manuscript-copy--atelier > header h2 {
    font-size: clamp(1.75rem, 8vw, 2.55rem);
  }

  .hybrid-007-review .manuscript-copy--atelier > header > p:last-child {
    max-width: 32rem;
    font-size: clamp(.8rem, 3.25vw, .94rem);
  }

  .hybrid-007-review .manuscript-copy--atelier .atelier-principle {
    margin: 18px 0 16px;
    padding: 12px 0;
    font-size: clamp(.82rem, 3.4vw, .98rem);
    text-align: left;
    background: none;
  }

  .hybrid-007-review .atelier-phases {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hybrid-007-review .atelier-phase {
    min-height: 0;
    padding: 16px 15px;
  }

  .hybrid-007-review .atelier-phase::after {
    top: 100%;
    left: 30px;
    width: 1px;
    height: 11px;
    background: linear-gradient(#a47b30, #6a8a54);
    transform: none;
  }

  .hybrid-007-review .atelier-phase h3 {
    font-size: clamp(.96rem, 4vw, 1.12rem);
  }

  .hybrid-007-review .atelier-phase p {
    font-size: clamp(.78rem, 3.2vw, .92rem);
  }

  .hybrid-007-review .transmutation-mist,
  .hybrid-007-review .manuscript-dissolve,
  .hybrid-007-review .blueprint-energy {
    display: none;
  }
}

@media (max-width: 460px) {
  .hybrid-007-review .manuscript-state--atelier {
    min-height: 1080px;
  }

  .hybrid-007-review .manuscript-copy--atelier {
    padding: 36px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hybrid-007-review .manuscript-state--preservation {
    clip-path: none;
    transition: opacity 180ms ease-out !important;
  }

  .hybrid-007-review .transmutation-mist,
  .hybrid-007-review .manuscript-dissolve,
  .hybrid-007-review .blueprint-energy {
    display: none !important;
  }

  .hybrid-007-review .manuscript-state--atelier {
    transition: opacity 180ms ease-out !important;
  }
}