/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
	--tinylytics: rgb(79,70,229);
	--scribbles: rgb(255,193,7);
	--sublimefeed: #ea053b;
	--sublimeads: #f35815;
	--microblog: rgb(255, 136, 0);
	--blue: rgb(29,78,216);
	--shoutouts: #ADE374;
	--github: #d2a8ff;
	--vincent: oklch(63.7% .237 25.331);
}

@keyframes tinylytics-glow {
  0%, 100% {
    box-shadow: 0 0 3px var(--tinylytics), 0 0 8px var(--tinylytics);
  }
  50% {
    box-shadow: 0 0 1px var(--tinylytics), 0 0 3px var(--tinylytics);
  }
}

@keyframes marker-glow {
  0%, 100% {
    text-shadow: 0 0 4px var(--project-color), 0 0 12px var(--project-color);
  }
  50% {
    text-shadow: 0 0 1px var(--project-color), 0 0 6px var(--project-color);
  }
}

.tinylytics-glow {
  animation: tinylytics-glow 2s ease-in-out infinite;
}

.tinylytics-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--tinylytics) 60%, transparent);
}

@keyframes sublimeads-glow {
  0%, 100% {
    box-shadow: 0 0 3px var(--sublimeads), 0 0 8px var(--sublimeads);
  }
  50% {
    box-shadow: 0 0 1px var(--sublimeads), 0 0 3px var(--sublimeads);
  }
}

.sublimeads-glow {
  animation: sublimeads-glow 2s ease-in-out infinite;
}

.sublimeads-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--sublimeads) 60%, transparent);
}

@keyframes scribbles-glow {
  0%, 100% {
    box-shadow: 0 0 3px var(--scribbles), 0 0 8px var(--scribbles);
  }
  50% {
    box-shadow: 0 0 1px var(--scribbles), 0 0 3px var(--scribbles);
  }
}

.scribbles-glow {
  animation: scribbles-glow 2s ease-in-out infinite;
}

.scribbles-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--scribbles) 60%, transparent);
}

.project-marker {
  position: relative;
  list-style: none;
}

.project-marker::before {
  content: '•';
  position: absolute;
  left: -1.25em;
  top: 0.45em;
  font-size: 0.7em;
  color: var(--project-color);
  animation: marker-glow 2s ease-in-out infinite;
}

.glow-underline {
  position: relative;
  text-decoration: none !important;
  font-weight: bold;
  color: inherit;
}

.glow-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--project-color);
  box-shadow: 0 0 8px var(--project-color), 0 0 12px var(--project-color);
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-out;
}

.glow-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

a { text-underline-offset: 4px; text-decoration-color: var(--blue); }

/* CRT Easter Egg */
:root {
  --crt-shadow-primary: rgba(0, 30, 255, 0.5);
  --crt-shadow-secondary: rgba(255, 0, 80, 0.3);
  --crt-scanline-bg: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.02) 50%, rgba(255,255,255,0));
}

@media (prefers-color-scheme: light) {
  :root {
    --crt-shadow-primary: rgba(0, 30, 255, 0.15);
    --crt-shadow-secondary: rgba(255, 0, 80, 0.1);
    --crt-scanline-bg: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.15) 50%, rgba(0,0,0,0));
  }
}

.crt-charging {
  /* Transition filter over 3s to act as a countdown/buildup */
  transition: filter 3s linear !important;
  filter: grayscale(100%) sepia(100%) hue-rotate(100deg) brightness(1.2) contrast(1.5) !important;
  /* Add a subtle shake that intensifies the feeling of building energy */
  animation: charging-shake 0.1s infinite;
}

@keyframes charging-shake {
  0% { transform: translate(0, 0) scale(1.1) rotate(-5deg); }
  25% { transform: translate(1px, 1px) scale(1.1) rotate(-5deg); }
  50% { transform: translate(-1px, -1px) scale(1.1) rotate(-5deg); }
  75% { transform: translate(-1px, 1px) scale(1.1) rotate(-5deg); }
  100% { transform: translate(1px, -1px) scale(1.1) rotate(-5deg); }
}

.crt-mode {
  position: relative;
  overflow-x: hidden;
}

.crt-mode main {
  contain: layout style paint;
}

.crt-scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9998;
  background: var(--crt-scanline-bg);
  opacity: 0.2;
  animation: scanline 15s linear infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes scanline {
  0% { transform: translateY(-100vh); }
  100% { transform: translateY(100vh); }
}

.crt-mode::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.06), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.06)
  ), radial-gradient(
    circle at center,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  z-index: 9999;
  background-size: 100% 2px, 3px 100%, 100% 100%;
  pointer-events: none;
}

.crt-mode::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  animation: flicker 0.6s infinite;
}

@keyframes flicker {
  0% { opacity: 0.02; }
  25% { opacity: 0.05; }
  50% { opacity: 0.02; }
  75% { opacity: 0.06; }
  100% { opacity: 0.03; }
}

.crt-mode main,
.crt-mode main * {
  animation: textShadow 2.5s ease-in-out infinite;
}

@keyframes textShadow {
  0%, 100% { text-shadow: 0.44px 0 1px var(--crt-shadow-primary), -0.44px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  25% { text-shadow: 1.6px 0 1px var(--crt-shadow-primary), -1.6px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  50% { text-shadow: 0.08px 0 1px var(--crt-shadow-primary), -0.08px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  75% { text-shadow: 2.2px 0 1px var(--crt-shadow-primary), -2.2px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
}

@keyframes scan-icon {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(1px); opacity: 0.8; }
}

.scan-line {
  animation: scan-icon 3s infinite ease-in-out;
}

.group:hover .scan-line,
.crt-mode .crt-toggle-btn .scan-line {
  animation: scan-icon 1s infinite ease-in-out;
}

/* Set delays globally so they apply whenever animation runs */
.scan-line:nth-child(3) { animation-delay: 0s; }
.scan-line:nth-child(4) { animation-delay: 0.2s; }
.scan-line:nth-child(5) { animation-delay: 0.4s; }

.group:hover svg,
.crt-mode .crt-toggle-btn svg {
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
}

.crt-mode .crt-toggle-btn {
  opacity: 1;
}

.crt-mode .crt-toggle-btn svg {
  color: rgb(59, 130, 246);
}

/* Lava Lamp */
@keyframes reactor-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 5px rgba(255, 69, 0, 0); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 8px rgba(255, 69, 0, 0.4); }
}

.lava-lamp-off .lava-lamp-blob {
  animation: reactor-pulse 3s infinite ease-in-out;
  background-color: #ef4444; /* red-500 for "standby" */
}

.lava-lamp-on .lava-lamp-blob {
  animation: none;
  background-color: #f97316; /* orange-500 */
  box-shadow: 0 0 10px 3px #f97316;
  height: 35%;
  width: 35%;
  opacity: 0.8;
  top: 45%;
  left: 55%;
}

/* Star Scape Toggle */
@keyframes twinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.twinkle-star {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
}

/* Only show twinkling stars when active */
.star-scape-on .twinkle-star {
  animation: twinkle 2s infinite ease-in-out;
  opacity: 1;
  transform: scale(1);
}

/* Add a glow to the main star when active */
.star-scape-on svg {
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.8));
}

@keyframes star-pulse-inactive {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0)); }
  50% { filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.5)); }
}

button[data-star-scape-target="toggle"]:not(.star-scape-on) svg {
  animation: star-pulse-inactive 3s infinite ease-in-out;
}

/* Force light text when Star Scape is active */
body.star-scape-active {
  color: #f5f5f5;
}

body.star-scape-active .prose {
  --tw-prose-body: #f5f5f5;
  --tw-prose-headings: #f5f5f5;
  --tw-prose-bold: #f5f5f5;
  --tw-prose-links: #fff;
  color: #f5f5f5;
}

body.star-scape-active a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

body.star-scape-active a:hover {
  text-decoration-color: #fff;
}

.effects-menu-item.star-scape-on::before,
.effects-menu-item.lava-lamp-on::before,
body.crt-mode .crt-menu-item::before {
  content: "● ";
  font-size: 0.65rem;
  vertical-align: 0.1em;
}

.effects-menu-item.star-scape-on::before { color: rgb(250, 204, 21); }
.effects-menu-item.lava-lamp-on::before { color: #f97316; }
body.crt-mode .crt-menu-item::before { color: rgb(59, 130, 246); }

body.crt-mode .crt-menu-item .crt-mode-icon {
  color: rgb(59, 130, 246);
}

body.star-scape-active [data-effects-menu-target="trigger"] {
  color: #fff;
  border-color: #fff;
}

@media (prefers-color-scheme: light) {
  body.star-scape-active [data-effects-menu-target="panel"],
  body.star-scape-active [data-effects-menu-target="panel"] .effects-menu-item {
    color: #171717;
  }
  body.star-scape-active [data-effects-menu-target="panel"] .effects-menu-item svg {
    color: #404040;
  }
  body.star-scape-active [data-effects-menu-target="panel"] .effects-menu-item.star-scape-on svg {
    color: rgb(250, 204, 21);
  }
  body.star-scape-active main .text-gray-900,
  body.star-scape-active main .text-gray-800,
  body.star-scape-active main .text-gray-700,
  body.star-scape-active main .text-gray-600,
  body.star-scape-active main .text-gray-500,
  body.star-scape-active main .text-gray-400 {
    color: #f5f5f5 !important;
  }
  body.star-scape-active main a[href*="project=all"] {
    color: #171717 !important;
  }
}