@property --beam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --card-lift {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  color-scheme: dark;
  --rjl-ink: oklch(97% 0.01 250);
  --rjl-muted: oklch(83% 0.04 250);
  --rjl-cyan: oklch(78% 0.16 210);
  --rjl-blue: oklch(62% 0.2 255);
  --rjl-violet: oklch(66% 0.22 300);
  --rjl-green: oklch(82% 0.18 158);
  --rjl-panel: oklch(18% 0.035 252 / 0.68);
  --rjl-panel-strong: oklch(24% 0.06 252 / 0.72);
  --rjl-line: oklch(76% 0.14 218 / 0.32);
}

body {
  color: var(--rjl-ink);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 18%, oklch(70% 0.18 210 / 0.25), transparent 30rem),
    radial-gradient(circle at 82% 10%, oklch(70% 0.2 305 / 0.22), transparent 28rem),
    radial-gradient(circle at 60% 92%, oklch(76% 0.17 158 / 0.16), transparent 34rem),
    linear-gradient(135deg, oklch(9% 0.04 260), oklch(14% 0.045 250) 48%, oklch(7% 0.035 265));
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  z-index: -30;
  background:
    conic-gradient(from var(--beam) at 50% 44%,
      transparent 0 18%,
      oklch(75% 0.16 210 / 0.18) 22%,
      transparent 30% 52%,
      oklch(68% 0.2 300 / 0.15) 58%,
      transparent 65% 100%);
  filter: blur(42px) saturate(1.3);
  animation: rjlBeam 22s linear infinite;
}

body::after {
  z-index: -29;
  opacity: 0.34;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 0 42%, transparent 74%);
  transform: perspective(900px) rotateX(62deg) translateY(17rem) scale(1.45);
  transform-origin: center bottom;
}

@keyframes rjlBeam {
  to { --beam: 360deg; }
}

.rjl-ambient-bg {
  background:
    radial-gradient(circle at 14% 18%, rgba(35, 211, 238, 0.18), transparent 31rem),
    radial-gradient(circle at 82% 10%, rgba(143, 94, 255, 0.18), transparent 29rem),
    linear-gradient(135deg, #031424 0%, #071024 48%, #030717 100%);
}

#particles-js {
  opacity: 0.22;
  mix-blend-mode: screen;
}

.signal-deck {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rjl-line);
  background:
    linear-gradient(145deg, oklch(100% 0 0 / 0.11), transparent 34%),
    var(--rjl-panel);
  box-shadow: 0 24px 80px oklch(4% 0.02 250 / 0.55);
  backdrop-filter: blur(28px) saturate(1.32);
  isolation: isolate;
}

.signal-deck::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(90deg, transparent, oklch(95% 0.04 220 / 0.18), transparent),
    radial-gradient(circle at 50% 0, oklch(83% 0.16 210 / 0.28), transparent 34rem);
  mask-image: linear-gradient(180deg, black, transparent 56%);
  opacity: 0.74;
}

#rjlLinkLogo {
  filter:
    drop-shadow(0 0 18px oklch(75% 0.16 210 / 0.42))
    drop-shadow(0 18px 42px oklch(0% 0 0 / 0.35));
}

#headerText {
  max-width: none;
  margin-inline: auto;
  line-height: 1.05;
  /* Never wrap on desktop: shrink the font to fit instead of breaking lines.
     Caps at 3rem (text-5xl) on wide screens and scales down on narrow laptops
     so even the longest rotating phrase stays on one line. */
  white-space: nowrap;
  font-size: clamp(1.5rem, 4.2vw, 3rem);
}

#headerSubText {
  color: var(--rjl-muted);
  text-wrap: pretty;
}

.signal-card {
  --mx: 50%;
  --my: 50%;
  --card-accent: var(--rjl-cyan);
  position: relative;
  min-height: 176px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--card-accent) 34%, transparent);
  color: white;
  text-decoration: none;
  background:
    radial-gradient(360px circle at var(--mx) var(--my), color-mix(in oklch, var(--card-accent) 25%, transparent), transparent 44%),
    linear-gradient(145deg, oklch(100% 0 0 / 0.1), transparent 42%),
    var(--rjl-panel-strong);
  box-shadow: 0 14px 38px oklch(0% 0 0 / 0.24);
  transform: translateY(calc(var(--card-lift) * -5px)) rotateX(calc(var(--card-lift) * 3deg));
  transition:
    --card-lift 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
  will-change: transform, box-shadow;
}

.signal-card:nth-child(2n) { --card-accent: var(--rjl-violet); }
.signal-card:nth-child(3n) { --card-accent: var(--rjl-green); }
.signal-card:nth-child(4n) { --card-accent: var(--rjl-blue); }

.signal-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(120deg, transparent 0 36%, oklch(100% 0 0 / 0.16), transparent 62% 100%);
  translate: -120% 0;
  transition: translate 560ms ease;
}

.signal-card::after {
  position: absolute;
  inset: auto 18px 16px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  opacity: 0.55;
}

.signal-card:hover,
.signal-card:focus-visible {
  --card-lift: 1;
  border-color: color-mix(in oklch, var(--card-accent) 70%, white 8%);
  box-shadow: 0 24px 70px color-mix(in oklch, var(--card-accent) 28%, transparent);
}

.signal-card:hover::before,
.signal-card:focus-visible::before {
  translate: 120% 0;
}

.signal-card img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 24px color-mix(in oklch, var(--card-accent) 52%, transparent));
}

.signal-card h4,
.signal-card p {
  position: relative;
  z-index: 1;
}

.hover-glow:hover {
    box-shadow: 0 5px 25px 8px rgba(255, 255, 255, 1);
    transform: scale(1.05);
}
.hover-glow-less:hover {
    box-shadow: 0 0px 15px rgba(255, 255, 255, .7);
    transform: scale(1.05);
}
.fade-in {
    animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.idle-glow {
  box-shadow: 0 0 20px 5px rgba(0, 255, 255, 0.6);
  transition: box-shadow 0.7s ease-in-out;
}

.idle-glow.fadeout {
  box-shadow: 0 0 0px 0px rgba(0, 255, 255, 0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Custom 360-degree rotation for group hover with slower timing */
.group:hover .group-hover\:rotate-360 {
    transform: rotate(360deg);
    transition-duration: 1.5s; /* Adjust this value as needed */
}

.matrix-mode::before {
  content: none; /* remove image overlay */
}

@keyframes glitch {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

.matrix-mode #rjlLinkLogo {
  animation: glitch 0.3s infinite;
}

.fade-reveal {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}


@keyframes logoPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.85;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#logo.pulse,
#rjlLinkLogo.pulse {
  animation: logoPulse 0.25s ease;
}


.subheader-glitch {
  position: relative;
  animation: glitchEffect 0.3s linear;
}

@keyframes glitchEffect {
  0% {
    transform: translate(0);
    opacity: 1;
    color: #00ffcc;
    text-shadow: none;
  }
  20% {
    transform: translate(-1px, 1px);
    color: #00ffaa;
    text-shadow: -1px 0 red;
  }
  40% {
    transform: translate(1px, -1px);
    color: #00ffee;
    text-shadow: 1px 0 blue;
  }
  60% {
    transform: translate(-2px, 2px);
    color: #00e6e6;
    text-shadow: -2px 0 lime;
  }
  80% {
    transform: translate(1px, 1px);
    color: #00ffcc;
    text-shadow: 1px 0 cyan;
  }
  100% {
    transform: translate(0);
    color: #00ffcc;
    text-shadow: none;
  }
}


@keyframes glitchText {
  0% {
    text-shadow: 2px 0 red, -2px 0 cyan;
    transform: translate(0, 0);
  }
  15% {
    text-shadow: -2px 2px lime, 2px -2px magenta;
    transform: translate(-2px, 2px);
  }
  30% {
    text-shadow: 3px -1px red, -3px 1px cyan;
    transform: translate(3px, -1px);
  }
  45% {
    text-shadow: -1px 2px lime, 1px -2px magenta;
    transform: translate(-1px, 1px);
  }
  60% {
    text-shadow: 2px -1px red, -2px 1px cyan;
    transform: translate(2px, 1px);
  }
  75% {
    text-shadow: -2px 1px lime, 2px -1px magenta;
    transform: translate(-2px, -1px);
  }
  100% {
    text-shadow: none;
    transform: translate(0, 0);
  }
}

.glitch-active {
  animation: glitchText 1s linear 1;
}

/* New utility classes */
.logo-size {
  height: 75px;
  width: auto;
  max-width: 100%;
}

.footer-link {
  text-decoration: underline;
}

/* Performance optimizations */
.hover-glow {
  will-change: transform, box-shadow;
}

.hover-glow-less {
  will-change: transform, box-shadow;
}

.fade-in {
  will-change: opacity;
}

.matrix-mode #rjlLinkLogo {
  will-change: transform;
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable specific animations */
  .fade-in,
  .fade-reveal,
  .glitch-active,
  .matrix-mode #rjlLinkLogo,
  .subheader-glitch,
  #logo.pulse,
  #rjlLinkLogo.pulse {
    animation: none !important;
  }

  /* Disable hover effects */
  .hover-glow:hover,
  .hover-glow-less:hover {
    transform: none !important;
    box-shadow: 0 0px 5px rgba(255, 255, 255, 0.3) !important;
  }

  .idle-glow {
    box-shadow: none !important;
    transition: none !important;
  }

  .signal-card {
    transform: none !important;
    box-shadow: 0 14px 38px oklch(0% 0 0 / 0.24) !important;
  }
}

@media (max-width: 640px) {
  .signal-deck {
    border-radius: 0.875rem;
  }

  .signal-card {
    min-height: 138px;
  }

  #headerText {
    max-width: 14ch;
    font-size: clamp(2.5rem, 13vw, 3.75rem);
    line-height: 0.95;
    /* Mobile intentionally wraps within the 14ch cap. */
    white-space: normal;
  }
}

/* Print Styles */
@media print {
  /* Hide non-essential elements */
  #particles-js,
  #matrixRain,
  .rjl-ambient-bg,
  .fixed.inset-0.bg-gradient-to-br {
    display: none !important;
  }

  /* Remove backgrounds and shadows */
  body {
    background: white !important;
    color: black !important;
  }

  main {
    box-shadow: none !important;
    background: white !important;
    backdrop-filter: none !important;
  }

  /* Ensure good contrast */
  h1, h2, h3, h4, h5, h6 {
    color: black !important;
    page-break-after: avoid;
  }

  /* Show link URLs */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  a[href^="#"]::after {
    content: "";
  }

  /* Avoid page breaks inside elements */
  nav, footer {
    page-break-inside: avoid;
  }

  /* Remove hover effects */
  .hover-glow:hover,
  .hover-glow-less:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Optimize logo for print */
  .logo-size {
    max-width: 150px;
    height: auto;
  }
}