@charset "UTF-8";

/* Font declarations */
@font-face {
  font-family: "Simplon Ecal Mono";
  src: url("../fonts/SimplonEcalMono.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Simplon Ecal Mono";
  src: url("../fonts/SimplonEcalMono-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

/* Ensure proper scroll behavior */
html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Header styles */
.scroll-header {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(241, 241, 241);
  border: solid black 2px;
  color: rgb(0, 0, 0);
  padding: 15px 0;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out;
  z-index: 2100; /* Higher z-index to ensure it's above text block */
  pointer-events: none; /* This allows clicks to pass through to elements below */
}

.scroll-header.visible {
  transform: translateY(0);
}

.scroll-header.scrolling-up {
  bottom: calc(
    100vh - 80px
  ); /* Position at visible top, accounting for header height */
}

.scroll-header h1 {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 2.5rem; /* Increased from 2rem to make POCKET RADAR larger */
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: auto; /* Make the text itself clickable if needed */
}

/* Radar Header Styles */
.scroll-header-radar3,
.scroll-header-radar4,
.scroll-header-radar5 {
  position: fixed;
  bottom: -20vh; /* Start from below the viewport */
  left: 0;
  width: 100%;
  border: solid black 2px;
  color: rgb(0, 0, 0);
  padding: 15px 0;
  text-align: center; /* Center the text horizontally */
  display: flex; /* Use flexbox for perfect centering */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  transform: translateY(0); /* Remove initial transform for mobile */
  transition: transform 0.5s ease-in-out;
  z-index: 2100; /* Higher z-index to ensure it's above text block */
  pointer-events: none; /* This allows clicks to pass through to elements below */
}

/* Radar3 Header - Red Theme */
.scroll-header-radar3 {
  background-color: rgb(254, 11, 11);
}

/* Radar4 Header - Green Theme */
.scroll-header-radar4 {
  background-color: rgb(100, 255, 100);
}

/* Radar5 Header - Orange/Yellow Theme */
.scroll-header-radar5 {
  background-color: rgb(255, 200, 100);
}

.scroll-header-radar3.visible,
.scroll-header-radar4.visible,
.scroll-header-radar5.visible {
  transform: translateY(0);
}

.scroll-header-radar3.scrolling-up,
.scroll-header-radar4.scrolling-up,
.scroll-header-radar5.scrolling-up {
  top: 0; /* Stick to the very top of the viewport */
  bottom: auto; /* Override bottom positioning */
}

.scroll-header-radar3 h1,
.scroll-header-radar4 h1,
.scroll-header-radar5 h1 {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: clamp(
    1rem,
    4vw,
    2rem
  ); /* Responsive font size that scales with viewport but has limits */
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: auto; /* Make the text itself clickable if needed */
  max-width: 90%; /* Prevent text overflow on any screen size */
  margin: 0 auto; /* Center the text */
  word-break: break-word; /* Allow text to break if needed */
  text-align: center; /* Explicit text centering */
  width: 100%; /* Use full available width */
  display: block; /* Ensure block-level centering */
}

/* Text block styles */
.text-block {
  position: fixed;
  bottom: 0; /* Position it at bottom like the header */
  left: 0; /* Full width like the header */
  width: 100%; /* Full width like the header */
  background-color: rgb(241, 241, 241);
  border: solid black 2px;
  border-top: none; /* Remove top border to connect with header */
  color: rgb(0, 0, 0);
  padding: 12px 15px; /* Match radar text block padding */
  text-align: center; /* Center text */
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out;
  z-index: 2000; /* Below the header but above other elements */
  pointer-events: none;
  min-height: 80px; /* Minimum height for better spacing */
}

.text-block.visible {
  transform: translateY(0);
}

.text-block h3 {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 0.9rem; /* Match radar text block h3 size */
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 8px 0; /* Add consistent spacing below heading */
  color: rgb(0, 0, 0);
}

.text-block p {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 1.1rem; /* Match radar text block p size */
  line-height: 1.6; /* Increased line height for better readability */
  margin: 0;
  max-width: 800px; /* Limit line length for better readability */
  margin: 0 auto; /* Center the text within the container */
}

/* Mobile responsive styles for header, text block, and following section */
@media (max-width: 768px) {
  /* Header mobile styling */
  .scroll-header {
    padding: 18px 20px; /* Increased padding for better breathing space */
  }

  .scroll-header h1 {
    padding: 0 10px; /* Add horizontal padding for better text centering */
    line-height: 1.2; /* Improved line height */
    font-size: 1.1rem; /* Increased from 0.85rem to make POCKET RADAR larger on mobile */
  }

  /* Text block mobile styling */
  .text-block {
    padding: 18px 20px; /* Increased padding to match header */
    min-height: 80px; /* Slightly increased minimum height */
  }

  .text-block h3 {
    font-size: 0.75rem; /* Match mobile radar text block h3 size */
    letter-spacing: 0.5px;
    margin: 0 0 8px 0; /* Slightly increased bottom margin */
    padding: 0 10px; /* Add horizontal padding for better centering */
  }

  .text-block p {
    font-size: 0.9rem; /* Match mobile radar text block p size */
    line-height: 1.4; /* Improved line height for readability */
    padding: 0 10px; /* Add horizontal padding for better centering */
    max-width: 90%; /* Slightly reduced max-width for mobile */
  }

  /* Following section mobile styling */
  .following-section {
    padding: 18px 20px; /* Increased padding to match header and text block */
  }

  .following-section h2 {
    font-size: 0.9rem; /* Match paragraph font size for mobile */
    letter-spacing: 1.5px; /* Adjusted letter spacing for mobile */
    margin: 0 0 8px 0; /* Better bottom margin */
    padding: 0 10px; /* Add horizontal padding for better centering */
    line-height: 1.2; /* Improved line height */
  }

  .following-section p {
    font-size: 0.9rem; /* Consistent with text block */
    line-height: 1.4; /* Improved line height for readability */
    padding: 0 10px; /* Add horizontal padding for better centering */
    max-width: 90%; /* Slightly reduced max-width for mobile */
  }
}

/* Additional mobile styles for smaller screens */
@media (max-width: 480px) {
  /* Header for very small screens */
  .scroll-header {
    padding: 20px 15px; /* Even more breathing space */
  }

  .scroll-header h1 {
    padding: 0 15px; /* More horizontal padding */
    font-size: 1.2rem; /* Increased from 1rem to make POCKET RADAR larger on small screens */
  }

  /* Text block for very small screens */
  .text-block {
    padding: 20px 15px; /* Even more breathing space */
    min-height: 85px; /* Increased minimum height */
  }

  .text-block h3 {
    padding: 0 15px; /* More horizontal padding */
    margin: 0 0 10px 0; /* More bottom margin */
  }

  .text-block p {
    padding: 0 15px; /* More horizontal padding */
    max-width: 85%; /* Further reduced for very small screens */
  }

  /* Following section for very small screens */
  .following-section {
    padding: 20px 15px; /* Even more breathing space */
  }

  .following-section h2 {
    font-size: 0.9rem; /* Match paragraph font size for small screens */
    letter-spacing: 1px; /* Reduced letter spacing */
    padding: 0 15px; /* More horizontal padding */
    margin: 0 0 10px 0; /* More bottom margin */
  }

  .following-section p {
    font-size: 0.9rem; /* Ensure paragraph matches heading */
    padding: 0 15px; /* More horizontal padding */
    max-width: 85%; /* Further reduced for very small screens */
  }
}

/* Make the radar container fixed */
.radar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
}

.grid {
  height: 100vh;
  width: 100%;
  background-color: rgb(245, 245, 245);
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: calc((100%) / 12);
  height: calc(100% / 6);
  box-sizing: border-box;
  border: 1px solid black;
  /* background-color: blue; */
}

.tornade .elipse1 {
  top: 30%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 80vw;
  border: solid black 2px;
  background-image: radial-gradient(blue 0%, rgb(11, 11, 254) 20%, azure 100%);
  opacity: 30%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  mix-blend-mode: color-burn;
  animation: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s;
  transition: background-image 1.2s ease, border-color 1.2s ease,
    opacity 1.2s ease;
}

.tornade .elipse1.color-transition {
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  border-color: rgb(255, 255, 255);
  opacity: 100%;
}

.tornade .elipse2 {
  top: 35%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 75vw;
  border: solid black 2px;
  background-image: radial-gradient(blue 0%, rgb(11, 11, 254) 20%, azure 100%);
  opacity: 30%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  mix-blend-mode: color-burn;
  animation: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s;
  animation-delay: 1s;
  transition: background-image 1.2s ease, border-color 1.2s ease,
    opacity 1.2s ease;
}

.tornade .elipse2.color-transition {
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  border-color: rgb(255, 255, 255);
  opacity: 100%;
}

.tornade .elipse3 {
  top: 40%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 60vw;
  border: solid black 2px;
  background-image: radial-gradient(blue 0%, rgb(11, 11, 254) 20%, azure 100%);
  opacity: 30%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  mix-blend-mode: color-burn;
  animation: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s;
  animation-delay: 2s;
  transition: background-image 1.2s ease, border-color 1.2s ease,
    opacity 1.2s ease;
}

.tornade .elipse3.color-transition {
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  border-color: rgb(255, 255, 255);
  opacity: 100%;
}

.tornade .elipse4 {
  top: 45%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 50vw;
  border: solid black 2px;
  background-image: radial-gradient(blue 0%, rgb(11, 11, 254) 20%, azure 100%);
  opacity: 30%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  mix-blend-mode: color-burn;
  animation: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s;
  animation-delay: 3s;
}

.tornade .elipse4.color-transition {
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  border-color: rgb(255, 255, 255);
  opacity: 100%;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spin2 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(720deg);
  }
}

@keyframes spin3 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Following section styles */
.following-section {
  position: fixed;
  bottom: 0; /* Start from bottom like the header */
  left: 0;
  width: 100%;
  background-color: rgb(241, 241, 241);
  border: solid black 2px;
  color: rgb(0, 0, 0);
  padding: 12px 15px; /* Match radar text block padding */
  text-align: center; /* Center text */
  transform: translateY(100%); /* Start hidden below the viewport */
  transition: transform 0.5s ease-in-out;
  z-index: 1950; /* Between header and text block */
  pointer-events: none;
}

.following-section.visible {
  transform: translateY(0);
}

.following-section h2 {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 1.1rem; /* Match paragraph font size */
  font-weight: bold;
  letter-spacing: 2px; /* Match header h1 letter spacing */
  text-transform: uppercase;
  pointer-events: auto; /* Make the text itself clickable if needed */
  margin: 0 0 8px 0; /* Add consistent spacing below heading */
}

.following-section p {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 1.1rem; /* Match radar text block p size */
  margin: 0;
  line-height: 1.6; /* Improved line height for readability */
  max-width: 800px; /* Limit line length for better readability */
  margin: 0 auto; /* Center the text within the container */
  pointer-events: auto;
}

/* Third section that appears when header and following section overlap */
.overlap-section {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 80%;
  height: 60%;
  background-color: rgb(241, 241, 241); /* Same as header background */
  border: solid black 2px;
  color: rgb(0, 0, 0);
  padding: 30px;
  text-align: center;
  transition: transform 0.3s linear, opacity 0.5s ease;
  z-index: 2100; /* Higher than both header and following section */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}

.overlap-section.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.overlap-section.transitioning {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
}

/* Instant transition class for immediate overlap section hiding */
.overlap-section.instant-hide {
  transition: none !important;
  transform: translate(-50%, -50%) scale(0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.overlap-section h2 {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 2.5rem; /* Increased from 2rem to make h2 larger */
  font-weight: bold;
  letter-spacing: 2px; /* Match header h1 letter spacing */
  text-transform: uppercase;
  text-align: center; /* Center the h2 text */
  margin-top: 1.5em; /* Add space above h2 (one line distance from text above) */
  margin-bottom: 30px; /* Increased from 20px to add even more line spacing */
}

.overlap-section p {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 1.1rem; /* Similar to other text blocks */
  line-height: 1.6;
  max-width: 80%;
}

/* Center text in section-1 and section-2 */
.overlap-section .section-1,
.overlap-section .section-2 {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.overlap-section .section-1 h2,
.overlap-section .section-2 h2 {
  text-align: center;
}

.overlap-section .section-1 p,
.overlap-section .section-2 p {
  text-align: center;
}

/* Close button styles */
.overlap-section .close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: 2px solid black;
  font-size: 1.8rem; /* Larger font size */
  font-weight: bold;
  cursor: pointer;
  width: 45px; /* Bigger width */
  height: 45px; /* Bigger height */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Simplon Ecal Mono", monospace;
  z-index: 2200; /* Higher z-index than radar-2 (which inherits 2100 from overlap-section) */
  transition: all 0.2s ease; /* Smooth hover effects */
  opacity: 0; /* Hidden by default */
  visibility: hidden; /* Hidden by default */
  pointer-events: none; /* Disable interaction when hidden */
}

/* Show close button when radar-2 is active */
.overlap-section.radar2-active .close-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.overlap-section .close-button:hover {
  background-color: black;
  color: white;
  transform: scale(1.1);
}

/* Radar-2 styles for overlap section */
.overlap-section .radar-2 {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  background-color: #000;
  margin: auto;
}

.overlap-section .grid-cell {
  background-color: rgb(241, 241, 241);
  /* width: 100%;
  height: 100%; */
  aspect-ratio: 1;
  transition: transform 0.5s ease, background-color 0.5s ease;
  cursor: pointer; /* Add cursor for better UX */
  /* Improve touch targets on mobile */
  touch-action: manipulation; /* Prevents double-tap zoom */
  -webkit-tap-highlight-color: rgba(
    255,
    136,
    0,
    0.3
  ); /* Custom touch highlight */
}

/* Active state for touch feedback */
.overlap-section .grid-cell:active {
  background-color: #ff8800;
  transform: scale(0.95);
}

/* Hover state for desktop */
@media (hover: hover) {
  .overlap-section .grid-cell:hover {
    background-color: #ebf0ff;
    transform: scale(1.05);
  }
}

/* Remove hover state and only use the animated class */
.overlap-section .grid-cell.animated {
  animation: continueRotation 3s linear forwards;
}

@keyframes continueRotation {
  0% {
    transform: rotate(0deg);
    background-color: #ebf0ff;
  }
  10% {
    transform: rotate(360deg);
    background-color: #ff8800;
  }
  30% {
    transform: rotate(720deg);
    background-color: #ff0000;
  }
  60% {
    transform: rotate(1080deg);
    background-color: #ff8800;
  }
  90% {
    transform: rotate(1440deg);
    background-color: #ff0000;
  }
  100% {
    transform: rotate(1800deg);
    background-color: blue;
  }
}

.overlap-section .grid-cell:not(:hover) {
  transition: transform 2s ease;
}

/* Section visibility styles */
.overlap-section .section-2.invisible {
  display: none;
}

/* Responsive design for overlap section */
@media (max-width: 768px) {
  .overlap-section {
    width: 95%;
    height: 80%;
    padding: 20px;
  }

  .overlap-section h2 {
    font-size: 1.1rem; /* Increased from 0.85rem to make h2 larger on mobile */
    letter-spacing: 1.5px; /* Match header mobile letter spacing */
    margin-top: 1.2em; /* Add space above h2 (one line distance from text above) */
    margin-bottom: 22px; /* Increased from 15px to add even more line spacing */
  }

  .overlap-section p {
    font-size: 0.9rem; /* Match other mobile text blocks */
    line-height: 1.4;
    max-width: 95%;
  }

  .overlap-section .close-button {
    top: 10px;
    right: 10px;
    width: 40px; /* Bigger size for mobile */
    height: 40px; /* Bigger size for mobile */
    font-size: 1.6rem; /* Larger font for mobile */
  }
}

@media (max-width: 480px) {
  .overlap-section {
    width: 98%;
    height: 85%;
    padding: 15px;
  }

  .overlap-section h2 {
    font-size: 1rem; /* Increased from 0.8rem to make h2 larger on small mobile */
    margin-top: 1em; /* Add space above h2 (one line distance from text above) */
    margin-bottom: 18px; /* Increased from 12px to add even more line spacing */
    letter-spacing: 1px; /* Match header small mobile letter spacing */
  }

  .overlap-section p {
    font-size: 0.9rem;
    line-height: 1.3;
    max-width: 100%;
  }

  .overlap-section .close-button {
    top: 8px;
    right: 8px;
    width: 35px; /* Bigger size for small mobile */
    height: 35px; /* Bigger size for small mobile */
    font-size: 1.4rem; /* Larger font for small mobile */
  }

  /* Make radar-2 more responsive on small screens */
  .overlap-section .radar-2 {
    gap: 1px;
  }
  e .overlap-section .grid-cell {
    min-height: 15px; /* Ensure minimum touch target size */
    min-width: 15px;
  }
}

/* Ensure text wraps properly and doesn't overflow */
.overlap-section .section-1,
.overlap-section .section-2 {
  overflow: hidden;
  word-wrap: break-word;
  hyphens: auto;
}

.overlap-section .section-1 p,
.overlap-section .section-2 p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Radar3 styles - matching original radar styles */
.radar3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1500; /* Higher z-index to ensure it appears above other elements */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.radar3.visible {
  opacity: 1;
  visibility: visible;
}

/* Instant transition class for immediate radar activation
.radar3.instant-transition {
  transition: none !important;
} */

/* Blue ellipses fade-out effect during transition */
.tornade .elipse1.fade-out,
.tornade .elipse2.fade-out,
.tornade .elipse3.fade-out,
.tornade .elipse4.fade-out {
  opacity: 0 !important;
  transition: opacity 0.8s ease !important;
}

.grid3 {
  height: 100vh;
  width: 100%;
  background-color: rgb(0, 0, 0);
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.cell3 {
  width: calc((100%) / 12);
  height: calc(100% / 6);
  box-sizing: border-box;
  border: 1px solid rgb(241, 241, 241);
  /* background-color: blue; */
}

.tornade2 .elipse5 {
  top: 180%; /* Start further below viewport for more dramatic animation */
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 80vw;
  border: solid rgb(241, 241, 241) 3px; /* Thicker border for visibility */
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  /* mix-blend-mode: color-burn; */
  /* animation: spin2; - Remove initial animation */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s; /* Faster spinning for more visibility */
  z-index: 1000; /* Ensure it's above the grid */
  /* Add dramatic glow effects */
  box-shadow: 0 0 20px rgba(255, 221, 0, 0.7), 0 0 40px rgba(254, 11, 11, 0.5),
    0 0 60px rgba(255, 149, 0, 0.3);
  /* Remove transition for scroll-based control */
  transition: all 0.3s ease-out; /* Smooth transitions for dramatic effect */
}

.tornade2 .elipse5.in-position {
  top: 30%; /* Final position */
  animation: spin2 4s linear infinite 2s; /* Faster spinning with 2s delay */
  /* Enhanced glow when in position */
  box-shadow: 0 0 30px rgba(255, 221, 0, 0.9), 0 0 60px rgba(254, 11, 11, 0.7),
    0 0 90px rgba(255, 149, 0, 0.5);
}

.tornade2 .elipse6 {
  top: 175%; /* Start further below viewport for more dramatic animation */
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 75vw;
  border: solid rgb(241, 241, 241) 3px; /* Thicker border for visibility */
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  /* mix-blend-mode: color-burn; */
  /* animation: spin2; - Remove initial animation */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s; /* Faster spinning for more visibility */
  animation-delay: 1s;
  z-index: 750; /* Ensure it's above the grid */
  /* Add dramatic glow effects */
  box-shadow: 0 0 18px rgba(255, 221, 0, 0.6), 0 0 36px rgba(254, 11, 11, 0.4),
    0 0 54px rgba(255, 149, 0, 0.3);
  /* Remove transition for scroll-based control */
  transition: all 0.3s ease-out; /* Smooth transitions for dramatic effect */
}

.tornade2 .elipse6.in-position {
  top: 40%; /* Updated final position for more spacing */
  animation: spin2 4s linear infinite 3s; /* Faster spinning with 3s delay */
  /* Enhanced glow when in position */
  box-shadow: 0 0 27px rgba(255, 221, 0, 0.8), 0 0 54px rgba(254, 11, 11, 0.6),
    0 0 81px rgba(255, 149, 0, 0.4);
}

.tornade2 .elipse7 {
  top: 170%; /* Start further below viewport for more dramatic animation */
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 60vw;
  border: solid rgb(241, 241, 241) 3px; /* Thicker border for visibility */
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  /* mix-blend-mode: color-burn; */
  /* animation: spin2; - Remove initial animation */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s; /* Faster spinning for more visibility */
  animation-delay: 2s;
  z-index: 500; /* Ensure it's above the grid */
  /* Add dramatic glow effects */
  box-shadow: 0 0 16px rgba(255, 221, 0, 0.5), 0 0 32px rgba(254, 11, 11, 0.3),
    0 0 48px rgba(255, 149, 0, 0.2);
  /* Remove transition for scroll-based control */
  transition: all 0.3s ease-out; /* Smooth transitions for dramatic effect */
}

.tornade2 .elipse7.in-position {
  top: 50%; /* Updated final position for more spacing */
  animation: spin2 4s linear infinite 4s; /* Faster spinning with 4s delay */
  /* Enhanced glow when in position */
  box-shadow: 0 0 24px rgba(255, 221, 0, 0.7), 0 0 48px rgba(254, 11, 11, 0.5),
    0 0 72px rgba(255, 149, 0, 0.3);
}

.tornade2 .elipse8 {
  top: 135%; /* Start further below viewport */
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 50vw;
  border: solid rgb(241, 241, 241) 2px;
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  /* mix-blend-mode: color-burn; */
  /* animation: spin2; - Remove initial animation */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s;
  animation-delay: 3s;
  z-index: 250; /* Ensure it's above the grid */
  /* Remove transition for scroll-based control */
}

.tornade2 .elipse8.in-position {
  top: 60%; /* Updated final position for more spacing */
  animation: spin2 5s linear infinite 3s;
}

/* Text blocks for radar3 ellipses */
.tornade2 .text-block-5,
.tornade2 .text-block-6,
.tornade2 .text-block-7,
.tornade2 .text-block-8,
.tornade2 .text-block-refresh {
  position: absolute;
  background-color: rgb(0, 0, 0);
  border: solid rgb(241, 241, 241) 2px;
  color: rgb(241, 241, 241);
  padding: 12px 15px;
  text-align: left;
  z-index: 2000; /* Above ellipses */
  transform: translate(-50%, -50%);
  font-family: "Simplon Ecal Mono", monospace;
  /* backdrop-filter: blur(5px); */
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0); */
  width: 40%; /* Set width to 40% to prevent overlapping */
  max-width: 350px; /* Maximum width for larger screens */
  min-width: 120px;
}

.tornade2 .text-block-5.in-position,
.tornade2 .text-block-6.in-position,
.tornade2 .text-block-7.in-position,
.tornade2 .text-block-8.in-position,
.tornade2 .text-block-refresh.in-position {
  opacity: 1;
  visibility: visible;
}

.tornade2 .text-block-5 h3,
.tornade2 .text-block-6 h3,
.tornade2 .text-block-7 h3,
.tornade2 .text-block-8 h3,
.tornade2 .text-block-refresh h3 {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: rgb(241, 241, 241);
}

.tornade2 .text-block-5 p,
.tornade2 .text-block-6 p,
.tornade2 .text-block-7 p,
.tornade2 .text-block-8 p,
.tornade2 .text-block-refresh p {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 1.1rem;
  margin: 0;
  color: rgb(241, 241, 241);
}

/* Individual positioning for each text block */
.tornade2 .text-block-5 {
  top: 150%; /* Start below viewport like ellipse5 */
  left: 30%; /* Positioned to the left - adjusted for 40% width */
  opacity: 0;
  visibility: hidden;
}

.tornade2 .text-block-5.in-position {
  top: 30%; /* Follow ellipse5 final position */
  left: 20%; /* Stay to the left - adjusted for 40% width */
}

.tornade2 .text-block-6 {
  top: 145%; /* Start below viewport like ellipse6 */
  left: 70%; /* Positioned to the right - adjusted for 40% width */
  opacity: 0;
  visibility: hidden;
}

.tornade2 .text-block-6.in-position {
  top: 40%; /* Follow ellipse6 final position */
  left: 80%; /* Stay to the right - adjusted for 40% width */
}

.tornade2 .text-block-7 {
  top: 140%; /* Start below viewport like ellipse7 */
  left: 30%; /* Positioned to the left - adjusted for 40% width */
  opacity: 0;
  visibility: hidden;
}

.tornade2 .text-block-7.in-position {
  top: 50%; /* Follow ellipse7 final position */
  left: 20%; /* Stay to the left - adjusted for 40% width */
}

.tornade2 .text-block-8 {
  top: 135%; /* Start below viewport like ellipse8 */
  left: 70%; /* Positioned to the right - adjusted for 40% width */
  opacity: 0;
  visibility: hidden;
}

.tornade2 .text-block-8.in-position {
  top: 60%; /* Follow ellipse8 final position */
  left: 80%; /* Stay to the right - adjusted for 40% width */
}

/* Refresh button text block positioning */
.tornade2 .text-block-refresh {
  top: 130%; /* Start below viewport like other text blocks */
  left: 50%; /* Centered position */
  opacity: 0;
  visibility: hidden;
}

.tornade2 .text-block-refresh.in-position {
  top: 70%; /* Position below text-block-8 */
  left: 50%; /* Stay centered */
}

/* Refresh button styles */
.tornade2 .refresh-button {
  background-color: rgb(255, 221, 0);
  border: solid rgb(241, 241, 241) 2px;
  color: rgb(0, 0, 0);
  padding: 8px 16px;
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  margin-top: 8px;
  display: block;
  width: 100%;
  text-align: center;
}

.tornade2 .refresh-button:hover {
  background-color: rgb(254, 11, 11);
  color: rgb(241, 241, 241);
  transform: scale(1.05);
}

.tornade2 .refresh-button:active {
  transform: scale(0.95);
}

/* Radar4 styles - Green Theme */
.radar4 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.radar4.visible {
  opacity: 1;
  visibility: visible;
}

/* Instant transition class for immediate radar activation
.radar4.instant-transition {
  transition: none !important;
} */

.grid4 {
  height: 100vh;
  width: 100%;
  background-color: rgb(241, 241, 241); /* Same as header background */
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.cell4 {
  width: calc((100%) / 12);
  height: calc(100% / 6);
  box-sizing: border-box;
  border: 1px solid rgb(0, 0, 0);
}

.tornade3 .elipse9 {
  top: 180%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 80vw;
  border: solid rgb(0, 0, 0) 2px; /* Border */
  background-image: radial-gradient(
    rgb(0, 255, 0) 0%,
    rgb(34, 139, 34) 20%,
    rgb(0, 128, 0) 100%
  ); /* Green gradient for radar4 */
  mix-blend-mode: color-burn;
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
  z-index: 1000;
  /* box-shadow: 0 0 20px rgba(0, 255, 0, 0.7), 0 0 40px rgba(34, 139, 34, 0.5),
    0 0 60px rgba(0, 128, 0, 0.3); */
  transition: all 0.3s ease-out;
}

.tornade3 .elipse9.in-position {
  top: 30%;
  animation: spin 4s linear infinite 2s;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.9), 0 0 60px rgba(34, 139, 34, 0.7),
    0 0 90px rgba(0, 128, 0, 0.5);
}

.tornade3 .elipse10 {
  top: 175%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 75vw;
  border: solid rgb(0, 0, 0) 2px;
  background-image: radial-gradient(
    rgb(0, 255, 0) 0%,
    rgb(34, 139, 34) 20%,
    rgb(0, 128, 0) 100%
  );
  mix-blend-mode: color-burn;
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
  animation-delay: 1s;
  z-index: 750;
  /* box-shadow: 0 0 18px rgba(0, 255, 0, 0.6), 0 0 36px rgba(34, 139, 34, 0.4),
    0 0 54px rgba(0, 128, 0, 0.3); */
  transition: all 0.3s ease-out;
}

.tornade3 .elipse10.in-position {
  top: 40%;
  animation: spin 4s linear infinite 3s;
  box-shadow: 0 0 27px rgba(0, 255, 0, 0.8), 0 0 54px rgba(34, 139, 34, 0.6),
    0 0 81px rgba(0, 128, 0, 0.4);
}

.tornade3 .elipse11 {
  top: 170%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 60vw;
  border: solid rgb(0, 0, 0) 2px;
  background-image: radial-gradient(
    rgb(0, 255, 0) 0%,
    rgb(34, 139, 34) 20%,
    rgb(0, 128, 0) 100%
  );
  mix-blend-mode: color-burn;
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
  animation-delay: 2s;
  z-index: 500;
  /* box-shadow: 0 0 16px rgba(0, 255, 0, 0.5), 0 0 32px rgba(34, 139, 34, 0.3),
    0 0 48px rgba(0, 128, 0, 0.2); */
  transition: all 0.3s ease-out;
}

.tornade3 .elipse11.in-position {
  top: 50%;
  animation: spin 4s linear infinite 4s;
  box-shadow: 0 0 24px rgba(0, 255, 0, 0.7), 0 0 48px rgba(34, 139, 34, 0.5),
    0 0 72px rgba(0, 128, 0, 0.3);
}

.tornade3 .elipse12 {
  top: 135%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 50vw;
  border: solid rgb(0, 0, 0) 2px;
  background-image: radial-gradient(
    rgb(0, 255, 0) 0%,
    rgb(34, 139, 34) 20%,
    rgb(0, 128, 0) 100%
  );
  mix-blend-mode: color-burn;
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s;
  animation-delay: 3s;
  z-index: 250;
}

.tornade3 .elipse12.in-position {
  top: 60%;
  animation: spin 5s linear infinite 3s;
}

/* Text blocks for radar4 ellipses - Green Theme */
.tornade3 .text-block-9,
.tornade3 .text-block-10,
.tornade3 .text-block-11,
.tornade3 .text-block-12,
.tornade3 .text-block-refresh-2 {
  position: absolute;
  background-color: rgb(241, 241, 241);
  border: solid rgb(0, 0, 0) 2px;
  color: rgb(0, 0, 0);
  padding: 12px 15px;
  text-align: left;
  z-index: 2000;
  transform: translate(-50%, -50%);
  font-family: "Simplon Ecal Mono", monospace;
  /* backdrop-filter: blur(5px); */
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0); */
  width: 40%;
  max-width: 350px;
  min-width: 120px;
}

.tornade3 .text-block-9.in-position,
.tornade3 .text-block-10.in-position,
.tornade3 .text-block-11.in-position,
.tornade3 .text-block-12.in-position,
.tornade3 .text-block-refresh-2.in-position {
  opacity: 1;
  visibility: visible;
}

.tornade3 .text-block-9 h3,
.tornade3 .text-block-10 h3,
.tornade3 .text-block-11 h3,
.tornade3 .text-block-12 h3,
.tornade3 .text-block-refresh-2 h3 {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: rgb(0, 0, 0);
}

.tornade3 .text-block-9 p,
.tornade3 .text-block-10 p,
.tornade3 .text-block-11 p,
.tornade3 .text-block-12 p,
.tornade3 .text-block-refresh-2 p {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 1.1rem;
  margin: 0;
  color: rgb(0, 0, 0);
}

/* Individual positioning for radar4 text blocks */
.tornade3 .text-block-9 {
  top: 150%;
  left: 30%;
  opacity: 0;
  visibility: hidden;
}

.tornade3 .text-block-9.in-position {
  top: 30%;
  left: 20%;
}

.tornade3 .text-block-10 {
  top: 145%;
  left: 70%;
  opacity: 0;
  visibility: hidden;
}

.tornade3 .text-block-10.in-position {
  top: 40%;
  left: 80%;
}

.tornade3 .text-block-11 {
  top: 140%;
  left: 30%;
  opacity: 0;
  visibility: hidden;
}

.tornade3 .text-block-11.in-position {
  top: 50%;
  left: 20%;
}

.tornade3 .text-block-12 {
  top: 135%;
  left: 70%;
  opacity: 0;
  visibility: hidden;
}

.tornade3 .text-block-12.in-position {
  top: 60%;
  left: 80%;
}

.tornade3 .text-block-refresh-2 {
  top: 130%;
  left: 50%;
  opacity: 0;
  visibility: hidden;
}

.tornade3 .text-block-refresh-2.in-position {
  top: 70%;
  left: 50%;
}

/* Refresh button for radar4 */
.tornade3 .refresh-button-2 {
  background-color: rgb(0, 255, 0);
  border: solid rgb(0, 0, 0) 2px;
  color: rgb(0, 0, 0);
  padding: 8px 16px;
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  margin-top: 8px;
  display: block;
  width: 100%;
  text-align: center;
}

.tornade3 .refresh-button-2:hover {
  background-color: rgb(34, 139, 34);
  color: rgb(241, 241, 241);
  transform: scale(1.05);
}

.tornade3 .refresh-button-2:active {
  transform: scale(0.95);
}

/* Radar5 styles - Orange/Yellow Theme */
.radar5 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.radar5.visible {
  opacity: 1;
  visibility: visible;
}

/* Instant transition class for immediate radar activation
.radar5.instant-transition {
  transition: none !important;
} */

.grid5 {
  height: 100vh;
  width: 100%;
  background-color: rgb(241, 241, 241); /* Orange background */
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.cell5 {
  width: calc((100%) / 12);
  height: calc(100% / 6);
  box-sizing: border-box;
  border: 1px solid rgb(255, 165, 0);
}

.tornade4 .elipse13 {
  top: 180%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 80vw;
  border: solid rgb(0, 0, 0) 2px; /* Border */
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  ); /* Same gradient as original ellipses */
  mix-blend-mode: color-burn;
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
  z-index: 1000;
  box-shadow: 0 0 20px rgba(255, 221, 0, 0.7), 0 0 40px rgba(254, 11, 11, 0.5),
    0 0 60px rgba(255, 149, 0, 0.3);
  transition: all 0.3s ease-out;
}

.tornade4 .elipse13.in-position {
  top: 30%;
  animation: spin3 3s linear infinite 2s;
  box-shadow: 0 0 30px rgba(255, 221, 0, 0.9), 0 0 60px rgba(254, 11, 11, 0.7),
    0 0 90px rgba(255, 149, 0, 0.5);
}

.tornade4 .elipse14 {
  top: 175%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 75vw;
  border: solid rgb(0, 0, 0) 2px;
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  mix-blend-mode: color-burn;
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
  animation-delay: 1s;
  z-index: 750;
  box-shadow: 0 0 18px rgba(255, 221, 0, 0.6), 0 0 36px rgba(254, 11, 11, 0.4),
    0 0 54px rgba(255, 149, 0, 0.3);
  transition: all 0.3s ease-out;
}

.tornade4 .elipse14.in-position {
  top: 40%;
  animation: spin3 3s linear infinite 3s;
  box-shadow: 0 0 27px rgba(255, 221, 0, 0.8), 0 0 54px rgba(254, 11, 11, 0.6),
    0 0 81px rgba(255, 149, 0, 0.4);
}

.tornade4 .elipse15 {
  top: 170%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 60vw;
  border: solid rgb(0, 0, 0) 2px;
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  mix-blend-mode: color-burn;
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
  animation-delay: 2s;
  z-index: 500;
  box-shadow: 0 0 16px rgba(255, 221, 0, 0.5), 0 0 32px rgba(254, 11, 11, 0.3),
    0 0 48px rgba(255, 149, 0, 0.2);
  transition: all 0.3s ease-out;
}

.tornade4 .elipse15.in-position {
  top: 50%;
  animation: spin3 3s linear infinite 4s;
  box-shadow: 0 0 24px rgba(255, 221, 0, 0.7), 0 0 48px rgba(254, 11, 11, 0.5),
    0 0 72px rgba(255, 149, 0, 0.3);
}

.tornade4 .elipse16 {
  top: 135%;
  left: 50%;
  position: absolute;
  height: 10vh;
  width: 50vw;
  border: solid rgb(0, 0, 0) 2px;
  background-image: radial-gradient(
    rgb(255, 221, 0) 0%,
    rgb(254, 11, 11) 20%,
    rgb(255, 149, 0) 100%
  );
  mix-blend-mode: color-burn;
  opacity: 100%;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s;
  animation-delay: 3s;
  z-index: 250;
}

.tornade4 .elipse16.in-position {
  top: 60%;
  animation: spin3 4s linear infinite 3s;
}

/* Text blocks for radar5 ellipses - Yellow/Red/Orange Theme */
.tornade4 .text-block-13,
.tornade4 .text-block-14,
.tornade4 .text-block-15,
.tornade4 .text-block-16,
.tornade4 .text-block-refresh-3 {
  position: absolute;
  background-color: rgba(255, 140, 0, 0);
  border: 2px solid rgb(255, 165, 0);
  color: rgb(0, 0, 0);
  padding: 12px 15px;
  text-align: left;
  z-index: 2000;
  transform: translate(-50%, -50%);
  font-family: "Simplon Ecal Mono", monospace;
  /* backdrop-filter: blur(5px); */
  background-color: rgb(241, 241, 241);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
  width: 40%;
  max-width: 350px;
  min-width: 120px;
}

.tornade4 .text-block-13.in-position,
.tornade4 .text-block-14.in-position,
.tornade4 .text-block-15.in-position,
.tornade4 .text-block-16.in-position,
.tornade4 .text-block-refresh-3.in-position {
  opacity: 1;
  visibility: visible;
}

.tornade4 .text-block-13 h3,
.tornade4 .text-block-14 h3,
.tornade4 .text-block-15 h3,
.tornade4 .text-block-16 h3,
.tornade4 .text-block-refresh-3 h3 {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: rgb(0, 0, 0);
}

.tornade4 .text-block-13 p,
.tornade4 .text-block-14 p,
.tornade4 .text-block-15 p,
.tornade4 .text-block-16 p,
.tornade4 .text-block-refresh-3 p {
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 1.1rem;
  margin: 0;
  color: rgb(0, 0, 0);
}

/* Individual positioning for radar5 text blocks */
.tornade4 .text-block-13 {
  top: 150%;
  left: 30%;
  opacity: 0;
  visibility: hidden;
}

.tornade4 .text-block-13.in-position {
  top: 30%;
  left: 20%;
}

.tornade4 .text-block-14 {
  top: 145%;
  left: 70%;
  opacity: 0;
  visibility: hidden;
}

.tornade4 .text-block-14.in-position {
  top: 40%;
  left: 80%;
}

.tornade4 .text-block-15 {
  top: 140%;
  left: 30%;
  opacity: 0;
  visibility: hidden;
}

.tornade4 .text-block-15.in-position {
  top: 50%;
  left: 20%;
}

.tornade4 .text-block-16 {
  top: 135%;
  left: 70%;
  opacity: 0;
  visibility: hidden;
}

.tornade4 .text-block-16.in-position {
  top: 60%;
  left: 80%;
}

.tornade4 .text-block-refresh-3 {
  top: 130%;
  left: 50%;
  opacity: 0;
  visibility: hidden;
}

.tornade4 .text-block-refresh-3.in-position {
  top: 70%;
  left: 50%;
}

/* Refresh button for radar5 */
.tornade4 .refresh-button-3 {
  background-color: rgb(255, 149, 0);
  border: solid rgb(0, 0, 0) 2px;
  color: rgb(0, 0, 0);
  padding: 8px 16px;
  font-family: "Simplon Ecal Mono", monospace;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  margin-top: 8px;
  display: block;
  width: 100%;
  text-align: center;
}

.tornade4 .refresh-button-3:hover {
  background-color: rgb(254, 11, 11);
  color: rgb(255, 255, 255);
  transform: scale(1.05);
}

.tornade4 .refresh-button-3:active {
  transform: scale(0.95);
}

/* Mobile-specific optimizations for radar headers */
@media screen and (max-width: 768px) {
  .scroll-header-radar3,
  .scroll-header-radar4,
  .scroll-header-radar5 {
    padding: 10px 0; /* Reduced padding on mobile */
    border-width: 1px; /* Thinner border on mobile */
  }

  .scroll-header-radar3 h1,
  .scroll-header-radar4 h1,
  .scroll-header-radar5 h1 {
    font-size: 1.4rem; /* Smaller font size on mobile */
    letter-spacing: 1px; /* Reduced letter spacing on mobile */
    line-height: 1.2; /* Better line height for mobile */
    max-width: 90%; /* Prevent text from extending too far on small screens */
    margin: 0 auto; /* Center the text */
  }

  /* Mobile-specific positioning for headers when scrolled to top */
  .scroll-header-radar3.scrolling-up,
  .scroll-header-radar4.scrolling-up,
  .scroll-header-radar5.scrolling-up {
    bottom: calc(100vh - 60px); /* Smaller offset on mobile for header height */
  }

  /* Enhanced touch target for mobile */
  .scroll-header-radar3,
  .scroll-header-radar4,
  .scroll-header-radar5 {
    min-height: 60px; /* Ensure minimum touch target size */
  }
}

/* Additional responsive breakpoints for smaller screens */
@media screen and (max-width: 480px) {
  .scroll-header-radar3,
  .scroll-header-radar4,
  .scroll-header-radar5 {
    padding: 8px 0; /* Even smaller padding for very small screens */
  }

  .scroll-header-radar3 h1,
  .scroll-header-radar4 h1,
  .scroll-header-radar5 h1 {
    font-size: 1.1rem; /* Even smaller font size for very small screens */
    letter-spacing: 0.5px; /* Minimal letter spacing */
    max-width: 95%; /* Allow more width usage on very small screens */
  }
}

/* Ensure headers never get larger than reasonable size on any screen */
@media screen and (max-width: 360px) {
  .scroll-header-radar3 h1,
  .scroll-header-radar4 h1,
  .scroll-header-radar5 h1 {
    font-size: 1rem; /* Minimum readable size for very small screens */
    letter-spacing: 0.3px;
  }
}

@media screen and (max-width: 768px) {
  html {
    /* Improve momentum scrolling */
    -webkit-overflow-scrolling: touch;
  }

  /* Better positioning for very small screens */
  @media screen and (max-width: 480px) {
    .scroll-header-radar3 h1,
    .scroll-header-radar4 h1,
    .scroll-header-radar5 h1 {
      font-size: 1.1rem; /* Even smaller for very small screens */
      letter-spacing: 0.5px;
    }

    .scroll-header-radar3,
    .scroll-header-radar4,
    .scroll-header-radar5 {
      padding: 6px 0; /* Very compact for small screens */
    }

    .scroll-header-radar3.scrolling-up,
    .scroll-header-radar4.scrolling-up,
    .scroll-header-radar5.scrolling-up {
      bottom: calc(100vh - 45px); /* Minimal offset for small screens */
    }
  }
}

/* Blur and fade-out effects for when radar3 is active */
.header-blur {
  filter: blur(8px);
  opacity: 0;
  transition: filter 0.8s ease, opacity 0.8s ease;
}

.text-block-blur {
  filter: blur(8px);
  opacity: 0;
  transition: filter 0.8s ease, opacity 0.8s ease;
}

.following-section-blur {
  filter: blur(8px);
  opacity: 0;
  transition: filter 0.8s ease, opacity 0.8s ease;
}

/* Additional mobile body class optimizations */
body.mobile-device {
  /* Improve touch scrolling performance */
  -webkit-overflow-scrolling: touch;
  /* Prevent text selection during touch interactions */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Prevent zoom on input focus */
  -webkit-text-size-adjust: 100%;
}

/* Improve touch targets on mobile */
body.mobile-device .scroll-header-radar3,
body.mobile-device .scroll-header-radar4,
body.mobile-device .scroll-header-radar5 {
  /* Ensure headers are easily touchable */
  touch-action: manipulation;
}

/* Better mobile scrolling for the entire page */
@media screen and (max-width: 768px) {
  html {
    /* Improve momentum scrolling */
    -webkit-overflow-scrolling: touch;
  }

  /* Better positioning for very small screens */
  @media screen and (max-width: 480px) {
    .scroll-header-radar3 h1,
    .scroll-header-radar4 h1,
    .scroll-header-radar5 h1 {
      font-size: 1.1rem; /* Even smaller for very small screens */
      letter-spacing: 0.5px;
    }

    .scroll-header-radar3,
    .scroll-header-radar4,
    .scroll-header-radar5 {
      padding: 6px 0; /* Very compact for small screens */
    }

    .scroll-header-radar3.scrolling-up,
    .scroll-header-radar4.scrolling-up,
    .scroll-header-radar5.scrolling-up {
      bottom: calc(100vh - 45px); /* Minimal offset for small screens */
    }
  }
}

/* Mobile text block optimizations - Making text blocks smaller for better mobile readability */
@media screen and (max-width: 768px) {
  /* All radar systems text blocks - Mobile/Tablet */
  .tornade2 .text-block-5,
  .tornade2 .text-block-6,
  .tornade2 .text-block-7,
  .tornade2 .text-block-8,
  .tornade2 .text-block-refresh,
  .tornade3 .text-block-9,
  .tornade3 .text-block-10,
  .tornade3 .text-block-11,
  .tornade3 .text-block-12,
  .tornade3 .text-block-refresh-2,
  .tornade4 .text-block-13,
  .tornade4 .text-block-14,
  .tornade4 .text-block-15,
  .tornade4 .text-block-16,
  .tornade4 .text-block-refresh-3 {
    width: 32% !important; /* Reduced from 40% for better mobile fit */
    max-width: 280px !important; /* Reduced from 350px */
    min-width: 100px !important; /* Reduced from 120px */
    padding: 8px 10px !important; /* Reduced from 12px 15px */
    backdrop-filter: blur(6px) !important; /* Reduced for performance */
  }

  /* Mobile typography - smaller fonts for better fit */
  .tornade2 .text-block-5 h3,
  .tornade2 .text-block-6 h3,
  .tornade2 .text-block-7 h3,
  .tornade2 .text-block-8 h3,
  .tornade2 .text-block-refresh h3,
  .tornade3 .text-block-9 h3,
  .tornade3 .text-block-10 h3,
  .tornade3 .text-block-11 h3,
  .tornade3 .text-block-12 h3,
  .tornade3 .text-block-refresh-2 h3,
  .tornade4 .text-block-13 h3,
  .tornade4 .text-block-14 h3,
  .tornade4 .text-block-15 h3,
  .tornade4 .text-block-16 h3,
  .tornade4 .text-block-refresh-3 h3 {
    font-size: 0.75rem !important; /* Reduced from 0.9rem */
    letter-spacing: 0.5px !important; /* Reduced from 1px */
    margin: 0 0 6px 0 !important; /* Reduced margin */
  }

  .tornade2 .text-block-5 p,
  .tornade2 .text-block-6 p,
  .tornade2 .text-block-7 p,
  .tornade2 .text-block-8 p,
  .tornade2 .text-block-refresh p,
  .tornade3 .text-block-9 p,
  .tornade3 .text-block-10 p,
  .tornade3 .text-block-11 p,
  .tornade3 .text-block-12 p,
  .tornade3 .text-block-refresh-2 p,
  .tornade4 .text-block-13 p,
  .tornade4 .text-block-14 p,
  .tornade4 .text-block-15 p,
  .tornade4 .text-block-16 p,
  .tornade4 .text-block-refresh-3 p {
    font-size: 0.9rem !important; /* Reduced from 1.1rem */
    line-height: 1.3 !important; /* Tighter line height for mobile */
  }

  /* Mobile refresh buttons - smaller sizing */
  .tornade2 .refresh-button,
  .tornade3 .refresh-button-2,
  .tornade4 .refresh-button-3 {
    padding: 5px 8px !important; /* Reduced padding */
    font-size: 0.7rem !important; /* Smaller font */
    letter-spacing: 0.5px !important; /* Reduced letter spacing */
    margin-top: 6px !important; /* Reduced margin */
  }
}

/* Small mobile devices - even more compact */
@media screen and (max-width: 480px) {
  /* All radar systems text blocks - Small Mobile */
  .tornade2 .text-block-5,
  .tornade2 .text-block-6,
  .tornade2 .text-block-7,
  .tornade2 .text-block-8,
  .tornade2 .text-block-refresh,
  .tornade3 .text-block-9,
  .tornade3 .text-block-10,
  .tornade3 .text-block-11,
  .tornade3 .text-block-12,
  .tornade3 .text-block-refresh-2,
  .tornade4 .text-block-13,
  .tornade4 .text-block-14,
  .tornade4 .text-block-15,
  .tornade4 .text-block-16,
  .tornade4 .text-block-refresh-3 {
    width: 28% !important; /* Even smaller for small mobile */
    max-width: 240px !important; /* Further reduced */
    min-width: 90px !important; /* Minimum for readability */
    padding: 6px 8px !important; /* More compact padding */
  }

  /* Smaller typography for small mobile */
  .tornade2 .text-block-5 h3,
  .tornade2 .text-block-6 h3,
  .tornade2 .text-block-7 h3,
  .tornade2 .text-block-8 h3,
  .tornade2 .text-block-refresh h3,
  .tornade3 .text-block-9 h3,
  .tornade3 .text-block-10 h3,
  .tornade3 .text-block-11 h3,
  .tornade3 .text-block-12 h3,
  .tornade3 .text-block-refresh-2 h3,
  .tornade4 .text-block-13 h3,
  .tornade4 .text-block-14 h3,
  .tornade4 .text-block-15 h3,
  .tornade4 .text-block-16 h3,
  .tornade4 .text-block-refresh-3 h3 {
    font-size: 0.65rem !important; /* Even smaller on small mobile */
    letter-spacing: 0.3px !important;
    margin: 0 0 4px 0 !important;
  }

  .tornade2 .text-block-5 p,
  .tornade2 .text-block-6 p,
  .tornade2 .text-block-7 p,
  .tornade2 .text-block-8 p,
  .tornade2 .text-block-refresh p,
  .tornade3 .text-block-9 p,
  .tornade3 .text-block-10 p,
  .tornade3 .text-block-11 p,
  .tornade3 .text-block-12 p,
  .tornade3 .text-block-refresh-2 p,
  .tornade4 .text-block-13 p,
  .tornade4 .text-block-14 p,
  .tornade4 .text-block-15 p,
  .tornade4 .text-block-16 p,
  .tornade4 .text-block-refresh-3 p {
    font-size: 0.8rem !important; /* Smaller text for small mobile */
    line-height: 1.2 !important; /* Compact line height */
  }

  /* Refresh buttons for small mobile */
  .tornade2 .refresh-button,
  .tornade3 .refresh-button-2,
  .tornade4 .refresh-button-3 {
    padding: 4px 6px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.3px !important;
    margin-top: 4px !important;
  }
}

/* Mobile landscape optimization */
@media screen and (max-width: 768px) and (orientation: landscape) {
  /* Landscape mobile - more compact vertically */
  .tornade2 .text-block-5,
  .tornade2 .text-block-6,
  .tornade2 .text-block-7,
  .tornade2 .text-block-8,
  .tornade2 .text-block-refresh,
  .tornade3 .text-block-9,
  .tornade3 .text-block-10,
  .tornade3 .text-block-11,
  .tornade3 .text-block-12,
  .tornade3 .text-block-refresh-2,
  .tornade4 .text-block-13,
  .tornade4 .text-block-14,
  .tornade4 .text-block-15,
  .tornade4 .text-block-16,
  .tornade4 .text-block-refresh-3 {
    width: 25% !important; /* Narrower in landscape */
    max-width: 200px !important;
    padding: 5px 7px !important; /* Compact for limited vertical space */
  }

  /* Landscape typography */
  .tornade2 .text-block-5 h3,
  .tornade2 .text-block-6 h3,
  .tornade2 .text-block-7 h3,
  .tornade2 .text-block-8 h3,
  .tornade2 .text-block-refresh h3,
  .tornade3 .text-block-9 h3,
  .tornade3 .text-block-10 h3,
  .tornade3 .text-block-11 h3,
  .tornade3 .text-block-12 h3,
  .tornade3 .text-block-refresh-2 h3,
  .tornade4 .text-block-13 h3,
  .tornade4 .text-block-14 h3,
  .tornade4 .text-block-15 h3,
  .tornade4 .text-block-16 h3,
  .tornade4 .text-block-refresh-3 h3 {
    font-size: 0.7rem !important;
    margin: 0 0 3px 0 !important; /* Minimal vertical spacing */
  }

  .tornade2 .text-block-5 p,
  .tornade2 .text-block-6 p,
  .tornade2 .text-block-7 p,
  .tornade2 .text-block-8 p,
  .tornade2 .text-block-refresh p,
  .tornade3 .text-block-9 p,
  .tornade3 .text-block-10 p,
  .tornade3 .text-block-11 p,
  .tornade3 .text-block-12 p,
  .tornade3 .text-block-refresh-2 p,
  .tornade4 .text-block-13 p,
  .tornade4 .text-block-14 p,
  .tornade4 .text-block-15 p,
  .tornade4 .text-block-16 p,
  .tornade4 .text-block-refresh-3 p {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }

  /* Landscape refresh buttons */
  .tornade2 .refresh-button,
  .tornade3 .refresh-button-2,
  .tornade4 .refresh-button-3 {
    padding: 3px 5px !important;
    font-size: 0.65rem !important;
    margin-top: 3px !important;
  }
}