@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cosmic-pulse-advanced {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(139, 0, 0, 0.3); }
  25% { transform: scale(1.03) rotate(0.5deg); box-shadow: 0 0 20px rgba(139, 0, 0, 0.5); }
  50% { transform: scale(1.05) rotate(-0.5deg); box-shadow: 0 0 30px rgba(139, 0, 0, 0.7); }
  75% { transform: scale(1.03) rotate(0.5deg); box-shadow: 0 0 20px rgba(139, 0, 0, 0.5); }
  100% { transform: scale(1) rotate(0); box-shadow: 0 0 10px rgba(139, 0, 0, 0.3); }
} 

@keyframes blood-pulse {
  0% { background-color: rgba(139, 0, 0, 0.1); }
  50% { background-color: rgba(139, 0, 0, 0.3); }
  100% { background-color: rgba(139, 0, 0, 0.1); }
}

 @keyframes crack-expand {
  0% { transform: scale(0.8); opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  50% { transform: scale(1.1); opacity: 0.5; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { transform: scale(1); opacity: 0.7; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes crack-illuminate {
  0%, 100% { stroke-opacity: 0.3; }
  50% { stroke-opacity: 0.8; }
}
 

@keyframes void-pulse {
  0% { box-shadow: inset 0 0 50px rgba(139, 0, 0, 0.1); }
  50% { box-shadow: inset 0 0 100px rgba(139, 0, 0, 0.3); }
  100% { box-shadow: inset 0 0 50px rgba(139, 0, 0, 0.1); }
}

 @keyframes soul-tremor {
  0% { transform: translateX(0) rotate(0); filter: drop-shadow(0 0 5px rgba(139, 0, 0, 0.3)); }
  20% { transform: translateX(-2px) rotate(-0.5deg); filter: drop-shadow(0 0 7px rgba(139, 0, 0, 0.5)); }
  40% { transform: translateX(2px) rotate(0.5deg); filter: drop-shadow(0 0 10px rgba(139, 0, 0, 0.7)); }
  60% { transform: translateX(-1px) rotate(-0.2deg); filter: drop-shadow(0 0 7px rgba(139, 0, 0, 0.5)); }
  80% { transform: translateX(1px) rotate(0.2deg); filter: drop-shadow(0 0 5px rgba(139, 0, 0, 0.3)); }
  100% { transform: translateX(0) rotate(0); filter: drop-shadow(0 0 5px rgba(139, 0, 0, 0.3)); }
}

@keyframes soul-float {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-15px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0); }
}

 @keyframes wisdom-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { 
    opacity: 1; 
    text-shadow: 0 0 10px rgba(240, 230, 210, 0.5);
  }
  20%, 24%, 55% { 
    opacity: 0.3; 
    text-shadow: 0 0 5px rgba(240, 230, 210, 0.2);
  }
}

@keyframes knowledge-pulse {
  0% { color: var(--bone-color); }
  50% { color: rgba(240, 230, 210, 0.7); }
  100% { color: var(--bone-color); }
}

 @keyframes reality-warp {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: skewX(0); }
  25% { clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%); transform: skewX(1deg); }
  50% { clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%); transform: skewX(-1deg); }
  75% { clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%); transform: skewX(0.5deg); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: skewX(0); }
}

@keyframes reality-shift {
  0%, 100% { transform: perspective(1000px) rotateX(0) rotateY(0); }
  25% { transform: perspective(1000px) rotateX(1deg) rotateY(1deg); }
  50% { transform: perspective(1000px) rotateX(-1deg) rotateY(-1deg); }
  75% { transform: perspective(1000px) rotateX(0.5deg) rotateY(0.5deg); }
}

 @keyframes fragment-illumination {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.3); 
    filter: brightness(1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(139, 0, 0, 0.7); 
    filter: brightness(1.1);
  }
}

@keyframes fragment-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

 @keyframes gate-passage {
  0% { width: 50%; opacity: 0.5; filter: blur(1px); }
  100% { width: 48%; opacity: 1; filter: blur(0); }
}

@keyframes gate-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(139, 0, 0, 0.3); }
  50% { box-shadow: 0 0 30px rgba(139, 0, 0, 0.7); }
}

 @keyframes zenith-aura {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cosmic-drift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5px, 5px); }
  50% { transform: translate(0, 10px); }
  75% { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
}

@keyframes quantum-fluctuation {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

@keyframes existential-shift {
  0% { clip-path: inset(0% 0% 0% 0%); }
  50% { clip-path: inset(5% 10% 5% 10%); }
  100% { clip-path: inset(0% 0% 0% 0%); }
}

@keyframes dimensional-overlap {
  0% { mix-blend-mode: normal; }
  50% { mix-blend-mode: overlay; }
  100% { mix-blend-mode: normal; }
}

 .void-entrance {
  animation: 
    void-respiration 12s infinite ease-in-out,
    void-pulse 15s infinite ease-in-out;
}

.mirror-surface:hover .mirror-cracks {
  animation: 
    crack-expand 2s forwards,
    crack-illuminate 3s infinite alternate;
}

.fragment:hover {
  animation: 
    fragment-illumination 3s infinite,
    soul-tremor 0.4s linear,
    fragment-pulse 5s infinite ease-in-out;
}

.split-content h3 {
  animation: 
    wisdom-flicker 7s infinite,
    knowledge-pulse 10s infinite ease-in-out;
}

.collapse-line p {
  animation: 
    reality-warp 15s infinite linear,
    reality-shift 20s infinite ease-in-out;
}

.return-gate:hover .gate-part.left-gate {
  animation: 
    gate-passage 1s forwards,
    gate-glow 3s infinite ease-in-out;
}

.return-gate:hover .gate-part.right-gate {
  animation: 
    gate-passage 1s forwards,
    gate-glow 3s infinite ease-in-out reverse;
}

 [data-scroll-animation="blood-flow"] {
  animation: 
    blood-circulation 40s linear infinite,
    blood-pulse 15s infinite ease-in-out;
}

[data-scroll-animation="cosmic-pulse"] {
  animation: 
    cosmic-heartbeat 8s infinite ease-in-out,
    cosmic-pulse-advanced 12s infinite ease-in-out;
}

[data-scroll-animation="zenith-aura"] {
  animation: 
    zenith-aura 30s infinite linear,
    cosmic-drift 20s infinite ease-in-out;
}

[data-scroll-animation="quantum-fluctuation"] {
  animation: 
    quantum-fluctuation 7s infinite ease-in-out;
}

 .mirror-symbol:hover {
  animation: 
    soul-tremor 0.3s infinite,
    soul-float 2s infinite ease-in-out;
}

.fragment-symbol:hover {
  animation: 
    float 2s infinite ease-in-out,
    cosmic-pulse-advanced 3s infinite ease-in-out;
}

.return-button:hover i {
  animation: 
    soul-tremor 0.3s infinite,
    soul-float 1s infinite ease-in-out;
}

 .zenith-orb {
  animation: 
    cosmic-pulse-advanced 8s infinite ease-in-out,
    dimensional-overlap 15s infinite ease-in-out;
}

.cosmic-fractal {
  animation: 
    existential-shift 20s infinite linear,
    quantum-fluctuation 10s infinite ease-in-out;
}

.philosophy-glyph {
  animation: 
    soul-tremor 0.5s infinite alternate,
    wisdom-flicker 7s infinite;
}

 @media (max-width: 768px) {
  .void-entrance {
    animation: 
      void-respiration 15s infinite ease-in-out,
      void-pulse 20s infinite ease-in-out;
  }
  
  .fragment:hover {
    animation: 
      fragment-illumination 4s infinite,
      soul-tremor 0.5s linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

 .optimize-animation {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

 :root {
  --animation-cosmic: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-blood: cubic-bezier(0.65, 0, 0.35, 1);
  --animation-void: cubic-bezier(0.7, 0, 0.3, 1);
  --animation-soul: cubic-bezier(0.5, 0, 0.5, 1);
  --animation-wisdom: cubic-bezier(0.6, 0, 0.4, 1);
}

 :root {
  --duration-cosmic: 8s;
  --duration-blood: 15s;
  --duration-void: 12s;
  --duration-soul: 0.4s;
  --duration-wisdom: 7s;
  --duration-fragment: 3s;
  --duration-gate: 1s;
}

 :root {
  --delay-cosmic: 0s;
  --delay-blood: 2s;
  --delay-void: 1s;
  --delay-soul: 0.1s;
  --delay-wisdom: 0.5s;
  --delay-fragment: 0.2s;
  --delay-gate: 0.3s;
}

 :root {
  --iteration-cosmic: infinite;
  --iteration-blood: infinite;
  --iteration-void: infinite;
  --iteration-soul: infinite;
  --iteration-wisdom: infinite;
  --iteration-fragment: infinite;
  --iteration-gate: 1;
}

 :root {
  --direction-cosmic: normal;
  --direction-blood: alternate;
  --direction-void: normal;
  --direction-soul: alternate;
  --direction-wisdom: normal;
  --direction-fragment: alternate;
  --direction-gate: normal;
}

 :root {
  --fill-cosmic: both;
  --fill-blood: none;
  --fill-void: forwards;
  --fill-soul: none;
  --fill-wisdom: backwards;
  --fill-fragment: both;
  --fill-gate: forwards;
}

 :root {
  --state-cosmic: running;
  --state-blood: running;
  --state-void: running;
  --state-soul: running;
  --state-wisdom: running;
  --state-fragment: running;
  --state-gate: running;
}

 @keyframes timing-function-test {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.timing-cosmic {
  animation: timing-function-test var(--duration-cosmic) var(--animation-cosmic);
}

.timing-blood {
  animation: timing-function-test var(--duration-blood) var(--animation-blood);
}

.timing-void {
  animation: timing-function-test var(--duration-void) var(--animation-void);
}

.timing-soul {
  animation: timing-function-test var(--duration-soul) var(--animation-soul);
}

.timing-wisdom {
  animation: timing-function-test var(--duration-wisdom) var(--animation-wisdom);
}

 .performance-test {
  animation: 
    cosmic-heartbeat var(--duration-cosmic) var(--animation-cosmic) var(--delay-cosmic) var(--iteration-cosmic) var(--direction-cosmic) var(--fill-cosmic);
  animation-play-state: var(--state-cosmic);
}

 .debug-animation {
  animation-duration: 0.1s !important;
  animation-iteration-count: 1 !important;
  animation-timing-function: linear !important;
}

 

@keyframes dimensional-overlap {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

 .prelude-glyph {
  animation: 
    cosmic-pulse-advanced 8s infinite ease-in-out,
    soul-float 10s infinite ease-in-out;
}
  

.scroll-content h2 {
  animation: wisdom-flicker 7s infinite;
}

.scroll-text p {
  animation: reality-shift 15s infinite linear;
}

 @keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, 10px); }
}

@keyframes celestial-float {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(20px, 20px) rotate(10deg); }
}

@keyframes glyph-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -30px) scale(1.1); }
}

 .cosmic-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.cosmic-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.cosmic-circle {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-timing-function: linear;
}

.circle-outer {
  width: 100%;
  height: 100%;
  border-color: rgba(139, 0, 0, 0.5);
  box-shadow: 0 0 30px rgba(139, 0, 0, 0.3);
  animation: 
    cosmic-rotate 25s linear infinite,
    cosmic-pulse 6s ease-in-out infinite alternate;
}

.circle-middle {
  width: 66%;
  height: 66%;
  border-color: rgba(240, 230, 210, 0.4);
  box-shadow: 0 0 25px rgba(240, 230, 210, 0.2);
  animation: 
    cosmic-rotate 18s linear infinite reverse,
    cosmic-pulse 4s ease-in-out infinite alternate-reverse;
}

.circle-inner {
  width: 33%;
  height: 33%;
  border-color: rgba(139, 0, 0, 0.7);
  box-shadow: 0 0 40px rgba(139, 0, 0, 0.5);
  animation: 
    cosmic-rotate 12s linear infinite,
    cosmic-pulse 3s ease-in-out infinite alternate;
}

.cosmic-center {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(240, 230, 210, 0.9);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(240, 230, 210, 0.7);
  animation: cosmic-core-pulse 2s ease-in-out infinite alternate;
}

.cosmic-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cosmic-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(240, 230, 210, 0.8);
  border-radius: 50%;
  animation: cosmic-float 8s infinite ease-in-out;
}

.cosmic-text {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  color: #f0e6d2;
  font-family: 'El Messiri', sans-serif;
  font-size: 1.2rem;
  opacity: 0;
  text-shadow: 0 0 10px rgba(139, 0, 0, 0.7);
  animation: cosmic-text-fade 2s ease-out 0.5s forwards;
}

 @keyframes cosmic-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes cosmic-pulse {
  from { opacity: 0.7; filter: brightness(1); }
  to { opacity: 1; filter: brightness(1.3); }
}

@keyframes cosmic-core-pulse {
  from { transform: translate(-50%, -50%) scale(0.9); }
  to { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes cosmic-float {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--tx, 0), var(--ty, 0)); opacity: 0; }
}

@keyframes cosmic-text-fade {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 0.9; transform: translateX(-50%) translateY(0); }
}