/*=============================================
=            Table of Contents            =
=============================================
1. Imports & Variables
2. Base Layout & Scrolling
3. Viewport & Parallax
4. Typography & Title Animations
5. Background Elements
6. Interactive & Content Layers
7. Countdown Components
8. Spotify Player
9. Navigation Elements
10. Visual Effects (Rectangle, Line, Text)
11. Animation Keyframes
12. Media Queries
=============================================*/

/* -- 1. Imports & Variables -- */
@import url(root.css); /* Import root variables and custom properties */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap'); /* Import Orbitron font */
@import url(intro.css); /* Import intro animations */
@import url(menu.css); /* Import menu styles */
@import url(split-flap.css);

/* -- Typography Base Settings -- */
/* Add a common font class */
.orbitron-text {
    font-family: "Orbitron", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* -- 2. Base Layout & Scrolling -- */
.front-page {
    display: none; /* Initially hidden until intro animation completes */
    position: absolute; /* Positions element relative to its closest positioned ancestor */
    width: 100%; /* Full width of container */
    height: 100%; /* Full height of container */
    scroll-snap-type: y mandatory; /* Forces scroll snap on y-axis */
    scroll-behavior: smooth; /* Enables smooth scrolling between sections */
    overflow-y: scroll; /* Allows vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    scrollbar-width: none; /* Hides scrollbar for cleaner look */
    overscroll-behavior: none; /* Prevents browser bouncing effect */
}
/* -- 3. Viewport & Parallax -- */
.viewport-section {
    position: relative; /* Enables positioning context for children */
    width: 100%; /* Full width of viewport */
    height: 100vh; /* Full height of viewport */
    scroll-snap-align: start; /* Aligns section to start of scroll container */
    overflow: hidden;
}
.parallax-layer {
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  background-color: rgba(var(--bg-color), 1);
  background-image: 
      linear-gradient(to bottom, transparent 50%, color-mix(in srgb, var(--bg-texture) 25%, transparent) 50%),
      linear-gradient(to right, transparent 50%, color-mix(in srgb, var(--bg-texture) 25%, transparent) 50%);
  background-size: 4px 4px;
  background-blend-mode: multiply;
  transition: background-color 0.4s ease;
}

/* Add a pseudo-element for additional texture */
.parallax-layer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: 
      repeating-linear-gradient(0deg, 
          transparent, 
          transparent 1px, 
          color-mix(in srgb, var(--bg-texture) 25%, transparent) 1px, 
          color-mix(in srgb, var(--bg-texture) 25%, transparent) 2px
      );
  background-size: 8px 8px;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
    mask-image: linear-gradient(to bottom, transparent, black);
    
}


/* -- 4. Typography & Title Animations -- */
#soon {
    font-family: "Orbitron", sans-serif; /* Sets custom font with fallback */
    font-size: 4rem; /* Large text size for impact */
    font-weight: 400; /* Regular font weight */
    font-style: normal; /* Normal font style */
    color: var(--accent); /* Uses accent color from variables */
    transition: color 0.4s ease; /* Smooth color transitions */
    display: inline-block; /* Enables width/height properties */
    width: fit-content; /* Fits content width */
    overflow: hidden; /* Hides overflow for typing animation */
    border-right: 2px solid var(--accent); /* Creates typing cursor effect */
    white-space: nowrap; /* Prevents text wrapping */
    margin: 0 auto; /* Centers element */
    letter-spacing: 0.1em; /* Spaces letters for readability */
    animation: 
        typing 2s steps(5, end), /* Typing animation */
        blink-caret 0.75s step-end infinite; /* Blinking cursor animation */
}

@keyframes typing {
  0% { width: 0 }
  20% { width: 1ch }  /* S */
  40% { width: 2ch }  /* So */
  60% { width: 3ch }  /* Soo */
  80% { width: 4ch }  /* Soon */
  100% { width: 5ch } /* Soon! */
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--accent) }
}

/* -- 5. Background Elements -- */
.background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  filter: drop-shadow(20px 5px 10px var(--shadow-color));
  -webkit-filter: drop-shadow(20px 5px 10px var(--shadow-color));
}



@supports not (background-image: var(--bg-image)) {
  .background-container {
    background-image: var(--bg-image);
  }
}

@media (min-width: 768px) {
  .background-container {
    background-position: center 10%;
  }
}

/* -- 6. Interactive & Content Layers -- */
.interactive-layer {
    position: absolute; /* Takes element out of normal document flow */
    top: 0; /* Aligns to top of container */
    left: 0; /* Aligns to left of container */
    width: 100%; /* Full width of container */
    height: 100%; /* Full height of container */
    z-index: 1; /* Places layer above background */
    pointer-events: none; /* Allows clicks to pass through to elements below */
}

.content {
    position: relative; /* Creates positioning context */
    padding: 1rem; /* Adds space around content */
    width: 100%; /* Full container width */
    height: 100%; /* Full container height */
    display: flex; /* Enables flexbox layout */
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    text-align: center; /* Centers text content */
    overflow: auto; /* Adds scrollbars if content overflows */
}

/* -- 7. Countdown Components -- */
.countdown {
    display: flex; /* Enables flexbox layout */
    position: absolute; /* Positions relative to viewport */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    width: 100%; /* Full viewport width */
    height: 100%; /* Full viewport height */
    top: 0; /* Aligns to top of viewport */
    left: 0; /* Aligns to left of viewport */
    overflow: hidden; /* Hides overflow content */
}

.countdown::after {
    content: ''; /* Required for pseudo-element */
    position: absolute;
    inset: 0; /* Shorthand for top/right/bottom/left: 0 */
    z-index: -1; /* Places behind main content */
}

.countdown-grid {
  position: relative;
  display: grid; /* Enables grid layout */
  justify-content: center; /* Centers grid horizontally */
  text-align: center; /* Centers text content */
  gap: 10px; /* Space between grid items */
  grid-template-columns: 1fr; /* Single column layout */
  grid-template-rows: repeat(4, 1fr, minmax(100px, auto)); /* 4 equal rows */
  padding: 5px; /* Space around grid */
  transform: scale(0.60); /* Reduces size to 60% */
  cursor: none; /* Hides cursor */
  will-change: transform;
}

@media (min-width: 768px) {
  .countdown-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    transform: scale(0.75);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .countdown-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    transform: scale(0.9);
  }
}

.countdown-item {
    position: relative; /* Creates positioning context */
    min-width: 200px; /* Minimum width constraint */
    padding: 8px; /* Inner spacing */
    border-radius: 32px; /* Rounded corners */
    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
    transform-style: preserve-3d; /* Enables 3D transforms */
    transition: transform 0.6s var(--transition), 
                box-shadow 0.6s var(--transition); /* Smooth transitions */
}

/*
.countdown-item:hover,
.countdown-item.auto-hover {
  transform: translateY(0) rotateX(2deg) rotateY(0deg) scale(1.1);
  box-shadow: var(--shadow);
  z-index: 1;
  overflow: hidden;
  background-color: rgba(var(--bg-color), 1);
}

@keyframes pulseFocus {
  0%, 100% { transform: var(--transition); }
  50% { transform: scale(1) translateY(0); }
}
  */

.countdown-number {
    font-family: "Orbitron", sans-serif; /* Uses custom font variable */
    font-size: 6.4rem; /* Large size for numbers */
    font-weight: 400; /* Regular font weight */
    font-style: normal; /* Normal font style */
    background: transparent; /* Transparent background */
    -webkit-background-clip: text; /* Clips background to text */
    background-clip: text; /* Standard property for text clipping */
}

.countdown-label {
    font-family: "Orbitron", sans-serif; /* Uses custom font */
    font-size: 1.4rem; /* Size for labels */
    font-weight: 400; /* Regular font weight */
    font-style: normal; /* Normal font style */
    text-transform: uppercase; /* Converts to uppercase */
    color: rgba(var(--text-color), 1);
    opacity: 0.4; /* Uses accent color variable */
}

/* -- 8. Spotify Player -- */
.spotify-player {
    position: absolute; /* Positions relative to viewport */
    top: 50%; /* Centers vertically */
    left: 50%; /* Centers horizontally */
    transform: translate(-50%, -50%); /* Perfect centering */
    height: 350px; /* Fixed height */
    min-width: 354px; /* Minimum width */
    display: flex; /* Enables flexbox */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    box-shadow: var(--shadow); /* Adds shadow effect */
    border-radius: 14px; /* Rounded corners */
    overflow: hidden; /* Clips content to bounds */
}

/* -- 9. Navigation Elements -- */
.dot-nav {
    position: fixed; /* Stays fixed during scroll */
    right: 4px; /* Offset from right edge */
    display: grid; /* Enables grid layout */
    grid-template-rows: repeat(3, 30px); /* Creates 3 equal rows of 30px */
    top: 50%; /* Centers vertically */
    transform: translateY(-50%); /* Fine-tunes vertical centering */
}

.nav-dot {
    width: 1rem; /* Sets dot width */
    height: 1rem; /* Sets dot height */
    margin: 1rem 0; /* Vertical spacing between dots */
    cursor: pointer; /* Shows clickable cursor */
    transition: all 0.3s ease; /* Smooth state changes */
    background-color: rgba(var(--text-color), 1); /* Uses theme color */
    border: 2px solid rgba(var(--text-color), 1); /* Matching border color */
    border-radius: 50%; /* Creates circular shape */
    transition: background-color 0.4s ease; /* Smooth color transitions */
}

.nav-dot.active {
    transform: scale(1.5); /* Enlarges active dot */
    background-color: transparent; /* Clear center */
    border-color: rgba(var(--text-color), 1); /* Maintains border color */
    transition: border-color 0.4s ease; /* Smooth border transitions */
}

/* -- 10. Visual Effects (Rectangle, Line, Text) -- */
.rectangle {
    position: absolute; /* Positions relative to container */
    border: 1px solid rgba(var(--text-color), 0.7); /* Semi-transparent border */
    background-color: rgba(var(--accent), 0.8); /* Semi-transparent background */
    backdrop-filter: blur(4px); /* Background blur effect */
    -webkit-backdrop-filter: blur(4px); /* Safari support */
    border-radius: 2px; /* Slightly rounded corners */
    box-shadow: 0 0 10px var(--shadow-color); /* Subtle shadow */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Removes from layout */
    transition: opacity 0.3s ease; /* Smooth fade effect */
    z-index: 1; /* Stacking context */
}

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

.rectangle.glitching {
  animation: glitch-rectangle 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* -- Line Elements with Improved Glitch Effect -- */
.line {
    position: absolute; /* Positions relative to container */
    background-color: transparent; /* Clear background */
    height: 1px; /* Thin line */
    transform-origin: 0 0; /* Transform from start */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Removes from layout */
    transition: opacity 0.3s ease; /* Smooth fade */
    transform-style: preserve-3d; /* Enables 3D transforms */
    will-change: opacity, filter; /* Optimizes animations */
    z-index: 0; /* Below other elements */
    overflow: hidden; /* Clips content */
}

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

.line.glitching {
  animation: glitch-line-opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* -- Text Elements with Glitch Effect -- */
.text-element {
    position: absolute; /* Positions relative to container */
    font-family: "Orbitron", sans-serif; /* Uses theme font */
    font-size: 14px; /* Base text size */
    font-weight: 400; /* Regular font weight */
    font-style: normal; /* Normal font style */
    color: rgba(var(--bg-color), 1); /* Uses theme color */
    letter-spacing: 4px; /* Character spacing */
    text-transform: uppercase; /* Forces uppercase */
    text-align: center; /* Centers text */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Removes from layout */
    transition: opacity 0.3s ease, color 0.4s ease; /* Smooth transitions */
    -webkit-text-stroke: 1px rgba(var(--text-color, --bg-color), 1); /* Text outline */
    mix-blend-mode: normal; /* Standard blending */
    z-index: 2; /* Above other elements */
}

.text-element.visible {
  opacity: 1;
  visibility: visible;
  
}

.text-element.glitching {
  animation: glitch-text 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* -- 11. Animation Keyframes -- */
@keyframes glitch-rectangle {
  0% {
    transform: translate(0);
    clip-path: inset(0);
    filter: brightness(1);
  }
  10% {
    transform: translate(-3px, 1px);
    clip-path: inset(10% 0 0 5%);
    filter: brightness(1.5);
  }
  20% {
    transform: translate(-3px, 3px);
    clip-path: inset(10% 0 0 10%);
    filter: brightness(1);
  }
  30% {
    transform: translate(1px, -1px);
    clip-path: inset(5% 5% 0 0);
    filter: brightness(1.5);
  }
  40% {
    transform: translate(-3px, -3px);
    clip-path: inset(0 10% 10% 0);
    filter: brightness(1);
  }
  50% {
    transform: translate(1px, 1px);
    clip-path: inset(5% 0 5% 5%);
    filter: brightness(1.5);
  }
  60% {
    transform: translate(3px, 3px);
    clip-path: inset(0 10% 10% 0);
    filter: brightness(1);
  }
  70% {
    transform: translate(-1px, 3px);
    clip-path: inset(0 5% 5% 0);
    filter: brightness(1.5);
  }
  80% {
    transform: translate(3px, -3px);
    clip-path: inset(10% 0 0 10%);
    filter: brightness(1);
  }
  90% {
    transform: translate(1px, -1px);
    clip-path: inset(5% 0 0 5%);
    filter: brightness(1.5);
  }
  100% {
    transform: translate(0);
    clip-path: inset(0);
    filter: brightness(1);
  }
}

@keyframes glitch-line-opacity {
  0% {
    opacity: 1;
    filter: brightness(1);
  }
  20% {
    opacity: 0.7;
    filter: brightness(1.5);
  }
  40% {
    opacity: 1;
    filter: brightness(1);
  }
  60% {
    opacity: 0.7;
    filter: brightness(1.5) contrast(1.2);
  }
  80% {
    opacity: 1;
    filter: brightness(1);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes glitch-text {
  0% {
    transform: translate(0);
    filter: blur(0);
  }
  20% {
    transform: translate(-2px, 2px);
    filter: blur(1px) brightness(1.5);
  }
  40% {
    transform: translate(-2px, -2px);
    filter: blur(0) brightness(1);
  }
  60% {
    transform: translate(2px, 2px);
    filter: blur(1px) brightness(1.5);
  }
  80% {
    transform: translate(2px, -2px);
    filter: blur(0) brightness(1);
  }
  100% {
    transform: translate(0);
    filter: blur(0) brightness(1);
  }
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* -- 12. Media Queries -- */
@media (max-width: 1024px) {
    /* Desktop and Tablet Landscape Adjustments */
    .text-element {
        font-size: 16px; /* Adjusted text size for better readability */
        -webkit-text-stroke-width: 0.3px; /* Reduced stroke width for sharper text */
        letter-spacing: 4px; /* Maintained letter spacing for clarity */
    }
    .menu-toggle {
        top: 6%; /* Repositioned menu button */
        right: 6%; /* Aligned with viewport edge */
    }
    .copyright {
        font-family: "Orbitron", sans-serif; /* Uses custom font */
        font-weight: 400; /* Regular font weight */
        font-style: normal; /* Normal font style */
        font-size: 24px; /* Larger copyright text */
        right: -63%; /* Adjusted position for viewport width */
    }
}

@media (max-width: 768px) {
    /* Tablet Portrait and Mobile Landscape Adjustments */
    .rectangle {
        border-width: 1px; /* Thinner borders for visual balance */
    }
    .line {
        height: 0.5px; /* Reduced line thickness */
    }
    .text-element {
        font-size: 0.8rem; /* Smaller text for mobile screens */
        -webkit-text-stroke-width: 0.3px; /* Maintained stroke width */
        letter-spacing: 2px; /* Reduced letter spacing */
    }
    h1 {
        font-size: 2.5rem; /* Adjusted heading size */
    }
    p {
        font-size: 1rem; /* Base paragraph size */
    }
    .menu-toggle {
        top: 7%; /* Repositioned for mobile view */
        right: 6%; /* Maintained right alignment */
    }
    .copyright {
        font-family: "Orbitron", sans-serif; /* Uses custom font */
        font-weight: 400; /* Regular font weight */
        font-style: normal; /* Normal font style */
        font-size: 24px; /* Maintained copyright size */
        right: -52%; /* Adjusted position */
    }
    .background-container {
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-image: var(--bg-image);
      background-size: cover;
      background-position: center;
      background-attachment: scroll; /* Fixed parallax issues on mobile */
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      filter: drop-shadow(20px 5px 10px var(--shadow-color));
      -webkit-filter: drop-shadow(20px 5px 10px var(--shadow-color));
      will-change: transform;
    }
  }

@media (max-width: 480px) {
    /* Mobile Portrait Adjustments */
    .title-name {
      font-size: 1.8rem;
      top: 0; /* Aligned to top */
      left: 0; /* Aligned to left */
      padding: 28px 0 0 28px; /* Space from viewport edges */
    }
    .text-element {
      font-size: 0.5rem; /* Smallest text size */
      letter-spacing: 2px; /* Maintained spacing */
      font-size: 0.6rem; /* Reduced heading size */
    }
    h1 {
      font-size: 2rem; /* Reduced heading size */
    }
    p {
      font-size: 0.9rem; /* Slightly smaller paragraphs */
    }
    #soon {
      font-size: 2.2rem; /* Adjusted feature text size */
      letter-spacing: 0.05em; /* Tighter letter spacing */
    }
    .menu-toggle {
      position: fixed; /* Fixed positioning */
      top: 44px; /* Distance from top */
      right: 28px; /* Distance from right */
    }
    .dot-nav {
      position: fixed; /* Keeps navigation fixed */
      right: 4px; /* Distance from right edge */
      top: 50%; /* Vertical centering */
      transform: translateY(-50%) scale(0.5); /* Center and scale down */
      display: grid; /* Maintains grid layout */
      grid-template-rows: repeat(3, 30px); /* Three equal rows */
      margin: auto 0; /* Vertical centering */
    }
    .copyright {
      font-family: "Orbitron", sans-serif; /* Uses custom font */
      font-weight: 400; /* Regular font weight */
      font-style: normal; /* Normal font style */
      font-size: 12px; /* Smallest copyright size */
      right: -45%; /* Adjusted position */
    }
}