/* Recharge4Me — material
 *
 * Three ideas, no more. A scratch card is a cheap physical object: it has
 * grain, its foil catches light, and its numbers are hard to read until
 * they are not. Anything beyond that starts performing rather than
 * describing. */

/* ── 1. Grain ──────────────────────────────────────────────────
 * A flat dark page reads as a screen. A little noise reads as printed
 * card stock. Kept very low — visible as texture, never as dirt. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Everything real sits above the grain. */
.site-head,
main,
.site-foot {
  position: relative;
  z-index: 2;
}

/* ── 2. Foil ───────────────────────────────────────────────────
 * Real foil is directional: tilt the card and the highlight travels
 * across it. The panel tracks the pointer, and drifts slowly on its own
 * when nothing is happening, so it looks like a surface rather than a
 * grey rectangle. */
.panel-wrap,
.scratch {
  position: relative;
  overflow: hidden;
}

.panel-wrap::after,
.scratch::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120px 90px at var(--foil-x, 50%) var(--foil-y, 40%),
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0.12) 45%,
    transparent 72%
  );
  opacity: 0.9;
  transition: opacity 0.4s ease;
}

/* A slow idle drift, so the foil is alive before anyone touches it. */
@keyframes r4m-foil-drift {
  0%   { --foil-x: 22%; }
  50%  { --foil-x: 78%; }
  100% { --foil-x: 22%; }
}

@property --foil-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.panel-wrap.r4m-idle,
.scratch.r4m-idle {
  animation: r4m-foil-drift 7s ease-in-out infinite;
}

/* On a device with a real pointer, the panel is something you scratch. */
@media (hover: hover) and (pointer: fine) {
  .panel-wrap,
  .scratch {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='11' fill='%23C9A227' stroke='%238A6D14' stroke-width='2'/%3E%3Ccircle cx='15' cy='15' r='6' fill='none' stroke='%238A6D14' stroke-width='1.5'/%3E%3C/svg%3E") 15 15, grab;
  }
}

/* ── 3. Digits ─────────────────────────────────────────────────
 * The PIN settles character by character, the way the app resolves a
 * reading across several frames. This is the one animation on the page
 * that is describing the product rather than decorating it. */
.r4m-digit {
  display: inline-block;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.r4m-digit.r4m-settled {
  opacity: 1;
  transform: none;
}

.r4m-digit.r4m-scanning {
  opacity: 0.55;
  transform: none;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .panel-wrap.r4m-idle,
  .scratch.r4m-idle {
    animation: none;
  }
  .panel-wrap::after,
  .scratch::after {
    --foil-x: 45%;
  }
  .r4m-digit,
  .r4m-digit.r4m-scanning {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body::after {
    opacity: 0.03;
  }
}