/*
 * 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.
 *
 * CSS STRUCTURE:
 * 1. Variables/theme (in tailwind/application.css)
 * 2. Base/utility CSS classes (in tailwind/utility.css)
 * 3. Typography (in tailwind/typography.css)
 * 4. Components (in tailwind/components.css)
 * 5. Special effects (in tailwind/effects.css)
 * 6. Section specific styling (in tailwind/section-styles.css)
 * 7. Additional styles (in application.css)
 */

/* =====================================================
   ADDITIONAL STYLES AND TEXT EFFECTS
   ===================================================== */

/* Additional text effect classes */
.newspaper-text { 
  font-family: var(--font-alt-serif);
  font-size: 1.1em;
  letter-spacing: -0.02em;
  line-height: 1.4;
  text-align: justify;
  column-count: 2;
  column-gap: 1.5rem;
  column-rule: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1rem;
  background-color: rgba(245, 245, 220, 0.05);
}

.terminal-text {
  font-family: var(--font-mono);
  color: hsl(120, 100%, 50%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.5rem;
  border-radius: 4px;
  border-left: 2px solid hsl(120, 100%, 50%);
  line-height: 1.4;
  letter-spacing: 0.05em;
  overflow-x: auto;
  white-space: pre-wrap;
}

.inverted-colors {
  background-color: hsl(var(--color-paper));
  color: hsl(var(--color-background));
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.inverted-colors:hover {
  background-color: hsl(var(--color-glitch));
  color: hsl(var(--color-paper));
}

/* Text animation effects */
.disappearing-text {
  position: relative;
  overflow: hidden;
}

.disappearing-text .char {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.disappearing-text.active .char {
  opacity: 0;
  transform: translateY(10px);
  transition-delay: calc(var(--char-index) * 100ms);
}

.disappearing-text.reappearing .char {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--char-index) * 50ms);
}

/* Fix for scrolling issues */
.main-content-wrapper {
  position: relative;
  height: auto;
  min-height: 100%;
  width: 100%;
  display: block;
  overflow-y: visible;
  overflow-x: hidden;
}

/* Additional font styles */
.glitch-font {
  font-family: var(--font-glitch);
  letter-spacing: 0.05em;
  font-size: 1.1em;
  text-shadow: 1px 1px 0 rgba(255, 0, 255, 0.4), 
              -1px -1px 0 rgba(0, 255, 255, 0.4);
}

.retro-typewriter {
  font-family: var(--font-retro);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  background-color: rgba(245, 245, 220, 0.05);
  padding: 1rem;
  border-radius: 3px;
}

.manuscript {
  font-family: var(--font-alt-serif);
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-size: 1.15em;
  text-indent: 1.5em;
}

.vaporwave-text {
  font-family: var(--font-heading);
  letter-spacing: 0.3em;
  word-spacing: 0.6em;
  text-transform: uppercase;
  color: #ff00ff;
  text-shadow: 
    2px 2px 0 #00ffff,
    4px 4px 0 rgba(0, 0, 255, 0.5);
  background: linear-gradient(
    to right,
    #ff00ff,
    #00ffff
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.5em;
}

/* Easter egg styles */
.subtitle-text {
  transition: all 0.5s ease;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 1.1rem;
  color: hsl(var(--color-white)) !important;
  text-shadow: 0 0 10px hsla(var(--color-accent), 0.7), 0 0 20px hsla(var(--color-accent), 0.4);
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem 1.5rem;
  border-radius: 6px;
  border-left: 3px solid hsla(var(--color-accent), 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.subtitle-conversation {
  cursor: pointer;
}

.easter-egg-trigger {
  position: relative;
  transition: all 0.3s ease;
}

.easter-egg-trigger:hover {
  color: hsl(var(--color-glitch));
  transform: translateX(5px);
}

.selected-subtitle {
  color: hsl(var(--color-glitch));
  font-weight: bold;
  text-shadow: 0 0 8px hsla(var(--color-glitch), 0.5);
}

.selected-subtitle::after {
  content: " ✓";
  color: hsl(var(--color-accent));
}

#both-and-trigger:hover, #neither-nor-trigger:hover {
  text-shadow: 0 0 8px hsla(var(--color-accent), 0.8);
  text-decoration: underline;
}

/* Wink easter egg styling */
.wink-easter-egg {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.wink-easter-egg:hover {
  /* Extremely subtle effect that's barely noticeable */
  text-shadow: 0 0 1px hsla(var(--color-accent), 0.15);
}

.wink-easter-egg.toggled {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.wink-easter-egg.toggled::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: hsla(var(--color-glitch), 0.5);
  animation: wink-line 1s ease;
}

@keyframes wink-line {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

.void-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  background: radial-gradient(
    circle, 
    hsla(var(--color-glitch), 0.7) 0%, 
    hsla(var(--color-glitch), 0.3) 40%,
    transparent 70%
  );
  box-shadow: 0 0 20px hsla(var(--color-glitch), 0.5);
  backdrop-filter: blur(1px);
}

@keyframes subtle-glow {
  0% {
    text-shadow: 0 0 5px hsla(var(--color-accent), 0.3);
  }
  100% {
    text-shadow: 0 0 8px hsla(var(--color-accent), 0.7);
  }
}