/* CryptoFrame — visual depth.

   3D  subtle elevation and hover lift (defined in components.css)
   5D  layered shadows, gradient rims, pointer-reactive highlight
   7D  perspective tilt and parallax on scroll
   9D  the above plus a layered stage and animated rim light

   Everything below is CSS-first. The optional depth.js only writes two custom
   properties (--cfx-px, --cfx-py) and toggles an .is-inview class; with
   JavaScript disabled the styles degrade to static depth rather than breaking.
   prefers-reduced-motion disables every transform and animation. */

.cfx-depth-5d .cfx-card,
.cfx-depth-7d .cfx-card,
.cfx-depth-9d .cfx-card {
  position: relative;
  box-shadow: var(--cfx-shadow-2);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}

/*
 * Rim light. This was previously a white gradient with `mix-blend-mode:
 * overlay` and a hard stop at 42%, which did two bad things: overlay against a
 * light card darkens rather than lightens, and the hard stop drew a visible
 * diagonal seam across every card. A soft, scheme-aware inset border does the
 * same job without banding.
 */
.cfx-depth-5d .cfx-card::after,
.cfx-depth-7d .cfx-card::after,
.cfx-depth-9d .cfx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 var(--cfx-rim), inset 0 0 0 1px var(--cfx-hairline);
}

.cfx-depth-5d .cfx-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cfx-shadow-3);
}

/* Pointer-reactive highlight. --cfx-px/--cfx-py default to the centre, so the
   effect is stable before any pointer event arrives. */
.cfx-depth-5d .cfx-card,
.cfx-depth-7d .cfx-card,
.cfx-depth-9d .cfx-card { --cfx-px: 50%; --cfx-py: 50%; }

.cfx-depth-7d .cfx-card::before,
.cfx-depth-9d .cfx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(18rem 18rem at var(--cfx-px) var(--cfx-py), rgba(var(--cfx-primary-rgb), .22), transparent 65%);
}
.cfx-depth-7d .cfx-card:hover::before,
.cfx-depth-9d .cfx-card:hover::before { opacity: 1; }

/*
 * The pointer highlight is a light source travelling across a photograph. A
 * card with no featured image has nothing for it to travel across, so it lands
 * on flat card colour and reads as a coloured smear rather than as depth —
 * which is exactly how it looked on glossary and RSS-feed cards. Those keep the
 * elevation and the rim, and lose the highlight.
 */
.cfx-depth-5d .cfx-card--nomedia::before,
.cfx-depth-7d .cfx-card--nomedia::before,
.cfx-depth-9d .cfx-card--nomedia::before { display: none; }

/* 7D: perspective tilt */
.cfx-depth-7d .cfx-cards,
.cfx-depth-9d .cfx-cards { perspective: 1200px; }

.cfx-depth-7d .cfx-card:hover,
.cfx-depth-9d .cfx-card:hover {
  transform: translateY(-5px) rotateX(calc((var(--cfx-py-n, 0) * -3deg))) rotateY(calc(var(--cfx-px-n, 0) * 3deg));
  box-shadow: var(--cfx-shadow-3);
}

/* Scroll reveal for the heavier levels. Elements are visible by default and only
   animate once the observer marks them, so no-JS never leaves content hidden. */
.cfx-depth-7d [data-cfx-reveal],
.cfx-depth-9d [data-cfx-reveal] {
  opacity: 1;
  transform: none;
}
.cfx-motion-normal .cfx-depth-7d [data-cfx-reveal]:not(.is-inview),
.cfx-motion-advanced .cfx-depth-7d [data-cfx-reveal]:not(.is-inview),
.cfx-motion-normal .cfx-depth-9d [data-cfx-reveal]:not(.is-inview),
.cfx-motion-advanced .cfx-depth-9d [data-cfx-reveal]:not(.is-inview) {
  opacity: 0;
  transform: translateY(14px);
}
.cfx-depth-7d [data-cfx-reveal],
.cfx-depth-9d [data-cfx-reveal] {
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* 9D: layered immersive stage */
.cfx-depth-9d .cfx-hero__immersive {
  perspective: 1400px;
  transform-style: preserve-3d;
}
.cfx-depth-9d .cfx-hero__stage {
  position: relative;
  transform: translateZ(0) translateY(calc(var(--cfx-scroll, 0) * -14px));
  transition: transform .1s linear;
}
.cfx-depth-9d .cfx-hero__deck .cfx-card {
  transform: translateZ(24px);
}
.cfx-depth-9d .cfx-hero__immersive::before {
  content: "";
  position: absolute;
  inset: -10% -4% auto -4%;
  height: 55%;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .28;
  background: radial-gradient(circle at 30% 30%, rgba(var(--cfx-primary-rgb), .38), transparent 65%),
              radial-gradient(circle at 70% 40%, rgba(var(--cfx-accent-rgb), .3), transparent 65%);
}

/* On light schemes the halo has to be quieter still or it muddies the page. */
.cfx-scheme-light .cfx-depth-9d .cfx-hero__immersive::before { opacity: .18; }

.cfx-depth-9d .cfx-section--bg-dark,
.cfx-depth-9d .cfx-section--bg-accent { position: relative; overflow: hidden; }

/* Global brakes. */
.cfx-motion-reduced .cfx-card,
.cfx-motion-reduced .cfx-hero__stage,
.cfx-perf-max .cfx-card {
  transform: none !important;
  transition: box-shadow .2s ease !important;
}
.cfx-motion-reduced [data-cfx-reveal],
.cfx-perf-max [data-cfx-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cfx-card,
  .cfx-card__img,
  .cfx-hero__stage,
  [data-cfx-reveal] {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}