/* ─── Features section ────────────────────────────────────────── */
/* Stage 1920 × 1250px.                                           */
/* y-offset: 5232 (vector-40 top in original page).              */
/* stage_y = page_y − 5232                                        */

.features {
  overflow-x: clip;
  position: relative;
  margin-top: -95px;
}

.features__stage {
    position: relative;
    width: 1920px;
    height: 1500px; /* extra 250px below last card shows stripe tail */
    left: 50%;
    transform: translateX(-50%);
}

/* ════════════════════════════════════════════════════════════════
   Decorative background stripe (vector-40)
   page top:5232 → stage y:0   left:159px   803×1693
════════════════════════════════════════════════════════════════ */

.features__stripe {
  background-image: url(../img/vector-40.svg);
  background-size: 100% 100%;
  height: 1693px;
  left: 159px;
  position: absolute;
  top: 0;
  width: 803px;
}

/* ════════════════════════════════════════════════════════════════
   Horizontal separators (115×2px each, left:160px)
   vector-52: page 5424 → stage 192
   vector-54: page 5699 → stage 467
   vector-55: page 5980 → stage 748
   vector-53: page 6255 → stage 1023
════════════════════════════════════════════════════════════════ */

.features__sep {
  background-image: url(../img/vector-52.svg);
  background-size: 100% 100%;
  height: 2px;
  left: 160px;
  position: absolute;
  width: 115px;
}

.features__sep-2 {
    background-image: url(../img/vector-54.svg);
}

.features__sep-3 {
    background-image: url(../img/vector-55.svg);
}

.features__sep-4 {
    background-image: url(../img/vector-53.svg);
}

.features__sep-1 {
    top: 192px;
}

.features__sep-2 {
    top: 467px;
}

.features__sep-3 {
    top: 748px;
}

.features__sep-4 {
    top: 1023px;
}

/* ════════════════════════════════════════════════════════════════
   Feature cards
   left:275px   height:245px
   Card 1: width:1487px   page 5372 → stage 140
   Card 2: width:1486px   page 5649 → stage 417
   Card 3: width:1486px   page 5926 → stage 694
   Card 4: width:1486px   page 6203 → stage 971
════════════════════════════════════════════════════════════════ */

.features__card {
  height: 245px;
  left: 275px;
  position: absolute;
  width: 1487px;
}

.features__card-1 {
    top: 140px;
}

.features__card-2 {
    top: 417px;
    width: 1486px;
}

.features__card-3 {
    top: 694px;
    width: 1486px;
}

.features__card-4 {
    top: 971px;
    width: 1486px;
}

/* Card background: eerie-black, border-radius:32px */
.features__card-bg {
  background-color: var(--eerie-black);
  border-radius: 32px;
  height: 245px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Blue gradient overlay */
.features__card-gradient {
  background: linear-gradient(
    169deg,
    rgba(1, 114, 253, 0.22) 0%,
    rgba(1, 114, 253, 0)    40%,
    rgba(1, 114, 253, 0.06) 100%
  );
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* Number label: left:28, top:20, 40px tall, 36px montserrat medium */
.features__card-num {
    align-items: center;
    color: var(--white-solid);
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 36px;
    font-weight: 500;
    height: 40px;
    left: 28px;
    letter-spacing: -1.5px;
    line-height: 39.6px;
    opacity: 0.8;
    position: absolute;
    top: 20px;
    white-space: nowrap;
}

/* Icon: 160×160 at left:131, top:42 */
.features__card-icon {
  height: 160px;
  left: 131px;
  overflow: visible;
  position: absolute;
  top: 42px;
  width: 160px;
}

/* Card 1 icon sits 1px lower */
.features__card-1 .features__card-icon {
    top: 43px;
}

/* Text frame: left:374, top:39, inline-flex column, gap:16 */
.features__card-body {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  left: 374px;
  position: absolute;
  top: 39px;
}

/* Title: montserrat 32px 600, white */
.features__card-title {
    align-items: center;
    align-self: stretch;
    color: var(--white-solid);
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 35.2px;
    margin-top: -1px;
}

/* Body text: raleway 28px 400, silver, 951px wide */
.features__card-text {
    align-items: center;
    color: var(--silver-chalice);
    display: flex;
    font-family: var(--font-raleway), sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 39.2px;
    width: 951px;
}

/* ─── Zoom scaling ───────────────────────────────────────────── */

@media (max-width: 1919px) {
    .features {
        zoom: 0.97;
    }
}

@media (max-width: 1800px) {
    .features {
        zoom: 0.91;
    }
}

@media (max-width: 1700px) {
    .features {
        zoom: 0.86;
    }
}

@media (max-width: 1600px) {
    .features {
        zoom: 0.83;
    }
}

@media (max-width: 1500px) {
    .features {
        zoom: 0.78;
    }
}

@media (max-width: 1400px) {
    .features {
        zoom: 0.73;
    }
}

/* ── Reset desktop-overlap + vertical spacing ─────────────────
   margin-top: -95px in base styles — for desktop overlap.
   On mobile this gives -95×zoom = -36px overlap → reset it.
   padding = 32px / zoom (scale compensation).
   Horizontal card centering: cards center at 1018.5px, not 960px →
   shift stage 3.047% left so cards sit symmetrically in viewport.  */
@media (max-width: 1280px) {
    .features { zoom: 0.63; margin-top: 0; }
    .features__stage { transform: translateX(calc(-50% - 3.047%)); }
}

@media (max-width: 1150px) {
    .features { zoom: 0.61; }
}

@media (max-width: 1080px) {
    .features { zoom: 0.56; }
}

@media (max-width: 1100px) {
    .features { padding-top: 50px; padding-bottom: 50px; }
}

@media (max-width: 1000px) {
    .features { zoom: 0.5; padding-top: 55px; padding-bottom: 55px; }
}

@media (max-width: 900px) {
    .features { zoom: 0.47; padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 850px) {
    .features { zoom: 0.44; }
}

@media (min-width: 2200px) {
    .features {
        zoom: 1.15;
    }
}

@media (min-width: 2800px) {
    .features {
        zoom: 1.46;
    }
}

@media (min-width: 3840px) {
    .features {
        zoom: 2.0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURES MOBILE  (≤750px)
   Horizontal card layout: icon left (64px), content right
   Based on mobile mockup group-23486/87/88/89
═══════════════════════════════════════════════════════════════ */

.features__mobile {
    display: none;
}

/* ── Switch ──
   zoom reset: desktop breakpoints set zoom:0.44 on .features,
   which would scale the mobile block too. */
@media (max-width: 750px) {
    .features {
        zoom: 1;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .features__stage {
        display: none;
    }

    .features__mobile {
        display: block;
        position: relative;
        /* left 52px = 14px (line) + 38px (connector).
           right 16px = standard mobile gutter.
           220px bottom: more gap between last card and diagonal;
           right vertical in SVG is very short (~50px) so tail stays compact. */
        padding: 40px 16px 220px 52px;
    }
}

/* ── Stripe — same vector-40.svg as desktop ──────────────────────
   SVG path (803×1693): vertical line at x=1–2 from y=0→1291,
   then diagonal to x=802 at y=1387 (the tail), then vertical.
   We render the SVG as <img height="100%" width="auto"> so it
   scales proportionally to the section height.
   At ~750px section height: img ≈ 355px wide.
   The line at x=1 lands at x≈0.4px inside the stripe-col — so
   positioning stripe-col at left:14px puts the line at x≈14px,
   matching the connector (left:-38px, width:38px) that bridges
   to cards at padding-left:52px.
   overflow:visible — lets the diagonal tail extend rightward.     */
.features__m-stripe-col {
    position: absolute;
    left: 14px;   /* SVG line (x≈1) appears at x≈14px on screen */
    right: 0;
    top: 0;
    bottom: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.features__m-stripe {
    position: absolute;
    inset: 0;
    background-image: url(../img/vector-40-m.svg);
    background-size: auto 100%;  /* height = section height; width proportional */
    background-repeat: no-repeat;
    background-position: left top;
    opacity: 0.85;
}

@media (max-width: 550px) {
    .features__m-stripe {
        background-image: url(../img/vector-40-1m.svg);
    }

    .features__mobile {
        padding-bottom: 150px;
    }
}

/* ── Section heading ── */
.features__m-heading {
    color: var(--white-solid);
    font-family: var(--font-montserrat), sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1;
    margin: 0 0 24px 0; /* padding-left on parent handles indent */
}

/* Separators: bridge from SVG line (at x≈14 on screen) to card left
   edge at x=52 (= section padding-left).
   width 38px = 52 - 14.                                             */
.features__m-card::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 18px;
    width: 38px;
    height: 2px;
    background: linear-gradient(to right, rgba(24,129,225,0.9), rgba(24,129,225,0.5));
    z-index: 2;
}

/* ── Cards list ── */
.features__m-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    z-index: 1;
    margin-bottom: 10px;
    min-height: 170px;
}

.features__m-card:last-child {
    margin-bottom: 0;
}

/* Card background */
.features__m-card-bg {
    position: absolute;
    inset: 0;
    background-color: var(--eerie-black);
    border-radius: 16px;
    overflow: hidden;
    z-index: 0;
}

.features__m-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100%);
}

/* Icon */
.features__m-icon {
    position: relative;
    z-index: 1;
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    object-fit: contain;
    overflow: visible;
    margin-top: 20px;
}

/* Content block */
.features__m-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Number + title on same row */
.features__m-meta {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.features__m-num {
    color: rgba(1, 114, 253, 0.9);
    font-family: var(--font-montserrat), sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    flex-shrink: 0;
}

.features__m-title {
    color: var(--white-solid);
    font-family: var(--font-montserrat), sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
    line-height: 1.2;
    margin: 0;
}

.features__m-text {
    color: var(--silver-chalice);
    font-family: var(--font-raleway), sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.4px;
    line-height: 1.5;
    margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL-TRIGGERED ENTRANCE ANIMATIONS — Current Flow
   Electricity metaphor: stripe (PCB trace) powers up top→bottom,
   each sep (wire) charges left→right with a leading-edge spark,
   then the card below it "powers on" with an electric flash.
   JS adds .features--animated → enables hidden states.
   JS adds .is-visible to all at once → animation-delay sequences them.
═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────── */

/* Background stripe: PCB trace powers up top→bottom at constant rate.
   linear easing = visible constant fill, not an instant flash.
   Brightness burst fires only when fill completes (88%→100%).        */
@keyframes stripe-glow {
    0% {
        clip-path: inset(0 0 100% 0);
        filter: brightness(1);
    }
    88% {
        clip-path: inset(0 0 0% 0);
        filter: brightness(1.5) saturate(1.3);
    }
    100% {
        clip-path: inset(0 0 0% 0);
        filter: brightness(1);
    }
}

/* Horizontal wire: grows left→right, spark glows on the leading edge */
@keyframes wire-charge {
    0% {
        width: 0;
        box-shadow: none;
    }
    45% {
        width: 70px;
        box-shadow: 6px 0 14px 5px rgba(74, 180, 255, 0.95),
        6px 0 32px 10px rgba(24, 129, 225, 0.55);
    }
    78% {
        width: 115px;
        box-shadow: 3px 0 7px 2px rgba(74, 180, 255, 0.35);
    }
    100% {
        width: 115px;
        box-shadow: none;
    }
}

/* Card: slides in from left, hits bright like a neon tube switching on */
@keyframes power-on {
    0% {
        opacity: 0;
        transform: translateX(-20px);
        filter: brightness(0);
    }
    18% {
        opacity: 1;
        transform: translateX(3px);
        filter: brightness(2.8) saturate(1.6);
    }
    38% {
        transform: translateX(0);
        filter: brightness(1.6);
    }
    65% {
        filter: brightness(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: brightness(1);
    }
}

/* ── Initial hidden states (only when JS is active) ─────────── */

.features--animated .features__stripe {
  clip-path: inset(0 0 100% 0);
}

.features--animated .features__sep {
  width: 0;
}

.features--animated .features__card {
  opacity: 0;
  transform: translateX(-14px);
}

/* ── Visible states: trigger animations ─────────────────────── */

.features__stripe.is-visible {
  /* duration overridden by JS inline style (speed-aware) */
  animation-name:            stripe-glow;
  animation-duration:        1.6s;          /* JS fallback default */
  animation-timing-function: linear;
  animation-fill-mode:       both;
}

.features__sep.is-visible {
  /* duration overridden by JS inline style (speed-aware) */
  animation-name:            wire-charge;
  animation-duration:        0.45s;         /* JS fallback default */
  animation-timing-function: ease-out;
  animation-fill-mode:       both;
}

.features__card.is-visible {
  /* duration overridden by JS inline style (speed-aware) */
  animation-name:            power-on;
  animation-duration:        0.3s;          /* JS fallback default */
  animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
  animation-fill-mode:       both;
}

/* ── Animation timing: fully controlled by features-anim.js ─────
   JS calculates all delays based on scroll velocity at trigger
   moment and sets animation-duration via inline style.
   Sequential: block N+1 only starts after block N finishes.      */

/* ── Reduced motion: instant reveal, no animation ───────────── */

@media (prefers-reduced-motion: reduce) {
    .features__stripe.is-visible,
    .features__sep.is-visible,
    .features__card.is-visible {
        animation: none;
    }

    .features__stripe.is-visible {
        clip-path: inset(0 0 0% 0);
    }

    .features__sep.is-visible {
        width: 115px;
    }

    .features__card.is-visible {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HOVER POLISH
═══════════════════════════════════════════════════════════════ */

/* Subtle border glow on card background */
.features__card-bg {
  transition: box-shadow 0.35s ease;
}

.features__card:hover .features__card-bg {
  box-shadow: inset 0 0 0 1px rgba(1, 114, 253, 0.4);
}

/* Extra gradient overlay appears on hover */
.features__card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    169deg,
    rgba(1, 114, 253, 0.20) 0%,
    rgba(1, 114, 253, 0)    45%
  );
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.features__card:hover .features__card-bg::after {
  opacity: 1;
}

/* Icon scale on hover */
.features__card-icon {
  transition: transform 0.35s ease;
}

.features__card:hover .features__card-icon {
  transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SCROLL-TRIGGERED ANIMATIONS
   Reuses stripe-glow / wire-charge / power-on keyframes above.
   JS adds .features--m-animated to .features__mobile to enable
   hidden states, then adds .is-visible to each element in sequence.
═══════════════════════════════════════════════════════════════ */

/* ── Initial hidden states ─────────────────────────────────── */

.features--m-animated .features__m-stripe {
    clip-path: inset(0 0 100% 0);
}

.features--m-animated .features__m-card::before {
    width: 0;
}

.features--m-animated .features__m-card {
    opacity: 0;
    transform: translateX(-16px);
}

/* ── Mobile vertical stripe reveal ────────────────────────── */

.features__m-stripe.is-visible {
    animation-name: stripe-glow;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

/* ── Mobile separator wire-charge (::before on each card) ─── */

@keyframes wire-charge-m {
    0% {
        width: 0;
        box-shadow: none;
    }
    45% {
        width: 22px;
        box-shadow: 5px 0 12px 4px rgba(74,180,255,0.95),
                    5px 0 24px 8px rgba(24,129,225,0.55);
    }
    78% {
        width: 38px;
        box-shadow: 3px 0 6px 2px rgba(74,180,255,0.35);
    }
    100% {
        width: 38px;
        box-shadow: none;
    }
}

.features__m-card.is-visible::before {
    animation-name: wire-charge-m;
    animation-duration: 0.45s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

/* ── Mobile card power-on ──────────────────────────────────── */

.features__m-card.is-visible {
    animation-name: power-on;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
    animation-fill-mode: both;
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .features__m-stripe.is-visible {
        animation: none;
        clip-path: inset(0 0 0% 0);
    }

    .features__m-card.is-visible::before {
        animation: none;
        width: 38px;
    }

    .features__m-card.is-visible {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ── Mobile card hover ──────────────────────────────────────── */

.features__m-card-bg {
    transition: box-shadow 0.35s ease;
}

.features__m-card:hover .features__m-card-bg {
    box-shadow: inset 0 0 0 1px rgba(1, 114, 253, 0.4);
}

.features__m-icon {
    transition: transform 0.35s ease;
}

.features__m-card:hover .features__m-icon {
    transform: scale(1.06);
}