/*
 * PlainReply — global styles & holographic effects
 */

/* ── Holographic / iridescent text ───────────────────────── */
@keyframes holo-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.holo-text {
  background: linear-gradient(
    135deg,
    #a78bfa, #60a5fa, #34d399, #facc15, #f472b6, #818cf8, #a78bfa
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: holo-shift 6s ease infinite;
  display: inline-block;
  padding-bottom: 0.08em;
}

/* ── Holographic card border (rainbow shimmer) ────────────── */
@keyframes border-rotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.holo-card {
  position: relative;
  z-index: 0;
}

.holo-card::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    #a78bfa, #60a5fa, #34d399, #facc15, #f472b6, #818cf8, #a78bfa
  );
  background-size: 300% 300%;
  animation: border-rotate 5s linear infinite;
  z-index: -1;
  opacity: 0.75;
}

/* ── Holographic foil badge ───────────────────────────────── */
.holo-badge {
  background: linear-gradient(
    135deg,
    #a78bfa33, #60a5fa33, #34d39933, #facc1533, #f472b633
  );
  background-size: 300% 300%;
  animation: holo-shift 4s ease infinite;
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.holo-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #a78bfa, #60a5fa, #34d399, #facc15, #f472b6);
  background-size: 300% 300%;
  animation: border-rotate 3s linear infinite;
  z-index: -1;
}

/* ── Logo dots — holographic color cycle (no movement) ──── */
@keyframes dot-holo-1 {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes dot-holo-2 {
  0%,100% { background-position: 100% 50%; }
  50%     { background-position: 0% 50%; }
}
@keyframes dot-holo-3 {
  0%,100% { background-position: 50% 0%; }
  50%     { background-position: 50% 100%; }
}

.logo-dot-1 {
  background: linear-gradient(135deg,#a78bfa,#60a5fa,#34d399,#facc15,#f472b6,#a78bfa);
  background-size: 300% 300%;
  animation: dot-holo-1 2.4s ease infinite;
}
.logo-dot-2 {
  background: linear-gradient(135deg,#a78bfa,#60a5fa,#34d399,#facc15,#f472b6,#a78bfa);
  background-size: 300% 300%;
  animation: dot-holo-2 2.4s ease 0.8s infinite;
}
.logo-dot-3 {
  background: linear-gradient(135deg,#a78bfa,#60a5fa,#34d399,#facc15,#f472b6,#a78bfa);
  background-size: 300% 300%;
  animation: dot-holo-1 2.4s ease 1.6s infinite;
}

/* ── Logo mark rectangle — holo border only ──────────────── */
.logo-mark {
  border: 1.5px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg,#a78bfa,#60a5fa,#34d399,#facc15,#f472b6,#818cf8,#a78bfa) border-box;
  background-size: auto, 300% 300%;
  animation: holo-shift 4s linear infinite;
}

/* ── Noise overlay for holographic depth ─────────────────── */
.holo-noise {
  position: relative;
  overflow: hidden;
}

.holo-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: inherit;
}

/* ── Prismatic glow pulse ─────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.15; transform: scale(0.95); }
  50%       { opacity: 0.30; transform: scale(1.05); }
}

.holo-glow {
  animation: glow-pulse 4s ease-in-out infinite;
  background: conic-gradient(
    from 0deg,
    #a78bfa, #60a5fa, #34d399, #facc15, #f472b6, #a78bfa
  );
  filter: blur(48px);
  border-radius: 9999px;
}