/* Our story: EvvoEdge (then) flows into Novva.One (now). */
.story { background: #fff; }
.story__title { margin-top: clamp(1.5rem, 3vw, 3rem); max-width: 16ch; font-size: clamp(2.4rem, 1rem + 5vw, 6rem); font-weight: 700; letter-spacing: -0.065em; line-height: .96; text-transform: uppercase; word-spacing: .1em; color: var(--ink-2); }
.story__track { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(.6rem, 2vw, 1.6rem); align-items: stretch; margin-top: clamp(2rem, 4vw, 4rem); }
.story__card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 2.6vw, 2.4rem); border-radius: 22px; overflow: hidden; min-height: 380px; }
.story__card--from { background: #ececef; color: var(--ink-2); }
.story__card--to { color: #fff; background: radial-gradient(80% 80% at 90% 0%, rgba(144,15,255,.65), rgba(144,15,255,0) 70%), linear-gradient(160deg, #1a0b33, #0b0b10); }
.story__era { align-self: flex-start; padding: .3rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(11,11,14,.08); }
.story__card--to .story__era { background: rgba(255,255,255,.16); }
.story__name { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.8rem); font-weight: 700; letter-spacing: -0.07em; line-height: .95; }
.story__card--from .story__name { color: transparent; -webkit-text-stroke: 1.6px var(--ink-2); }
.story__card p { max-width: 44ch; color: var(--ink-3); letter-spacing: -0.02em; line-height: 1.55; }
.story__card--to p { color: rgba(255,255,255,.82); }
.story__card p strong { color: var(--ink-2); }
.story__card--to p strong { color: #fff; }
.story__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; }
.story__tags li { padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 500; background: #fff; }
.story__card--to .story__tags li { background: rgba(255,255,255,.14); }
.story__bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; width: clamp(44px, 6vw, 90px); }
.story__line { position: relative; width: 2px; flex: 1; background: rgba(11,11,14,.12); overflow: hidden; }
.story__line i { position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--purple)); animation: storyFlow 2.4s var(--ease) infinite; }
@keyframes storyFlow { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
.story__arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 1.3rem; box-shadow: 0 10px 28px rgba(144,15,255,.45); }
@media (max-width: 860px) {
  .story__track { grid-template-columns: 1fr; } .story__card { min-height: 0; }
  .story__bridge { flex-direction: row; width: auto; height: 60px; } .story__line { width: auto; height: 2px; flex: 1; } .story__line i { width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--purple)); animation-name: storyFlowX; }
  .story__arrow { transform: rotate(90deg); }
}
@keyframes storyFlowX { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .story__line i { animation: none; } }