/* ==========================================================================
   Features  —  Figma "Features - Animate" (713:226870)
   1920 x 1190 at y 3654, over the grey backdrop.

   Six panels on one row (1825 wide, 20px gaps). The open panel is 595 wide
   and shows a blueprint mark, a 32px title and body copy; the five closed
   panels are 226 wide and show only their number and a small label.

   Default -> Animate:
     glow          opacity 0 -> .1, rises 197
     eyebrow       translateX -220 -> 0
     h2            translateY +140 -> 0
     left copy     translateY +110 -> 0
     right copy    translateY  +80 -> 0
     open panel    width  24 -> 595
     closed panels height 46 -> 700, anchored to the baseline
   ========================================================================== */

.features {
  top: calc(3654 * var(--s));
  height: calc(1190 * var(--s));
  overflow: hidden;
  z-index: 2;
}

/* --- blue glow ----------------------------------------------------------- */

.features__glow {
  position: absolute;
  left: calc(1040 * var(--s));
  top: calc(165 * var(--s));
  width: calc(800 * var(--s));
  height: calc(800 * var(--s));
  overflow: hidden;
  pointer-events: none;
}
/* Primary blue at the 0.1 opacity Figma specifies — unchanged. The vector is
   now carried by four .dotring layers (base.css) so it turns like the hero. */
.features__glow-inner {
  position: absolute;
  inset: 0;
  --ring-fill: #0063E0;
  opacity: 0;
  transform: translateY(calc(197 * var(--s)));
  transition:
    opacity calc(var(--rv-dur) * 1.3) var(--rv-ease),
    transform calc(var(--rv-dur) * 1.3) var(--rv-ease);
}
.features.is-in .features__glow-inner { opacity: 0.1; transform: none; }

/* --- head ---------------------------------------------------------------- */

.features__eyebrow {
  position: absolute;
  left: calc(1124 * var(--s));
  top: calc(33 * var(--s));
  width: calc(215 * var(--s));
  height: calc(19 * var(--s));
  color: var(--c-mono-dark);
  white-space: nowrap;
}

.features__title {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(20 * var(--s));
  width: calc(838 * var(--s));
  height: calc(154 * var(--s));
}
.features__title h2 {
  font-weight: 300;
  font-size: calc(64 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-3.2 * var(--s));
  color: var(--c-mono-dark);
}

.features__copy { position: absolute; }
.features__copy p {
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: #767676;
}
.features__copy--l { left: calc(48 * var(--s));  top: calc(238 * var(--s)); width: calc(408 * var(--s)); height: calc(112 * var(--s)); }
.features__copy--r { left: calc(509 * var(--s)); top: calc(238 * var(--s)); width: calc(441 * var(--s)); height: calc(84 * var(--s)); }

/* --- panel row ----------------------------------------------------------- */

.features__row {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(470 * var(--s));
  width: calc(1825 * var(--s));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.f-card {
  position: relative;
  flex: none;
  width: calc(226 * var(--s));
  height: calc(700 * var(--s));
  background: var(--c-mono-white);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transition:
    width  calc(var(--rv-dur) * 0.75) var(--rv-ease),
    height calc(var(--rv-dur) * 0.9)  var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.6) var(--rv-ease);
}
.f-card.is-open { width: calc(595 * var(--s)); }

/* pre-reveal: closed panels are 46 tall, the open one is a 24px sliver */
.features:not(.is-in) .f-card { height: calc(46 * var(--s)); }
.features:not(.is-in) .f-card.is-open { width: calc(24 * var(--s)); height: calc(700 * var(--s)); }
.features.is-in .f-card { opacity: 1; height: calc(700 * var(--s)); }

.f-card__num {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(32 * var(--s));
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: #0063E0;
  white-space: nowrap;
}
.f-card__num .kern-slash { letter-spacing: calc(2.72 * var(--s)); }

.f-card__mark {
  position: absolute;
  right: calc(32 * var(--s));
  top: calc(32 * var(--s));
  width: calc(189 * var(--s));
  height: calc(189 * var(--s));
  /* The icons are inlined with stroke:currentColor, so the Figma blue is set
     once here rather than baked into six files. */
  color: #0063E0;
  opacity: 0;
  transition: opacity calc(var(--ui-dur) * 1.2) var(--ui-ease);
}
.f-card.is-open .f-card__mark { opacity: 1; }
.f-card__mark .f-icon { display: block; width: 100%; height: 100%; }

/* --- the icon draws itself in --------------------------------------------
   The mark is only ever on screen while the card is open, so holding it
   undrawn until then changes nothing about the closed card.

   Every shape carries pathLength="1" (tools/mark_linedraw.py), so one
   dasharray draws all of them whatever their real length, and --i is the
   order. Pace comes from the shared --linedraw tokens, so this and the About
   page's standards stay in step with each other. */
.f-card__mark :is(path, rect, circle, ellipse, line, polyline, polygon) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.f-card.is-open .f-card__mark :is(path, rect, circle, ellipse, line, polyline, polygon) {
  animation: ocularai-linedraw var(--linedraw-dur) var(--rv-ease) forwards;
  animation-delay: calc(var(--i, 0) * var(--linedraw-step));
}

@media (prefers-reduced-motion: reduce) {
  .f-card__mark :is(path, rect, circle, ellipse, line, polyline, polygon) {
    stroke-dashoffset: 0;
  }
  .f-card.is-open .f-card__mark :is(path, rect, circle, ellipse, line, polyline, polygon) {
    animation: none;
  }
}

.f-card__title {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(584 * var(--s));
  width: calc(153 * var(--s));
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.4;
  letter-spacing: calc(-0.48 * var(--s));
  color: #767676;
  transition:
    top var(--ui-dur) var(--ui-ease),
    width var(--ui-dur) var(--ui-ease),
    font-size var(--ui-dur) var(--ui-ease),
    letter-spacing var(--ui-dur) var(--ui-ease),
    line-height var(--ui-dur) var(--ui-ease),
    color var(--ui-dur) var(--ui-ease);
}
/* Figma boxes this at 339px, which wraps "Real-Time Emergency Response"
   (needs 425) and "A La Carte Monitoring Services" (393). The open panel has
   531px of inner width, so the heading gets all of it and stays on one line. */
.f-card.is-open .f-card__title {
  top: calc(500 * var(--s));
  width: calc(531 * var(--s));
  font-size: calc(32 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.6 * var(--s));
  color: var(--c-mono-dark);
  white-space: nowrap;
}

.f-card__body {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(562 * var(--s));
  width: calc(523 * var(--s));
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.4;
  letter-spacing: calc(-0.48 * var(--s));
  color: #767676;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ui-dur) var(--ui-ease);
}
.f-card.is-open .f-card__body { opacity: 1; pointer-events: auto; }

.f-card:focus-visible { outline: 2px solid #0063E0; outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .features__glow-inner { opacity: 0.1; transform: none; transition: none; }
  .f-card { transition: none; }
}

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1500px) {
  .features__title h2 { font-size: calc(52 * var(--s)); }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .features { height: auto; padding: 56px 20px 64px; background: var(--c-light-grey); }
  .features__glow { display: none; }

  .features__eyebrow,
  .features__title,
  .features__copy,
  .features__row { position: static; width: auto; height: auto; }

  .features__eyebrow { font-size: 12px; }
  .features__title { margin-top: 16px; }
  .features__title h2 { font-size: clamp(30px, 8vw, 44px); letter-spacing: -0.05em; }
  .features__copy { margin-top: 20px; }
  .features__copy p { font-size: 16px; }

  /* The horizontal accordion becomes a vertical one. */
  .features__row { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
  .f-card { width: 100% !important; height: auto !important; padding: 20px; }
  .features:not(.is-in) .f-card,
  .features.is-in .f-card { height: auto !important; }

  .f-card__num,
  .f-card__title,
  .f-card__body,
  .f-card__mark { position: static; width: auto; }

  .f-card__mark { display: none; }
  .f-card__title { margin-top: 10px; font-size: 20px !important; color: var(--c-mono-dark) !important; letter-spacing: -0.02em !important; white-space: normal !important; width: auto !important; }
  .f-card__body {
    margin-top: 10px;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--ui-dur) var(--ui-ease), opacity var(--ui-dur) var(--ui-ease);
  }
  .f-card__body > span { overflow: hidden; }
  .f-card.is-open .f-card__body { grid-template-rows: 1fr; opacity: 1; }
}