/* pixel-art.css — CSS-only pixel art utilities */

/* ── Hide before Alpine.js initialises ── */
[x-cloak] { display: none !important; }

/* ── CRT scanlines (full-screen fixed overlay) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0, 0, 0, 0.13) 3px, rgba(0, 0, 0, 0.13) 4px
  );
  z-index: 9999;
}

/* ── CRT vignette ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.70) 100%
  );
  z-index: 9998;
}

/* ══════════════════════════════════════════════
   Brass panel frame  (two-div system)
   Usage:
     <div class="px-frame-outer">
       <div class="px-frame-inner">…content…</div>
     </div>
   ══════════════════════════════════════════════ */
.px-frame-outer {
  background: linear-gradient(
    145deg,
    var(--c-brass-light),
    var(--c-brass)   30%,
    var(--c-copper)  65%,
    var(--c-brass-deep)
  );
  padding: 3px;
  /* Octagonal chamfered corners — 16-bit arcade panel look */
  clip-path: polygon(
    14px 0%,   calc(100% - 14px) 0%,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0% calc(100% - 14px), 0% 14px
  );
  /* drop-shadow respects clip-path boundary */
  filter:
    drop-shadow(0 28px 56px rgba(0, 0, 0, 0.90))
    drop-shadow(0  0  24px rgba(212, 160, 23, 0.14));
}

.px-frame-inner {
  clip-path: polygon(
    11px 0%,   calc(100% - 11px) 0%,
    100% 11px, 100% calc(100% - 11px),
    calc(100% - 11px) 100%, 11px 100%,
    0% calc(100% - 11px), 0% 11px
  );
  background: linear-gradient(180deg, #181818 0%, var(--c-dark) 20%);
  position: relative;
  padding: 2rem;
}

/* ── Small frame variant  (avatar, icons) ── */
.px-frame-outer-sm {
  background: linear-gradient(
    145deg,
    var(--c-brass-light),
    var(--c-copper)    50%,
    var(--c-brass-deep)
  );
  padding: 3px;
  clip-path: polygon(
    8px 0%,   calc(100% - 8px) 0%,
    100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%,
    0% calc(100% - 8px), 0% 8px
  );
  filter: drop-shadow(0 0 10px rgba(212, 160, 23, 0.40));
  display: inline-block;
}

.px-frame-inner-sm {
  clip-path: polygon(
    5px 0%,   calc(100% - 5px) 0%,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0% calc(100% - 5px), 0% 5px
  );
  background: var(--c-dark);
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════
   Brass rivets  (place inside .px-frame-inner)
   ══════════════════════════════════════════════ */
.rivet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 38%,
    var(--c-brass-light),
    var(--c-brass)      55%,
    var(--c-brass-deep)
  );
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.70),
    0 0 4px rgba(212, 160, 23, 0.50);
  pointer-events: none;
  z-index: 5;
}
.rivet-tl { top: 10px;    left:  10px;  }
.rivet-tr { top: 10px;    right: 10px;  }
.rivet-bl { bottom: 10px; left:  10px;  }
.rivet-br { bottom: 10px; right: 10px;  }

/* ══════════════════════════════════════════════
   Decorative elements
   ══════════════════════════════════════════════ */

/* Pixel dashed divider */
.px-divider {
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--c-brass-deep) 0px, var(--c-brass-deep) 4px,
    transparent 4px,        transparent 8px
  );
  opacity: 0.65;
}

/* Spinning brass gear */
.gear-spin {
  display: inline-block;
  color: var(--c-brass);
  opacity: 0.75;
  line-height: 1;
  animation: gearSpin 12s linear infinite;
}
.gear-spin-r { animation-direction: reverse; }

@keyframes gearSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Inner card top accent line */
.px-accent-bar {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--c-brass-deep) 20%,
    var(--c-brass)      50%,
    var(--c-brass-deep) 80%,
    transparent
  );
  opacity: 0.55;
}

/* ══════════════════════════════════════════════
   Animations
   ══════════════════════════════════════════════ */

/* Fade-in  (re-fires when element goes from display:none → visible) */
.fade-in {
  animation: fadeIn 0.25s ease-out both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Pulsing logo glow */
@keyframes logoGlow {
  from { text-shadow: 2px 2px 0 var(--c-brass), 4px 4px 0 var(--c-brass-deep), 0 0 20px rgba(255, 45, 120, 0.20); }
  to   { text-shadow: 2px 2px 0 var(--c-brass), 4px 4px 0 var(--c-brass-deep), 0 0 60px rgba(255, 45, 120, 0.65); }
}

/* Blink (e.g. "INSERT COIN") */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.blink { animation: blink 1.1s step-end infinite; }