/* LIFE MEDIA — WHY LIFE MEDIA */
.why-section{
  position:relative;min-height:760px;padding:115px 6% 125px;overflow:hidden;
  background:
    radial-gradient(circle at 25% 25%,rgba(255,8,125,.045),transparent 30%),
    radial-gradient(circle at 80% 65%,rgba(0,210,255,.045),transparent 30%),#050609;
}
.why-section:before{
  content:"";position:absolute;width:720px;height:420px;right:-160px;top:15%;
  background:radial-gradient(ellipse,rgba(255,8,125,.06),rgba(0,210,255,.025) 42%,transparent 70%);
  filter:blur(50px);pointer-events:none;
}
.why-inner{
  position:relative;z-index:2;max-width:1480px;margin:auto;
  display:grid;grid-template-columns:.82fr 1.18fr;gap:100px;align-items:start;direction:ltr;
}
.why-intro{
  direction:rtl;text-align:right;max-width:560px;position:sticky;top:120px;
  opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}
.why-section.is-visible .why-intro{opacity:1;transform:translateY(0)}
.why-eyebrow{
  position:relative;display:inline-block;padding-left:48px;margin-bottom:25px;
  color:rgba(255,255,255,.48);font-size:20px;font-weight:700;letter-spacing:.24em;direction:ltr;
}
.why-eyebrow:before{
  content:"";position:absolute;left:0;top:50%;width:34px;height:2px;transform:translateY(-50%);
  background:#ff087d;box-shadow:0 0 12px rgba(255,8,125,.5);
}
.why-intro h2{margin:0;color:#fff;font-size:clamp(48px,5.4vw,82px);line-height:1.02;font-weight:800;letter-spacing:-.045em}
.why-intro h2 span{display:block;margin-top:12px;color:#ff087d}
.why-intro p{max-width:480px;margin:32px 0 0;color:rgba(255,255,255,.42);font-size:15px;line-height:1.95}

.why-journey{position:relative;direction:ltr;min-height:610px;padding:10px 0 20px 90px}
.why-line{position:absolute;left:28px;top:24px;bottom:75px;width:1px;background:rgba(255,255,255,.08)}
.why-line-progress{
  position:absolute;left:0;top:0;width:1px;height:0%;
  background:linear-gradient(to bottom,#ff087d 0%,#a72cff 32%,#fff 54%,#ffd600 74%,#00d9ff 100%);
  box-shadow:0 0 8px rgba(255,8,125,.5),0 0 16px rgba(0,210,255,.18);
  transition:height .15s linear;
}
.why-line-light{
  position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 7px #fff,0 0 15px #ff087d,0 0 28px rgba(0,210,255,.5);
  transition:transform .15s linear;
}
.why-step{
  position:relative;min-height:138px;display:grid;grid-template-columns:74px 1fr;gap:28px;
  opacity:.28;transform:translateX(25px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);
}
.why-step+.why-step{margin-top:18px}
.why-step.is-active{opacity:1;transform:translateX(0)}
.why-step:before{
  content:"";position:absolute;left:-67px;top:12px;width:11px;height:11px;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;background:#050609;
  transition:background .4s,border-color .4s,box-shadow .4s,transform .4s;
}
.why-step.is-active:before{
  background:#ff087d;border-color:#ff087d;box-shadow:0 0 8px rgba(255,8,125,.7),0 0 22px rgba(255,8,125,.28);transform:scale(1.25);
}
.why-step-number{color:rgba(255,255,255,.18);font-size:13px;font-weight:800;letter-spacing:.16em;padding-top:7px;transition:color .4s}
.why-step.is-active .why-step-number{color:#fff}
.why-step-content{max-width:470px}
.why-step-code{display:block;margin-bottom:9px;color:rgba(255,255,255,.32);font-size:11px;font-weight:800;letter-spacing:.2em;transition:color .4s}
.why-step.is-active .why-step-code{color:#ff087d}
.why-step h3{margin:0;color:rgba(255,255,255,.45);font-size:clamp(24px,2.3vw,35px);line-height:1.15;font-weight:750;transition:color .4s,transform .4s}
.why-step.is-active h3{color:#fff;transform:translateX(-4px)}
.why-step p{margin:11px 0 0;color:rgba(255,255,255,.27);font-size:13px;line-height:1.8;transition:color .4s}
.why-step.is-active p{color:rgba(255,255,255,.52)}
.why-impact{
  position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:14px;color:rgba(255,255,255,.38);
  font-size:18px;font-weight:800;letter-spacing:.22em;opacity:0;transform:translateY(12px);transition:opacity .7s,transform .7s,color .4s;
}
.why-impact i{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);
  border-radius:50%;font-style:normal;font-size:17px;transition:.35s;
}
.why-section.impact-reached .why-impact{opacity:1;transform:translateY(0);color:#fff}
.why-section.impact-reached .why-impact i{background:#ff087d;border-color:#ff087d;box-shadow:0 0 22px rgba(255,8,125,.25)}
.why-section:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,8,125,.35),rgba(255,255,255,.12),rgba(0,210,255,.35),transparent);
}
@media(max-width:1000px){
  .why-inner{grid-template-columns:1fr;gap:65px}
  .why-intro{position:relative;top:auto;max-width:680px}
}
@media(max-width:600px){
  .why-section{min-height:auto;padding:75px 6% 90px}
  .why-intro h2{font-size:clamp(45px,13vw,66px)}
  .why-intro p{font-size:14px}
  .why-journey{min-height:610px;padding-left:52px}
  .why-line{left:17px}
  .why-step{grid-template-columns:50px 1fr;gap:15px;min-height:135px}
  .why-step:before{left:-40px}
  .why-step h3{font-size:23px}
  .why-step p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .why-intro,.why-step,.why-impact,.why-step:before,.why-step h3,.why-step p,.why-step-code{transition:none}
}