@import '@rivet-gg/components/theme.css';
@import './fonts.css';
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Courier+Prime&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply min-h-screen bg-background font-sans text-foreground;
  }
  #root {
    @apply min-h-screen;
  }
}

:root {
  --shiki-color-text: theme('colors.white');
  --shiki-foreground: hsl(var(--foreground));
  --shiki-token-constant: theme('colors.violet.300');
  --shiki-token-string: theme('colors.violet.300');
  --shiki-token-comment: theme('colors.zinc.500');
  --shiki-token-keyword: theme('colors.sky.300');
  --shiki-token-parameter: theme('colors.pink.300');
  --shiki-token-function: theme('colors.violet.300');
  --shiki-token-string-expression: theme('colors.violet.300');
  --shiki-token-punctuation: theme('colors.zinc.200');
}

/* Text selection styles */
::selection {
  background-color: #ff4f00;
  color: black;
}

::-moz-selection {
  background-color: #ff4f00;
  color: black;
}

/* Selection style for white/light backgrounds */
.selection-dark::selection {
  background-color: #18181b;
  color: white;
}

.selection-dark::-moz-selection {
  background-color: #18181b;
  color: white;
}

.shiki .line {
  @apply break-all;
}

.shiki.has-focused .line:not(.focused) {
  @apply opacity-40 transition-opacity;
}

.shiki.has-focused:hover .line {
  @apply opacity-100;
}

@layer utilities {
  /* CRT thinking dots animation */
  .thinking-actor {
    vertical-align: baseline;
  }

  .thinking-actor svg {
    filter: brightness(1.5) saturate(1.6);
    --animation-delay: 0s;
  }

  .trace-head {
    animation: trace-around 1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .trace-tail-2 {
    animation: trace-around-tail2 1s cubic-bezier(0.3, 0, 0.7, 1) infinite;
  }

  .trace-tail-1 {
    animation: trace-around-tail1 1s cubic-bezier(0.2, 0, 0.8, 1) infinite;
  }

  .trace-dark {
    animation: trace-around 1s linear infinite, dark-grow 1s ease-in-out infinite;
  }

  .trace-dark-mid {
    animation: trace-around 1s linear infinite, dark-grow-mid 1s ease-in-out infinite;
  }

  .trace-dark-outer {
    animation: trace-around 1s linear infinite, dark-grow-outer 1s ease-in-out infinite;
  }

  @keyframes trace-around {
    0% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -628;
    }
  }

  @keyframes trace-around-tail2 {
    0% {
      stroke-dashoffset: 15;
    }
    100% {
      stroke-dashoffset: -613;
    }
  }

  @keyframes trace-around-tail1 {
    0% {
      stroke-dashoffset: 35;
    }
    100% {
      stroke-dashoffset: -593;
    }
  }

  @keyframes dark-grow {
    0%, 100% {
      stroke-dasharray: 280 348;
    }
    50% {
      stroke-dasharray: 100 528;
    }
  }

  @keyframes dark-grow-mid {
    0%, 100% {
      stroke-dasharray: 380 248;
    }
    50% {
      stroke-dasharray: 160 468;
    }
  }

  @keyframes dark-grow-outer {
    0%, 100% {
      stroke-dasharray: 480 148;
    }
    50% {
      stroke-dasharray: 220 408;
    }
  }

  .step {
    counter-increment: step;
  }

  .step:before {
    @apply absolute inline-flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-background text-center -indent-px font-mono text-base font-medium;
    @apply ml-[-50px] mt-[-4px];
    content: counter(step);
  }

	/* Hide scrollbar for Chrome, Safari and Opera */
	.scrollbar-hide::-webkit-scrollbar {
		display: none;
	}
	/* Hide scrollbar for IE, Edge and Firefox */
	.scrollbar-hide {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}

	/* Landing Page Styles */
	/* Hide scrollbar */
	.horizontal-scroller::-webkit-scrollbar {
		display: none;
	}
	.horizontal-scroller {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	/* Actor Visualizer */
	.actor-visualizer {
		position: relative;
		width: 280px;
		height: 280px;
		margin: 4rem auto 0 auto;
		transition: transform 0.2s ease-out;
	}

	.actor-core {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #ff4500;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 40px 10px rgba(255, 69, 0, 0.4);
		animation: pulse-slow 2.5s infinite alternate;
	}

	.actor-client-orbit {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		animation: infinite-scroll 20s linear infinite;
	}

	.actor-client-orbit:nth-child(2) {
		animation-duration: 30s;
	}
	.actor-client-orbit:nth-child(3) {
		animation-duration: 25s;
		animation-direction: reverse;
	}

	.actor-client {
		position: absolute;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #a0a0a0;
	}

	.actor-client::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1px;
		height: 100px;
		background: #252525;
		transform-origin: top left;
		z-index: -1;
	}

	/* Client positions */
	.client-1 {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.client-1::before {
		transform: translate(0, 0) rotate(180deg) scaleY(1.3);
	}

	.client-2 {
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.client-2::before {
		transform: translate(0, 0) rotate(90deg) scaleY(1.3);
	}

	.client-3 {
		bottom: 10%;
		left: 15%;
	}
	.client-3::before {
		transform: translate(0, 0) rotate(-40deg) scaleY(1);
	}

	.client-4 {
		top: 20%;
		right: 10%;
	}
	.client-4::before {
		transform: translate(0, 0) rotate(60deg) scaleY(0.9);
	}

	/* Bento glow effect */
	.bento-box {
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.bento-box:hover {
		border-color: #444;
		transform: scale(1.02);
	}

	.bento-box::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(
			circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
			rgba(255, 255, 255, 0.08),
			transparent 40%
		);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	.bento-box:hover::before {
		opacity: 1;
	}

	/* Scroll-triggered animations */
	.animate-on-scroll {
		opacity: 0;
		transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
		transition-delay: var(--scroll-delay, 0s);
		will-change: opacity, transform;
	}

	.animate-fade-up {
		transform: translateY(30px);
	}

	.animate-on-scroll.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	.delay-100 {
		--scroll-delay: 100ms;
	}
	.delay-200 {
		--scroll-delay: 200ms;
	}
	.delay-300 {
		--scroll-delay: 300ms;
	}
	.delay-400 {
		--scroll-delay: 400ms;
	}
	.delay-500 {
		--scroll-delay: 500ms;
	}
	.delay-600 {
		--scroll-delay: 600ms;
	}

	/* Sticky Code Highlighting */
	#code-block-sticky-wrapper {
		min-height: 150vh;
	}

	.code-highlight-ref {
		position: relative;
		transition: background-color 0.3s ease-out;
		display: block;
		margin: 0 -1.5rem;
		padding: 0 1.5rem;
	}

	.code-highlight-ref.is-active {
		background-color: rgba(255, 69, 0, 0.1);
	}

	.code-highlight-ref.is-active::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 2px;
		background-color: #ff4500;
	}

	/* Code syntax colors */
	.code-comment {
		color: #737373;
	}

	.code-keyword {
		color: #c084fc;
	}

	.code-function {
		color: #60a5fa;
	}

	.code-string {
		color: #4ade80;
	}

	/* Learn Section - Theatrical Styles */
	.font-display {
		font-family: "Cinzel", serif;
	}

	.font-serif {
		font-family: "Crimson Text", serif;
	}

	.font-mono {
		font-family: "Courier Prime", monospace;
	}

	/* Drop cap for narrative text */
	.narrative-drop-cap::first-letter {
		font-size: 3rem !important;
		font-family: "Cinzel", serif !important;
		margin-right: 0.5rem !important;
		float: left !important;
		color: #d4b483 !important;
		line-height: 0.8 !important;
		font-weight: 400 !important;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* Firefox-specific fixes */
		display: block;
		padding-top: 0.1rem;
	}

	/* Firefox-specific fallback */
	@-moz-document url-prefix() {
		.narrative-drop-cap::first-letter {
			font-size: 3rem !important;
			line-height: 0.75 !important;
		}
	}

	@media (min-width: 768px) {
		.narrative-drop-cap::first-letter {
			font-size: 3rem !important;
		}
	}

	/* Subtle noise texture overlay */
	.texture-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.03;
		pointer-events: none;
		z-index: 40;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	}

	/* Override default background for learn section */
	.learn-container {
		background-color: #1c1917;
		min-height: 100vh;
		color: #e7e5e4;
	}

	/* Selection styling for learn section */
	.learn-container ::selection {
		background-color: #d4b483;
		color: #1c1917;
	}

	/* Override prose styles for act cards and other custom elements */
	.learn-container .not-prose h3 {
		margin: 0;
		margin-bottom: 0.25rem;
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	.learn-container .not-prose p {
		margin: 0;
		font-size: 1rem;
		line-height: 1.5rem;
	}

	@media (min-width: 768px) {
		.learn-container .not-prose h3 {
			font-size: 2.25rem;
			line-height: 2.5rem;
		}

		.learn-container .not-prose p {
			font-size: 1.125rem;
			line-height: 1.75rem;
		}
	}
}

/* Disable view transition animations while keeping prefetch */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
}
