/* ==========================================================================
   Fraktalicious Logo — Single Source of Truth
   Include via: <link rel="stylesheet" href="/logo.css">
   ========================================================================== */

/* Membrane + perspective container */
.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  position: relative;
  perspective: 600px;
}

/* Membrane bulge glow — the "film" being pushed from behind */
.logo-link::before {
  content: "";
  position: absolute;
  inset: -20px -30px;
  background: radial-gradient(ellipse at 35% 50%,
    rgba(140, 80, 220, 0.55) 0%,
    rgba(100, 60, 200, 0.35) 30%,
    rgba(60, 30, 160, 0.15) 60%,
    transparent 85%);
  filter: blur(18px);
  border-radius: 50%;
  pointer-events: none;
  animation: membranePulse 8s ease-in-out infinite;
}
@keyframes membranePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.12); }
}

/* Logo block — the white square */
.logo-block {
  position: relative;
  width: 36px;
  height: 36px;
  background: #ccccff;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: blockPush 6s ease-in-out infinite;
  transform: translateZ(8px) rotateY(-1.5deg) rotateX(0.5deg);
  box-shadow:
    0 0 24px rgba(140, 80, 220, 0.4),
    0 0 48px rgba(80, 50, 180, 0.2),
    0 0 6px rgba(200, 140, 255, 0.3);
}
@keyframes blockPush {
  0%, 100% { transform: translateZ(8px) rotateY(-1.5deg) rotateX(0.5deg); }
  30%      { transform: translateZ(14px) rotateY(-2.5deg) rotateX(1deg); }
  60%      { transform: translateZ(10px) rotateY(-0.5deg) rotateX(-0.5deg); }
}
/* Sierpinski triangle symbol */
.logo-block .logo-symbol {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
  margin-left: 1px;
  margin-top: -2px;
}

/* Fracture shard layers on the block — offset ghost copies */
.logo-block::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: rgba(80, 200, 240, 0.35);
  border-radius: 4px;
  clip-path: polygon(0% 0%, 58% 0%, 38% 48%, 0% 62%);
  transform: translate(-3px, -2px);
  pointer-events: none;
}
.logo-block::after {
  content: "";
  position: absolute;
  inset: -3px;
  background: rgba(180, 60, 220, 0.30);
  border-radius: 4px;
  clip-path: polygon(100% 52%, 100% 100%, 48% 100%, 62% 55%);
  transform: translate(3px, 2px);
  pointer-events: none;
}

/* Wordmark container */
.logo-wordmark {
  position: relative;
  display: flex;
  align-items: baseline;
  font-size: 22px;
  letter-spacing: -0.5px;
  transform: translateZ(4px);
}
.logo-wordmark .wm-bold {
  font-weight: 600;
  color: #ccccff;
}
.logo-wordmark .wm-light {
  font-weight: 300;
  font-style: italic;
  color: rgba(204,204,255,0.88);
}

/* Chromatic aberration fracture wrapper */
.logo-fracture {
  position: relative;
}

/* Cyan channel — shifted left & up */
.wm-ghost-cyan {
  position: absolute;
  top: -1px;
  left: -3px;
  display: flex;
  align-items: baseline;
  font-size: 22px;
  letter-spacing: -0.5px;
  opacity: 0.4;
  color: #22d3ee;
  pointer-events: none;
  clip-path: polygon(0% 0%, 100% 0%, 100% 45%, 0% 55%);
  animation: ghostCyan 6s ease-in-out infinite;
}
.wm-ghost-cyan .wm-bold { font-weight: 600; }
.wm-ghost-cyan .wm-light { font-weight: 300; font-style: italic; }
@keyframes ghostCyan {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  40%      { transform: translate(-1px, -0.5px); opacity: 0.55; }
  70%      { transform: translate(0.5px, 0.3px); opacity: 0.3; }
}

/* Magenta channel — shifted right & down */
.wm-ghost-mag {
  position: absolute;
  top: 1px;
  left: 3px;
  display: flex;
  align-items: baseline;
  font-size: 22px;
  letter-spacing: -0.5px;
  opacity: 0.35;
  color: #c084fc;
  pointer-events: none;
  clip-path: polygon(0% 50%, 100% 40%, 100% 100%, 0% 100%);
  animation: ghostMag 6s ease-in-out infinite;
}
.wm-ghost-mag .wm-bold { font-weight: 600; }
.wm-ghost-mag .wm-light { font-weight: 300; font-style: italic; }
@keyframes ghostMag {
  0%, 100% { transform: translate(0, 0); opacity: 0.35; }
  35%      { transform: translate(1px, 0.5px); opacity: 0.5; }
  65%      { transform: translate(-0.5px, -0.3px); opacity: 0.25; }
}

/* Fracture crack line across the wordmark */
.logo-fracture::after {
  content: "";
  position: absolute;
  top: 48%;
  left: -8%;
  width: 116%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(160, 100, 220, 0.6) 10%,
    rgba(100, 220, 240, 0.7) 35%,
    rgba(220, 120, 255, 0.5) 65%,
    rgba(100, 200, 240, 0.6) 85%,
    transparent 100%);
  transform: rotate(-1.5deg);
  pointer-events: none;
  box-shadow: 0 0 6px rgba(140, 100, 240, 0.3);
  animation: crackFlicker 4s ease-in-out infinite;
}
@keyframes crackFlicker {
  0%, 100% { opacity: 0.8; }
  30%      { opacity: 1; }
  60%      { opacity: 0.6; }
  80%      { opacity: 0.95; }
}