/* =========================================
   Block 4
   Local styles
   File: block-4.css
   Scope: only block 4
   ========================================= */

/* =========================================
   1) Block shell
   ========================================= */

.lp-b4{
  width: 100%;
}

/* =========================================
   2) Top panel
   ========================================= */

.lp-b4-h{
  align-items: center;
  justify-content: center;
}

.lp-b4-h-text{
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
}

/* =========================================
   3) Timeline panel — base
   ========================================= */

.lp-b4-timeline{
  position: relative;
  align-items: stretch;
  justify-content: stretch;
  padding: 28px 22px 28px;
  overflow: hidden;
  isolation: isolate;
}

.lp-b4-tl{
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 14px;
  padding-bottom: 18px;
}

.lp-b4-item{
  display: grid;
  grid-template-columns: 64px 18px 1fr;
  gap: 18px;
  align-items: start;
}

.lp-b4-time{
  color: var(--text-2);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  line-height: 1.15;
  margin-top: 2px;
  opacity: .72;
  transition:
    opacity .28s ease,
    color .28s ease,
    transform .28s ease;
}

.lp-b4-rail{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 42px;
}

.lp-b4-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,.78);
  box-shadow: 0 0 0 7px rgba(148,163,184,.12);
  margin-top: 3px;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    background-color .32s ease,
    opacity .32s ease,
    filter .32s ease;
}

.lp-b4-dot--hot{
  background: rgba(58,167,226,.95);
  box-shadow: 0 0 0 8px rgba(58,167,226,.18);
}

.lp-b4-line{
  position: absolute;
  top: 18px;
  bottom: -22px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,.06)
  );
  opacity: .56;
  transition:
    opacity .32s ease,
    background .32s ease,
    transform .32s ease;
}

.lp-b4-item--last .lp-b4-line{
  display: none;
}

.lp-b4-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lp-b4-title{
  color: var(--text);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.16;
  opacity: .8;
  transition:
    opacity .28s ease,
    color .28s ease,
    transform .28s ease,
    text-shadow .28s ease;
}

.lp-b4-sub{
  color: var(--text-2);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.22;
  opacity: .62;
  transition:
    opacity .28s ease,
    color .28s ease,
    transform .28s ease,
    text-shadow .28s ease;
}

html[data-theme="light"] .lp-b4-line{
  background: linear-gradient(
    180deg,
    rgba(15,23,42,.16),
    rgba(15,23,42,.05)
  );
  opacity: .62;
}

html[data-theme="light"] .lp-b4-dot{
  background: rgba(148,163,184,.72);
  box-shadow: 0 0 0 7px rgba(148,163,184,.10);
}

html[data-theme="light"] .lp-b4-dot--hot{
  background: rgba(2,132,199,.94);
  box-shadow: 0 0 0 8px rgba(2,132,199,.14);
}

/* =========================================
   4) Energy panel
   ========================================= */

.lp-b4-energy{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.lp-b4-energy-shape{
  position: absolute;
  inset: 0;
  opacity: .82;
  --b4-energy-p1: 100%;
  --b4-energy-p2: 86%;
  --b4-energy-p3: 76%;
  --b4-energy-p4: 60%;
  --b4-energy-p5: 38%;
  --b4-energy-p6: 24%;
  --b4-energy-p7: 10%;
  --b4-energy-p8: 0%;
  clip-path: polygon(
    0% 0%,
    var(--b4-energy-p1) 0%,
    var(--b4-energy-p1) 8%,
    calc(var(--b4-energy-p1) - 2%) 10.5%,
    var(--b4-energy-p2) 22.5%,
    var(--b4-energy-p2) 29.5%,
    calc(var(--b4-energy-p2) - 2%) 32%,
    var(--b4-energy-p3) 42.5%,
    var(--b4-energy-p3) 49.5%,
    calc(var(--b4-energy-p3) - 2%) 52%,
    var(--b4-energy-p4) 61.5%,
    var(--b4-energy-p4) 68%,
    calc(var(--b4-energy-p4) - 2%) 70.5%,
    var(--b4-energy-p5) 79%,
    var(--b4-energy-p5) 84.5%,
    calc(var(--b4-energy-p5) - 1.5%) 86.5%,
    var(--b4-energy-p6) 90.5%,
    var(--b4-energy-p6) 94%,
    calc(var(--b4-energy-p6) - 1.2%) 95.5%,
    var(--b4-energy-p7) 97.5%,
    var(--b4-energy-p8) 100%,
    0% 100%
  );
  background:
    linear-gradient(
      180deg,
      rgba(58,167,226,.11) 0%,
      rgba(58,167,226,.088) 18%,
      rgba(58,167,226,.07) 34%,
      rgba(58,167,226,.052) 52%,
      rgba(58,167,226,.036) 68%,
      rgba(58,167,226,.022) 84%,
      rgba(58,167,226,.010) 100%
    );
  transition:
    clip-path .72s cubic-bezier(.22,1,.36,1),
    opacity .36s ease;
}

.lp-b4-energy-shape::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.055) 0%,
      rgba(255,255,255,.022) 38%,
      rgba(255,255,255,0) 100%
    );
  mix-blend-mode: screen;
  opacity: .42;
}

.lp-b4-energy-shape::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(84,189,255,.16) 0%,
      rgba(84,189,255,.07) 42%,
      rgba(84,189,255,0) 100%
    );
  opacity: .66;
  filter: blur(18px);
}

.lp-b4-energy-top,
.lp-b4-energy-bottom{
  position: absolute;
  z-index: 3;
  pointer-events: none;
  letter-spacing: -.01em;
}

/* top label: right aligned, separate layer */
.lp-b4-energy-top{
  top: 12px;
  right: 26px;
  left: auto;
  max-width: 58%;
  text-align: right;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 760;
  color: rgba(148,163,184,.92);
  text-transform: none;
}

/* bottom label: hidden until final reveal */
.lp-b4-energy-bottom{
  left: 22px;
  right: 22px;
  bottom: 16px;
  max-width: 74%;
  font-size: 12px;
  line-height: 1.24;
  font-weight: 720;
  color: rgba(148,163,184,.82);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .32s ease,
    transform .32s ease;
}

.lp-b4-timeline[data-energy-final="1"] .lp-b4-energy-bottom{
  opacity: 1;
  transform: translateY(0);
}

html[data-theme="light"] .lp-b4-energy-shape{
  background:
    linear-gradient(
      180deg,
      rgba(2,132,199,.08) 0%,
      rgba(2,132,199,.065) 18%,
      rgba(2,132,199,.052) 34%,
      rgba(2,132,199,.038) 52%,
      rgba(2,132,199,.026) 68%,
      rgba(2,132,199,.016) 84%,
      rgba(2,132,199,.007) 100%
    );
  opacity: .72;
}

html[data-theme="light"] .lp-b4-energy-shape::before{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.06) 38%,
      rgba(255,255,255,0) 100%
    );
  opacity: .36;
}

html[data-theme="light"] .lp-b4-energy-shape::after{
  background:
    linear-gradient(
      135deg,
      rgba(2,132,199,.12) 0%,
      rgba(2,132,199,.04) 46%,
      rgba(2,132,199,0) 100%
    );
  opacity: .42;
  filter: blur(16px);
}

html[data-theme="light"] .lp-b4-energy-top{
  color: rgba(71,85,105,.86);
}

html[data-theme="light"] .lp-b4-energy-bottom{
  color: rgba(71,85,105,.78);
}

/* energy states by current revealed step */
.lp-b4-timeline[data-energy-step="0"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 100%;
  --b4-energy-p3: 100%;
  --b4-energy-p4: 100%;
  --b4-energy-p5: 100%;
  --b4-energy-p6: 100%;
  --b4-energy-p7: 100%;
  --b4-energy-p8: 100%;
}

.lp-b4-timeline[data-energy-step="1"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 100%;
  --b4-energy-p3: 100%;
  --b4-energy-p4: 100%;
  --b4-energy-p5: 100%;
  --b4-energy-p6: 100%;
  --b4-energy-p7: 100%;
  --b4-energy-p8: 100%;
}

.lp-b4-timeline[data-energy-step="2"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 86%;
  --b4-energy-p3: 86%;
  --b4-energy-p4: 86%;
  --b4-energy-p5: 86%;
  --b4-energy-p6: 86%;
  --b4-energy-p7: 86%;
  --b4-energy-p8: 86%;
}

.lp-b4-timeline[data-energy-step="3"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 86%;
  --b4-energy-p3: 76%;
  --b4-energy-p4: 76%;
  --b4-energy-p5: 76%;
  --b4-energy-p6: 76%;
  --b4-energy-p7: 76%;
  --b4-energy-p8: 76%;
}

.lp-b4-timeline[data-energy-step="4"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 86%;
  --b4-energy-p3: 76%;
  --b4-energy-p4: 60%;
  --b4-energy-p5: 60%;
  --b4-energy-p6: 60%;
  --b4-energy-p7: 60%;
  --b4-energy-p8: 60%;
}

.lp-b4-timeline[data-energy-step="5"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 86%;
  --b4-energy-p3: 76%;
  --b4-energy-p4: 60%;
  --b4-energy-p5: 38%;
  --b4-energy-p6: 38%;
  --b4-energy-p7: 38%;
  --b4-energy-p8: 38%;
}

.lp-b4-timeline[data-energy-step="6"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 86%;
  --b4-energy-p3: 76%;
  --b4-energy-p4: 60%;
  --b4-energy-p5: 38%;
  --b4-energy-p6: 24%;
  --b4-energy-p7: 24%;
  --b4-energy-p8: 24%;
}

.lp-b4-timeline[data-energy-step="7"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 86%;
  --b4-energy-p3: 76%;
  --b4-energy-p4: 60%;
  --b4-energy-p5: 38%;
  --b4-energy-p6: 24%;
  --b4-energy-p7: 10%;
  --b4-energy-p8: 10%;
}

.lp-b4-timeline[data-energy-step="8"] .lp-b4-energy-shape{
  --b4-energy-p1: 100%;
  --b4-energy-p2: 86%;
  --b4-energy-p3: 76%;
  --b4-energy-p4: 60%;
  --b4-energy-p5: 38%;
  --b4-energy-p6: 24%;
  --b4-energy-p7: 10%;
  --b4-energy-p8: 0%;
}

/* =========================================
   5) Timeline panel — enhanced hierarchy
   ========================================= */

.lp-b4-timeline--enhanced .lp-b4-item{
  position: relative;
}

.lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-time,
.lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-time{
  opacity: .92;
  color: var(--text);
}

.lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-title{
  font-size: 20px;
  font-weight: 900;
  opacity: 1;
}

.lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-sub{
  font-size: 15px;
  font-weight: 780;
  opacity: 1;
  color: rgba(58,167,226,.95);
}

html[data-theme="light"] .lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-sub{
  color: rgba(2,132,199,.95);
}

.lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-dot{
  width: 12px;
  height: 12px;
  background: rgba(58,167,226,.92);
  box-shadow:
    0 0 0 8px rgba(58,167,226,.14),
    0 0 18px rgba(58,167,226,.10);
}

html[data-theme="light"] .lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-dot{
  background: rgba(2,132,199,.92);
  box-shadow:
    0 0 0 8px rgba(2,132,199,.10),
    0 0 18px rgba(2,132,199,.08);
}

.lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-line{
  opacity: .9;
  background: linear-gradient(
    180deg,
    rgba(120,170,255,.44),
    rgba(120,170,255,.14)
  );
}

html[data-theme="light"] .lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-line{
  background: linear-gradient(
    180deg,
    rgba(2,132,199,.36),
    rgba(2,132,199,.08)
  );
  opacity: .82;
}

/* climax */
.lp-b4-timeline--enhanced .lp-b4-item--climax{
  margin-top: 2px;
}

.lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-body{
  position: relative;
  padding: 12px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(58,167,226,.10), rgba(58,167,226,.04));
  box-shadow:
    inset 0 0 0 1px rgba(58,167,226,.14),
    0 10px 30px rgba(10,18,36,.12);
}

html:not([data-theme="light"]) .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-body{
  box-shadow:
    inset 0 0 0 1px rgba(58,167,226,.14),
    0 14px 34px rgba(0,0,0,.22);
}

html[data-theme="light"] .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-body{
  background:
    linear-gradient(180deg, rgba(58,167,226,.10), rgba(58,167,226,.035));
  box-shadow:
    inset 0 0 0 1px rgba(2,132,199,.12),
    0 8px 22px rgba(15,23,42,.06);
}

.lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-time{
  opacity: 1;
  color: var(--text);
  transform: translateY(1px);
}

.lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-title{
  font-size: 21px;
  font-weight: 900;
  opacity: 1;
  text-shadow: 0 0 18px rgba(58,167,226,.08);
}

.lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-sub{
  font-size: 15px;
  font-weight: 800;
  opacity: 1;
  color: rgba(58,167,226,.98);
}

html[data-theme="light"] .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-sub{
  color: rgba(2,132,199,.98);
}

.lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-dot,
.lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-dot--hot{
  width: 12px;
  height: 12px;
  background: rgba(58,167,226,.98);
  box-shadow:
    0 0 0 9px rgba(58,167,226,.16),
    0 0 22px rgba(58,167,226,.18);
  filter: saturate(1.05);
}

html[data-theme="light"] .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-dot,
html[data-theme="light"] .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-dot--hot{
  background: rgba(2,132,199,.98);
  box-shadow:
    0 0 0 9px rgba(2,132,199,.12),
    0 0 20px rgba(2,132,199,.10);
}

/* subtle hover only for desktop precision */
@media (hover: hover) and (pointer: fine){
  .lp-b4-timeline--enhanced .lp-b4-item:hover .lp-b4-title{
    opacity: 1;
  }

  .lp-b4-timeline--enhanced .lp-b4-item:hover .lp-b4-sub{
    opacity: .9;
  }

  .lp-b4-timeline--enhanced .lp-b4-item:hover .lp-b4-dot{
    transform: scale(1.06);
  }
}

/* =========================================
   6) Reveal states
   ========================================= */

.lp-b4-timeline--enhanced .lp-reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition:
    opacity .52s cubic-bezier(.22,1,.36,1),
    transform .52s cubic-bezier(.22,1,.36,1),
    filter .52s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--reveal-order, 0) * 70ms);
  will-change: opacity, transform, filter;
}

.lp-b4-timeline--enhanced .lp-reveal.is-revealed{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* fallback when JS has not run yet */
.no-js .lp-b4-timeline--enhanced .lp-reveal{
  opacity: 1;
  transform: none;
  filter: none;
}

/* =========================================
   7) Bottom panel
   ========================================= */

.lp-b4-out{
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.lp-b4-out-line1{
  color: var(--text-2);
  font-weight: 750;
  font-size: 18px;
  line-height: 1.2;
}

.lp-b4-out-line2{
  color: var(--text);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* =========================================
   8) Responsive
   ========================================= */

@media (max-width: 980px){
  .lp-b4-h-text{
    font-size: 18px;
  }

  .lp-b4-timeline{
    padding: 24px 18px 24px;
  }

  .lp-b4-tl{
    gap: 19px;
    padding-top: 12px;
    padding-bottom: 16px;
  }

  .lp-b4-item{
    grid-template-columns: 56px 18px 1fr;
    gap: 14px;
  }

  .lp-b4-time{
    font-size: 13px;
  }

  .lp-b4-rail{
    min-height: 40px;
  }

  .lp-b4-line{
    bottom: -20px;
  }

  .lp-b4-title{
    font-size: 18px;
  }

  .lp-b4-sub{
    font-size: 14px;
  }

  .lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-title{
    font-size: 19px;
  }

  .lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-sub{
    font-size: 14px;
  }

  .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-title{
    font-size: 20px;
  }

  .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-sub{
    font-size: 14px;
  }

  .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-body{
    padding: 11px 12px;
    border-radius: 14px;
  }

  .lp-b4-energy-top{
    top: 11px;
    right: 20px;
    max-width: 58%;
    font-size: 11px;
  }

  .lp-b4-energy-bottom{
    left: 18px;
    right: 18px;
    bottom: 14px;
    font-size: 11px;
    max-width: 84%;
  }

  .lp-b4-out-line1{
    font-size: 16px;
  }

  .lp-b4-out-line2{
    font-size: 21px;
  }
}

@media (max-width: 640px){
  .lp-b4-timeline{
    padding: 22px 16px 22px;
  }

  .lp-b4-tl{
    gap: 17px;
    padding-top: 11px;
    padding-bottom: 14px;
  }

  .lp-b4-item{
    grid-template-columns: 52px 16px 1fr;
    gap: 12px;
  }

  .lp-b4-time{
    font-size: 12px;
    margin-top: 3px;
  }

  .lp-b4-rail{
    min-height: 38px;
  }

  .lp-b4-dot{
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 6px rgba(148,163,184,.12);
  }

  .lp-b4-timeline--enhanced .lp-b4-item--accent .lp-b4-dot,
  .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-dot,
  .lp-b4-timeline--enhanced .lp-b4-item--climax .lp-b4-dot--hot{
    width: 11px;
    height: 11px;
  }

  .lp-b4-line{
    top: 16px;
    bottom: -17px;
  }

  .lp-b4-title{
    font-size: 17px;
    line-height: 1.16;
  }

  .lp-b4-sub{
    font-size: 13px;
    line-height: 1.22;
  }

  .lp-b4-energy-top{
    top: 10px;
    right: 16px;
    max-width: 64%;
    font-size: 10px;
  }

  .lp-b4-energy-bottom{
    left: 16px;
    right: 16px;
    bottom: 12px;
    font-size: 10px;
    max-width: 88%;
  }

  .lp-b4-out{
    gap: 10px;
  }

  .lp-b4-out-line1{
    font-size: 15px;
  }

  .lp-b4-out-line2{
    font-size: 19px;
  }
}

/* =========================================
   9) Reduced motion
   ========================================= */

@media (prefers-reduced-motion: reduce){
  .lp-b4-timeline--enhanced .lp-reveal,
  .lp-b4-timeline--enhanced .lp-reveal.is-revealed,
  .lp-b4-time,
  .lp-b4-dot,
  .lp-b4-line,
  .lp-b4-title,
  .lp-b4-sub,
  .lp-b4-energy-shape,
  .lp-b4-energy-bottom{
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  .lp-b4-timeline--enhanced .lp-reveal{
    opacity: 1 !important;
  }

  .lp-b4-energy-bottom{
    opacity: 1;
  }
}