/*
 * 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: #ff269e;
	--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);
}

.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);
  /* Dark mode default */
  --crt-scanline-bg: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.02) 50%, rgba(255,255,255,0));
  --crt-scanline-filter: blur(2px) brightness(1.0) contrast(1.1) saturate(1.1);
}

@media (prefers-color-scheme: light) {
  :root {
    --crt-shadow-primary: rgba(0, 30, 255, 0.15);
    --crt-shadow-secondary: rgba(255, 0, 80, 0.1);
    /* Light mode context: Dark line to be visible on white */
    --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-scanline-filter: blur(4px) brightness(0.95) contrast(1.2) saturate(1.2);
  }
}

.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;
}

/* Apply warp to the main content container and everything inside */
.crt-mode main {
  filter: url(#crt-warp);
}

.crt-scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9998; /* Below the overlay but above content */
  background: var(--crt-scanline-bg);
  opacity: 0.2;
  animation: scanline 15s linear infinite;
  pointer-events: none;
  /* Stronger distortion effects using backdrop-filter */
  backdrop-filter: var(--crt-scanline-filter);
}

@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.15s 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 1.6s infinite;
}

@keyframes textShadow {
  0% { text-shadow: 0.4389924193300864px 0 1px var(--crt-shadow-primary), -0.4389924193300864px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  5% { text-shadow: 2.7928974010788217px 0 1px var(--crt-shadow-primary), -2.7928974010788217px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  10% { text-shadow: 0.02956275843481219px 0 1px var(--crt-shadow-primary), -0.02956275843481219px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  15% { text-shadow: 0.4021853855287816px 0 1px var(--crt-shadow-primary), -0.4021853855287816px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  20% { text-shadow: 3.4794037899852017px 0 1px var(--crt-shadow-primary), -3.4794037899852017px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  25% { text-shadow: 1.612563040114954px 0 1px var(--crt-shadow-primary), -1.612563040114954px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  30% { text-shadow: 0.7015590085143956px 0 1px var(--crt-shadow-primary), -0.7015590085143956px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  35% { text-shadow: 3.896914047650351px 0 1px var(--crt-shadow-primary), -3.896914047650351px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  40% { text-shadow: 3.870905614848819px 0 1px var(--crt-shadow-primary), -3.870905614848819px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  45% { text-shadow: 2.231056963361899px 0 1px var(--crt-shadow-primary), -2.231056963361899px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  50% { text-shadow: 0.08084290417898504px 0 1px var(--crt-shadow-primary), -0.08084290417898504px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  55% { text-shadow: 2.3758461067427543px 0 1px var(--crt-shadow-primary), -2.3758461067427543px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  60% { text-shadow: 2.202193051050636px 0 1px var(--crt-shadow-primary), -2.202193051050636px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  65% { text-shadow: 2.8638780614874975px 0 1px var(--crt-shadow-primary), -2.8638780614874975px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  70% { text-shadow: 0.48874025155497314px 0 1px var(--crt-shadow-primary), -0.48874025155497314px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  75% { text-shadow: 1.8948491305757957px 0 1px var(--crt-shadow-primary), -1.8948491305757957px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  80% { text-shadow: 0.0833037308038857px 0 1px var(--crt-shadow-primary), -0.0833037308038857px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  85% { text-shadow: 0.09769827255241735px 0 1px var(--crt-shadow-primary), -0.09769827255241735px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  90% { text-shadow: 3.443339761481782px 0 1px var(--crt-shadow-primary), -3.443339761481782px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  95% { text-shadow: 2.1841838852799786px 0 1px var(--crt-shadow-primary), -2.1841838852799786px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  100% { text-shadow: 2.6208764473832513px 0 1px var(--crt-shadow-primary), -2.6208764473832513px 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: #white;
  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;
}