/*
 * LHM-HYBRID-008 — private Founder review
 * Scope: complete story/manuscript module swap, Verdant Arcane Burn,
 * and accessible Atelier typography. LHM-HYBRID-007 remains frozen.
 */

.hybrid-008-review .forest-story + .manuscript-story {
  border-top: 1px solid rgba(193, 154, 68, .18);
}

.hybrid-008-review .manuscript-story {
  --reveal: 0;
  --front: 0%;
  --front-x: 50%;
  --edge-energy: 0;
  --afterglow: 0;
  --atelier-life: 0;
  --burn-glow: 1.45;
  --mist-density: .88;
  --mist-width: clamp(100px, 12vw, 190px);
  height: 560svh;
}

.hybrid-008-review .manuscript-stage {
  isolation: isolate;
}

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

.hybrid-008-review .manuscript-state--preservation {
  z-index: 5;
  opacity: 1;
  filter: none;
  clip-path: polygon(
    var(--front) 0,
    100% 0,
    100% 100%,
    var(--front) 100%,
    calc(var(--front) + .55%) 92%,
    calc(var(--front) - .72%) 82%,
    calc(var(--front) + .88%) 70%,
    calc(var(--front) - .48%) 58%,
    calc(var(--front) + .76%) 45%,
    calc(var(--front) - .6%) 32%,
    calc(var(--front) + .92%) 20%,
    calc(var(--front) - .45%) 9%
  );
  will-change: clip-path;
}

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

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

.hybrid-008-review .manuscript-dissolve {
  z-index: 9;
  mix-blend-mode: screen;
}

.hybrid-008-review .transmutation-mist {
  position: absolute;
  top: 50%;
  left: var(--front-x);
  z-index: 8;
  width: var(--mist-width);
  height: min(60vw, 700px);
  opacity: calc(var(--edge-energy) * var(--mist-density));
  pointer-events: none;
  transform: translate(-46%, -50%);
  background:
    radial-gradient(ellipse at 40% 12%, rgba(220, 255, 219, .62), transparent 34%),
    radial-gradient(ellipse at 58% 30%, rgba(70, 235, 128, .5), transparent 54%),
    radial-gradient(ellipse at 35% 52%, rgba(21, 158, 87, .52), transparent 58%),
    radial-gradient(ellipse at 62% 72%, rgba(145, 255, 185, .48), transparent 52%),
    radial-gradient(ellipse at 42% 91%, rgba(28, 122, 69, .38), transparent 48%);
  filter: blur(14px) saturate(1.28);
  mix-blend-mode: screen;
  will-change: left, opacity;
}

.hybrid-008-review .transmutation-mist::before,
.hybrid-008-review .transmutation-mist::after {
  content: "";
  position: absolute;
  inset: 8% 18%;
  border-radius: 48%;
  background:
    radial-gradient(circle at 48% 34%, rgba(234, 255, 224, .64), transparent 14%),
    radial-gradient(ellipse at 54% 56%, rgba(21, 194, 100, .46), transparent 58%);
  filter: blur(8px);
  animation: verdant-mist 3.6s ease-in-out infinite alternate;
}

.hybrid-008-review .transmutation-mist::after {
  inset: 18% 4% 12% 34%;
  opacity: .72;
  animation-delay: -1.8s;
}

.hybrid-008-review .manuscript-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: calc(var(--edge-energy) * .72);
  pointer-events: none;
  background:
    radial-gradient(ellipse 15% 80% at var(--front) 52%, rgba(39, 192, 101, .32), transparent 74%),
    radial-gradient(ellipse 7% 65% at var(--front) 52%, rgba(231, 191, 78, .16), transparent 78%);
  mix-blend-mode: screen;
  transition: opacity 80ms linear;
}

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

.hybrid-008-review .manuscript-copy--atelier > header {
  position: absolute;
  top: 7%;
  left: 5.5%;
  width: 37%;
  padding: 1.5% 1.8% 1.7%;
  border: 1px solid rgba(139, 105, 44, .22);
  background: rgba(246, 233, 195, .76);
  box-shadow: 0 10px 28px rgba(74, 56, 29, .09);
}

.hybrid-008-review .manuscript-copy--atelier > header .kicker {
  color: #826526;
  font-size: clamp(.95rem, 1vw, 1.1rem);
  font-weight: 600;
}

.hybrid-008-review .manuscript-copy--atelier > header h2 {
  margin-top: 4px;
  color: #a77a27;
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 650;
  line-height: 1.04;
  text-shadow: 0 1px 8px rgba(255, 240, 175, .26);
}

.hybrid-008-review .manuscript-copy--atelier > header h2 em {
  color: #8e6720;
}

.hybrid-008-review .manuscript-copy--atelier > header > p:last-child {
  margin-top: 12px;
  color: #5e4b31;
  font-size: clamp(1.05rem, 1.12vw, 1.2rem);
  font-weight: 500;
  line-height: 1.48;
}

.hybrid-008-review .manuscript-copy--atelier .atelier-principle {
  position: absolute;
  top: 9.8%;
  right: 6.4%;
  left: auto;
  width: 27%;
  margin: 0;
  padding: 12px 15px;
  color: #4e653a !important;
  font-size: clamp(.95rem, 1vw, 1.08rem);
  font-weight: 550;
  line-height: 1.4;
  text-align: center;
  border-block: 1px solid rgba(148, 116, 52, .38);
  background: rgba(244, 232, 194, .58);
}

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

.hybrid-008-review .atelier-phase {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  min-height: 126px;
  padding: 18px 18px 16px;
  color: #445633;
  border: 1px solid rgba(151, 117, 51, .38);
  background: linear-gradient(135deg, rgba(249, 239, 207, .95), rgba(231, 214, 170, .88));
  box-shadow:
    0 8px 22px rgba(74, 55, 28, .1),
    inset 0 0 26px rgba(255, 249, 218, .24);
}

.hybrid-008-review .atelier-phase::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 7%;
  height: 2px;
  background: linear-gradient(90deg, #a47b30, #718957);
  transform: translateY(-50%);
}

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

.hybrid-008-review .atelier-phase > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #9b742b;
  font: 680 1.5rem/1 var(--serif);
  border: 1px solid rgba(153, 111, 42, .64);
  border-radius: 50%;
  background: rgba(238, 217, 163, .68);
}

.hybrid-008-review .atelier-phase h3 {
  margin: 1px 0 7px;
  color: #3f5834;
  font-size: clamp(1.25rem, 1.3vw, 1.48rem);
  font-weight: 650;
  line-height: 1.15;
}

.hybrid-008-review .atelier-phase p {
  margin: 0;
  color: #5f4c35;
  font-size: clamp(1.05rem, 1.08vw, 1.18rem);
  font-weight: 520;
  line-height: 1.42;
}

.hybrid-008-review .blueprint-energy {
  opacity: var(--atelier-life);
}

@keyframes verdant-mist {
  from { transform: translate3d(-8px, 8px, 0) scale(.92); opacity: .56; }
  to { transform: translate3d(18px, -15px, 0) scale(1.14); opacity: .94; }
}

@media (max-width: 1100px) {
  .hybrid-008-review .manuscript-copy--atelier > header {
    width: 42%;
  }

  .hybrid-008-review .manuscript-copy--atelier .atelier-principle {
    width: 29%;
  }

  .hybrid-008-review .atelier-phases {
    gap: 1.2%;
  }
}

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

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

  .hybrid-008-review .manuscript-state--atelier {
    min-height: 1180px;
  }

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

  .hybrid-008-review .manuscript-copy--atelier {
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
    background: linear-gradient(180deg, rgba(245, 233, 197, .9), rgba(237, 221, 178, .86));
  }

  .hybrid-008-review .manuscript-copy--atelier::before {
    content: "";
    display: block;
    height: min(52vw, 240px);
    margin: -12px -6px 25px;
    border-bottom: 1px solid rgba(132, 103, 47, .26);
    background: url("assets/atelier-blueprint-007.webp") center 47% / 188% auto no-repeat;
    mix-blend-mode: multiply;
    opacity: .78;
  }

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

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

  .hybrid-008-review .manuscript-copy--atelier > header .kicker {
    font-size: 1rem;
  }

  .hybrid-008-review .manuscript-copy--atelier > header h2 {
    font-size: clamp(1.8rem, 8vw, 2.7rem);
  }

  .hybrid-008-review .manuscript-copy--atelier > header > p:last-child {
    max-width: 34rem;
    font-size: clamp(1rem, 3.8vw, 1.12rem);
  }

  .hybrid-008-review .manuscript-copy--atelier .atelier-principle {
    margin: 19px 0 17px;
    padding: 13px 0;
    font-size: 1rem;
    text-align: left;
    background: none;
  }

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

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

  .hybrid-008-review .atelier-phase::after {
    top: 100%;
    left: 39px;
    width: 2px;
    height: 12px;
    background: linear-gradient(#a47b30, #718957);
    transform: none;
  }

  .hybrid-008-review .atelier-phase > span {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }

  .hybrid-008-review .atelier-phase h3 {
    font-size: clamp(1.15rem, 4.4vw, 1.34rem);
  }

  .hybrid-008-review .atelier-phase p {
    font-size: max(1rem, 16px);
  }

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

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

  .hybrid-008-review .manuscript-copy--atelier {
    padding: 34px 22px;
  }
}

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

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

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