/* ════════════════════════════════════════════════════════════════════════════
   InterbankOS Terminal · plexiglass material
   ────────────────────────────────────────────────────────────────────────────
   The signature card surface. Four stacked layers simulate real plexiglass:

     1. Translucent base — backdrop-blur + saturation lets the page bleed
        through with a faint chromatic boost
     2. Inner top-edge highlight — 1px near-white line simulates the bright
        edge a piece of plexiglass would catch from above
     3. Iridescent gradient overlay — multi-stop hue cycle driven by the
        --iris-angle custom property, animated through @keyframes for
        genuine chromatic drift as if light were moving across the surface
     4. Specular corner highlight — radial gradient at top-left simulates
        the reflection of an overhead light source

   Applied via the .plexi class with optional .plexi-strong and .plexi-hover
   modifiers. Every card in the terminal uses this material.
   ════════════════════════════════════════════════════════════════════════════ */

.plexi {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-edge-dim);
  border-radius: var(--r-4);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
    var(--shadow-rest);
  overflow: hidden;
  isolation: isolate;
}

/* Iridescent gradient overlay. Six gradient stops cycle through the four
   chromatic tints (cyan, iris, mint, blue) with transparent breaks between
   them. The mix-blend-mode: overlay preserves the white substrate while
   adding chroma. The animation drifts the gradient angle through the
   --iris-angle property — registered in tokens.css via @property — so
   the browser can interpolate it smoothly. */
.plexi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--iris-angle, 135deg),
    var(--tint-cyan) 0%,
    transparent 18%,
    var(--tint-iris) 36%,
    transparent 54%,
    var(--tint-mint) 72%,
    transparent 90%,
    var(--tint-blue) 100%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: iris-drift var(--dur-iris) ease-in-out infinite alternate;
  z-index: 0;
}

/* Specular corner reflection — sits at top-left where an overhead light
   source would create a highlight on real plexiglass */
.plexi::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 40%;
  background: radial-gradient(
    ellipse at top left,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.2) 30%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* All direct content sits above the material layers */
.plexi > * {
  position: relative;
  z-index: 1;
}

/* Strong variant — heavier blur, more opaque base, deeper shadow.
   Used for hero panels and the transact composition where focus is wanted. */
.plexi-strong {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    var(--shadow-lift);
}

/* Hover variant — applied to interactive plexi surfaces; lifts on hover */
.plexi-hover {
  transition: box-shadow var(--dur-state) var(--ease-out),
              transform var(--dur-state) var(--ease-out);
}
.plexi-hover:hover {
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
    var(--shadow-lift);
  transform: translateY(-1px);
}

/* The iris-drift animation. Rotates the gradient angle through 160° over
   six seconds, reverses direction, and repeats. The opacity wobble adds
   a very subtle pulse that reads as light passing across the surface. */
@keyframes iris-drift {
  0%   { --iris-angle: 120deg; opacity: 0.85; }
  50%  { --iris-angle: 200deg; opacity: 1; }
  100% { --iris-angle: 280deg; opacity: 0.9; }
}

/* Reduced-motion: keep the chromatic overlay but freeze the animation */
@media (prefers-reduced-motion: reduce) {
  .plexi::before {
    animation: none;
  }
}