@charset "utf-8";

/* ===== Base Style ===== */
body {
   background-color: #0a0a0a;
   color: #e3e3e3;
   font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
   line-height: 1.6;
   margin: 0;
}

/* General container */
.container {
   width: 100%;
   max-width: 1135px;
   max-height: 100%;
   margin: auto;
   padding: 20px;
}

/* ===== Header ===== */
header {
   background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("images/symbolbanner.JPG") no-repeat center center/cover;
   border-bottom: 3px solid #ff3131;
   padding: 40px 0 20px 0;
   text-align: center;
}

header h1 {
   color: #ffd700;
   text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
   letter-spacing: 3px;
   font-size: 2.8rem;
}

/* Live clock */
#clock {
   position: absolute;
   top: 15px;
   left: 20px;
   font-size: 1em;
   color: rgb(255, 49, 49);
   font-family: monospace;
}

/* ===== Navigation ===== */
nav {
   margin-top: 20px;
}

nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   justify-content: center;
   gap: 30px;
}

nav ul li a {
   color: rgb(255, 255, 255);
   text-decoration: none;
   font-weight: bold;
   font-size: 1.1em;
   position: relative;
   transition: all 0.3s ease;
}

nav ul li a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 0%;
   height: 2px;
   background: rgb(255, 49, 49);
   transition: width 0.3s ease;
}

nav ul li a:hover::after {
   width: 100%;
}

nav ul li a:hover {
   color: rgb(255, 249, 107);
}

/* ===== Main Section ===== */
main {
   background: #121212;
   color: #e3e3e3;
   margin: 40px auto;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
   text-align: center;
}
main h2 {
   color: #ffd700;
   border-bottom: 2px solid #ff3131;
   padding-bottom: 8px;
   margin-bottom: 20px;
   font-size: 1.8rem;
}

/* ===== Lists ===== */
ul {
   margin: 10px 0;
   padding-left: 20px;
}

/* ===== Images ===== */
img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
   display: block;
   margin: 25px auto;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

ssection img:not(.signal-secondary) {
   max-width: 45%;
}

.about-image {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   margin: 0 auto;
}

/* pdf for about page */
.pdf-viewer {
   position: relative;
   width: clamp(320px, 55%, 450px);
   max-width: 900px;
   margin: 0 auto 4rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* The actual rendered PDF */
#pdfCanvas {
   width: 100%;
   height: auto;
   background: #000;
   box-shadow: 0 0 40px rgba(255, 255, 255, 0.08);
   border-radius: 6px;
}

.pdf-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: #ffd700;
   font-size: 3rem;
   cursor: pointer;
   opacity: 0.35;
   transition: opacity 0.25s ease, transform 0.25s ease;
   z-index: 5;
}

.pdf-arrow:hover {
   opacity: 0.9;
   transform: translateY(-50%) scale(1.1);
}

.pdf-arrow.left {
   left: -3rem;
}

.pdf-arrow.right {
   right: -3rem;
}

/* Machine image below */
.signal-secondary {
   width: 100%;
   max-width: 600px;
   margin: 3rem auto 0;
   display: block;
   opacity: 0.85;
}

/* ===== Video ===== */
video {
   max-width: 80%;
   height: auto;
   display: block;
   border-radius: 10px;
   margin: 25px auto;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===== Form ===== */
form {
   margin-top: 20px;
   background: rgb(255, 255, 255);
   color: rgb(51, 51, 51);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

label {
   font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea {
   width: 100%;
   padding: 10px;
   margin: 6px 0 12px;
   border: 1px solid rgb(91, 90, 110);
   border-radius: 5px;
}

input[type="submit"] {
   background: #ff3131;
   color: #e3e3e3;
}
input[type="submit"]:hover {
   background: #991111;
}

/* ===== Footer ===== */
.site-footer a {
   background: #0a0a0a;
   color: #e3e3e3;
   text-align: center;
   padding: 20px 10px;
   text-decoration: none;
}

.site-footer::before {
   background: #ffd700;
   box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.cryptic-footer {
   font-size: 1.2em;
   color: #ffd700; /* neon gold accent */
   font-style: italic;
   letter-spacing: 1.5px;
   text-align: center;
   margin-top: 25px;
   opacity: 0.85;
}

/* Inner layout */
.footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
   flex-wrap: wrap;
   text-decoration: none;
}

.footer-list {
   display: flex;
   align-items: center;
   gap: 16px;
   list-style: none;
   padding: 0;
   margin: 0;
   text-decoration: none;
}

/* Remove diamond after last link */
.footer-list li:last-child::after {
   display: none;
}

/* ===== 📘 Chapters Grid ===== */
.chapters-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px;
   margin: 30px auto;
   max-width: 900px;
}

.chapter {
   background: #181818;
   color: #f3f3f3;
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chapter:hover {
   transform: scale(1.03);
   box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.chapter img {
   width: 100%;
   height: auto;
   display: block;
}
/* Make the whole card clickable and preserve styles */
.chapter-link {
   display: block;
   color: inherit;
   text-decoration: none;
}
.hidden {
   display: none !important;
}

/* Provide visible focus styling for keyboard users */
.chapter-link:focus,
.chapter-link:focus-visible {
   outline: 3px solid rgba(255, 249, 107, 0.14);
   border-radius: 12px;
}

/* Keep hover effects working when the link wraps the .chapter */
.chapter-link:hover .chapter,
.chapter-link:focus .chapter {
   transform: scale(1.03);
   box-shadow: 0 4px 15px rgba(255, 255, 255, 0.08);
}

/* ===== 🖼️ Gallery ===== */
.gallery {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 30px;
   margin: 60px auto;
   width: 95%;
   max-width: 1400px;
   justify-items: center;
}

.gallery-item {
   background-color: #0a0a0a;
   color: #e3e3e3;
   box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05);
}

.caption {
   background-color: #0a0a0a;
   color: #ffd700;
   border-bottom: 2px solid #ff3131;
}

/* Base slideshow image style */
.slideshow-container img {
   width: 100%;
   height: auto;
   cursor: zoom-in;
   transition: transform 0.3s ease;
}
/* espionage slideshow */
.slideshow-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.96);
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   transition: opacity 0.5s ease;
   z-index: 9999;
   cursor: pointer;
}

.slideshow-overlay.active {
   opacity: 1;
}

/* Slide frame */
.slideshow-frame {
   max-width: 85%;
   max-height: 85%;
   opacity: 0;
   transform: scale(0.985);
   transition: opacity 0.6s ease, transform 0.6s ease;
   box-shadow: 0 0 40px rgba(255, 255, 255, 0.08);
}

.slideshow-frame.visible {
   opacity: 1;
   transform: scale(1);
}

/* Caption */
.trigger-caption {
   margin-top: 12px;
   font-size: 0.9rem;
   letter-spacing: 2px;
   color: #ffd700;
   opacity: 0.75;
}

/* Zoom viewer (hidden by default) */
.zoom-viewer {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   display: flex;
   justify-content: center;
   align-items: center;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s ease;
   z-index: 999;
}

/* When active */
.zoom-viewer.active {
   visibility: visible;
   opacity: 1;
}

/* Full-size image */
.zoom-viewer img {
   max-width: 90%;
   max-height: 90%;
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   cursor: zoom-out;
   transition: transform 0.3s ease;
}

/* ===== 🧠 Gundam Font ===== */
@font-face {
   font-family: "Gundam";
   src: url("Gundam.otf") format("opentype"), url("Gundam.ttf") format("truetype");
}

header h1,
footer .brand,
h2,
nav a,
.main-title {
   font-family: "Gundam", sans-serif;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #e3e3e3;
   text-shadow: 0 0 8px rgba(150, 200, 255, 0.35);
}

p,
figcaption {
   font-family: "Gundam", sans-serif;
   color: rgb(255, 49, 49);
}
/* --- Lightbox Overlay --- */
.lightbox {
   display: none; /* Hidden by default */
   position: fixed;
   z-index: 9999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   justify-content: center;
   align-items: center;
   cursor: zoom-out;
   transition: opacity 0.3s ease;
   opacity: 0;
}

/* When active, make visible */
.lightbox.active {
   display: flex;
   opacity: 1;
}

/* --- Image Inside Lightbox --- */
.lightbox img {
   max-width: 80%;
   max-height: 80%;
   border-radius: 12px;
   box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
   cursor: default;
   transition: transform 0.3s ease, opacity 0.3s ease;
   opacity: 0;
}

/* Fade image in smoothly once lightbox is active */
.lightbox.active img {
   opacity: 1;
}

.lightbox img:hover {
   transform: scale(1.02);
}

/* ✅ Footer: stack and center everything */
.site-footer {
   text-align: center;
   padding: 20px 10px;
}

.footer-inner {
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
}

.footer-list {
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   text-align: center;
}

.footer-meta {
   text-align: center;
   font-size: 0.9em;
}

/* === 🎵 Music Section === */
.music-section {
   position: relative;
   text-align: center;
   margin-top: 40px;
   color: white;
   padding: 60px 20px;
   border-radius: 12px;
   background: url("images/midnightsounds.jpeg") no-repeat center center/cover;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Optional overlay for better readability */
.music-section::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.55);
   border-radius: 12px;
   z-index: 0;
}

/* Ensure content stays above the overlay */
.music-section > * {
   position: relative;
   z-index: 1;
}

.music-section h2 {
   font-size: 1.8em;
   margin-bottom: 15px;
   letter-spacing: 2px;
}

/* Playlist cover */
.playlist-cover img {
   width: 250px;
   height: 250px;
   object-fit: cover;
   border-radius: 12px;
   margin-bottom: 15px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Playlist list */
#playlist {
   list-style: none;
   padding: 0;
   margin-top: 15px;
}

#playlist li {
   cursor: pointer;
   padding: 10px;
   margin: 5px auto;
   width: 80%;
   max-width: 400px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   transition: background 0.3s;
}

#playlist li:hover {
   background: rgba(255, 255, 255, 0.2);
}

#playlist li.active {
   background: rgb(255, 249, 107);
   color: black;
   font-weight: bold;
}

/* === Mobile Screens (480px and below) === */
@media screen and (max-width: 480px) {
   .container {
      width: 95%;
      max-width: 720px;
      padding: 15px;
   }

   header h1 {
      font-size: 1.5em; /* slightly larger for readability */
   }

   nav ul {
      gap: 0.5rem;
   }

   main {
      padding: 15px;
      margin: 10px auto;
   }

   main h2 {
      font-size: 1.2rem;
   }

   section img {
      max-width: 90%;
   }

   .gallery {
      grid-template-columns: 1fr;
      gap: 15px;
   }

   .chapters-grid {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .music-section h2 {
      font-size: 1.2em;
   }

   .playlist-cover img {
      width: 150px;
      height: 150px;
   }

   #playlist li {
      width: 95%;
   }
}

/* 🎵 Music Section (mobile) */
.music-section {
   padding: 30px 15px;
   background-size: cover;
   background-position: center;
}

.music-section h2 {
   font-size: 1.3em;
   margin-bottom: 0.5rem;
}

.playlist-cover img {
   width: 150px;
   height: 150px;
   border-radius: 10px;
   margin: 0 auto 10px;
}

audio {
   width: 90%;
   max-width: 320px;
}

#playlist {
   width: 90%;
   margin: 0 auto;
}

#playlist li {
   font-size: 0.9em;
   margin: 6px 0;
   padding: 8px;
}

footer .footer-list {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 0.5rem;
}

.footer-meta {
   text-align: center;
   margin-top: 1rem;
}

/* Tablets (481px to 1024px) */
@media screen and (max-width: 1024px) and (min-width: 481px) {
   .container {
      width: 95%;
      max-width: 720px;
      padding: 15px;
   }
   header h1 {
      font-size: 2em;
   }

   nav ul {
      gap: 15px;
      flex-wrap: wrap;
      justify-content: center;
   }

   nav ul li a {
      font-size: 1em;
   }

   main {
      padding: 20px;
      margin: 20px auto;
   }

   main h2 {
      font-size: 1.5rem;
   }

   section img {
      max-width: 70%;
   }

   .gallery {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
   }

   .chapters-grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 15px;
   }

   .music-section h2 {
      font-size: 1.5em;
   }

   .playlist-cover img {
      width: 200px;
      height: 200px;
   }

   #playlist li {
      width: 90%;
   }
}
@media (max-width: 768px) {
   .pdf-viewer {
      max-width: 100%;
   }

   #pdfCanvas {
      width: 100%;
   }

   .pdf-arrow {
      font-size: 2.2rem;
   }

   .pdf-arrow.left {
      left: 0.5rem;
   }

   .pdf-arrow.right {
      right: 0.5rem;
   }
}