/* John-Portal visual effects — decorative layers (pointer-events: none where needed) */

/* --- Background drift --- */
body.jp-bg-drift::before {
  content: "";
  position: fixed;
  inset: -2px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image:
    linear-gradient(rgba(0, 255, 65, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.15) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: jp-bg-drift 120s linear infinite;
}

@keyframes jp-bg-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(48px, 24px, 0);
  }
}

/* --- Cursor glow --- */
#jp-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(0, 255, 65, 0.1) 0%,
    rgba(0, 255, 65, 0.04) 35%,
    transparent 70%
  );
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.25s ease;
  will-change: transform;
}

#jp-cursor-glow.is-visible {
  opacity: 1;
}

/* --- Card spotlight --- */
.jp-card-spotlight {
  position: relative;
  overflow: hidden;
}

.jp-card-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: radial-gradient(
    circle at var(--jp-spot-x, 50%) var(--jp-spot-y, 50%),
    rgba(0, 255, 65, 0.12) 0%,
    transparent 55%
  );
}

.jp-card-spotlight.jp-card-spotlight--active::after {
  opacity: 1;
}

/* --- Homepage entrance --- */
body.jp-home-entrance .site-wrapper {
  animation: none;
}

body.jp-home-entrance .site-header,
body.jp-home-entrance .profile-ring--menu-trigger,
body.jp-home-entrance .hero__name,
body.jp-home-entrance .hero__about-label,
body.jp-home-entrance .hero__about-text,
body.jp-home-entrance .hero__actions,
body.jp-home-entrance .site-footer,
body.jp-home-entrance .site-watermark {
  opacity: 0;
  animation: jp-home-piece-in 0.45s ease-out forwards;
}

body.jp-home-entrance .site-header {
  animation-delay: 0ms;
}
body.jp-home-entrance .profile-ring--menu-trigger {
  animation-delay: 80ms;
}
body.jp-home-entrance .hero__name {
  animation-delay: 140ms;
}
body.jp-home-entrance .hero__about-label {
  animation-delay: 170ms;
}
body.jp-home-entrance .hero__about-text {
  animation-delay: 200ms;
}
body.jp-home-entrance .hero__actions {
  animation-delay: 280ms;
}
body.jp-home-entrance .site-footer {
  animation-delay: 300ms;
}
body.jp-home-entrance .site-watermark {
  animation-delay: 320ms;
}

@keyframes jp-home-piece-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Heading reveal --- */
.jp-heading-reveal {
  opacity: 0;
  transform: translateY(10px);
}

body.jp-heading-ready .jp-heading-reveal {
  animation: jp-heading-reveal-in 0.45s ease-out forwards;
}

@keyframes jp-heading-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Owner access granted --- */
#jp-owner-access {
  position: fixed;
  inset: 0;
  z-index: 258;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.94);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

#jp-owner-access.is-active {
  opacity: 1;
  visibility: visible;
}

#jp-owner-access .jp-owner-access__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-green);
  text-shadow: 0 0 18px rgba(0, 255, 65, 0.35);
}

#jp-owner-access .jp-owner-access__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 65, 0.85),
    transparent
  );
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
  top: -4px;
  opacity: 0;
}

#jp-owner-access.is-active .jp-owner-access__scan {
  animation: jp-owner-access-scan 0.65s ease-out 0.15s forwards;
}

@keyframes jp-owner-access-scan {
  0% {
    top: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* --- List row delete / restore --- */
.jp-row-exit {
  transition: opacity 0.22s ease, transform 0.22s ease;
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.jp-row-enter {
  animation: jp-row-enter 0.28s ease-out both;
}

@keyframes jp-row-enter {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Owner toast pulse --- */
.owner-toast--pulse {
  animation: owner-toast-pulse 0.45s ease-out;
}

@keyframes owner-toast-pulse {
  0% {
    box-shadow: 0 0 0 rgba(0, 255, 65, 0);
  }
  40% {
    box-shadow: 0 0 28px rgba(0, 255, 65, 0.45);
  }
  100% {
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.15);
  }
}

.owner-dashboard.owner-dashboard--success-flash .owner-dashboard__canvas {
  animation: owner-dashboard-success-flash 0.4s ease-out;
}

@keyframes owner-dashboard-success-flash {
  0% {
    box-shadow: inset 0 0 0 0 rgba(0, 255, 65, 0);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.45);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(0, 255, 65, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.jp-bg-drift::before {
    animation: none;
  }

  #jp-cursor-glow {
    display: none !important;
  }

  body.jp-home-entrance .site-header,
  body.jp-home-entrance .profile-ring--menu-trigger,
  body.jp-home-entrance .hero__name,
  body.jp-home-entrance .hero__about-label,
  body.jp-home-entrance .hero__about-text,
  body.jp-home-entrance .hero__actions,
  body.jp-home-entrance .site-footer,
  body.jp-home-entrance .site-watermark {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .jp-heading-reveal {
    opacity: 1;
    transform: none;
  }

  body.jp-heading-ready .jp-heading-reveal {
    animation: none;
  }

  #jp-owner-access .jp-owner-access__scan {
    animation: none;
    opacity: 0;
  }

  .jp-row-exit,
  .jp-row-enter {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}