/* =========================================
   1. VARIABLES & THEME SETUP
   ========================================= */
:root {
   /* Colors - Premium Dark Theme */
   --bg-body: #121212;
   --bg-surface: #121212;
   --bg-surface-hover: #1e1e1e;

   --text-primary: #ffffff;
   --text-secondary: #a0a0a0;
   --text-muted: #666666;

   --accent-color: #e0e0e0;
   /* Minimalist white accent for premium feel */
   --accent-hover: #ffffff;
   --accent-active: #cccccc;
   --accent-red: #bb0a0a;
   /* RPG Red Accent */

   --border-color: #333333;
   --border-focus: #555555;

   /* Spacing */
   --space-xs: 0.5rem;
   --space-sm: 1rem;
   --space-md: 2rem;
   --space-lg: 4rem;
   --space-xl: 2rem;

   /* Typography */
   --font-main: 'Outfit', sans-serif;

   /* Animations */
   --transition-fast: 0.2s ease;
   --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =========================================
   2. RESET & BASE STYLES
   ========================================= */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
   width: 12px;
}

::-webkit-scrollbar-track {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: #444;
   border-radius: 6px;
   border: 3px solid var(--bg-body);
   /* Creates padding effect */
}

::-webkit-scrollbar-thumb:hover {
   background: #666;
}

html {
   background-color: #050505;
   /* Solid dark base to prevent white flashes */
}

body {
   background-color: var(--bg-body);
   color: var(--text-primary);
   font-family: var(--font-main);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   animation: pageFadeIn 1s ease-out;
}

body.has-morphing-bg {
   background-color: transparent !important;
}

body.has-morphing-bg .page-container {
   background-color: transparent !important;
}

/* Hero Section Specifics */
.hero-container {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   z-index: 2;
   /* Ensure it sits above the background */
   background: transparent;
   -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
   mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}



.hero-video {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translate(-50%, -50%);
   z-index: 0;
   /* Move to 0 to ensure it is treated as content, not background */
   filter: brightness(0.6);
   /* Darken video for text readability */
   opacity: 0;
   animation: pageFadeIn 2s ease-out forwards;
}

.hero-overlay {
   z-index: 2;
   padding: var(--space-md);
   opacity: 0;
   animation: fadeIn 1.5s ease-out forwards;
   animation-delay: 0.5s;
}

.text-accent-red {
   color: var(--accent-red);
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Red Glow Transition */
.hero-container::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 25vh;
   background: linear-gradient(to top, var(--accent-red) 0%, rgba(187, 10, 10, 0.4) 30%, transparent 100%);
   z-index: 5;
   opacity: 0.4;
   pointer-events: none;
   animation: pulseRedGlow 5s infinite alternate ease-in-out;
}

@keyframes pulseRedGlow {
   0% {
      opacity: 0.25;
      height: 15vh;
      transform: scaleY(1);
   }

   100% {
      opacity: 0.55;
      height: 30vh;
      transform: scaleY(1.1);
   }
}


h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 600;
   line-height: 1.2;
   margin-bottom: var(--space-sm);
   letter-spacing: -0.02em;
}

h1 {
   font-size: 3.5rem;
}

h2 {
   font-size: 2.5rem;
}

h3 {
   font-size: 1.75rem;
}

p {
   color: var(--text-secondary);
   margin-bottom: var(--space-sm);
   max-width: 65ch;
}

a {
   color: inherit;
   text-decoration: none;
   transition: var(--transition-fast);
}

/* =========================================
   3. LAYOUT UTILITIES
   ========================================= */
.container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 var(--space-md);
}

.grid {
   display: grid;
   gap: var(--space-md);
}

.grid-3 {
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.grid-2 {
   grid-template-columns: 1fr;
}

@media (min-width: 768px) {
   .grid-2 {
      grid-template-columns: 1fr 1fr;
   }
}

.section {
   padding: var(--space-lg) 0;
}

/* Helper Classes */
.text-center {
   text-align: center;
}

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

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

.hidden {
   display: none !important;
}

.block {
   display: block;
}

.inline-block {
   display: inline-block;
}

.relative {
   position: relative;
}

.absolute {
   position: absolute;
}

/* Spacing Helpers */
.mt-xs {
   margin-top: var(--space-xs);
}

.mt-sm {
   margin-top: var(--space-sm);
}

.mt-md {
   margin-top: var(--space-md);
}

.mt-lg {
   margin-top: var(--space-lg);
}

.mt-xl {
   margin-top: var(--space-xl);
}

.mb-xs {
   margin-bottom: var(--space-xs);
}

.mb-sm {
   margin-bottom: var(--space-sm);
}

.mb-md {
   margin-bottom: var(--space-md);
}

.mb-lg {
   margin-bottom: var(--space-lg);
}

.p-sm {
   padding: var(--space-sm);
}

.p-md {
   padding: var(--space-md);
}

.p-lg {
   padding: var(--space-lg);
}

.mx-auto {
   margin-left: auto;
   margin-right: auto;
}


/* =========================================
   4. COMPONENTS
   ========================================= */

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 2rem;
   border-radius: 4px;
   /* Slightly boxy for modern architectural feel */
   font-weight: 500;
   cursor: pointer;
   transition: var(--transition-fast);
   border: 1px solid transparent;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.9rem;
}

.btn-primary {
   background-color: var(--text-primary);
   color: var(--bg-body);
}

.btn-primary:hover {
   background-color: var(--accent-active);
   transform: scale(1.05);
}

.btn-outline {
   background-color: transparent;
   border-color: var(--border-color);
   color: var(--text-primary);
}

.btn-outline:hover {
   border-color: var(--text-primary);
   transform: scale(1.05);
}

/* Inputs */
.input-group {
   position: relative;
   margin-bottom: var(--space-sm);
}

input[type="text"],
input[type="email"],
textarea {
   width: 100%;
   padding: 1rem;
   background-color: var(--bg-surface);
   border: 1px solid var(--border-color);
   color: var(--text-primary);
   font-family: var(--font-main);
   border-radius: 4px;
   transition: var(--transition-fast);
}

input:focus,
textarea:focus {
   outline: none;
   border-color: var(--text-primary);
   background-color: var(--bg-surface-hover);
}

/* Cards (Video/Photo Showcase) */
.media-card {
   position: relative;
   background-color: var(--bg-surface);
   overflow: hidden;
   border-radius: 8px;
   transition: var(--transition-smooth);
   cursor: pointer;
   border: 1px solid var(--border-color);
}

.media-card img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   transition: transform 0.6s ease;
   opacity: 0.8;
}

.media-card:hover {
   border-color: var(--text-muted);
}

.media-card:hover img {
   transform: scale(1.05);
   opacity: 1;
}

.media-info {
   padding: var(--space-sm);
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
   transform: translateY(20px);
   opacity: 0;
   transition: var(--transition-smooth);
}

.media-card:hover .media-info {
   transform: translateY(0);
   opacity: 1;
}

.media-title {
   font-size: 1.2rem;
   color: var(--text-primary);
   margin-bottom: 0.2rem;
}

.media-meta {
   font-size: 0.85rem;
   color: var(--text-secondary);
}

/* Header */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: var(--space-sm) var(--space-md);
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 1000;
   background-color: rgba(5, 5, 5, 0.8);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

.site-header.header-hidden {
   transform: translateY(-100%);
}

.logo {
   font-size: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.nav-link {
   margin-left: var(--space-md);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
   color: var(--text-primary);
}

/* Footer */
.site-footer {
   border-top: 1px solid var(--border-color);
   padding: var(--space-lg) 0;
   margin-top: var(--space-xl);
   text-align: center;
}

.copyright-text {
   margin: var(--space-md) auto 0;
   max-width: 100%;
   color: var(--text-muted);
   font-size: 0.85rem;
   letter-spacing: 0.05em;
}

.social-links {
   display: flex;
   justify-content: center;
   gap: var(--space-md);
   margin-bottom: var(--space-sm);
}

/* =========================================
   3. LAYOUT UTILITIES
   ========================================= */
.container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 var(--space-md);
}

.grid {
   display: grid;
   gap: var(--space-md);
}

.grid-3 {
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.section {
   padding: var(--space-lg) 0;
}

/* =========================================
   4. COMPONENTS
   ========================================= */

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 2rem;
   border-radius: 4px;
   /* Slightly boxy for modern architectural feel */
   font-weight: 500;
   cursor: pointer;
   transition: var(--transition-fast);
   border: 1px solid transparent;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.9rem;
}

.btn-primary {
   background-color: var(--text-primary);
   color: var(--bg-body);
}

.btn-primary:hover {
   background-color: var(--accent-active);
   transform: scale(1.05);
}

.btn-outline {
   background-color: transparent;
   border-color: var(--border-color);
   color: var(--text-primary);
}

.btn-outline:hover {
   border-color: var(--text-primary);
   transform: scale(1.05);
}

/* Inputs */
.input-group {
   position: relative;
   margin-bottom: var(--space-sm);
}

input[type="text"],
input[type="email"],
textarea {
   width: 100%;
   padding: 1rem;
   background-color: var(--bg-surface);
   border: 1px solid var(--border-color);
   color: var(--text-primary);
   font-family: var(--font-main);
   border-radius: 4px;
   transition: var(--transition-fast);
}

input:focus,
textarea:focus {
   outline: none;
   border-color: var(--text-primary);
   background-color: var(--bg-surface-hover);
}

textarea {
   resize: vertical;
   /* Only allow vertical resizing */
}

/* Cards (Video/Photo Showcase) */
.media-card {
   position: relative;
   background-color: var(--bg-surface);
   overflow: hidden;
   border-radius: 8px;
   transition: var(--transition-smooth);
   cursor: pointer;
   border: 1px solid var(--border-color);
}

.media-card img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   transition: transform 0.6s ease;
   opacity: 0.8;
}

.media-card:hover {
   border-color: var(--text-muted);
}

.media-card:hover img {
   transform: scale(1.05);
   opacity: 1;
}

.media-info {
   padding: var(--space-sm);
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
   transform: translateY(20px);
   opacity: 0;
   transition: var(--transition-smooth);
}

.media-card:hover .media-info {
   transform: translateY(0);
   opacity: 1;
}

.media-title {
   font-size: 1.2rem;
   color: var(--text-primary);
   margin-bottom: 0.2rem;
}

.media-meta {
   font-size: 0.85rem;
   color: var(--text-secondary);
}

/* Header */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: var(--space-sm) var(--space-md);
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 1000;
   background-color: rgba(5, 5, 5, 0.8);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Offset header when admin bar is present */
body.admin-active .site-header {
   top: 40px;
}

.logo {
   font-size: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   display: flex;
   align-items: center;
   white-space: nowrap;
   /* Prevent wrapping */
}

.logo span {
   display: inline-block;
   color: var(--text-primary);
   transition: color var(--transition-fast);
}

.logo span:not(.logo-hide) {
   color: var(--accent-red);
}


.logo-hide {
   color: rgba(187, 10, 10, 0.6) !important;
   max-width: 0;
   /* Start collapsed */
   opacity: 0;
   overflow: hidden;
   white-space: nowrap;
   animation: introSequence 2.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
   animation-delay: 0.2s;
}

@keyframes collapseLogo {
   to {
      max-width: 0;
      opacity: 0;
   }
}

@keyframes expandLogo {
   from {
      max-width: 0;
      opacity: 0;
   }

   to {
      max-width: 200px;
      opacity: 1;
   }
}

@keyframes introSequence {
   0% {
      max-width: 0;
      opacity: 0;
   }

   30% {
      max-width: 200px;
      opacity: 1;
   }

   70% {
      max-width: 200px;
      opacity: 1;
   }

   100% {
      max-width: 0;
      opacity: 0;
   }
}

/* Desktop Hover Interaction (Transition based) */
@media (min-width: 1024px) {

   /* When interactive mode is active (set by JS) */
   .logo.interactive .logo-hide {
      /* Disable animation so it doesn't fight with transition */
      animation: none;
      /* Ensure it matches the "end state" of the animation (collapsed) */
      max-width: 0;
      opacity: 0;
      /* Enable smooth reversible transition */
      transition: max-width 0.8s cubic-bezier(0.65, 0, 0.35, 1),
         opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1);
   }

   /* On Hover */
   .logo.interactive:hover .logo-hide {
      max-width: 200px;
      opacity: 1;
   }
}

.nav-link {
   margin-left: var(--space-md);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
   color: var(--text-primary);
}

/* Footer */
.site-footer {
   border-top: 1px solid var(--border-color);
   padding: var(--space-lg) 0;
   margin-top: var(--space-xl);
   text-align: center;
   background: linear-gradient(to right, rgb(16, 24, 34), rgb(42, 17, 17));
}

.social-links {
   display: flex;
   justify-content: center;
   gap: var(--space-md);
   margin-bottom: var(--space-sm);
   align-items: center;
}

.social-icon {
   width: 40px;
   height: 40px;
   object-fit: contain;
   transition: var(--transition-fast);
   /* Assuming logos might be black/colored, forcing white for dark theme consistency */
   filter: brightness(0) invert(1);
   opacity: 0.7;
}

.social-icon:hover {
   transform: scale(1.1);
   opacity: 1;
}

/* Reset margin for nav links in footer to ensure true centering */
.site-footer .nav-link {
   margin-left: 0;
   margin: 0 var(--space-xs);
   /* Optional: small side margin if not using gap, but social-links uses gap */
}

/* Specific reset for social links since they use gap */
.social-links .nav-link {
   margin: 0;
}

.legal-text {
   font-size: 0.7rem;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   opacity: 0.8;
}

.legal-text:hover {
   color: var(--text-primary);
   opacity: 1;
}

/* Color Palette Section for Test Page */
.color-swatch {
   width: 100px;
   height: 100px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 0.5rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================
   5. ABOUT ME SECTION
   ========================================= */
.about-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: var(--space-xl) var(--space-md);
   background-color: transparent;
   text-align: center;
   position: relative;
   z-index: 10;
   /* Ensure it sits above fixed background if needed */
}

.video-circle {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   overflow: hidden;
   margin: var(--space-md) 0;
   border: 3px solid var(--accent-red);
   /* Using branding color */
   box-shadow: 0 0 30px rgba(187, 10, 10, 0.3);
   /* Subtle glow */
   flex-shrink: 0;
}

.video-circle video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.text-justify {
   text-align: justify;
   max-width: 600px;
   /* Optimal reading width */
   margin: 0 auto var(--space-md) auto;
   font-size: 1.1rem;
   line-height: 1.8;
}

/* =========================================
   6. WORK SECTION
   ========================================= */
.work-section {
   padding: var(--space-xl) 0;
   text-align: center;
}

.work-grid {
   margin-top: var(--space-md);
   gap: var(--space-md);
   padding: 0 var(--space-md);
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
}

.work-card {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.1);
   aspect-ratio: 16/9;
   background: var(--bg-surface);
   transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
   /* Initial state for JS reveal */
   opacity: 0;
   transform: translateY(20px);
}

.work-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.work-card-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   filter: brightness(0.5) grayscale(0.5);
   transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   z-index: 1;
}

.work-card:hover .work-card-bg {
   filter: brightness(0.7) grayscale(0);
   transform: scale(1.1);
}

.work-card-content {
   position: relative;
   z-index: 2;
   text-align: center;
   transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-card h3 {
   font-size: 3rem;
   font-weight: 900;
   letter-spacing: 0.1em;
   margin-bottom: 0.5rem;
   text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.view-more {
   display: inline-block;
   font-size: 0.8rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent-red);
   font-weight: 700;
   opacity: 0;
   transform: translateY(10px);
   transition: all 0.4s ease;
}

.work-card:hover .view-more {
   opacity: 1;
   transform: translateY(0);
}

.work-card:hover {
   border-color: var(--accent-red);
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.work-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   opacity: 0.4;
   transition: transform 0.8s ease, opacity 0.5s ease;
   z-index: 1;
}

.video-card::before {
   /* Image is handled by .work-card-bg in index.php to prevent dual loading */
   background-color: rgba(0, 0, 0, 0.3);
}

.photo-card::before {
   /* Image is handled by .work-card-bg in index.php to prevent dual loading */
   background-color: rgba(0, 0, 0, 0.3);
}

.work-card:hover::before {
   transform: scale(1.1);
   opacity: 0.2;
}

.work-card-inner {
   z-index: 2;
   transition: var(--transition-fast);
}

.work-card h3 {
   font-size: 2rem;
   font-weight: 800;
   letter-spacing: 0.2em;
   color: var(--text-primary);
   text-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
   transition: var(--transition-fast);
}

.work-card:hover h3 {
   letter-spacing: 0.3em;
   color: var(--accent-red);
}

/* --- Mobile Scroll-Reveal Specifics --- */
@media (max-width: 768px) {
   .work-card.is-active .work-card-bg {
      filter: brightness(0.7) grayscale(0);
      transform: scale(1.1);
   }

   .work-card.is-active .view-more {
      opacity: 1;
      transform: translateY(0);
   }

   .work-card.is-active {
      border-color: var(--accent-red);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
   }

   .work-card.is-active::before {
      transform: scale(1.1);
      opacity: 0.2;
   }

   .work-card.is-active h3 {
      letter-spacing: 0.3em;
      color: var(--accent-red);
   }
}

@media (max-width: 768px) {
   .work-card {
      aspect-ratio: 4/5;
      /* Taller on mobile */
   }
}

/* =========================================
   7. INSPIRATION HIGHLIGHT SECTION
   ========================================= */
.inspiration-highlight-section {
   padding: var(--space-xl) 0;
   text-align: center;
}

.inspiration-container {
   max-width: 1100px;
   margin: 0 auto;
   border-radius: 12px;
   overflow: hidden;
   position: relative;
   aspect-ratio: 21 / 9;
   /* Ultra-wide cinematic feel */
   background: #000;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
   transition: transform 0.5s ease;
}

.inspiration-container:hover {
   transform: translateY(-5px);
   border-color: var(--accent-red);
}

.inspiration-bg-video {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translate(-50%, -50%);
   filter: brightness(0.6) saturate(1.2);
   transition: filter 0.5s ease;
}

.inspiration-container:hover .inspiration-bg-video {
   filter: brightness(0.4) saturate(1.4);
}

.inspiration-overlay-content {
   position: relative;
   z-index: 2;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: var(--space-md);
   background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.inspiration-overlay-content h2 {
   font-size: clamp(2rem, 5vw, 3.5rem);
   font-weight: 900;
   letter-spacing: 0.15em;
   margin-bottom: 0.5rem;
   text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.inspiration-overlay-content p {
   color: #fff;
   font-size: 1.1rem;
   max-width: 500px;
   margin-bottom: 2rem;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
   opacity: 0.9;
}

@media (max-width: 768px) {
   .inspiration-container {
      aspect-ratio: 16 / 9;
      margin: 0 var(--space-sm);
   }

   .inspiration-overlay-content p {
      font-size: 0.9rem;
      margin-bottom: 1rem;
   }
}

/* Utility: Section Padding */
.section-padding {
   padding: var(--space-xl) 0;
}

/* Infinite Marquee */
.marquee-container {
   padding: var(--space-md) 0;
   background: transparent;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   margin: var(--space-xl) 0;
}

.marquee-content {
   display: inline-block;
   animation: marquee 40s linear infinite;
}

.marquee-content span {
   font-size: 5rem;
   font-weight: 900;
   text-transform: uppercase;
   color: transparent;
   /* Stack of 8 shadows for a clean 0.5px - 1px contour without internal intersections */
   /* Lower opacity (0.08) to restore the lightweight / transparent look */
   text-shadow:
      1px 0 0 rgba(255, 255, 255, 0.08),
      -1px 0 0 rgba(255, 255, 255, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.08),
      0 -1px 0 rgba(255, 255, 255, 0.08),
      0.7px 0.7px 0 rgba(255, 255, 255, 0.08),
      -0.7px -0.7px 0 rgba(255, 255, 255, 0.08),
      0.7px -0.7px 0 rgba(255, 255, 255, 0.08),
      -0.7px 0.7px 0 rgba(255, 255, 255, 0.08);
   padding: 0 3rem;
   letter-spacing: 0.15em;
   transition: text-shadow 0.3s ease;
}

.marquee-content span.highlight {
   color: transparent;
   /* Red highlight with lower opacity (0.5) for transparency */
   text-shadow:
      1px 0 0 rgba(187, 10, 10, 0.5),
      -1px 0 0 rgba(187, 10, 10, 0.5),
      0 1px 0 rgba(187, 10, 10, 0.5),
      0 -1px 0 rgba(187, 10, 10, 0.5),
      0.7px 0.7px 0 rgba(187, 10, 10, 0.5),
      -0.7px -0.7px 0 rgba(187, 10, 10, 0.5),
      0.7px -0.7px 0 rgba(187, 10, 10, 0.5),
      -0.7px 0.7px 0 rgba(187, 10, 10, 0.5);
}

@keyframes marquee {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}


/* =========================================
   6. ANIMATIONS
   ========================================= */

@keyframes pageFadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Scroll Reveal Animation Classes */
.reveal-on-scroll {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.8s ease-out, transform 0.8s ease-out;
   will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* =========================================
   7. ADMIN BAR
   ========================================= */
.admin-bar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 40px;
   background-color: #000;
   border-bottom: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--space-md);
   z-index: 2000;
   /* Above everything including header */
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-secondary);
}

.admin-logout {
   color: var(--accent-red);
   font-weight: 700;
   transition: var(--transition-fast);
}

.admin-logout:hover {
   color: #ff3333;
}

/* =========================================
   8. PAGE TITLES & COMMON
   ========================================= */
.page-container {
   padding-top: 80px;
   /* Space for fixed header */
   min-height: 100vh;
}

.page-title-section {
   text-align: center;
   padding: var(--space-xl) var(--space-md) var(--space-md);
}

.text-subtitle {
   color: var(--text-secondary);
   font-size: 1.1rem;
   max-width: 600px;
   margin: 0 auto;
}

/* =========================================
   9. VIDEO PAGE CONTROLS
   ========================================= */
.controls-section {
   padding: var(--space-md) 0;
   margin-bottom: var(--space-md);
   border-bottom: 1px solid var(--border-color);
   position: relative;
   z-index: 50;
   /* Ensure this section sits above the video grid */
}


.controls-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-bottom: var(--space-md);
   gap: var(--space-md);
   width: 100%;
}

/* Search Bar - Flexbox Refactor */
.search-container {
   position: relative;
   max-width: 300px;
   width: 100%;
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   padding: 0 0.8rem;
   transition: var(--transition-fast);
}

.search-container:focus-within {
   border-color: var(--accent-red);
   background-color: var(--bg-surface-hover);
}

.search-container input.search-input {
   width: 100%;
   border: none;
   background: transparent;
   padding: 0.8rem 0.5rem;
   color: var(--text-primary);
   font-family: var(--font-main);
   outline: none;
}

.search-container input.search-input:focus {
   outline: none;
   background-color: transparent;
   border-color: transparent;
}

.search-icon {
   position: static;
   transform: none;
   color: var(--text-secondary);
   font-size: 1.2rem;
   /* Ensure visibility */
   pointer-events: none;
   order: -1;
   /* Move to left */
   flex-shrink: 0;
}

/* View Toggles */
.view-toggles {
   display: flex;
   gap: var(--space-xs);
}

.view-btn {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--text-secondary);
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   cursor: pointer;
   transition: var(--transition-fast);
}

.view-btn:hover {
   color: var(--text-primary);
   border-color: var(--text-muted);
}

.view-btn.active {
   background: rgba(255, 255, 255, 0.2);
   color: #fff;
   border-color: rgba(255, 255, 255, 0.5);
}

/* Filter Buttons - Redesigned */
.filters-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: var(--space-md);
   flex-wrap: wrap;
   margin-top: var(--space-sm);
}

/* Secondary "All Videos" Link */
.filter-reset {
   background: transparent;
   border: none;
   color: var(--text-muted);
   font-family: var(--font-main);
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   cursor: pointer;
   transition: var(--transition-fast);
   padding: 0.5rem;
}

.filter-reset:hover,
.filter-reset.active {
   color: var(--text-primary);
}

/* The Toggle Switcher Container */
.filter-switcher {
   display: inline-flex;
   justify-content: center;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 50px;
   /* Pill shape */
   padding: 4px;
   gap: 4px;
}

/* Guest View - Fix "Hole" in padding when admin button is missing */
body:not(.admin-active) .filter-switcher {
   padding: 6px 12px;
   /* Add balanced padding to fill the visual gap */
}

/* The Toggle Buttons */
.filter-btn {
   padding: 0.6rem 1.5rem;
   background: transparent;
   border: none;
   color: var(--text-secondary);
   font-family: var(--font-main);
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.85rem;
   letter-spacing: 0.1em;
   cursor: pointer;
   transition: var(--transition-fast);
   gap: var(--space-sm);
   transition: all 0.5s ease;
   border-radius: 50px;
   /* Pill shape matches container */
}

.filter-btn:hover {
   color: var(--text-primary);
}

.filter-btn.active {
   background: rgba(187, 10, 10, 0.3);
   /* Translucent RPG Red */
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(187, 10, 10, 0.5);
   color: #fff;
   transform: scale(1.05);
   /* Text animation effect */
   font-weight: 700;
}

/* Animation Keyframes */
@keyframes popIn {
   0% {
      opacity: 0;
      transform: scale(0.9);
   }

   100% {
      opacity: 1;
      transform: scale(1);
   }
}

.video-item.animate-in {
   animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-pop-in {
   animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* No Results Message */
.no-results-message {
   text-align: center;
   padding: var(--space-xl) 0;
   margin-top: var(--space-xl);
   width: 100%;
}

.no-results-icon {
   font-size: 3rem;
   margin-bottom: var(--space-sm);
   width: 200px;
   z-index: 2000;
}

/* Custom Dropdown */
.custom-dropdown {
   position: relative;
   width: 200px;
   z-index: 2002;
   /* Ensure higher than thumbnails */
}

.custom-dropdown.disabled {
   opacity: 0.5;
   pointer-events: none;
}

.dropdown-trigger {
   width: 100%;
   padding: 0.5rem 0.8rem;
   display: flex;
   justify-content: center;
   /* Center content */
   align-items: center;
   cursor: pointer;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border-radius: 8px;
   color: var(--text-primary);
   font-family: var(--font-main);
   font-size: 0.85rem;
   /* Not big */
   gap: 10px;
   /* Space between text and arrow */
}

.dropdown-trigger:hover {
   border-color: var(--text-muted);
}

.dropdown-arrow {
   font-size: 0.7rem;
   /* Smaller arrow */
   transition: transform 0.3s ease;
   opacity: 0.7;
}

.custom-dropdown.is-open .dropdown-arrow {
   transform: rotate(180deg);
}

.dropdown-options {
   position: absolute;
   top: 100%;
   /* Directly under */
   margin-top: 5px;
   /* Tiny gap */
   left: 0;
   width: 100%;
   background: #1a1a1a;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-5px);
   /* Slide down effect */
   transition: all 0.3s ease;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   z-index: 2003;
}

.custom-dropdown.is-open .dropdown-options {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.dropdown-option {
   padding: 0.6rem 0.8rem;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
   color: var(--text-secondary);
   font-size: 0.9rem;
   border-radius: 8px;
   margin: 4px;
}

.dropdown-option:hover {
   background: rgba(255, 255, 255, 0.08);
   color: var(--text-primary);
}

.dropdown-option.active {
   background: var(--accent-red);
   color: white;
}

/* =========================================
   COOKIE CONSENT
   ========================================= */
body.modal-open {
   overflow: hidden !important;
   height: 100vh;
}

.cookie-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   /* More transparent as requested */
   backdrop-filter: blur(15px);
   /* Stronger blur for glass effect */
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: all 0.6s ease;
}

/* Active State (Visible) */
.cookie-overlay.active {
   opacity: 1;
   pointer-events: all;
}

.cookie-modal {
   background: #121212;
   padding: var(--space-md);
   border: 1px solid var(--border-color);
   border-radius: 16px;
   max-width: 450px;
   width: 90%;
   text-align: center;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
   transform: scale(0.9);
   opacity: 0;
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Modal Active State */
.cookie-overlay.active .cookie-modal {
   transform: scale(1);
   opacity: 1;
}

.cookie-text {
   font-size: 0.95rem;
   color: var(--text-secondary);
   line-height: 1.6;
   text-align: justify;
}

.hover-underline {
   text-decoration: underline;
   text-decoration-color: transparent;
   transition: text-decoration-color 0.2s;
}

.hover-underline:hover {
   text-decoration-color: currentColor;
}

.cookie-buttons {
   display: flex;
   gap: var(--space-sm);
   justify-content: center;
   margin-top: var(--space-md);
}

.cookie-buttons .btn {
   min-width: 100px;
}

/* =========================================
   10. VIDEO GRID SYSTEM
   ========================================= */
.video-grid {
   display: grid;
   gap: var(--space-sm);
   transition: all 0.5s ease;
}

/* Grid View Modifiers */
.grid-view-small {
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid-view-medium {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-view-big {
   grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

/* Video Item */
.video-item {
   position: relative;
   aspect-ratio: 1/1;
   /* Square format */
   background-color: var(--bg-surface);
   overflow: hidden;
   cursor: pointer;
   border-radius: 4px;
   opacity: 0;
   transform: translateY(30px);
}

.video-item.animate-in {
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-thumb {
   width: 100%;
   height: 100%;
   position: relative;
}

.video-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   opacity: 0;
   /* Hidden until loaded */
   transition: transform 0.6s ease, opacity 0.5s ease;
}

.video-thumb img.loaded {
   opacity: 1;
}

/* Skeleton Loading Effect */
@keyframes shimmer {
   0% {
      background-position: -200% 0;
   }

   100% {
      background-position: 200% 0;
   }
}

.video-thumb {
   width: 100%;
   height: 100%;
   position: relative;
   background: #1a1a1a;
   background: linear-gradient(90deg, #1a1a1a 8%, #2a2a2a 18%, #1a1a1a 33%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite linear;
}

.video-item:hover .video-thumb img {
   transform: scale(1.05);
}

.thumb-placeholder {
   width: 100%;
   height: 100%;
   background-color: #222;
   transition: transform 0.6s ease;
}

.video-item:hover .thumb-placeholder {
   transform: scale(1.05);
}

.hover-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: var(--transition-fast);
}

.video-item:hover .hover-overlay {
   opacity: 1;
}

.play-icon {
   font-size: 2rem;
   color: var(--text-primary);
   transform: scale(0.8);
   transition: var(--transition-smooth);
}

.video-item:hover .play-icon {
   transform: scale(1);
}

/* Animation Utilities */
.fade-in {
   animation: fadeIn 0.8s ease-out forwards;
}

.delay-1 {
   animation-delay: 0.2s;
   opacity: 0;
}

/* =========================================
   11. VIDEO MODAL STYLES
   ========================================= */

.modal-overlay {
   display: flex !important;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.4s step-end,
      backdrop-filter 0.4s ease;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000000;
   background: rgba(40, 0, 0, 0.45);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   align-items: center;
   justify-content: center;
   overflow-y: auto;
   padding: 40px 20px;
   padding-bottom: 92px;
}

.modal-overlay.is-open {
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
   backdrop-filter: blur(12px);
   transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s step-start,
      backdrop-filter 0.4s ease;
}

.modal-content {
   position: relative;
   width: 90%;
   max-width: 1100px;
   background-color: rgba(18, 18, 18, 0.95);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-radius: 12px;
   box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
   border: 1px solid rgba(255, 255, 255, 0.1);

   transform: scale(0.92) translateY(30px);
   opacity: 0;
   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
      opacity 0.4s ease;
   will-change: transform, opacity;

   margin: auto;
}

.modal-content.admin-modal {
   max-width: 600px;
   padding: var(--space-lg);
   background-color: #111;
}

.modal-header h2 {
   color: var(--text-primary);
   margin-bottom: var(--space-md);
   text-align: center;
}


.admin-form .form-group {
   margin-bottom: var(--space-md);
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.admin-form label {
   color: var(--text-secondary);
   font-size: 0.9rem;
   text-transform: uppercase;
   font-weight: 600;
}

.admin-form input[type="text"],
.admin-form textarea,
.admin-form select {
   width: 100%;
   padding: 10px;
   background: #222;
   border: 1px solid #333;
   color: #fff;
   border-radius: 4px;
}

.admin-form input[type="file"] {
   color: var(--text-secondary);
}

/* Admin Floating Action Buttons (FAB) */
.admin-add-btn {
   /* Main Add Button (Existing) */
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: var(--accent-red);
   color: #fff;
   font-size: 2rem;
   border: none;
   box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
   cursor: pointer;
   z-index: 2500;
   transition: transform 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.admin-add-btn:hover {
   transform: scale(1.1);
}

.admin-controls {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 2500;
   display: flex;
   flex-direction: column;
   gap: 15px;
   align-items: flex-end;
}

.admin-fab-btn {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #444;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #666;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   font-size: 1.2rem;
   text-decoration: none;
   transition: all 0.3s ease;
}

.admin-fab-btn:hover {
   background: #555;
   transform: scale(1.05);
}

.admin-fab-btn.active {
   background-color: var(--accent-red);
   border-color: var(--accent-red);
   box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
   transform: scale(1.1);
}

/* History Button Specifics */
.admin-history-btn {
   background: #333;
   border-color: #555;
}


.archive-btn {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   border: 1px solid var(--accent-red);
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 0;
   transition: opacity 0.2s;
   z-index: 20;
}

.video-item:hover .archive-btn {
   opacity: 1;
}

.archive-btn:hover {
   background: var(--accent-red);
}


.modal-overlay.is-open .modal-content {
   transform: scale(1) translateY(0);
   opacity: 1;
}

.modal-close {
   position: absolute;
   top: -20px;
   right: -20px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--text-primary);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   cursor: pointer;
   z-index: 100;
   line-height: 1;
   transition: all 0.3s ease;
   backdrop-filter: blur(5px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-close:hover {
   background: var(--accent-red);
   color: white;
   transform: rotate(90deg) scale(1.1);
   border-color: var(--accent-red);
}

.modal-video-container {
   width: 100%;
   background: #000;
   position: relative;
}

.modal-video-container video {
   width: 100%;
   max-height: 70vh;
   display: block;
}

.modal-info {
   padding: var(--space-sm) var(--space-md);
   padding-top: var(--space-sm);
   text-align: left;
   background: var(--bg-surface);
}

.modal-info h2 {
   margin-bottom: var(--space-xs);
   color: var(--text-primary);
   font-size: 1.5rem;
}

.modal-date {
   display: block;
   font-size: 0.9rem;
   color: var(--accent-red);
   margin-bottom: var(--space-sm);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   text-align: center;
}

.modal-desc {
   color: var(--text-secondary);
   font-size: 1rem;
   line-height: 1.6;
   text-align: justify;
   max-width: 90%;
   margin: 10px auto;
}

/* Switching Transition (Cross-fade) */
.modal-content.switching .modal-info {
   opacity: 0;
   transform: scale(0.98);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Modal CTA */
.modal-cta-container {
   display: flex;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
   width: 100%;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   padding-top: var(--space-md);
   gap: var(--space-sm);
}

.modal-events-btn,
.modal-progression-btn,
.modal-share-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0;
   padding: 0;
   width: 44px;
   height: 44px;
   min-width: 0;
   border-radius: 50%;
   transition: all 0.3s ease;
   text-decoration: none;
   font-size: 0;
}

.modal-events-btn,
.modal-progression-btn {
   background: rgba(255, 255, 255, 0.1);
   color: var(--text-primary);
   border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-events-btn:hover,
.modal-progression-btn:hover {
   background: rgba(255, 255, 255, 0.15);
   transform: translateY(-2px);
   border-color: rgba(255, 255, 255, 0.3);
}

.modal-share-btn {
   background: var(--accent-red);
   color: white;
   border: none;
   cursor: pointer;
   box-shadow: 0 4px 20px rgba(187, 10, 10, 0.3);
}

.modal-share-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 25px rgba(187, 10, 10, 0.5);
}

.modal-share-btn.copied {
   background: #28a745;
   box-shadow: 0 4px 20px rgba(40, 167, 69, 0.3);
}

.modal-share-btn svg,
.modal-progression-btn svg,
.modal-events-btn svg {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
}

.btn-text {
   color: var(--text-secondary);
   text-decoration: none;
   font-size: 0.9rem;
   transition: color var(--transition-fast);
   cursor: pointer;
}

.btn-text:hover {
   color: var(--text-primary);
}

/* Modal Links Rendering */
.modal-links-container {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   padding-top: 15px;
}

.modal-link-item {
   color: var(--accent-red);
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   transition: all 0.2s ease;
}

.modal-link-item:hover {
   color: white;
   transform: translateX(3px);
}

.link-icon {
   font-size: 0.8rem;
   opacity: 0.8;
}

.modal-lock {
   overflow: hidden !important;
}

#modalTitle {
   text-align: center;
   margin-bottom: 5px;
}

.small-modal {
   max-width: 400px !important;
}

@media (max-width: 768px) {
   .modal-close {
      top: 10px;
      right: 10px;
      width: 35px;
      height: 35px;
      background: rgba(0, 0, 0, 0.5);
   }
}




/* Reorder Mode */
/* Reorder Mode */
.video-item.reorder-active,
.photo-item.reorder-active,
.category-btn-wrapper.reorder-active {
   border: 2px dashed #666;
   cursor: grab;
   transition: transform 0.2s ease, border-color 0.2s ease;
}

.video-item.reorder-active *,
.photo-item.reorder-active * {
   pointer-events: none;
   /* Prevent clicking play/archive buttons while reordering */
}

.video-item.over-left,
.photo-item.over-left,
.category-btn-wrapper.over-left {
   border-left: 4px solid var(--accent-red);
   transform: translateX(5px);
   z-index: 10;
}

.video-item.over-right,
.photo-item.over-right,
.category-btn-wrapper.over-right {
   border-right: 4px solid var(--accent-red);
   transform: translateX(-5px);
   z-index: 10;
}

body.is-reordering .video-item:not(.reorder-active),
body.is-reordering-photos .photo-item:not(.reorder-active),
body.is-reordering-cats .category-btn-wrapper:not(.reorder-active) {
   opacity: 0.3;
   filter: grayscale(1);
}

.edit-btn {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 30px;
   height: 30px;
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   border: 1px solid #fff;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   z-index: 20;
   transition: all 0.2s ease;
}

.edit-btn:hover {
   background: #fff;
   color: #000;
   transform: scale(1.1);
}

/* Side Panel (Drawer) */
.photo-item.selected {
   border: 3px solid var(--accent-red);
   transform: scale(0.95);
   opacity: 0.8;
}

.photo-item.selected::after {
   content: '✓';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: var(--accent-red);
   font-size: 3rem;
   font-weight: bold;
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   pointer-events: none;
}

/* Hide Archive button in select mode to avoid confusion */
body.select-mode-active .archive-btn {
   display: none !important;
}

.side-panel-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1000000;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.side-panel-overlay.active {
   opacity: 1;
   visibility: visible;
}

.side-panel {
   position: fixed;
   top: 0;
   right: -450px;
   /* Start off-screen */
   width: 400px;
   height: 100%;
   background: #1a1a1a;
   border-left: 1px solid #333;
   z-index: 1000001;
   transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
   display: flex;
   flex-direction: column;
}

.side-panel.active {
   right: 0;
}

.side-panel-header {
   padding: 20px;
   border-bottom: 1px solid #333;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #222;
}

.side-panel-header h2 {
   margin: 0;
   font-size: 1.2rem;
   color: #fff;
   letter-spacing: 1px;
}

.side-panel-close {
   background: none;
   border: none;
   color: #999;
   font-size: 1.5rem;
   cursor: pointer;
   transition: color 0.2s;
}

.side-panel-close:hover {
   color: #fff;
}

.side-panel-content {
   padding: 20px;
   overflow-y: auto;
   flex: 1;
   padding-bottom: 120px;
}

/* Responsive Panel */
@media (max-width: 600px) {
   .side-panel {
      width: 100%;
      right: -100%;
   }
}

/* =========================================
   MOBILE MENU & RESPONSIVENESS
   ========================================= */

/* Mobile Menu Button (Hamburger) - Super Organic Animation */
.menu-btn {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   width: 40px;
   height: 40px;
   position: relative;
   z-index: 2000;
   /* Entrance Animation */
   opacity: 0;
   transform: translateX(20px);
   animation: slideInMenu 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
   animation-delay: 2.2s;
   /* Sync with end of 2.5s intro sequence (starts at 0.2s) */
}

@keyframes slideInMenu {
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes slideOutMenu {
   0% {
      opacity: 1;
      transform: translateX(0);
   }

   100% {
      opacity: 0;
      transform: translateX(20px);
   }
}

.menu-exit {
   /* Override any existing animation */
   animation: slideOutMenu 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.menu-btn:active {
   transform: scale(0.9);
   /* Subtle click feedback */
}

.menu-btn span {
   display: block;
   width: 30px;
   /* Base width */
   height: 2px;
   background-color: var(--text-primary);
   position: absolute;
   left: 5px;
   /* Center in 40px button */
   border-radius: 4px;
   /* Soft edges */
   transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
   /* Elastic/Organic easing */
   transform-origin: center;
}

.menu-btn span:first-child {
   top: 12px;
   width: 30px;
}

.menu-btn span:nth-child(2) {
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   /* Staggered width for organic look */
   right: 5px;
   left: auto;
   transition-delay: 0.05s;
}

.menu-btn span:last-child {
   bottom: 12px;
   width: 15px;
   /* Staggered width for organic look */
   right: 5px;
   left: auto;
   /* Align right for flow */
   transition-delay: 0.1s;
}

/* Hover Effect (Desktop/interaction) */
.menu-btn:hover span:nth-child(2) {
   width: 25px;
}

.menu-btn:hover span:last-child {
   width: 25px;
}

/* Active State (X) - The Organic Morph */
.menu-btn.active span:first-child {
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
   width: 30px;
   transition-delay: 0.1s;
}

.menu-btn.active span:nth-child(2) {
   transform: translateY(-50%) scale(0);
   opacity: 0;
   width: 0;
   transition-delay: 0s;
   /* Disappear first */
}

.menu-btn.active span:last-child {
   top: 50%;
   bottom: auto;
   /* Reset bottom positioning to animate top */
   transform: translateY(-50%) rotate(-45deg);
   width: 30px;
   /* Grow to full width */
   transition-delay: 0.1s;
}

/* Mobile Menu Overlay - with organic fade */
.mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: rgba(5, 5, 5, 0.73);
   /* Deep dark background */
   backdrop-filter: blur(20px);
   /* Heavy premium blur */
   z-index: 1500;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.4s ease;
}

.mobile-menu.active {
   opacity: 1;
   pointer-events: all;
}

.mobile-menu nav {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   text-align: center;
}

/* Organic Link Animations */
.mobile-menu a {
   font-size: 2.5rem;
   /* Larger for impact */
   font-weight: 800;
   text-transform: uppercase;
   color: var(--text-secondary);
   text-decoration: none;

   /* Initial State for Animation */
   opacity: 0;
   transform: translateY(30px);
   transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
   transition-delay: 0s;
   /* Reset delay on close */
}

/* Animated Entrance State */
.mobile-menu.active a {
   opacity: 1;
   transform: translateY(0);
}

/* Staggered Delays for Organic Cascade */
.mobile-menu.active a:nth-child(1) {
   transition-delay: 0.1s;
}

.mobile-menu.active a:nth-child(2) {
   transition-delay: 0.2s;
}

.mobile-menu.active a:nth-child(3) {
   transition-delay: 0.3s;
}

.mobile-menu.active a:nth-child(4) {
   transition-delay: 0.4s;
}

.mobile-menu.active a:nth-child(5) {
   transition-delay: 0.5s;
}

.mobile-menu a:hover,
.mobile-menu a.active {
   color: var(--text-primary);
   transform: scale(1.1) !important;
   /* Pop effect on hover */
}

.no-scroll {
   overflow: hidden;
}

/* Responsive Media Queries */
@media (max-width: 768px) {

   /* Header */
   .desktop-nav {
      display: none;
   }

   .menu-btn {
      display: block;
   }

   /* Layout */
   .site-header {
      padding: var(--space-sm);
   }

   .container {
      padding: 0 var(--space-sm);
   }

   /* Grids - Force 1 column for generic grids, but allow specific views */
   .grid-3,
   .grid-2 {
      grid-template-columns: 1fr;
   }

   /* Mobile Grid Overrides (Video & Photo) */
   .grid-view-small {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-view-medium,
   .video-grid.grid-view-medium {
      /* Override the desktop specific rule */
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-view-big {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   /* Typography */
   h1 {
      font-size: 2.5rem;
   }

   h2 {
      font-size: 2rem;
   }

   /* Admin Bar */
   .admin-bar {
      font-size: 0.7rem;
      padding: 0 var(--space-xs);
   }

   body.admin-active .site-header {
      top: 40px;
   }

   /* Filter Buttons - Fix wrapping/size */
   .filter-btn {
      padding: 0.5rem 1rem !important;
      font-size: 0.75rem !important;
      white-space: nowrap;
   }

   /* Hide Lightbox Arrows on Mobile */
   .lightbox-nav {
      display: none !important;
   }

   /* Edit Pencil Buttons - Always Visible on Mobile */
   .edit-btn {
      opacity: 1 !important;
      /* Force visible */
      width: 40px;
      /* Larger touch target */
      height: 40px;
      background: rgba(0, 0, 0, 0.8);
      /* Darker contrast */
   }

   /* Disable hover effects that might rely on mouse */
   .video-item:hover .archive-btn,
   .video-item:hover .edit-btn {
      opacity: 1 !important;
   }

   /* View Count Badge (Mobile Override) */
   .view-badge {
      font-size: 0.7rem;
      padding: 2px 6px;
   }

   /* SCROLLABLE CATEGORIES (Mobile) */
   .filters-container {
      width: 100%;
      overflow: hidden;
      /* Hide outer overflow */
   }

   .filter-switcher {
      display: inline-flex;
      /* Shrink to content */
      max-width: 95vw;
      /* allow scrolling if too wide */
      overflow-x: auto;
      /* Enable Horizontal Scroll */
      justify-content: flex-start;
      /* Items start from left inside scrollable area */
      white-space: nowrap;
      width: auto;
      /* Do NOT force 100% width, this causes the gap */
      padding: 5px;
      gap: 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .filter-switcher::-webkit-scrollbar {
      display: none;
      /* Chrome/Safari/Opera */
   }
}

/* View Count Badge (Global) */
.view-badge {
   position: absolute;
   bottom: 10px;
   right: 10px;
   background-color: rgba(0, 0, 0, 0.7);
   color: #fff;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 0.8rem;
   font-weight: 600;
   pointer-events: none;
   backdrop-filter: blur(4px);
   z-index: 5;
   display: flex;
   align-items: center;
   gap: 4px;
}

/* Ensure overlay is still on top or badge is visible */
.video-thumb {
   position: relative;
}

/* Grid View Toggles */
.grid-view-small {
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.grid-view-medium {
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Specific override for Video Grid Medium size */
.video-grid.grid-view-medium {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-view-big {
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

/* =========================================
   14. PHOTO GALLERY STYLES
   ========================================= */

.photo-grid {
   display: grid;
   gap: 30px;
   width: 100%;
}

/* Inherit grid columns from .grid-view-* classes (shared with video) */

.photo-item {
   position: relative;
   border-radius: 6px;
   overflow: hidden;
   background: #000;
   /* Aspect Ratio for Vertical Photos (9:16 like Instagram Stories/Mobile) */
   aspect-ratio: 9 / 16;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s ease;
   cursor: pointer;
}

.photo-item:hover {
   transform: translateY(-5px);
}

.photo-thumb {
   width: 100%;
   height: 100%;
   position: relative;
}

.photo-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.photo-item:hover .photo-thumb img {
   transform: scale(1.05);
}

/* Overlay similar to video but simplified */
.photo-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.photo-item:hover .photo-overlay {
   opacity: 1;
}

.expand-icon {
   color: #fff;
   font-size: 2rem;
   pointer-events: none;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.admin-photo-actions {
   position: absolute;
   top: 10px;
   right: 10px;
   display: flex;
   gap: 5px;
   pointer-events: auto;
   /* Enable clicking buttons */
}

/* =========================================
   15. LIGHTBOX STYLES
   ========================================= */
.lightbox-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.95);
   z-index: 3000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
   opacity: 1;
   pointer-events: auto;
}

.lightbox-content {
   max-width: 90%;
   max-height: 90vh;
   position: relative;
   display: flex;
   justify-content: center;
   align-content: center;
}

.lightbox-content img {
   max-width: 100%;
   max-height: 90vh;
   object-fit: contain;
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.lightbox-close {
   position: absolute;
   top: 20px;
   right: 30px;
   background: none;
   border: none;
   color: #fff;
   font-size: 3rem;
   cursor: pointer;
   z-index: 3001;
}

.lightbox-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.1);
   border: none;
   color: #fff;
   font-size: 2rem;
   padding: 20px;
   cursor: pointer;
   transition: background 0.3s;
   user-select: none;
   z-index: 3001;
}

.lightbox-nav:hover {
   background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav.prev {
   left: 20px;
}

.lightbox-nav.next {
   right: 20px;
}


/* Add Category Button Style */
.filter-btn.add-cat-btn {
   width: 30px;
   height: 30px;
   padding: 0;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   margin-left: 10px;
   background: #333;
   color: white;
}

/* Select Mode */
.photo-item.selected {
   border: 3px solid var(--accent-red);
   transform: scale(0.95);
}

.photo-item.selected .photo-thumb {
   opacity: 0.7;
}

body.select-mode-active .photo-item {
   cursor: cell;
   /* Indicate selection available */
}

/* Explicit Animation for Grid Items */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.animate-in {
   animation: fadeInUp 0.5s ease forwards;
}

/* =========================================
   7. ANIMATIONS & EFFECTS
   ========================================= */

/* =========================================
   7. ANIMATIONS & EFFECTS
   ========================================= */

.morphing-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -10;
   /* Put it behind everything */
   background-color: #050505;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.8s ease;
}

/* Ensure no background covers the morphing bg on pages where it's used */
body.has-morphing-bg .morphing-bg {
   opacity: 1;
   pointer-events: auto;
}

body.has-morphing-bg {
   background: transparent !important;
}

.blob {
   position: absolute;
   width: 800px;
   height: 800px;
   background: radial-gradient(circle, var(--accent-red) 0%, transparent 65%);
   filter: blur(100px);
   opacity: 0.6;
   border-radius: 50%;
   mix-blend-mode: screen;
}

.blob-1 {
   top: -10%;
   left: -10%;
   background: radial-gradient(circle, #ff0000 0%, transparent 70%);
   animation: move-1 25s infinite alternate ease-in-out;
}

.blob-2 {
   bottom: -10%;
   right: -10%;
   background: radial-gradient(circle, #800000 0%, transparent 70%);
   animation: move-2 30s infinite alternate ease-in-out;
}

.blob-3 {
   top: 30%;
   left: 40%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, #ff3333 0%, transparent 70%);
   animation: move-3 20s infinite alternate ease-in-out;
}

@keyframes move-1 {
   0% {
      transform: translate(0, 0) rotate(0deg) scale(1.1);
   }

   33% {
      transform: translate(50vw, 20vh) rotate(120deg) scale(1.3);
   }

   66% {
      transform: translate(20vw, 50vh) rotate(240deg) scale(0.9);
   }

   100% {
      transform: translate(0, 0) rotate(360deg) scale(1.1);
   }
}

@keyframes move-2 {
   0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
   }

   33% {
      transform: translate(-45vw, -35vh) rotate(-120deg) scale(1.4);
   }

   66% {
      transform: translate(-10vw, -50vh) rotate(-240deg) scale(1.1);
   }

   100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
   }
}

@keyframes move-3 {
   0% {
      transform: translate(0, 0) scale(1.2);
   }

   25% {
      transform: translate(-25vw, 15vh) scale(1.5);
   }

   50% {
      transform: translate(15vw, 35vh) scale(1);
   }

   75% {
      transform: translate(25vw, -15vh) scale(1.3);
   }

   100% {
      transform: translate(0, 0) scale(1.2);
   }
}

/* Static version of blobs (no animation) */
.static-blobs .blob {
   animation: none !important;
}

/* Glass panel utility */
.glass-panel {
   background: rgba(18, 18, 18, 0.4);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   padding: var(--space-md);
}

.animated-bg-gradient {
   /* Kept for legacy if needed, but we prefer morphing-bg now */
   background: linear-gradient(-45deg, #101822, #0d0d0d, #2a1111, #1a0f0f);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   position: relative;
   overflow: hidden;
}

@keyframes gradientBG {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

/* =========================================
   15. UTILITY & HELPER CLASSES
   ========================================= */

.section-padding {
   padding: var(--space-lg) 0;
}

.panel-padding {
   padding: var(--space-lg) var(--space-md);
}

.max-w-800 {
   max-width: 800px;
}

.max-w-1000 {
   max-width: 1000px;
}

.mx-auto {
   margin-left: auto;
   margin-right: auto;
}

.text-center {
   text-align: center;
}

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

.text-justify {
   text-align: justify;
}

.mb-sm {
   margin-bottom: var(--space-sm);
}

.mb-md {
   margin-bottom: var(--space-md);
}

.mb-lg {
   margin-bottom: var(--space-lg);
}

.mt-sm {
   margin-top: var(--space-sm);
}

.mt-md {
   margin-top: var(--space-md);
}

.mt-lg {
   margin-top: var(--space-lg);
}

.full-width {
   width: 100%;
}

.inline-block {
   display: inline-block;
}

.text-shadow-heavy {
   text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.text-shadow-light {
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Form Specials */
.glass-input {
   background: rgba(0, 0, 0, 0.3) !important;
   border-color: rgba(255, 255, 255, 0.1) !important;
}

.contact-panel {
   text-align: left;
   background: rgba(18, 18, 18, 0.4);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   padding: var(--space-md);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.btn-contact {
   min-width: 200px;
   box-shadow: 0 4px 15px rgba(187, 10, 10, 0.3);
}

.label-sub {
   display: block;
   margin-bottom: 0.5rem;
   font-size: 0.9rem;
   color: var(--text-secondary);
}

.view-badge-admin {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 2px;
}

.view-unique {
   font-size: 0.8em;
   color: #ff6b6b;
   opacity: 0.9;
}

.admin-controls {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 2500;
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: flex-end;
}

.admin-fab {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #444;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #666;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   font-size: 1.2rem;
   text-decoration: none;
   transition: all 0.3s ease;
}

.admin-fab:hover {
   background: #555;
   transform: scale(1.05);
}

.admin-history-fab {
   background: #333;
   border: 1px solid #555;
}

.admin-hr {
   border: 0;
   border-top: 1px solid #444;
   margin: 20px 0;
}

.admin-optional-text {
   font-size: 0.9rem;
   color: #888;
   margin-bottom: 10px;
}

.thumb-placeholder-dark {
   background: #222;
}

.flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
}

.relative {
   position: relative;
}

.cat-btn-wrapper {
   display: inline-block;
   position: relative;
}

.archive-cat-badge {
   display: none;
   position: absolute;
   top: -10px;
   right: -5px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--accent-red);
   color: white;
   border: none;
   cursor: pointer;
   font-size: 12px;
   align-items: center;
   justify-content: center;
   z-index: 10;
}

.small-modal {
   max-width: 400px !important;
}

.hidden {
   display: none !important;
}

.relative {
   position: relative;
}

.z-2 {
   z-index: 2;
}

.text-white {
   color: var(--text-primary) !important;
}

/* Login Page */
.login-card {
   background-color: var(--bg-surface);
   padding: var(--space-lg) var(--space-md);
   border-radius: 8px;
   width: 100%;
   max-width: 400px;
   text-align: center;
   border: 1px solid var(--border-color);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
   animation: fadeUp 0.5s ease-out;
}

.login-card h1 {
   font-size: 2rem;
   margin-bottom: var(--space-md);
   letter-spacing: 0.1em;
   color: var(--accent-red);
}

.login-form {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}

.error-message {
   color: var(--accent-red);
   font-size: 0.9rem;
   margin-bottom: var(--space-sm);
   text-transform: uppercase;
   font-weight: 600;
}

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}


.archive-item-card {
   background: #111;
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 8px;
   border: 1px solid #333;
}

.flex-between-center {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.grid-history-photos {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   gap: 10px;
}

.photo-archive-box {
   aspect-ratio: 1;
   cursor: pointer;
   position: relative;
}

.img-fit {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.btn-text-inline {
   margin-top: 1rem;
   display: inline-block;
}

.flex-end-gap {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
}

.gap-md {
   gap: 1rem;
}


.restore-badge {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(0, 0, 0, 0.7);
   color: #4CAF50;
   border: 1px solid #4CAF50;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 20;
   transition: all 0.2s ease;
}

.restore-badge:hover {
   background: #4CAF50;
   color: white;
   transform: scale(1.1);
}

.edit-badge-top {
   position: absolute;
   top: 10px;
   left: 10px;
}

.btn-secondary {
   background-color: #555 !important;
   color: white !important;
}

.btn-secondary:hover {
   background-color: #666 !important;
}

.bg-surface-padding {
   padding: 0.5rem;
   background: var(--bg-surface);
}

.font-09 {
   font-size: 0.9rem;
}

.font-08 {
   font-size: 0.8rem;
}


.restore-red {
   background-color: var(--accent-red) !important;
   color: white !important;
}

.text-muted-08 {
   font-size: 0.8rem;
   color: #888;
}

.text-muted-center {
   text-align: center;
   color: #888;
}


.admin-analytics-link {
   margin-right: 20px;
   color: white;
   text-decoration: none;
   font-weight: 700;
}

.logo-link {
   text-decoration: none;
}

/* Site Header Variants */
.site-header.transparent {
   background-color: transparent;
   border-bottom: none;
   backdrop-filter: none;
}

body:not(:has(.site-header.transparent)) .main-content {
   margin-top: 80px;
}


.footer-nav {
   margin-top: 1.5rem;
   display: flex;
   justify-content: center;
   gap: 2rem;
}

.ml-sm {
   margin-left: 10px;
}

.p-sm {
   padding: var(--space-sm);
}

.p-0 {
   padding: 0 !important;
}

.w-30 {
   width: 30px !important;
}

.h-30 {
   height: 30px !important;
}

.modal-cta-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   padding-top: var(--space-md);
   gap: var(--space-sm);
}

#modalCta {
   box-shadow: 0 4px 20px rgba(187, 10, 10, 0.2);
   transition: all 0.3s ease;
}

#modalCta:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 25px rgba(187, 10, 10, 0.4);
}

.btn-text {
   color: var(--text-secondary);
   text-decoration: none;
   font-size: 0.9rem;
   transition: color var(--transition-fast);
   cursor: pointer;
}

.btn-text:hover {
   color: var(--text-primary);
}

/* Dynamic Links Admin UI */
.link-input-row {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 8px;
}

.link-input-row input {
   flex: 1;
   padding: 8px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: white;
   border-radius: 4px;
}

.btn-remove-link {
   background: rgba(255, 0, 0, 0.2);
   color: #ff4444;
   border: 1px solid rgba(255, 0, 0, 0.3);
   border-radius: 4px;
   width: 30px;
   height: 30px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
}

.btn-remove-link:hover {
   background: #ff4444;
   color: white;
}

.mt-xs {
   margin-top: 5px;
}

.mb-xs {
   margin-bottom: 5px;
}

/* Modal Links Rendering */
.modal-links-container {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   padding-top: 15px;
}

.modal-link-item {
   color: var(--accent-red);
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   transition: all 0.2s ease;
}

.modal-link-item:hover {
   color: white;
   transform: translateX(3px);
}

.link-icon {
   font-size: 0.8rem;
   opacity: 0.8;
}

/* =========================================
   NEW VIDEO BADGE
   ========================================= */
.modal-lock {
   overflow: hidden !important;
}


/* Video modal description text alignment */
#modalTitle {
   text-align: center;
   margin-bottom: 5px;
}

.modal-date {
   display: block;
   /* Required for text-align on span */
   text-align: center;
   margin-bottom: 15px;
   color: var(--text-secondary);
   font-size: 0.9rem;
}

.modal-desc {
   text-align: justify;
   max-width: 90%;
   margin: 10px auto;
   /* Added top/bottom margin for spacing */
}

.mfs-desc-content {
   text-align: justify;
}

/* =========================================
   VIDEO NAVIGATION & TRANSITIONS
   ========================================= */

/* Fixed Video Stage (Prevents CLS/Jumping) */
.modal-video-container {
   width: 100%;
   height: 60vh;
   /* Fixed stage height */
   background: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}

.modal-video-container video {
   max-width: 100%;
   max-height: 100%;
   width: 100%;
   height: 100%;
   box-shadow: none;
   object-fit: contain;
}

/* Mobile Optimization for Video Stage */
@media (max-width: 768px) {
   .modal-video-container {
      height: auto;
      /* Allow flexible height */
      aspect-ratio: 16 / 9;
      /* Perfect for landscape videos */
   }
}

.nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   font-size: 2rem;
   padding: 1rem 0.5rem;
   cursor: pointer;
   z-index: 10;
   transition: background 0.3s ease, transform 0.2s ease;
   border-radius: 4px;
   opacity: 0;
   /* Hidden by default, shown on hover */
}

.modal-video-container:hover .nav-btn {
   opacity: 1;
}

.nav-btn:hover {
   background: var(--accent-red);
   transform: translateY(-50%) scale(1.1);
}

.nav-btn.prev {
   left: 10px;
}

.nav-btn.next {
   right: 10px;
}

/* Smooth Switching transition */
.modal-content.switching .modal-video-container,
.modal-content.switching .modal-info {
   opacity: 0;
   transition: opacity 0.3s ease;
}

/* =========================================
   MINI PLAYER REPARENTING (FINAL FIX)
   ========================================= */

@keyframes slideUpMini {
   from {
      transform: translateY(100px);
      opacity: 0;
   }

   to {
      transform: translateY(0);
      opacity: 1;
   }
}

/* 1. Hide the Modal Overlay Completely (Since video is now in Body) */
body.mini-player-active .modal-overlay {
   display: none !important;
}

/* 2. Style the Video Container (Directly in Body now) */
body.mini-player-active .modal-video-container {
   display: block !important;
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 360px;
   height: auto;
   z-index: 99999 !important;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   border: 2px solid var(--border-color);
   border-radius: 8px;
   overflow: hidden;
   pointer-events: auto;
   visibility: visible !important;
   opacity: 1 !important;
   animation: slideUpMini 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   background: #000 !important;
   touch-action: none;
   /* Prevent scroll interference */
   /* FIX for gaps/borders */
}

/* Mobile Mini-Player Sizing (Less Obtrusive) */
@media (max-width: 768px) {
   body.mini-player-active .modal-video-container {
      width: 250px;
      bottom: 15px;
      right: 15px;
   }
}

body.mini-player-active video {
   border-radius: 0;
   width: 100%;
   height: 100%;
   background: #000;
}

/* 3. Hide large Nav buttons in Mini Mode */
body.mini-player-active .nav-btn {
   display: none !important;
}

/* 4. Controls Positioning */
body.mini-player-active .mini-controls {
   display: flex !important;
   position: absolute;
   top: 5px;
   right: 5px;
   gap: 5px;
   z-index: 100000 !important;
}

body.mini-player-active .drag-indicator {
   display: flex !important;
}

.drag-indicator {
   display: none;
   position: absolute;
   top: 10px;
   left: 10px;
   color: rgba(255, 255, 255, 0.6);
   background: rgba(0, 0, 0, 0.3);
}

.mini-controls {
   display: none;
}

.mini-btn {
   background: rgba(0, 0, 0, 0.6);
   color: white;
   border: 1px solid rgba(255, 255, 255, 0.2);
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 0.9rem;
   backdrop-filter: blur(4px);
   padding: 0;
}

.mini-btn:hover {
   background: var(--accent-red);
   color: white;
   border-color: var(--accent-red);
}

/* =========================================
   SMOOTH MODAL TRANSITIONS (FINAL)
   ========================================= */

/* Overwrite default display-based hiding with Visibility/Opacity */
.modal-overlay {
   display: flex !important;
   /* Always layout flex, toggle visibility instead */
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.4s step-end,
      /* Delay hiding visibility until opacity is 0 */
      backdrop-filter 0.4s ease;

   /* Ensure positioning is robust */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
   background: rgba(0, 0, 0, 0.85);
   backdrop-filter: blur(5px);
   align-items: center;
   justify-content: center;
}

.modal-overlay.is-open {
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
   backdrop-filter: blur(12px);
   /* Stronger blur when open */
   transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s step-start,
      /* Show visibility immediately */
      backdrop-filter 0.4s ease;
}

.modal-content {
   /* Initial State (Closed) */
   transform: scale(0.92) translateY(30px);
   opacity: 0;
   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
      opacity 0.4s ease;
   will-change: transform, opacity;
}

.modal-overlay.is-open .modal-content {
   /* Active State (Open) */
   transform: scale(1) translateY(0);
   opacity: 1;
}

/* Enhanced Mini-Player Animation */
@keyframes slideUpMini {
   0% {
      transform: translateY(100px) scale(0.8);
      opacity: 0;
   }

   60% {
      transform: translateY(-10px) scale(1.05);
      /* Overshoot */
      opacity: 1;
   }

   100% {
      transform: translateY(0) scale(1);
      opacity: 1;
   }
}

body.mini-player-active .modal-video-container {
   animation: slideUpMini 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Mini-Player Exit Animation (Swipe Right) */
@keyframes slideOutRight {
   0% {
      transform: translateY(0) translateX(0) scale(1);
      opacity: 1;
   }

   100% {
      transform: translateY(0) translateX(150px) scale(0.95);
      opacity: 0;
   }
}

body.mini-player-active .modal-video-container.mini-closing {
   animation: slideOutRight 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
   pointer-events: none;
}

/* Switching Transition (Cross-fade) */
.modal-content.switching .modal-video-container,
.modal-content.switching .modal-info {
   opacity: 0;
   transform: scale(0.98);
   /* Slight shrink */
   transition: opacity 0.3s ease, transform 0.3s ease;
}

/* =========================================
   NEW VIDEO BADGE (PRO STYLE)
   ========================================= */
.new-badge {
   position: absolute;
   top: 12px;
   right: 12px;
   background: linear-gradient(135deg, rgba(220, 20, 20, 0.9) 0%, rgba(160, 0, 0, 0.95) 100%);
   color: white;
   font-size: 0.65rem;
   font-weight: 800;
   padding: 6px 12px;
   border-radius: 6px;
   z-index: 5;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   text-transform: uppercase;
   letter-spacing: 1.5px;
   pointer-events: none;
   font-family: var(--font-main);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   transform: translateZ(0);
}

/* =========================================
   ADMIN CHECKBOX STYLE
   ========================================= */
.checkbox-group {
   display: flex;
   align-items: center;
   margin: 1rem 0;
}

.checkbox-label {
   display: flex;
   align-items: center;
   cursor: pointer;
   font-size: 0.9rem;
   color: var(--text-secondary);
   user-select: none;
}

.checkbox-label input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
}

.custom-checkbox {
   height: 20px;
   width: 20px;
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 4px;
   margin-right: 10px;
   position: relative;
   transition: all 0.2s ease;
}

.checkbox-label:hover input~.custom-checkbox {
   background-color: rgba(255, 255, 255, 0.2);
   border-color: var(--accent-red);
}

.checkbox-label input:checked~.custom-checkbox {
   background-color: var(--accent-red);
   border-color: var(--accent-red);
   box-shadow: 0 0 10px rgba(187, 10, 10, 0.4);
}

.custom-checkbox:after {
   content: "";
   position: absolute;
   display: none;
   left: 7px;
   top: 3px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.checkbox-label input:checked~.custom-checkbox:after {
   display: block;
}

/* =========================================
   MOBILE BOTTOM NAVIGATION BAR (PORTED)
   ========================================= */

/* Hidden on desktop by default */
.mobile-bottom-nav {
   display: none;
}

@media (max-width: 768px) {

   /* Show bottom nav on mobile */
   .mobile-bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 56px;
      background: linear-gradient(to right, rgba(16, 24, 34, 0.97), rgba(42, 17, 17, 0.97));
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      z-index: 5001;
      padding-bottom: env(safe-area-inset-bottom, 0);
      box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
   }

   /* Hidden state — scrolling down (ease-in: gentle start, accelerates away) */
   .mobile-bottom-nav.nav-hidden {
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1);
   }

   /* Strip blur during animation for performance */
   .mobile-bottom-nav.is-animating {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
   }

   .bottom-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      text-decoration: none;
      color: rgba(255, 255, 255, 0.45);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.3px;
      transition: color 0.2s ease, transform 0.15s ease;
      padding: 6px 0;
      -webkit-tap-highlight-color: transparent;
   }

   .bottom-nav-item svg {
      width: 22px;
      height: 22px;
      transition: transform 0.2s ease;
   }

   .bottom-nav-item.active {
      color: var(--accent-red, #bb0a0a);
   }

   .bottom-nav-item.active svg {
      transform: scale(1.1);
   }

   .bottom-nav-item:active {
      transform: scale(0.92);
   }

   /* Hide hamburger button — bottom nav replaces it */
   .menu-btn {
      display: none !important;
   }

   /* Hide mobile menu overlay — no longer needed */
   .mobile-menu {
      display: none !important;
   }

   /* Removing hardcoded footer padding to fix black gap on scroll */

   /* Modal padding should account for bottom nav */
   .modal-overlay {
      padding-bottom: calc(56px + 10px) !important;
   }
}

/* Hide close button on description panel for desktop (as it is persistent) */
@media (min-width: 769px) {
   #mfsDescPanel .mfs-panel-close-btn {
      display: none !important;
   }
}

.sticky-audio-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background: linear-gradient(to right, rgba(42, 17, 17, 0.7), rgba(5, 5, 5, 0.75));
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   /* Hybrid RPG Red + Frosty Glass */
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding: 0;
   z-index: 999999 !important;
   /* ENSURE ON TOP OF EVERYTHING */
   transform: translateY(100%);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
   display: flex;
   flex-direction: column;
   height: 72px;
   /* Fixed height like YT */
   view-transition-name: sticky-player;
   /* Lift to transition layer */
}

.sticky-audio-bar.is-visible {
   transform: translateY(0);
   opacity: 1;
   pointer-events: all;
}

/* Fullscreen Auto-Hide Controls */
.sticky-audio-bar.fs-hidden {
   opacity: 0;
   transform: translateY(100%);
   pointer-events: none;
}

/* Ensure Sticky Player is ALWAYS on top during transitions */
::view-transition-group(sticky-player) {
   z-index: 100000;
}

/* Hide redundant music overlay controls - miniplayer handles all playback */
.music-controls-layer {
   display: none !important;
}

/* Custom Fullscreen Button for Modal */
.modal-fullscreen-btn {
   position: absolute;
   bottom: 15px;
   right: 15px;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   border: 1px solid rgba(255, 255, 255, 0.2);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 1.2rem;
   z-index: 20;
   transition: all 0.3s ease;
   backdrop-filter: blur(4px);
}

.modal-fullscreen-btn:hover {
   background: var(--accent-red);
   border-color: var(--accent-red);
   transform: scale(1.1);
}

.modal-video-container:hover .modal-fullscreen-btn {
   opacity: 1;
}

/* Ensure video is clickable even without controls */
#modalVideo {
   cursor: pointer;
}

/* Progress Bar (Top Edge) */
.audio-progress-container {
   width: 100%;
   height: 3px;
   /* Thin line */
   background-color: rgba(255, 255, 255, 0.1);
   cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
}

.audio-progress-container:hover {
   height: 5px;
}

.audio-progress-fill {
   height: 100%;
   width: 0%;
   background-color: #ff0000;
   /* YouTube Red */
   transition: width 0.1s linear;
   position: relative;
}

.audio-progress-fill::after {
   content: '';
   position: absolute;
   right: -6px;
   top: 50%;
   transform: translateY(-50%) scale(0);
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: #ff0000;
   transition: transform 0.2s ease;
}

.audio-progress-container:hover .audio-progress-fill::after {
   transform: translateY(-50%) scale(1);
}

/* Invisible expanded hit area for easier tapping */
.audio-progress-container::before {
   content: '';
   position: absolute;
   top: -12px;
   left: 0;
   right: 0;
   height: 28px;
   z-index: 5;
   cursor: pointer;
}

/* Fullscreen Mode - Improved Layout */
.sticky-audio-bar.fs-active {
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
   border-top: none;
   padding-bottom: 15px;
}

.sticky-audio-bar.fs-active .audio-progress-container {
   height: 5px;
}

.sticky-audio-bar.fs-active .audio-progress-container::before {
   height: 40px;
   top: -18px;
}

/* Fullscreen Exit Button - Simple × symbol */
.fs-exit-btn {
   display: none;
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: white;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   cursor: pointer;
   font-size: 1.4rem;
   transition: all 0.3s ease;
   margin-left: 10px;
   align-items: center;
   justify-content: center;
   line-height: 1;
}

.fs-exit-btn:hover {
   background: var(--accent-red);
   border-color: var(--accent-red);
   transform: scale(1.1);
}

.sticky-audio-bar.fs-active .fs-exit-btn {
   display: flex;
}

/* Audio Bar Layout */
.desktop-hide {
   display: none !important;
}

@media (max-width: 768px) {
   .mobile-hide {
      display: none !important;
   }

   .desktop-hide {
      display: block !important;
   }
}

.audio-bar-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--space-md);
   height: 100%;
   width: 100%;
}

/* Left: Controls */
.audio-controls {
   display: flex;
   align-items: center;
   gap: 2rem;
   flex: 0 0 auto;
   /* Don't stretch */
   min-width: 180px;
}

.audio-btn {
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.9);
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
}

.audio-btn:hover {
   color: white;
}

/* Play Button - Clean Icon Style */
.play-btn {
   width: 50px;
   height: 50px;
   background: none;
   color: white;
   font-size: 2.5rem;
   padding: 0;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
   text-align: center;
}

.audio-btn.play-btn:hover {
   background: none;
   transform: scale(1.1);
   color: white;
}

#barPrevBtn,
#barNextBtn {
   font-size: 1.8rem;
   color: rgba(255, 255, 255, 0.7);
}

/* Center: Metadata */
.audio-info {
   display: flex;
   align-items: center;
   gap: 1rem;
   flex: 1;
   justify-content: center;
   /* Centered in bar */
   overflow: hidden;
   padding: 0 20px;
}

.audio-thumb {
   width: 40px;
   height: 40px;
   border-radius: 2px;
   /* YT style is slightly rounded or sharp */
   overflow: hidden;
   flex-shrink: 0;
   position: relative;
   /* Container for absolute video */
}

.audio-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.bar-video-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: black;
   z-index: 2;
   /* On top of image */
}

.bar-video-container.hidden {
   display: none;
}

.bar-video-container video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Fill the square */
   pointer-events: none;
   /* No interaction in tiny mode */
}

/* Hide default browser video controls in miniplayer */
.bar-video-container video::-webkit-media-controls {
   display: none !important;
}

.bar-video-container video::-webkit-media-controls-enclosure {
   display: none !important;
}

.bar-video-container video::-webkit-media-controls-panel {
   display: none !important;
}

.bar-video-container video::-webkit-media-controls-play-button {
   display: none !important;
}

/* For Firefox */
.bar-video-container video::-moz-media-controls {
   display: none !important;
}

/* For all browsers - remove controls attribute effect */
.bar-video-container video {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}


.audio-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 400px;
   text-align: left;
}

.audio-title {
   font-weight: 500;
   font-size: 0.95rem;
   color: rgba(255, 255, 255, 0.9);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.audio-author {
   font-size: 0.85rem;
   color: #aaa;
}

.audio-time {
   font-size: 0.85rem;
   color: #aaa;
   font-family: monospace;
   margin-right: 10px;
   white-space: nowrap;
}

.audio-text .audio-time {
   margin-right: 0;
   margin-top: 2px;
}

/* Right: Actions */
.audio-actions {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex: 0 0 auto;
   justify-content: flex-end;
   min-width: 200px;
}

/* A/V Toggle - Minimalist */
.av-toggle {
   position: relative;
   display: flex;
   align-items: center;
}

.av-checkbox {
   display: none;
}

.av-label {
   background: transparent;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   color: #aaa;
   font-size: 0.9rem;
   font-weight: 500;
}

.av-label span {
   transition: color 0.2s;
}

.av-checkbox:checked+.av-label .video-icon {
   color: white;
   text-shadow: 0 0 10px white;
}

.av-label::after {
   display: none;
   /* Remove toggle switch look */
}

/* Volume */
.volume-container {
   display: flex;
   align-items: center;
   gap: 0.8rem;
}

input[type=range] {
   -webkit-appearance: none;
   appearance: none;
   width: 100px;
   height: 3px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 2px;
}

input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 12px;
   height: 12px;
   background: white;
   border-radius: 50%;
   cursor: pointer;
   transition: transform 0.2s;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.audio-btn.small {
   font-size: 1.2rem;
   opacity: 0.7;
   padding: 8px;
   /* Touch target */
}

.audio-btn.small:hover {
   opacity: 1;
   background: none;
   transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
   .audio-bar-content {
      padding: 0 8px;
      height: 64px;
      gap: 5px;
   }

   /* Group Previous/Play/Next tightly */
   .audio-controls {
      gap: 0.5rem;
      min-width: auto;
      flex: 0 0 auto;
      margin-right: 15px;
      /* Add more distance from the thumbnail as requested */
   }

   .play-btn {
      width: 40px;
      height: 40px;
      font-size: 1.8rem;
   }

   #barPrevBtn,
   #barNextBtn {
      font-size: 1.2rem;
   }

   /* Metadata: Give it the remaining space */
   .audio-info {
      padding: 0;
      gap: 10px;
      flex: 1;
      justify-content: flex-start;
      /* Align to the left on mobile */
      min-width: 0;
      /* Allow text truncation */
   }

   .audio-thumb {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
   }

   .audio-text {
      max-width: none;
      flex: 1;
      min-width: 0;
   }

   .audio-title {
      font-size: 0.9rem;
   }

   .audio-author {
      display: none !important;
   }

   /* Actions: Tighten up */
   .audio-actions {
      min-width: auto;
      gap: 8px;
      flex: 0 0 auto;
      margin-left: 5px;
   }

   .volume-container,
   .av-toggle {
      display: none;
      /* Critical space saving on mobile */
   }

   .audio-btn.small {
      padding: 5px;
      font-size: 1rem;
   }
}

/* =========================================
   VIDEO MODAL EXTENSIONS (TOGGLE & MUSIC MODE)
   ========================================= */
.modal-mode-toggle {
   display: inline-flex;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 50px;
   padding: 4px;
   margin: 0 auto 20px auto;
   position: relative;
   z-index: 10;
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(5px);
   box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}


.mode-btn {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
   border: none;
   padding: 8px 30px;
   border-radius: 50px;
   cursor: pointer;
   font-size: 0.9rem;
   font-weight: 600;
   transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-family: var(--font-main);
   outline: none;
}

.mode-btn:hover {
   color: #fff;
}

.mode-btn.active {
   background: var(--accent-red);
   color: white;
   box-shadow: 0 4px 15px rgba(187, 10, 10, 0.4);
   transform: scale(1.05);
}

.modal-music-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000;
   z-index: 15;
   /* Above video (default 0) */
   display: flex;
   align-items: center;
   justify-content: center;
}

.modal-music-overlay.hidden {
   display: none;
}

#modalMusicThumb {
   width: 100%;
   height: 100%;
   object-fit: contain;
   opacity: 0.9;
}

/* Ensure controls stay on top */
.nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   font-size: 2rem;
   padding: 10px 15px;
   cursor: pointer;
   z-index: 20;
   /* Above Music Overlay */
   transition: background 0.3s;
}

.nav-btn:hover {
   background: var(--accent-red);
}

.nav-btn.prev {
   left: 0;
}

.nav-btn.next {
   right: 0;
}

/* =========================================
   MUSIC MODE OVERLAY CONTROLS
   ========================================= */
.music-controls-layer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.4);
   /* Slight dim */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
   z-index: 5;
}

.modal-music-overlay:hover .music-controls-layer,
.modal-music-overlay.paused .music-controls-layer {
   opacity: 1;
}

.big-play-btn {
   font-size: 5rem;
   color: white;
   background: none;
   border: none;
   cursor: pointer;
   text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   transition: transform 0.2s ease;
}

.big-play-btn:hover {
   transform: scale(1.1);
}

.modal-progress-bar {
   position: absolute;
   bottom: 60px;
   left: 10%;
   width: 80%;
   height: 6px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 3px;
   cursor: pointer;
}

.modal-progress-fill {
   height: 100%;
   width: 0%;
   background: #ff0000;
   border-radius: 3px;
   position: relative;
}

.modal-progress-fill::after {
   content: '';
   position: absolute;
   right: -6px;
   top: 50%;
   transform: translateY(-50%);
   width: 14px;
   height: 14px;
   background: white;
   border-radius: 50%;
   opacity: 0;
   transition: opacity 0.2s;
}

.modal-progress-bar:hover .modal-progress-fill::after {
   opacity: 1;
}

.modal-seek-slider {
   position: absolute;
   top: -50%;
   left: 0;
   width: 100%;
   height: 200%;
   opacity: 0;
   cursor: pointer;
   z-index: 1000;
}

.modal-time-display {
   position: absolute;
   bottom: 25px;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
}

/* Fix for Modal Description Spacing */
.modal-desc {
   white-space: pre-wrap;
   line-height: 1.6;
}

/* =========================================
   Admin Modal Tabs
   ========================================= */
.tabs-header {
   display: flex;
   border-bottom: 1px solid var(--border-color);
   margin-bottom: var(--space-md);
   gap: var(--space-sm);
}

.tab-btn {
   padding: var(--space-xs) var(--space-sm);
   background: transparent;
   border: none;
   cursor: pointer;
   color: var(--text-secondary);
   font-weight: 500;
   border-bottom: 2px solid transparent;
   transition: var(--transition-fast);
}

.tab-btn:hover {
   color: var(--text-primary);
}

.tab-btn.active {
   color: var(--accent-red);
   border-bottom-color: var(--accent-red);
}

.tab-content {
   display: none;
   animation: fadeIn 0.3s ease-out;
}

.tab-content.active {
   display: block;
}

/* =========================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================= */

/* Hidden on desktop by default */
.mobile-bottom-nav {
   display: none;
}

@media (max-width: 768px) {

   /* Show bottom nav on mobile */
   .mobile-bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 56px;
      background: linear-gradient(to right, rgba(16, 24, 34, 0.97), rgba(42, 17, 17, 0.97));
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      z-index: 5001;
      padding-bottom: env(safe-area-inset-bottom, 0);
      box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.25s ease;
      will-change: transform, opacity;
   }

   /* Hidden state — scrolling down: fade finishes BEFORE slide,
      so the nav is already transparent when the gap would appear */
   .mobile-bottom-nav.nav-hidden {
      transform: translateY(100%);
      opacity: 0;
      transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1),
         opacity 0.60s ease;
   }

   /* Strip blur during animation for performance */
   .mobile-bottom-nav.is-animating {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
   }

   .bottom-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      text-decoration: none;
      color: rgba(255, 255, 255, 0.45);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.3px;
      transition: color 0.2s ease, transform 0.15s ease;
      padding: 6px 0;
      -webkit-tap-highlight-color: transparent;
   }

   .bottom-nav-item svg {
      width: 22px;
      height: 22px;
      transition: transform 0.2s ease;
   }

   .bottom-nav-item.active {
      color: var(--accent-red, #e50914);
   }

   .bottom-nav-item.active svg {
      transform: scale(1.1);
   }

   .bottom-nav-item:active {
      transform: scale(0.92);
   }

   /* Reposition miniplayer ABOVE the bottom nav */
   .sticky-audio-bar {
      bottom: 56px !important;
      bottom: calc(56px + env(safe-area-inset-bottom, 0)) !important;
      transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
   }

   /* When nav is hidden, miniplayer slides back to bottom */
   .mobile-bottom-nav.nav-hidden~.sticky-audio-bar {
      bottom: 0 !important;
   }

   /* Hide hamburger button — bottom nav replaces it */
   .menu-btn {
      display: none !important;
   }

   /* Hide mobile menu overlay — no longer needed */
   .mobile-menu {
      display: none !important;
   }

   /* Adjust footer padding for bottom nav + miniplayer */
   /* IMPORTANT: We only add a small safe-area padding.
      The bottom nav FLOATS over content — no large gap reserve needed.
      This prevents the black void when the nav bar hides. */
   .site-footer {
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
   }

   /* Add dynamic padding only when miniplayer is active */
   body.has-miniplayer .site-footer {
      padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px) !important;
   }

   /* Modal padding should account for bottom nav */
   .modal-overlay {
      padding-bottom: calc(56px + 72px + 10px) !important;
   }

   /* Hide desktop modal on mobile when fullscreen player is active */
   .mobile-fs-player.is-open~#videoModal {
      display: none !important;
   }
}

/* =========================================
   FULLSCREEN PLAYER (YouTube Music Style)
   ========================================= */

.mobile-fs-player {
   display: flex;
   flex-direction: column;
   position: fixed;
   inset: 0;
   z-index: 9999999;
   /* Above everything */
   background: #000;
   color: #fff;
   overflow: hidden;
   transform: translateY(100%);
   transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.4s;
   padding: 16px 24px 16px;
   will-change: transform;
   pointer-events: none;
   visibility: hidden;
}

.mobile-fs-player.is-open {
   transform: translateY(0);
   pointer-events: auto;
   visibility: visible;
}

@media (max-width: 768px) {
   .mobile-fs-player {
      padding: env(safe-area-inset-top, 16px) 24px env(safe-area-inset-bottom, 16px);
   }
}

/* Animated Background Container */
.mfs-bg {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
   z-index: 0;
}

/* Ensure blobs are visible */
.mfs-bg .blob {
   opacity: 0.5;
}


/* --- Header --- */
.mfs-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 0 4px;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
}

.mfs-close-btn {
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
   padding: 4px;
}

.mfs-mode-toggle {
   display: flex;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   padding: 3px;
}

.mfs-mode-btn {
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.5);
   font-size: 12px;
   font-weight: 600;
   padding: 6px 16px;
   border-radius: 18px;
   cursor: pointer;
   transition: all 0.2s;
}

.mfs-mode-btn.active {
   background: rgba(255, 255, 255, 0.15);
   color: #fff;
}

/* --- Artwork --- */
.mfs-artwork-container {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px 0;
   min-height: 0;
   /* Allow flex shrink */
   position: relative;
   z-index: 2;
}

.mfs-artwork {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   border-radius: 12px;
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
   object-fit: contain;
}

.mfs-video-wrapper {
   width: 100%;
   height: 100%;
   border-radius: 12px;
   overflow: hidden;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: 16/9;
}

.mfs-video-wrapper video {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* --- Fullscreen Button --- */
.mfs-fullscreen-btn {
   position: absolute;
   bottom: 10px;
   right: 10px;
   background: rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10;
   backdrop-filter: blur(4px);
   transition: all 0.2s ease;
}

.mfs-fullscreen-btn:active {
   transform: scale(0.9);
   background: rgba(0, 0, 0, 0.8);
}

/* --- Track Info --- */
.mfs-track-info {
   padding: 8px 0 4px;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
}

.mfs-title {
   font-size: 1.3rem;
   font-weight: 700;
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.mfs-subtitle {
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.5);
   margin: 2px 0 0;
}

/* --- Seek Bar --- */
.mfs-seek-container {
   padding: 8px 0 0;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
   margin-right: -24px;
   padding-left: 24px;
   padding-right: 24px;
}

.mfs-seek-bar {
   -webkit-appearance: none;
   appearance: none;
   width: 100% !important;
   max-width: 100% !important;
   box-sizing: border-box;
   height: 4px;
   border-radius: 2px;
   background: rgba(255, 255, 255, 0.2);
   outline: none;
   cursor: pointer;
}

.mfs-seek-bar::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #fff;
   cursor: pointer;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.mfs-seek-bar::-moz-range-thumb {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #fff;
   cursor: pointer;
   border: none;
}

.mfs-time-row {
   display: flex;
   justify-content: space-between;
   font-size: 0.72rem;
   color: rgba(255, 255, 255, 0.45);
   padding-top: 4px;
}

/* --- Controls --- */
.mfs-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   padding: 12px 0;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
}

.mfs-ctrl-btn {
   background: none;
   border: none;
   color: #fff;
   cursor: pointer;
   padding: 8px;
   transition: transform 0.15s;
}

.mfs-ctrl-btn:active {
   transform: scale(0.88);
}

.mfs-secondary-btn {
   color: rgba(255, 255, 255, 0.5);
}

.mfs-secondary-btn.active {
   color: var(--accent-red, #e50914);
}

.mfs-play-btn {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: #fff;
   border: none;
   color: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   transition: transform 0.15s;
}

.mfs-play-btn:active {
   transform: scale(0.92);
}

/* --- Share --- */
.mfs-share-row {
   display: flex;
   justify-content: center;
   padding: 0 0 8px;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
}

.mfs-share-btn {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.7);
   border-radius: 20px;
   padding: 8px 20px;
   font-size: 0.8rem;
   font-weight: 500;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: background 0.2s;
   -webkit-tap-highlight-color: transparent;
}

.mfs-share-btn:active {
   background: rgba(255, 255, 255, 0.15);
}

/* --- Description & Journey Toggles --- */
.mfs-toggle-row {
   display: flex;
   justify-content: center;
   gap: 20px;
   padding: 10px 0 20px;
   z-index: 2;
   position: relative;
}

.mfs-bottom-toggle {
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.2s;
}

.mfs-bottom-toggle.active {
   opacity: 1;
}

.mfs-bottom-toggle span {
   font-size: 0.75rem;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
   position: relative;
}

.mfs-bottom-toggle span::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 100%;
   height: 2px;
   background: #fff;
   transform: scaleX(0);
   transition: transform 0.2s;
}

.mfs-bottom-toggle.active span::after {
   transform: scaleX(1);
}



/* --- Slide-up Panels (Shared) --- */
.mfs-slide-panel {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 70vh;
   background: linear-gradient(to top, #000 0%, #1a1a1a 100%);
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   transform: translateY(100%);
   transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
   z-index: 20;
   padding: 20px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
}

.mfs-slide-panel.is-open {
   transform: translateY(0);
}

.mfs-panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   flex-shrink: 0;
}

.mfs-panel-header span {
   font-size: 1.1rem;
   font-weight: 700;
   color: #fff;
}

.mfs-panel-close-btn {
   background: rgba(255, 255, 255, 0.1);
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   color: #fff;
   font-size: 1.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.mfs-desc-content {
   flex: 1;
   overflow-y: auto;
   padding-bottom: 40px;
   white-space: pre-line;
   /* Preserve line breaks and paragraphs */
   line-height: 1.6;
   color: #ddd;
}

/* --- Journey Scroll Wrapper --- */
.mfs-journey-scroll-wrapper {
   flex: 1;
   min-height: 0;
   /* Allow shrinking in flex context */
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   /* Firefox */
}

.mfs-journey-scroll-wrapper::-webkit-scrollbar {
   display: none;
   /* Chrome/Safari */
}

/* --- Journey Grid --- */
.mfs-journey-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 15px;
   padding-bottom: 40px;
}

.mfs-journey-item {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   aspect-ratio: 16/9;
   cursor: pointer;
   background: #222;
}

.mfs-journey-thumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.7;
   transition: opacity 0.2s;
}

.mfs-journey-item.active .mfs-journey-thumb {
   opacity: 1;
   border: 2px solid var(--primary-color, #e50914);
}

.mfs-journey-info {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 8px;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
   z-index: 2;
}

.mfs-journey-title {
   font-size: 0.8rem;
   font-weight: 600;
   color: #fff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.mfs-desc-content p {
   margin-bottom: 1em;
}

.mfs-links-container {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: background 0.2s;
   -webkit-tap-highlight-color: transparent;
}

.mfs-share-btn:active {
   background: rgba(255, 255, 255, 0.15);
}

/* --- Description & Journey Toggles --- */
.mfs-toggle-row {
   display: flex;
   justify-content: center;
   gap: 20px;
   padding: 10px 0 20px;
   z-index: 2;
   position: relative;
}

.mfs-bottom-toggle {
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.2s;
}

.mfs-bottom-toggle.active {
   opacity: 1;
}

.mfs-bottom-toggle span {
   font-size: 0.75rem;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
   position: relative;
}

.mfs-bottom-toggle span::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 100%;
   height: 2px;
   background: #fff;
   transform: scaleX(0);
   transition: transform 0.2s;
}

.mfs-bottom-toggle.active span::after {
   transform: scaleX(1);
}



/* --- Slide-up Panels (Shared) --- */
.mfs-slide-panel {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 70vh;
   background: linear-gradient(to top, #000 0%, #1a1a1a 100%);
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   transform: translateY(100%);
   transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
   z-index: 20;
   padding: 20px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
}

.mfs-slide-panel.is-open {
   transform: translateY(0);
}

.mfs-panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   flex-shrink: 0;
}

.mfs-panel-header span {
   font-size: 1.1rem;
   font-weight: 700;
   color: #fff;
}

.mfs-panel-close-btn {
   background: rgba(255, 255, 255, 0.1);
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   color: #fff;
   font-size: 1.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.mfs-desc-content {
   flex: 1;
   overflow-y: auto;
   padding-bottom: 40px;
   white-space: pre-line;
   /* Preserve line breaks and paragraphs */
   line-height: 1.6;
   color: #ddd;
}

/* --- Journey Scroll Wrapper --- */
.mfs-journey-scroll-wrapper {
   flex: 1;
   min-height: 0;
   /* Allow shrinking in flex context */
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   /* Firefox */
}

.mfs-journey-scroll-wrapper::-webkit-scrollbar {
   display: none;
   /* Chrome/Safari */
}

/* --- Journey Grid --- */
.mfs-journey-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 15px;
   padding-bottom: 40px;
}

/* Hero Item (Final Video) */
.mfs-journey-item.mfs-journey-hero {
   grid-column: 1 / -1;
   justify-self: center;
   width: 60%;
   aspect-ratio: 1 / 1 !important;
   /* Force square */
   margin-bottom: 10px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   border: 2px solid var(--accent-red);
   z-index: 5;
}

@media (max-width: 768px) {
   .mfs-journey-item.mfs-journey-hero {
      width: 60%;
   }
}

.mfs-journey-item {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   aspect-ratio: 16/9;
   cursor: pointer;
   background: #222;
}

.mfs-journey-thumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.7;
   transition: opacity 0.2s;
}

.mfs-journey-item.active .mfs-journey-thumb {
   opacity: 1;
   border: 2px solid var(--primary-color, #e50914);
}

.mfs-journey-info {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 8px;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
   z-index: 2;
}

.mfs-journey-title {
   font-size: 0.8rem;
   font-weight: 600;
   color: #fff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.mfs-desc-content p {
   margin-bottom: 1em;
}

.mfs-links-container {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 20px;
   padding-bottom: 20px;
}

.mfs-link-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 16px;
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
   border-radius: 20px;
   text-decoration: none;
   font-size: 0.85rem;
   font-weight: 500;
   transition: all 0.2s;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.mfs-link-pill:active {
   background: rgba(255, 255, 255, 0.2);
   transform: scale(0.98);
}

/* --- Blob Animation (FS Player only) --- */
.mfs-bg .blob {
   position: absolute;
   width: 800px;
   height: 800px;
   /* Default red, overridden by specific blobs */
   background: radial-gradient(circle, var(--accent-red) 0%, transparent 65%);
   filter: blur(100px);
   opacity: 0.6;
   border-radius: 50%;
   mix-blend-mode: screen;
}

.mfs-bg .blob-1 {
   top: -10%;
   left: -10%;
   background: radial-gradient(circle, #ff0000 0%, transparent 70%);
   animation: move-1 25s infinite alternate ease-in-out;
}

.mfs-bg .blob-2 {
   bottom: -10%;
   right: -10%;
   background: radial-gradient(circle, #800000 0%, transparent 70%);
   animation: move-2 30s infinite alternate ease-in-out;
}

.mfs-bg .blob-3 {
   top: 30%;
   left: 40%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, #ff3333 0%, transparent 70%);
   animation: move-3 20s infinite alternate ease-in-out;
}


/* Keyframes must be global or inside media query (global is safer for reuse) */
@keyframes move-1 {
   0% {
      transform: translate(0, 0) rotate(0deg) scale(1.1);
   }

   33% {
      transform: translate(50vw, 20vh) rotate(120deg) scale(1.3);
   }

   66% {
      transform: translate(20vw, 50vh) rotate(240deg) scale(0.9);
   }

   100% {
      transform: translate(0, 0) rotate(360deg) scale(1.1);
   }
}

@keyframes move-2 {
   0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
   }

   33% {
      transform: translate(-45vw, -35vh) rotate(-120deg) scale(1.4);
   }

   66% {
      transform: translate(-10vw, -50vh) rotate(-240deg) scale(1.1);
   }

   100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
   }
}

@keyframes move-3 {
   0% {
      transform: translate(0, 0) scale(1.2);
   }

   25% {
      transform: translate(-25vw, 15vh) scale(1.5);
   }

   50% {
      transform: translate(15vw, 35vh) scale(1);
   }

   75% {
      transform: translate(25vw, -15vh) scale(1.3);
   }

   100% {
      transform: translate(0, 0) scale(1.2);
   }
}

/* --- Mini Player Header (shown when panel is open) --- */
.mfs-mini-header {
   display: none;
   /* Hidden by default */
   align-items: center;
   gap: 12px;
   padding: 50px 16px 18px;
   /* top: status bar, bottom: progress line room */
   position: relative;
   z-index: 25;
   flex-shrink: 0;
}

.mfs-mini-close-btn {
   background: none;
   border: none;
   color: #fff;
   cursor: pointer;
   padding: 0;
   margin-right: 8px;
   /* space before thumb */
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0.8;
}

.mfs-mini-thumb {
   width: 48px;
   height: 48px;
   border-radius: 8px;
   object-fit: cover;
   flex-shrink: 0;
}

.mfs-mini-info {
   flex: 1;
   min-width: 0;
   /* Allow text truncation */
}

.mfs-mini-title {
   font-size: 0.95rem;
   font-weight: 600;
   color: #fff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
}

.mfs-mini-play-btn {
   background: none;
   border: none;
   color: #fff;
   cursor: pointer;
   padding: 6px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

.mfs-mini-progress {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: rgba(255, 255, 255, 0.15);
}

.mfs-mini-progress-fill {
   height: 100%;
   background: var(--accent, #e53935);
   width: 0%;
   transition: width 0.3s linear;
   border-radius: 0 2px 2px 0;
}

/* --- Panel Open Layout --- */
.mobile-fs-player.has-open-panel .mfs-mini-header {
   display: flex;
   /* Show mini bar */
}

.mobile-fs-player.has-open-panel .mfs-header,
.mobile-fs-player.has-open-panel .mfs-artwork-container,
.mobile-fs-player.has-open-panel .mfs-track-info,
.mobile-fs-player.has-open-panel .mfs-seek-container,
.mobile-fs-player.has-open-panel .mfs-controls,
.mobile-fs-player.has-open-panel .mfs-share-row {
   display: none !important;
   /* Hide full-player chrome */
}

/* Keep toggle row visible for switching tabs */
.mobile-fs-player.has-open-panel .mfs-toggle-row {
   padding: 10px 0 5px;
   z-index: 26;
   position: relative;
}

/* Hide ALL panels by default in panel mode */
.mobile-fs-player.has-open-panel .mfs-slide-panel {
   display: none;
}

/* Only show the active panel */
.mobile-fs-player.has-open-panel .mfs-slide-panel.is-open {
   display: flex;
   flex-direction: column;
   position: relative;
   flex: 1;
   min-height: 0;
   /* Allow children to scroll */
   overflow: hidden;
   /* Clip overflow, let scroll wrapper handle it */
   height: auto;
   transform: none;
   border-radius: 0;
   box-shadow: none;
   background: transparent;
}

/* =========================================
   UNIVERSAL PLAYER (Desktop Adaptation)
   ========================================= */
/* =========================================
   UNIVERSAL PLAYER (Desktop Adaptation)
   ========================================= */
@media (min-width: 769px) {

   /* Ensure Mobile Player is visible and styled for Desktop */
   .mobile-fs-player {
      display: grid !important;
      grid-template-columns: 1fr 400px;
      /* Left: Content, Right: Sidebar */
      grid-template-rows: auto 1fr auto auto auto auto;
      /* Header, Video, Info, Seek, Controls, Share */
      gap: 20px 40px;
      padding: 40px;
      align-content: center;

      transform: translateY(100%);
      opacity: 0;
      transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
      box-sizing: border-box;

      /* Disable the "open panel" padding shift from previous sidebar version */
      padding-right: 40px !important;
   }

   .mobile-fs-player.is-open {
      transform: translateY(0);
      opacity: 1;
   }

   /* --- LEFT COLUMN: Video & Controls --- */

   /* Grid Placement */
   .mfs-header {
      grid-column: 1;
      grid-row: 1;
   }

   .mfs-artwork-container {
      grid-column: 1;
      grid-row: 2;
      height: 100%;
      min-height: 0;
   }

   .mfs-track-info {
      grid-column: 1;
      grid-row: 3;
   }

   .mfs-seek-container {
      grid-column: 1;
      grid-row: 4;
   }

   .mfs-controls {
      grid-column: 1;
      grid-row: 5;
   }

   .mfs-share-row {
      grid-column: 1;
      grid-row: 6;
   }

   /* Force visibility even when panel is "open" (overriding mobile logic) */
   .mobile-fs-player.has-open-panel .mfs-header,
   .mobile-fs-player.has-open-panel .mfs-artwork-container,
   .mobile-fs-player.has-open-panel .mfs-seek-container,
   .mobile-fs-player.has-open-panel .mfs-controls,
   .mobile-fs-player.has-open-panel .mfs-share-row {
      display: flex !important;
   }

   /* Correction: Seek Container should be block to keep time below slider */
   .mobile-fs-player.has-open-panel .mfs-seek-container {
      display: block !important;
   }

   .mobile-fs-player.has-open-panel .mfs-track-info {
      display: block !important;
   }

   /* Hide Mini Header on Desktop */
   .mfs-mini-header {
      display: none !important;
   }

   .mobile-fs-player.has-open-panel .mfs-mini-header {
      display: none !important;
   }

   /* Styling Adjustments for Left Column */
   .mfs-header {
      width: 100%;
      padding: 0;
      margin-bottom: 0;
      display: flex !important;
      justify-content: center;
      /* Center the toggle */
      align-items: center;
      position: relative;
      /* Context for absolute close btn */
   }

   /* Close button placement - Absolute Left */
   .mfs-close-btn {
      position: absolute;
      left: 0;
      margin-right: 0;
   }

   /* Hide spacer on desktop as we use absolute positioning for centering */
   .mfs-header>div:last-child {
      display: none;
   }

   .mfs-artwork-container {
      width: 100%;
      max-height: 60vh;
      /* Limit video height */
      background: transparent;
      box-shadow: none;
      border-radius: 12px;
      overflow: hidden;
      align-self: center;
      position: relative;
   }

   .mfs-video-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: transparent;
   }

   .mfs-track-info,
   .mfs-seek-container,
   .mfs-controls,
   .mfs-share-row {
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
      text-align: center;
   }

   .mfs-title {
      font-size: 2rem;
      margin-bottom: 5px;
   }

   .mfs-subtitle {
      font-size: 1.1rem;
   }

   .mfs-play-btn {
      width: 70px;
      height: 70px;
   }

   .mfs-play-btn svg {
      width: 32px;
      height: 32px;
   }


   /* --- RIGHT COLUMN: Panels & Toggles --- */

   /* Toggle Row (Navigation) - Placed at Top of Right Col */
   .mfs-toggle-row {
      grid-column: 2;
      grid-row: 1;
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 0 0 20px 0;
      align-self: end;
      /* Align to bottom of header row */
   }

   /* Force Toggle Row visibility */
   .mobile-fs-player.has-open-panel .mfs-toggle-row {
      display: flex !important;
      padding: 0 0 20px 0;
   }

   /* Panels - Occupy rest of Right Col */
   .mfs-slide-panel {
      grid-column: 2;
      grid-row: 2 / -1;
      /* Span to bottom */

      position: relative !important;
      inset: auto !important;
      transform: none !important;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;

      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      box-shadow: none;
      display: none;
      /* Hidden by default */
      flex-direction: column;
      overflow: hidden;
   }

   /* Show only the active panel */
   .mfs-slide-panel.is-open {
      display: flex !important;
   }

   /* Panel styling updates */
   .mfs-panel-header {
      display: none;
      /* Hide internal panel header (redundant with toggle row) */
   }

   .mfs-desc-content,
   .mfs-journey-scroll-wrapper {
      padding: 20px;
   }

   /* Legacy Modal Hide */
   #videoModal {
      display: none !important;
   }
}