/* Block: Features & Benefits zig-zag timeline (ported from live #bolt-features-timeline) */


/* ========= TOKENS / BACKGROUND (same blue style) ========= */

#bolt-features-timeline{

  --pink:var(--mp-pink);

  --blue:var(--mp-blue);

  --text:var(--mp-ink);

  --muted:var(--mp-ink-muted);

  --outline:rgba(255,255,255,.22);

  --glassTop:rgba(255,255,255,.10);

  --glassBot:rgba(255,255,255,.05);

  --mx:50%;

  --my:50%;

  position:relative;

  overflow:hidden;

  isolation:isolate;

  min-height:100vh;

  display:flex;

  align-items:center;

  color:var(--text);

  background: radial-gradient(130% 160% at 70% 0%, var(--blue) 0%, var(--mp-blue-dark) 65%, var(--mp-blue-deep) 100%);

}



/* moving background glow */

#bolt-features-timeline::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    radial-gradient(780px 780px at 22% 38%, rgba(255,255,255,.08), transparent 60%),

    radial-gradient(640px 640px at 80% 72%, rgba(255,255,255,.06), transparent 65%);

  mix-blend-mode:screen;

  opacity:.5;

  z-index:0;

  animation:bftFloat 24s ease-in-out infinite alternate;

}

@keyframes bftFloat{

  0%{transform:translate(0,0) scale(1);}

  50%{transform:translate(-4%,3%) scale(1.05);}

  100%{transform:translate(4%,-3%) scale(1);}

}

#bolt-features-timeline::after{

  content:"";

  position:absolute;

  inset:-10% -40%;

  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%);

  transform:skewX(-12deg);

  z-index:0;

  animation:bftSheen 7s linear infinite;

}

@keyframes bftSheen{

  0%{transform:translateX(-40%) skewX(-12deg);}

  100%{transform:translateX(40%) skewX(-12deg);}

}



/* mouse-follow glow */

#bolt-features-timeline .bft-mouse{

  position:absolute;

  inset:0;

  pointer-events:none;

  z-index:1;

  background:

    radial-gradient(360px 360px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18) 0%, transparent 60%);

  filter:blur(50px);

}



/* ========= LAYOUT ========= */

#bolt-features-timeline .bft-inner{

  position:relative;

  z-index:2;

  max-width:1200px;

  margin:0 auto;

  padding:80px 20px;

  display:grid;

  gap:40px;

  grid-template-columns:1fr;

}

@media(min-width:1024px){

  #bolt-features-timeline .bft-inner{

    grid-template-columns:5fr 6fr;

    align-items:flex-start;

  }

}



/* LEFT column */

#bolt-features-timeline .bft-left{

  max-width:620px;

}

@media(min-width:1024px){

  #bolt-features-timeline .bft-left{

    position:sticky;

    top:110px;

    align-self:flex-start;

  }

}



/* badge */

#bolt-features-timeline .bft-badge{

  display:inline-flex;

  align-items:center;

  gap:.75rem;

  padding:6px 14px;

  margin:0 0 12px;

  border:1px solid var(--pink);

  border-radius:999px;

  background:linear-gradient(90deg, rgba(208,36,121,.15), rgba(37,52,153,.15));

  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.28);

  color:var(--muted);

  font-family:"Montserrat",sans-serif;

  font-size:12px;

  letter-spacing:.14em;

  text-transform:uppercase;

  position:relative;

  overflow:hidden;

}

#bolt-features-timeline .bft-badge::after{

  content:"";

  position:absolute;

  inset:-40% -60%;

  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);

  transform:skewX(-20deg);

  animation:bftBadgeSheen 4.5s linear infinite;

}

@keyframes bftBadgeSheen{

  0%{transform:translateX(-40%) skewX(-20deg);}

  100%{transform:translateX(40%) skewX(-20deg);}

}

#bolt-features-timeline .bft-badge i{

  color:var(--mp-gold);

  font-style:normal;

  font-size:13px;

}

#bolt-features-timeline .bft-badge em{ font-style:normal; }



/* headings/text */

#bolt-features-timeline .bft-title{

  font-family:"DM Serif Display",serif;

  font-weight:400;

  color:var(--mp-ink);

  font-size:42px;

  line-height:1.12;

  margin:0 0 16px;

  text-shadow:0 2px 10px rgba(0,0,0,.35);

}

@media(max-width:520px){

  #bolt-features-timeline .bft-title{ font-size:36px; }

}

#bolt-features-timeline .bft-sub{

  font-family:"Montserrat",sans-serif;

  font-size:16px;

  line-height:1.8;

  margin:0;

  color:var(--mp-ink);

}



/* ========= RIGHT • ZIG-ZAG TIMELINE ========= */

#bolt-features-timeline .bft-right{

  position:relative;

  padding:10px 0;

  display:flex;

  flex-direction:column;

  gap:24px;

  min-width:0;

}



/* vertical line centered in right column */

#bolt-features-timeline .bft-line{

  position:absolute;

  left:50%;

  top:6px;

  bottom:6px;

  width:2px;

  transform:translateX(-50%);

  background:linear-gradient(180deg, var(--pink), var(--blue));

  opacity:.85;

}



/* each item */

#bolt-features-timeline .bft-item{

  position:relative;

  padding:10px 0;

}



/* node on the line */

#bolt-features-timeline .bft-node{

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%, -50%);

  width:16px;

  height:16px;

  border-radius:999px;

  border:2px solid #fff;

  background: radial-gradient(circle at 30% 30%, var(--mp-ink), var(--pink));

  box-shadow:

    0 0 0 4px rgba(208,36,121,.35),

    0 6px 14px rgba(0,0,0,.45);

}



/* card */

#bolt-features-timeline .bft-card{

  position:relative;

  width:min(360px, calc(50% - 40px));

  border:1px solid var(--outline);

  border-radius:18px;

  background:linear-gradient(180deg, var(--glassTop), var(--glassBot));

  backdrop-filter:blur(10px);

  -webkit-backdrop-filter:blur(10px);

  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.4);

  padding:22px 22px;

  min-height:120px;

  opacity:0;

  transform:translateY(40px);

  transition:all .65s cubic-bezier(.16,.84,.44,1);

  min-width:0;

}



/* arrow */

#bolt-features-timeline .bft-card::before{

  content:"";

  position:absolute;

  right:-14px;

  top:50%;

  transform:translateY(-50%);

  border-width:10px 0 10px 14px;

  border-style:solid;

  border-color:transparent transparent transparent rgba(14,24,52,.85);

  opacity:.9;

}

#bolt-features-timeline .bft-item:nth-child(odd) .bft-card{

  margin-right:auto;

}

#bolt-features-timeline .bft-item:nth-child(odd) .bft-card::before{

  right:auto;

  left:-14px;

  border-width:10px 14px 10px 0;

  border-color:transparent rgba(14,24,52,.85) transparent transparent;

}

#bolt-features-timeline .bft-item:nth-child(even) .bft-card{

  margin-left:auto;

}



/* inner highlight */

#bolt-features-timeline .bft-card::after{

  content:"";

  position:absolute;

  inset:0;

  border-radius:18px;

  pointer-events:none;

  opacity:0;

  background:

    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 20%),

    radial-gradient(260px 220px at 18% 10%, rgba(255,255,255,.10), transparent 60%);

  mix-blend-mode:screen;

  transition:opacity .28s ease;

}



/* text */

#bolt-features-timeline .bft-card h3{

  font-family:"DM Serif Display",serif;

  font-weight:400;

  font-size:22px;

  margin:0 0 8px;

  color:var(--mp-ink);

}

#bolt-features-timeline .bft-card p{

  font-family:"Montserrat",sans-serif;

  font-size:15px;

  line-height:1.75;

  margin:0;

  color:var(--mp-ink);

}



/* 3D tilt + reveal */

#bolt-features-timeline .bft-card{

  --rx:0deg;

  --ry:0deg;

  transform: translateY(40px) rotateX(var(--rx)) rotateY(var(--ry));

  will-change:transform, box-shadow, border-color, filter;

}

#bolt-features-timeline .bft-card.in-view{

  opacity:1;

  transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry));

}

#bolt-features-timeline .bft-card:hover{

  border-color:rgba(255,255,255,.35);

  box-shadow:

    0 18px 45px rgba(0,0,0,.55),

    0 2px 0 rgba(255,255,255,.18) inset;

  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));

  filter:saturate(1.03);

}

#bolt-features-timeline .bft-card:hover::after{ opacity:1; }



/* ===== RESPONSIVE POLISH ===== */

@media(max-width:900px){

  #bolt-features-timeline{ min-height:auto; }

  #bolt-features-timeline .bft-inner{ padding:70px 20px; gap:28px; }

}



/* TABLET: intentional single-column timeline (no cramped zig-zag) */

@media(max-width:1023px){

  #bolt-features-timeline .bft-right{

    padding:8px 0 0 26px;

    gap:18px;

  }

  #bolt-features-timeline .bft-line{

    left:12px;

    transform:none;

    top:8px;

    bottom:8px;

  }

  #bolt-features-timeline .bft-node{

    left:12px;

    width:14px;

    height:14px;

    box-shadow:

      0 0 0 4px rgba(208,36,121,.30),

      0 6px 14px rgba(0,0,0,.45);

  }

  #bolt-features-timeline .bft-item{

    padding:6px 0;

  }

  #bolt-features-timeline .bft-card{

    width:100%;

    margin:0 0 0 26px;

    min-height:0;

  }

  #bolt-features-timeline .bft-item:nth-child(odd) .bft-card,

  #bolt-features-timeline .bft-item:nth-child(even) .bft-card{

    margin-left:26px;

    margin-right:0;

  }

  #bolt-features-timeline .bft-card::before{

    left:-14px;

    right:auto;

    border-width:10px 14px 10px 0;

    border-color:transparent rgba(14,24,52,.85) transparent transparent;

  }

}



/* MOBILE: make it feel “designed”, not hacked */

@media(max-width:720px){

  /* left column becomes centered */

  #bolt-features-timeline .bft-left{ max-width:720px; margin:0 auto; text-align:center; }

  #bolt-features-timeline .bft-badge{ margin:0 auto 12px; }



  #bolt-features-timeline .bft-title{ font-size:30px; line-height:1.15; margin:0 0 12px; }

  #bolt-features-timeline .bft-sub{ font-size:15px; line-height:1.7; }



  /* timeline becomes a clean left-line layout */

  #bolt-features-timeline .bft-right{

    padding:6px 0 0 22px;

    gap:16px;

  }

  #bolt-features-timeline .bft-line{

    left:10px;

    transform:none;

    top:8px;

    bottom:8px;

  }

  #bolt-features-timeline .bft-node{

    left:10px;

    width:14px;

    height:14px;

    box-shadow:

      0 0 0 4px rgba(208,36,121,.28),

      0 6px 14px rgba(0,0,0,.45);

  }

  #bolt-features-timeline .bft-item{

    padding:6px 0;

  }

  #bolt-features-timeline .bft-card{

    width:100%;

    margin:0 0 0 22px;

    padding:18px 18px;

    min-height:0;

    border-radius:16px;

  }

  #bolt-features-timeline .bft-card::after{ border-radius:16px; }



  /* arrow always on left */

  #bolt-features-timeline .bft-card::before{

    left:-14px;

    right:auto;

    border-width:10px 14px 10px 0;

    border-color:transparent rgba(14,24,52,.85) transparent transparent;

  }



  /* improve readability on mobile */

  #bolt-features-timeline .bft-card h3{ font-size:20px; }

  #bolt-features-timeline .bft-card p{ font-size:14px; line-height:1.65; }

}

@media(max-width:420px){

  #bolt-features-timeline .bft-title{ font-size:28px; }

}



/* Touch devices: soften heavy hover/tilt without changing desktop */

@media (hover: none){

  #bolt-features-timeline .bft-card{

    transition: box-shadow .28s ease, border-color .28s ease, background .28s ease, opacity .65s cubic-bezier(.16,.84,.44,1), transform .65s cubic-bezier(.16,.84,.44,1);

    transform: translateY(40px);

  }

  #bolt-features-timeline .bft-card.in-view{

    transform: translateY(0);

  }

  #bolt-features-timeline .bft-card:hover{

    transform: translateY(0);

  }

  #bolt-features-timeline .bft-card:hover::after{ opacity:0; }

}



/* Reduce motion */

@media (prefers-reduced-motion: reduce){

  #bolt-features-timeline::before,#bolt-features-timeline::after{ animation:none; }

  #bolt-features-timeline .bft-mouse{ display:none; }

  #bolt-features-timeline .bft-badge::after{ animation:none; }

}