@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

:root {
  /* --- Theme variables --- */
  --primary-color: #0a0000;
  --accent-color: #ff4500; /* Fiery orange-red (Used by Waveform & Links) */
  --glow-color: #dc143c;   /* Crimson red (Original base for embers) */
  --text-color: #f5f5f5;
  --highlight-color: #ffcc00; /* Bright yellow/gold (Original highlight for embers) */
  --flame-base-color: #00ffff;
  --flame-tip-color: #0050ff;
  --waveform-color: var(--accent-color); /* Explicitly set for clarity */
  --waveform-core-color: #ffffff;
  --magma-color-base: #ff6600; /* Fixed: Changed #GGG to #ff6600 orange-red */
  --magma-color-highlight: #ffee00;
  --focus-outline-color: #ffffff;
  --corner-padding: clamp(15px, 3vw, 25px);
  --link-bg-alpha: 0.6;
  --link-hover-bg-alpha: 0.9;

  /* --- NEW Ember Particle Colors --- */
  --ember-color-base: #dc143c;     /* Crimson Red (like original glow) */
  --ember-color-mid: #a02000;      /* Deep Red-Orange */
  --ember-color-highlight: #ff6000; /* Brighter Orange (less yellow than original highlight) */
}
body { margin: 0; padding: 0; overflow: hidden; background-color: var(--primary-color); color: var(--text-color); font-family: 'Orbitron', sans-serif; }
#canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* --- Animation Control --- */
/* Pause animations during transitions */
.transition-active * {
  animation-play-state: paused !important;
  transition: none !important;
}

/* Allow specific transitions to continue during transition state */
.transition-active .scene-transition,
.transition-active .ascii-effect,
.transition-active .ascii-text,
.transition-active .ascii-waveform-mask,
.transition-active .ascii-waveform-gradient,
.transition-active .rotation-wrapper,
.transition-active .normal-view,
.transition-active .ascii-view {
  transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important;
}

/* --- Scene Transition Effect --- */
.scene-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background-color: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scene-transition.active {
  opacity: 0.75;
  animation: 
    glitchOverlay 0.5s ease forwards,
    scanlines 2s linear infinite;
  animation-play-state: running !important; /* Ensure this animation runs even during transition */
}

@keyframes glitchOverlay {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.6;
    transform: translate(5px, 0);
    background-color: rgba(0, 255, 255, 0.1);
  }
  15% {
    transform: translate(-5px, 0);
    background-color: rgba(255, 0, 0, 0.1);
  }
  25% {
    transform: translate(0, 0);
    background-color: rgba(0, 0, 0, 0.8);
  }
  35% {
    transform: translate(3px, -2px);
    background-color: rgba(0, 255, 0, 0.1);
  }
  45% {
    transform: translate(-2px, 3px);
    background-color: rgba(0, 0, 255, 0.1);
  }
  55% {
    transform: translate(0, 0);
    background-color: rgba(0, 0, 0, 0.7);
  }
  65% {
    transform: translate(4px, 0);
    background-color: rgba(255, 255, 0, 0.1);
  }
  75% {
    transform: translate(-4px, 0);
    opacity: 0.5;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes scanlines {
  0% {
    background: linear-gradient(to bottom, 
                 transparent 50%, 
                 rgba(0, 0, 0, 0.5) 51%, 
                 rgba(0, 0, 0, 0.5) 52%, 
                 transparent 53%);
    background-size: 100% 4px;
  }
  100% {
    background: linear-gradient(to bottom, 
                 transparent 50%, 
                 rgba(0, 0, 0, 0.5) 51%, 
                 rgba(0, 0, 0, 0.5) 52%, 
                 transparent 53%);
    background-size: 100% 4px;
    background-position: 0 100%;
  }
}

/* --- ASCII Effect Styling --- */
.ascii-effect {
  font-family: monospace;
  line-height: 0.7;
  font-size: clamp(6px, 1vw, 12px);
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 5 !important;
  pointer-events: none;
  overflow: hidden !important;
  letter-spacing: 0.1em;
  opacity: 0; /* Start invisible */
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth fade with easing */
  will-change: opacity; /* Performance optimization */
}

.ascii-effect.active {
  opacity: 1; /* When active class is applied */
}

/* High contrast mode for ASCII effect */
.ascii-effect-high-contrast {
  filter: contrast(2.5) brightness(1.8) !important;
  background-color: #000000 !important;
  mix-blend-mode: normal;
}

/* ASCII Text Elements */
.ascii-text {
  position: fixed;
  z-index: 20;
  transform: translateX(-50%);
  white-space: pre;
  text-align: center;
  color: white;
  font-family: monospace;
  background-color: transparent;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
  animation: asciiFlicker 2s infinite alternate;
  filter: contrast(1.2) brightness(1.1);
  letter-spacing: normal;
  display: none; /* Hidden by default */
  opacity: 0; /* Start invisible */
  transition: 
    opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
  will-change: transform, opacity; /* Performance optimization */
}

.ascii-text.active {
  opacity: 1; /* When active class is applied */
  animation-play-state: running !important; /* Ensure flickering animation runs */
}

/* ASCII Buttons */
.ascii-button {
  font-size: clamp(10px, 1.2vw, 14px);
  line-height: 1.2;
  color: #ffff00; /* Bright yellow for better visibility */
  background-color: rgba(0, 0, 0, 1); /* Dark background for contrast */
  filter: contrast(1.8) brightness(1.5); /* Enhanced brightness and contrast */
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Bouncy transition */
  animation: asciiButtonGlow 2s infinite alternate;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255, 165, 0, 0.9), 0 0 20px rgba(255, 69, 0, 0.8);
  pointer-events: auto !important; /* Allow clicking */
  outline: none;
  padding: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); /* Add shadow for better visibility */
  border-radius: 5px;
  width: auto; /* Allow natural width */
  max-width: 150px; /* Limit width to prevent overlap */
  height: auto; /* Allow natural height */
  overflow: visible; /* Show full content */
  margin: 0; /* Reset margin */
  will-change: transform, filter, text-shadow; /* Performance optimization */
  transform-origin: center; /* Scale from center */
}

.ascii-button:hover,
.ascii-button:focus {
  filter: contrast(2) brightness(1.7);
  text-shadow: 0 0 15px rgba(255, 220, 0, 1), 0 0 25px rgba(255, 69, 0, 0.8);
  color: #ffffff;
  outline: none;
  transform: scale(1.05); /* Scale only on hover, not by default */
}

.ascii-button:active {
  transform: scale(0.98);
  filter: contrast(1.5) brightness(1.1);
}

.ascii-button-left {
  text-align: left;
}

.ascii-button-right {
  text-align: right;
}

@keyframes asciiButtonGlow {
  0%, 20% {
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.9);
    color: #ffff00;
  }
  80%, 100% {
    text-shadow: 0 0 15px rgba(255, 220, 0, 1), 0 0 25px rgba(255, 69, 0, 0.8);
    color: #ffffff;
  }
}

/* Waveform mask for ASCII effect */
.ascii-waveform-mask {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 7;
  pointer-events: none;
  box-shadow: 0 -30px 30px 20px rgba(0, 0, 0, 0.7);
  opacity: 0; /* Start invisible */
  transform: translateY(30px); /* Start slightly below */
  transition: 
    opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth transition */
  will-change: transform, opacity; /* Performance optimization */
}

.ascii-waveform-mask.active {
  opacity: 1; /* When active class is applied */
  transform: translateY(0); /* Move to final position */
}

/* Gradient overlay for waveform */
.ascii-waveform-gradient {
  position: absolute;
  top: -80px; /* Start higher above the mask for smoother transition */
  left: 0;
  width: 100%;
  height: calc(100% + 80px); /* Extend further beyond the mask */
  background: linear-gradient(to bottom, 
                             transparent 0%, 
                             rgba(0,0,0,0.3) 30%, 
                             rgba(0,0,0,0.6) 60%, 
                             rgba(0,0,0,0.9) 90%); /* More gradual gradient */
  pointer-events: none;
  transition: opacity 0.5s ease; /* Smooth fade for gradient */
}

.ascii-title {
  font-size: clamp(10px, 1.5vw, 16px);
  line-height: 1.1;
  font-weight: bold;
  max-width: 95vw;
  overflow: hidden;
  animation: asciiScanlines 8s linear infinite, asciiFlicker 2s infinite alternate; /* Add scanlines effect */
}

.ascii-subtitle {
  font-size: clamp(8px, 1vw, 12px);
  line-height: 1.1;
  margin-top: 10px;
  max-width: 90vw;
  overflow: hidden;
  animation: asciiScanlines 12s linear infinite, asciiFlicker 3s infinite alternate; /* Add scanlines effect */
}

@keyframes asciiFlicker {
  0%, 5%, 10% {
    opacity: 0.97;
    filter: brightness(1.1) contrast(1.2);
  }
  1%, 6%, 11% {
    opacity: 0.85;
    filter: brightness(0.9) contrast(1.1);
  }
  100% {
    opacity: 1;
    filter: brightness(1.2) contrast(1.3);
  }
}

@keyframes asciiScanlines {
  0% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 51%,
      transparent 100%
    );
    background-size: 100% 6px;
    background-repeat: repeat;
  }
  50% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 50%,
      transparent 51%,
      transparent 100%
    );
    background-size: 100% 8px;
    background-repeat: repeat;
  }
  100% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 51%,
      transparent 100%
    );
    background-size: 100% 6px;
    background-repeat: repeat;
  }
}

/* ASCII overlay mask container */
.ascii-overlay-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* Individual ASCII masks */
.ascii-mask {
  position: absolute;
  background-color: black;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.7); /* Softer shadow for cleaner look */
  border-radius: 6px; /* Smoother corners */
}

/* Media queries for ASCII effect font size */
@media (max-width: 768px) {
  .ascii-effect {
    font-size: 5px; /* Slightly larger font on mobile */
    line-height: 0.6; /* Tighter line height on mobile */
    letter-spacing: 0; /* Remove letter spacing on mobile */
  }
  
  .ascii-title {
    font-size: 8px;
    margin-top: -100px;
  }
  
  .ascii-subtitle {
    font-size: 6px;
    margin-top: 10px;
  }
  
  .ascii-button {
    font-size: 6px;
  }
}

/* --- Loading Screen --- */
#loader { /* ... same ... */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 1; transition: opacity 1.8s ease-out 0.5s; }
#loader.hidden { opacity: 0; pointer-events: none; }
.spinner { /* ... same ... */ border: 5px solid rgba(255, 69, 0, 0.2); border-left-color: var(--accent-color); border-radius: 50%; width: 60px; height: 60px; animation: spin 1.2s linear infinite; margin-bottom: 25px; }
#loader p { /* ... same ... */ color: var(--text-color); font-size: 1.2rem; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 5px var(--accent-color), 0 0 10px var(--glow-color); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* --- Main Content Overlay (Text Only) --- */
#overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); z-index: 3; text-align: center; pointer-events: none; width: 90%; max-width: 850px; padding: 0; }
#overlay h1 {
  font-size: clamp(2.8rem, 10vw, 7rem);
  margin: 0 0 15px 0;
  color: var(--text-color);
  letter-spacing: 4px;
  text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color), 0 0 30px var(--glow-color), 0 0 40px var(--glow-color), 0 0 2px #000, 0 0 2px #000;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
  font-weight: 700;
  line-height: 1.15;
  position: relative;
  z-index: 2;
}

/* Modified light rays effect behind the header */
#overlay h1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%; /* Make much wider horizontally */
  height: 60%; /* Reduce height for a more rectangular shape */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  filter: blur(15px);
  z-index: -1;
  border-radius: 40% / 20%; /* More rectangular shape (horizontal/vertical radius) */
  animation: pulseLight 8s infinite alternate;
}

/* Add horizontal light ray streaks to enhance window light effect */
#overlay h1::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250%; /* Extra wide */
  height: 5px; /* Very thin horizontal line */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 15%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.05) 85%,
    transparent 100%
  );
  filter: blur(3px);
  z-index: -1;
  box-shadow: 
    0 -15px 10px rgba(255, 255, 255, 0.1),
    0 15px 10px rgba(255, 255, 255, 0.1); /* Add more horizontal light rays */
}

@keyframes pulseLight {
  0% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1, 1);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.05, 1.05);
  }
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1, 1);
  }
}

/* Idea 9: Subtitle Animation */
#overlay .subtitle {
  font-size: clamp(1.0rem, 2.5vw, 1.4rem); margin: 0; color: var(--text-color);
  opacity: 0; /* Start hidden */
  text-shadow: 0 0 5px var(--glow-color), 1px 1px 3px black;
  line-height: 1.6;
  animation: fadeInSubtitle 1.5s 1s ease-out forwards; /* Delay fade-in */
}
@keyframes fadeInSubtitle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 0.9; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #overlay .subtitle {
    animation: none; /* Disable animation */
    opacity: 0.9; /* Just show it */
  }
}

/* --- Corner Link Groups (Idea 8: Enhanced styling) --- */
.link-group { position: fixed; top: var(--corner-padding); z-index: 10; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.link-group-left { left: var(--corner-padding); align-items: flex-start; }
.link-group-right { right: var(--corner-padding); align-items: flex-end; }

.link-group a {
  color: var(--accent-color);
  background-color: rgba(0, 0, 0, var(--link-bg-alpha));
  border: 1px solid var(--accent-color);
  border-radius: 4px; /* Slightly more rounded */
  text-decoration: none;
  font-size: clamp(0.8rem, 1.8vw, 1.0rem);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 9px 16px; /* Adjusted padding */
  transition: all 0.3s ease; /* Smooth all transitions */
  pointer-events: auto;
  text-shadow: 0 0 6px var(--accent-color), 0 0 10px var(--glow-color);
  outline: 2px solid transparent; outline-offset: 2px;
  display: inline-block;
  position: relative; /* Needed for pseudo-element */
  overflow: hidden; /* Hide pseudo-element overflow */
}

/* Hover/Focus Enhancement: Background sweep */
.link-group a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Start off-screen left */
  width: 100%;
  height: 100%;
  background-color: var(--accent-color);
  opacity: var(--link-hover-bg-alpha);
  transition: left 0.35s ease;
  z-index: -1; /* Behind text */
}

.link-group a:hover,
.link-group a:focus-visible {
  color: var(--text-color);
  border-color: var(--highlight-color);
  text-shadow: 0 0 5px black, 0 0 10px var(--highlight-color);
  transform: scale(1.05) skewX(-5deg); /* Add slight skew on hover/focus */
  background-color: rgba(0, 0, 0, 0.3); /* Darken base slightly */
}

.link-group a:hover::before,
.link-group a:focus-visible::before {
  left: 0; /* Sweep background in */
}

/* Focus styles */
.link-group a:focus { outline: none; }
.link-group a:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 4px;
}

/* Responsiveness for links */
@media (max-width: 768px) {
   .link-group { gap: 10px; }
   .link-group a { padding: 8px 15px; font-size: clamp(0.75rem, 2vw, 0.9rem); }
}
@media (max-width: 480px) {
   .link-group { gap: 8px; }
   .link-group a { padding: 7px 13px; }
}

/* --- Page Transition --- */
.page-transition {
  overflow: hidden;
  pointer-events: none;
}

/* --- 3D Transition Container --- */
.scene-3d-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  z-index: 1;
  transform-style: preserve-3d;
}

.rotation-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transform-origin: center center;
}

.rotation-wrapper.rotating {
  transform: rotateY(180deg);
}

.normal-view, .ascii-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  overflow: hidden;
}

.normal-view {
  transform: rotateY(0deg);
  z-index: 2;
}

.ascii-view {
  transform: rotateY(180deg);
  z-index: 1;
  background-color: #000;
}

/* Camera pan effect */
.camera-pan {
  animation: camera-move 0.8s ease-in-out;
}

@keyframes camera-move {
  0% {
    perspective: 1200px;
  }
  50% {
    perspective: 800px;
  }
  100% {
    perspective: 1200px;
  }
}

/* Add a more dramatic door effect with lighting */
.rotating .normal-view {
  box-shadow: 
    -5px 0 15px rgba(0, 0, 0, 0.3),
    inset 3px 0 10px rgba(255, 255, 255, 0.1);
}

.rotating .ascii-view {
  box-shadow: 
    5px 0 15px rgba(0, 0, 0, 0.3),
    inset -3px 0 10px rgba(255, 255, 255, 0.1);
}

/* Lighting effect during rotation */
@keyframes lightingEffect {
  0% {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
    filter: brightness(1);
  }
  50% {
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9);
    filter: brightness(0.7);
  }
  100% {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
    filter: brightness(1);
  }
}

/* Force hardware acceleration for smoother transitions */
canvas {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* High contrast effect for ASCII view */
.ascii-effect-high-contrast {
  filter: contrast(2.5) brightness(1.8);
}

/* Prevent WebGL context loss with these hints */
canvas.webgl-canvas {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* WebGL canvas specific fixes */
.three-js-container canvas {
  transform: translateZ(0);
  transform-style: flat;
  backface-visibility: hidden;
}

/* ASCII effect styles */
.ascii-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    display: none;
    background-color: #000;
    font-family: monospace;
}

.ascii-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    animation: asciiButtonGlow 2s infinite alternate;
}

.ascii-button:hover {
    transform: scale(1.05);
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9) !important;
}

@keyframes asciiButtonGlow {
    0% {
        text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
    }
    100% {
        text-shadow: 0 0 10px rgba(0, 255, 0, 0.9);
    }
}

.scene-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.scene-transition.active {
    opacity: 1;
    background: radial-gradient(circle at center, 
        rgba(30, 30, 30, 0.9) 0%,
        rgba(0, 0, 0, 0.98) 70%);
}

.transition-active {
    pointer-events: none;
    cursor: wait;
}

.transition-active .scene-transition {
    pointer-events: auto;
}

.ascii-waveform-mask {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: #000;
    z-index: 101;
}

.ascii-waveform-gradient {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #000, transparent);
}

/* Basic button styles */
button, a.button, .link-group a {
    transition: opacity 0.3s ease;
}

/* Ripple effect for buttons */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Basic canvas styles */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#canvas-container canvas {
    display: block;
}

/* Fix to ensure the rotation works properly in all browsers */
.page-transition * {
  transform-style: preserve-3d;
}