/* ============================================================
   SHARED CARD FX — used by home.html and approach.html
   Opt in by putting .fx-cards on any container; every
   .discovery-wide-card and .hstep-card inside it picks this up.

   This file OWNS the card `transform`. Page-level stylesheets must
   not redeclare it — they feed it instead, through these inputs:

     --ce      0 -> 1   entry progress (home's scroll engine supplies
                        a staggered value; defaults to 1 elsewhere)
     --float   0 -> 1   idle levitation, driven by @keyframes
     --hover   0 -> 1   pointer presence
     --rx/--ry  angle   cursor tilt, written by assets/js/cards.js
     --mx/--my  pct     cursor position for the spotlight
   ============================================================ */

@property --ce {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --float {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --hover {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --rx {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --ry {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --mx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --my {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

/* ============================================================
   1. BASE SURFACE
   ============================================================ */

.fx-cards .discovery-wide-grid {
  perspective: 1200px;
}

.fx-cards .discovery-wide-card,
.fx-cards .hstep-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition:
    --rx 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    --ry 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    --hover 0.45s ease,
    background 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Track the cursor closely while it is over the card. */
.fx-cards .discovery-wide-card:hover,
.fx-cards .hstep-card:hover {
  transition:
    --rx 0.09s linear,
    --ry 0.09s linear,
    --hover 0.45s ease,
    background 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hairline of gold along the top edge, brightening on hover. */
.fx-cards .discovery-wide-card::before,
.fx-cards .hstep-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(198, 167, 94, calc(0.35 + var(--hover) * 0.65)),
    transparent
  );
}

/* Cursor-tracking gold spotlight. */
.fx-cards .discovery-wide-card::after,
.fx-cards .hstep-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--hover);
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(198, 167, 94, 0.22),
    rgba(198, 167, 94, 0.06) 38%,
    transparent 65%
  );
  transition: opacity 0.4s ease;
}

/* ============================================================
   2. TRANSFORM — the single owner
   ============================================================ */

.fx-cards .discovery-wide-card {
  transform:
    translateY(calc((1 - var(--ce)) * 40px + var(--float) * -7px))
    scale(calc(0.96 + var(--ce) * 0.04));
  opacity: var(--ce);
}

@media (hover: hover) and (pointer: fine) {
  .fx-cards .discovery-wide-card {
    transform:
      perspective(1200px)
      translateY(calc((1 - var(--ce)) * 40px + var(--float) * -7px - var(--hover) * 8px))
      scale(calc(0.96 + var(--ce) * 0.04))
      rotateX(var(--rx))
      rotateY(var(--ry));
  }

  .fx-cards .discovery-wide-card:hover,
  .fx-cards .hstep-card:hover {
    background: rgba(180, 40, 40, 0.34);
    border-color: rgba(198, 167, 94, 0.55);
    box-shadow:
      0 26px 60px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(198, 167, 94, 0.22),
      0 0 34px rgba(198, 167, 94, 0.14);
  }

  /* Contents lift off the card face in 3D. */
  .fx-cards .discovery-wide-card > *,
  .fx-cards .hstep-card > * {
    transform: translateZ(calc(var(--hover) * 26px));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ============================================================
   3. IDLE LEVITATION
   Animating a registered number folded into transform, rather
   than a box-model property, keeps this off the layout path.
   ============================================================ */

.fx-cards .discovery-wide-grid > .discovery-wide-card {
  animation: fx-float 7s ease-in-out infinite;
}

.fx-cards .discovery-wide-grid > .discovery-wide-card:nth-child(2) { animation-delay: -1.6s; }
.fx-cards .discovery-wide-grid > .discovery-wide-card:nth-child(3) { animation-delay: -3.2s; }
.fx-cards .discovery-wide-grid > .discovery-wide-card:nth-child(4) { animation-delay: -4.8s; }
.fx-cards .discovery-wide-grid > .discovery-wide-card:nth-child(5) { animation-delay: -2.4s; }
.fx-cards .discovery-wide-grid > .discovery-wide-card:nth-child(6) { animation-delay: -5.6s; }

.fx-cards .discovery-wide-card:hover {
  animation-play-state: paused;
}

@keyframes fx-float {
  0%, 100% { --float: 0; }
  50%      { --float: 1; }
}

/* ============================================================
   4. NUMERALS & ICONS
   ============================================================ */

.fx-cards .discovery-wide-num,
.fx-cards .discovery-wide-icon {
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.45s ease;
  transform-origin: left center;
}

.fx-cards .discovery-wide-card:hover .discovery-wide-num,
.fx-cards .discovery-wide-card:hover .discovery-wide-icon {
  opacity: 1;
  transform: scale(1.14);
  text-shadow: 0 0 26px rgba(198, 167, 94, 0.6);
}

/* ============================================================
   5. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .fx-cards .discovery-wide-card,
  .fx-cards .hstep-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .fx-cards .discovery-wide-card > *,
  .fx-cards .hstep-card > * {
    transform: none !important;
  }
}