/* ==========================================================================
   Features page
   --------------------------------------------------------------------------
   Scoped to .page-features so nothing here leaks into the shared header,
   footer or any other page. Section headings use the site-wide
   `.section-title > .title` pattern from main.css and are not restyled here.

   Accent: the page reads violet rather than the site's amber. That is not a
   departure — the four feature icons (fea-01..04.svg) are already drawn in
   #1730FF / #232DE3 / #1BB8FF, and the three pillar renders are violet
   chrome. An amber ring around a blue icon was the actual mismatch; the
   accent below matches the artwork the page is made of. Amber is untouched
   everywhere else, and the tokens stay page-local for that reason.
   ========================================================================== */

.page-features {
  --fx-accent: #7b5cff;
  --fx-accent-bright: #a78bfa;
  --fx-soft: rgba(123, 92, 255, 0.16);
  --fx-line: rgba(138, 108, 255, 0.34);
  --fx-glow: 0 0 42px rgba(123, 92, 255, 0.3);

  /* Set by features.js from the pointer position; these are the rest values,
     so every rule below is fully defined before the script ever runs. */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glare-x: 50%;
  --glare-y: 0%;
}

/* ==========================================================================
   Shared 3D behaviour
   --------------------------------------------------------------------------
   `perspective()` is applied per card rather than on the grid: a shared
   perspective on the container gives every card the same vanishing point, so
   cards at the edges of a three-up row shear badly. Per-card keeps each one
   looking at its own viewer.
   ========================================================================== */

.page-features .feature-wrap,
.page-features .pillar-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glare-x: 50%;
  --glare-y: 0%;

  position: relative;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
  will-change: transform;
}

/* The sheen is a separate element rather than a pseudo-element because the
   cards already spend both of theirs, and because it has to sit on its own
   Z plane between the card face and the content. */
.page-features .feature-wrap__sheen,
.page-features .pillar-card__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--glare-x) var(--glare-y),
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0) 45%
  );
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: 2;
}

.page-features .feature-wrap:hover .feature-wrap__sheen,
.page-features .pillar-card:hover .pillar-card__sheen,
.page-features .feature-wrap:focus-within .feature-wrap__sheen,
.page-features .pillar-card:focus-within .pillar-card__sheen {
  opacity: 1;
}

/* Motion is decoration here. Without it the cards keep every colour and
   depth cue and simply stop moving. */
@media (prefers-reduced-motion: reduce) {
  .page-features .feature-wrap,
  .page-features .pillar-card {
    transform: none;
    will-change: auto;
  }

  .page-features .feature-wrap:hover,
  .page-features .pillar-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Feature cards — the four-up grid
   ========================================================================== */

.page-features .feature-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 35px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  /* Three stacked shadows: a tight contact shadow, a wide ambient one, and an
     inset top edge that reads as a lit bevel. Together they give the card a
     thickness that a single box-shadow cannot. */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 14px 32px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Deliberately NOT `overflow: hidden`. Any overflow other than visible makes
   an element a grouping element, and a grouping element flattens its
   descendants' 3D regardless of `transform-style` — which would quietly
   collapse every translateZ below into the card face. The decorative layers
   are sized to the border box and inherit its radius instead, so they clip
   themselves without the card ever having to. */
.page-features .feature-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, var(--fx-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.page-features .feature-wrap:hover::before,
.page-features .feature-wrap:focus-within::before {
  opacity: 1;
}

.page-features .feature-wrap:hover,
.page-features .feature-wrap:focus-within {
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateY(-8px);
  border-color: var(--fx-line);
  background: var(--gradient-surface-hover);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.34),
    0 26px 54px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    var(--fx-glow);
}

/* Lifting the content off the card face is what sells the tilt — the copy and
   the icon travel at different rates to the panel behind them. */
.page-features .feature-wrap .xb-item--holder {
  position: relative;
  /* main.css adds a top margin to .xb-item--holder for a different layout. */
  margin: 0;
  transform: translateZ(24px);
  z-index: 1;
}

.page-features .feature-wrap .xb-item--title {
  margin: 0 0 10px;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--color-heading);
}

.page-features .feature-wrap .xb-item--content {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-default);
}

/* --- Feature artwork -----------------------------------------------------
   A 46px glyph in a 90px ring became a staged 3D render, matching the pillar
   cards below. The four differ in aspect (320×268, 291×320, 320×276,
   320×194), so the stage fixes the height and the art is sized by
   `max-height` — matching widths instead would leave the landscape fee
   medallion towering over the portrait terminal.

   preserve-3d here too: the art is a grandchild of the card, and a flat
   parent would collapse its translateZ into this plane.
   ------------------------------------------------------------------------ */

.page-features .feature-wrap__stage {
  position: relative;
  flex: 0 0 auto;
  /* main.css offsets this slot for a different layout. */
  margin: 0;
  padding: 0;
  /* Wide enough that height is the only binding constraint. The widest render
     is the fee medallion at 320×194 — at 108px tall it resolves to 178px, so
     a narrower stage would clamp it on width instead and leave it shorter
     than the other three. */
  width: 180px;
  height: 108px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateZ(40px);
  transform-style: preserve-3d;
  z-index: 1;
}

/* The floor the object stands on, centred so it tracks whatever width the
   render resolves to. */
.page-features .feature-wrap__stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 84%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(123, 92, 255, 0.42),
    rgba(123, 92, 255, 0) 70%
  );
  filter: blur(5px);
  transition:
    width var(--transition-base),
    opacity var(--transition-base);
  z-index: -1;
}

.page-features .feature-wrap__art {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translateZ(22px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
  transition: transform var(--transition-slow);
}

.page-features .feature-wrap:hover .feature-wrap__art,
.page-features .feature-wrap:focus-within .feature-wrap__art {
  transform: translateZ(40px) scale(1.07);
}

.page-features .feature-wrap:hover .feature-wrap__stage::after,
.page-features .feature-wrap:focus-within .feature-wrap__stage::after {
  width: 96%;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .page-features .feature-wrap:hover .feature-wrap__art,
  .page-features .feature-wrap:focus-within .feature-wrap__art {
    transform: translateZ(22px);
  }
}

/* Two-up: the icon sits beside the copy, so each card needs a wide column. */
.page-features .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: var(--space-md);
}

/* ==========================================================================
   Pillar cards — "Who We're Built For"
   --------------------------------------------------------------------------
   Each render is cropped tight to its subject, so the card supplies the
   staging the art no longer carries: a fixed-height stage keeps the three
   optically level despite their differing aspects (432×440, 403×440,
   354×440), and a floor ellipse under each one grounds the object instead of
   leaving it hovering in the panel.
   ========================================================================== */

.page-features .pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-md);
}

.page-features .pillar-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 14px 32px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* The aurora behind the art. Anchored high in the card, where the object is,
   so the glow reads as light coming off the render rather than a panel wash.

   Sized to the border box and clipped by the inherited radius — see the note
   on .feature-wrap::before for why the card cannot simply hide its overflow. */
.page-features .pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 8%,
    rgba(123, 92, 255, 0.26),
    rgba(123, 92, 255, 0) 58%
  );
  opacity: 0.6;
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: 0;
}

.page-features .pillar-card:hover,
.page-features .pillar-card:focus-within {
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateY(-10px);
  border-color: var(--fx-line);
  background: var(--gradient-surface-hover);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.34),
    0 30px 60px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    var(--fx-glow);
}

.page-features .pillar-card:hover::before,
.page-features .pillar-card:focus-within::before {
  opacity: 1;
}

/* preserve-3d here as well as on the card: the art is a grandchild, and a flat
   parent would collapse its translateZ into this plane. */
.page-features .pillar-card__stage {
  position: relative;
  height: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 26px;
  transform: translateZ(30px);
  transform-style: preserve-3d;
  z-index: 1;
}

/* The floor the object stands on. Blurring a flat ellipse is cheaper than a
   second render and tracks the accent colour. */
.page-features .pillar-card__stage::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 62%;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(123, 92, 255, 0.42),
    rgba(123, 92, 255, 0) 70%
  );
  filter: blur(5px);
  transition:
    width var(--transition-base),
    opacity var(--transition-base);
  z-index: -1;
}

.page-features .pillar-card:hover .pillar-card__stage::after,
.page-features .pillar-card:focus-within .pillar-card__stage::after {
  width: 72%;
  opacity: 0.85;
}

/* `max-height` rather than a width: the three renders differ in aspect, and
   matching their heights is what lines the row up. */
.page-features .pillar-card__art {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  transform: translateZ(52px);
  transition: transform var(--transition-slow);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
}

.page-features .pillar-card:hover .pillar-card__art,
.page-features .pillar-card:focus-within .pillar-card__art {
  transform: translateZ(72px) scale(1.06);
}

.page-features .pillar-card__body {
  position: relative;
  transform: translateZ(20px);
  z-index: 1;
}

.page-features .pillar-card__title {
  margin: 0 0 10px;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--color-heading);
}

.page-features .pillar-card__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-default);
}

/* ==========================================================================
   Narrow screens
   --------------------------------------------------------------------------
   The tilt is already off here (features.js binds only to fine pointers), so
   these are layout changes only.
   ========================================================================== */

@media (max-width: 767px) {
  .page-features .feature-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    border-radius: var(--radius-md);
  }

  .page-features .feature-wrap .xb-item--holder {
    order: 2;
  }

  /* Stacked and centred, the render leads the card. */
  .page-features .feature-wrap__stage {
    order: 1;
    width: 160px;
    height: 96px;
    margin-bottom: 8px;
  }

  .page-features .feature-wrap .xb-item--content {
    font-size: var(--text-sm);
  }

  .page-features .pillar-card {
    padding: 32px 24px 30px;
    border-radius: var(--radius-md);
    text-align: center;
  }

  .page-features .pillar-card__stage {
    height: 168px;
    margin-bottom: 22px;
  }

  .page-features .pillar-card__text {
    font-size: var(--text-sm);
  }
}