@charset "utf-8";

/* ========================= BASE RESET ========================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

html {
    scroll-behavior: smooth !important; /* FORCES BOTH DESKTOP & PHONE TO SLIDE SMOOTHLY */
    -webkit-text-size-adjust: 100%;     /* Prevents iOS font inflation without locking zoom */
    text-size-adjust: 100%;
}

/* --- Fixes the Top Scrolling Defect for All Target Sections --- */
#home, #excerpt, #trailer, #movie, #merch-section { 
    scroll-margin-top: 70px !important; 
}

/* Ensure the main top wrapper container uses the #home identifier */
#home { 
    scroll-margin-top: 120px !important; 
}

body { 
    background: #050816; 
    color: white; 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
}

/* BACKGROUND VIDEO */
.bg-video { 
    position: fixed; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: -2; 
    pointer-events: none; 
}

/* DARK OVERLAY */
body::before { 
    content: ""; 
    position: fixed; 
    inset: 0; 
    background: radial-gradient( circle at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.88) ); 
    z-index: 0; 
    pointer-events: none; 
}


/* CONTENT ABOVE EVERYTHING */
header,
.hero,
section,
.navbar,
.content {
  position: relative;
  z-index: 1;
}

.bg-video {
  filter: contrast(1.25) brightness(1.05);
}

body::before {
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.82)
  );
}

.stars-static {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

/* Fades out text content smoothly when interacting with the trailer section */
.video-section-container:hover .coming-soon-text-box,
.video-section-container:active .coming-soon-text-box {
  opacity: 0 !important;
  transition: opacity 0.4s ease-in-out !important;
}


/* =========================
   EARTH (VISIBLE ROTATION)
========================= */

.earth-overlay {
  display: none !important;
}

/* =========================
   ROTATION (VISIBLE, CLEAN)
========================= */

@keyframes rotateEarth {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}


.navbar {
  position: sticky;
  top: 0;
  background: rgba(5, 8, 22, 0.40);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 70px;
  padding: 15px 40px;
  z-index: 1000;
}

.logo {
  font-size: 0.625rem;
  font-family: 'Oswald', sans-serif;
}

/* =========================
   HERO
========================= */

.hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 23px;
  padding: 100px 17% 10px;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

.tagline {
  text-align: center;
  margin-top: 30px;
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
}

/* =========================
   BOOK
========================= */

.book-container {
  position: relative;
  flex: 1.5;
  text-align: right;
  min-height: 800px;
  margin-top: -100px;
}

.book-image {
  width: 112%;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.8));
  margin-top: -50px;
  margin-left: -40px;
  pointer-events: none;
}

/* =========================
   PANELS
========================= */

.buy-panel,
.trailer-panel,
.email-panel,
.content-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 30px;
}

.buy-buttons {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.buy-buttons a,
.email-panel button,
.contact-form button,
#openTrailer {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border: none;
  color: white;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.buy-buttons a:hover,
button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* =========================
   SECTIONS
========================= */

.content-section,
.author-section {
  padding: 100px 8%;
}

.author-section {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
}

.author-image img {
  width: 100%;
  border-radius: 20px;
}

/* =========================
   MERCH
========================= */

.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.merch-item img {
  width: 100%;
  border-radius: 15px;
}

/* =========================
   CONTACT
========================= */

.contact-form {
  display: grid;
  gap: 15px;
  margin-top: 20px;
}

input,
textarea {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: white;
}

/* =========================
   FOOTER
========================= */

footer {
  padding: 40px;
  text-align: center;
  opacity: 0.7;
}

footer nav {
  margin-bottom: 15px;
}

footer a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
}

/* =========================
   MODAL
========================= */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  width: 90%;
  max-width: 900px;
  position: relative;
}

.modal iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

#closeTrailer {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 2rem;
  cursor: pointer;
}

/* ===================================================
   UNIFIED CODE: DRIFT REMOVAL & MANUAL SPACERS
=================================================== */
@media (max-width: 900px) {

  /* 4. MANUAL HEIGHT TRACKER PULLEY: PULL MAIN CONTENT UP HIGHER */
  section.hero {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 15px !important;     
    margin-top: -40px !important;    
    width: 100% !important;
    overflow: hidden !important;     
  }


  /* PRECISION BOOK PULLEY: Pulls ONLY the book cover graphic control up without shifting your titles */
  .hero-left .book-image {
    width: 100% !important;
    max-width: 320px !important; 
    margin-top: -45px !important;    /* Pulls only the book up closer to the blue graphic control line */
    padding-bottom: -85px !important;
  }

  /* Center the accent streak divider graphic control line */
  .hero-left div[style*="background: linear-gradient"] {
    margin: 10px auto 80px auto !important; 
    width: 230px !important; 
    height: 2.5px !important;
  }

  /* 6. Un-squish Lower Components Grid Lines */
  div[style*="display: flex; gap: 60px;"] {
    display: flex !important;
    flex-direction: column !important; 
    gap: 25px !important;
    padding: 20px 15px !important;    
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  div[style*="flex: 1.5;"],
  div[style*="flex: 1.1;"] {
    flex: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Format Author biography content cards vertically */
  div[style*="display: flex; gap: 20px; align-items: center;"] {
    display: flex !important;
    flex-direction: column !important; 
    text-align: center !important;
    padding: 25px 15px !important;
    gap: 15px !important;
    width: 100% !important;
  }

  div[style*="display: flex; gap: 20px; align-items: center;"] img {
    width: 100% !important;
    max-width: 220px !important; 
    height: auto !important;     
    margin: 0 auto !important;
  }

  div[style*="display: flex; gap: 20px; align-items: center;"] div {
    text-align: center !important;
  }

  .glass-panel,
  div[style*="padding: 80px 20px;"],
  div[style*="padding: 25px;"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* DESKTOP LOGO STYLES: Restores your original big monitor look */
.logo a, .logo a:link, .logo a:visited {
  font-family: 'Oswald', sans-serif !important; 
  font-weight: 400 !important; 
  text-transform: uppercase !important;
  color: #ffffff !important; 
  text-decoration: none !important; 
  font-size: 24px !important;      /* Restores your perfect 24px desktop size */
  letter-spacing: 1px !important;  /* Restores your wide desktop letter spacing */
}


 /* ===================================================
   MOBILE ONLY: ROWS FOR SMARTPHONES (DESKTOP STAYS SIDE-BY-SIDE)
=================================================== */
@media (max-width: 900px) {
  
  /* 1. Force the table grid to expand to 100% of the mobile screen panel width */
  .hero-right table {
    width: 100% !important;
    border-collapse: collapse !important; /* FIXED: Changes to collapse so border-spacing doesn't multiply your gaps */
    border-spacing: 0 !important; 
  }

  /* 2. Transform side-by-side cells into stacked rows ONLY on mobile screens */
  .hero-right tr {
    display: flex !important;
    flex-direction: column !important; 
    width: 100% !important;
    gap: 12px !important; /* FIXED: Universal visual distance tracker between stacked button rows */
    margin-bottom: 12px !important; /* Balanced tracking rhythm down the container */
  }

  /* 3. Center-align the phone columns */
  .hero-right td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important; /* FIXED: Set to zero so the button element inside dictates all spacing */
  }

  /* 4. Format the mobile touch links buttons wide */
  .hero-right td a {
    display: block !important;
    width: 100% !important;
    padding: 14px 15px !important; /* IDEAL: 14px vertical breathing room, 15px horizontal protection padding */      
    text-align: center !important;    
    font-size: 15px !important;       
    font-weight: bold !important;
    letter-spacing: 1.5px !important;
    box-sizing: border-box !important;
  }
}


/* --- Desktop Scroll Offsets (Screens 769px and wider) --- */
@media (min-width: 769px) {
  #home, #excerpt, #trailer, #movie, #merch-section {
    scroll-margin-top: 90px !important;
  }
  #home {
    scroll-margin-top: 120px !important;
  }
}

/* --- Mobile Phone Scroll Offsets (Screens 768px and narrower) --- */
@media (max-width: 768px) {
  #home, #excerpt, #trailer, #movie, #merch-section {
    scroll-margin-top: 60px !important; /* Smaller gap matches thin mobile navigation bars */
  }
  #home {
    scroll-margin-top: 80px !important;  /* Keeps the top header tagline perfectly framed */
  }
}


/* FORCES FOOTER LINKS TO BE CLICKABLE ON TOP OF VIDEO LAYERS */
footer {
  position: relative !important;
  z-index: 9999 !important;
}

/* --- Professional Auto-Adjusting Dotted Leaders --- */
.chapter-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 16px;
}
.chapter-row .title-text {
  order: 1;
  background: #0d1226; /* Matches your glass panel background color to mask behind text */
  padding-right: 8px;
  color: #fff;
  font-weight: 500;
}
.chapter-row .page-num {
  order: 3;
  background: #0d1226; /* Matches your glass panel background color */
  padding-left: 8px;
  color: #4facfe;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
}
.chapter-row::after {
  content: "";
  order: 2;
  flex-grow: 1;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.25); /* Beautiful responsive dots */
  margin-bottom: 4px;
}
.chapter-subtitle {
  color: #a0aec0;
  font-size: 14px;
  font-style: italic;
  margin-top: -14px;
  margin-bottom: 20px;
  padding-left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
}

/* --- COMPUTER MONITORS ONLY (Restores your perfect desktop sizing) --- */
@media (min-width: 901px) {
    .book-image {
        width: 100% !important;
        max-width: 480px !important;    
        margin-top: 120px !important;   
        margin-left: 190px !important;  
    }
}

/* --- MOBILE PHONES ONLY (Your custom mobile pulley sliders) --- */
@media (max-width: 900px) {
    /* NEW: Flattens the top padding wall of the main section container */
    section.hero {
        padding-top: 5px !important;
    }

    /* Flattens the invisible barrier below the headline text on phones */
    #home {
        margin-bottom: 5px !important;
    }

    /* 1. Neutralize the parent column grid lock */
    .hero-left {
        min-width: 0px !important;
        flex: none !important;
        width: 100% !important;
    }

    /* 2. Release the container ceiling box restrictions */
    .hero-left .book-container {
        display: block !important;
        min-height: auto !important;
        margin-top: 0 !important;
    }

    /* 3. Slide the book image up cleanly */
    .book-image {
        width: 75% !important;         
        max-width: 280px !important;
        margin-top: -180px !important; 
        margin-left: auto !important;   
        margin-right: auto !important;
    }
}



/* --- MOBILE PHONES ONLY (Your custom mobile pulley sliders) --- */
@media (max-width: 900px) {
    /* 1. Neutralize the parent column grid lock */
    .hero-left {
        min-width: 0px !important;
        flex: none !important;
        width: 100% !important;
    }

    /* 2. Release the container ceiling box restrictions */
    .hero-left .book-container {
        display: block !important;
        min-height: auto !important;
        margin-top: 0 !important;
    }

    /* 3. Slide the book image up cleanly */
    .book-image {
        width: 75% !important;         
        max-width: 280px !important;
        margin-top: -180px !important; 
        margin-left: auto !important;   
        margin-right: auto !important;
    }
}

  /* --- MANUAL MOBILE PHONE NAVIGATION OVERRIDES --- */


/* 2. Scale down the sub-page text links so they stay on a single line */
header nav a {
    font-size: 12px !important;    /* Down from 16px to save screen space */
    letter-spacing: 0.5px !important;
}

/* 3. Tighten the layout container gaps between your menu tracking options */
header nav {
    gap: 12px !important;          /* Shrinks desktop padding width blocks */
}



/* --- MANUAL MOBILE ALIGNMENT OVERRIDES --- */
@media (max-width: 900px) {

    /* 1. Force the inner container to expand full-width from edge to edge */
    .book-container {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important; /* Forces internal graphics to sit perfectly dead-center */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Balance out the book cover spacing track symmetrically */
    .book-image {
        width: 70% !important;
        max-width: 260px !important;
        /* Setting horizontal margins to 'auto' automatically deletes the empty space on the left! */
        margin: 10px auto 10px auto !important; 
    }
}




/* MASTER ALIGNMENT OVERRIDE: SECURE CENTRAL LAYOUT ON DESKTOP monitors */
@media (min-width: 901px) {
    .hero-left .book-image {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: -35px !important;  /* Controls book elevation height */
    }
}


/* MASTER ALIGNMENT MATRIX: DESKTOP ONLY BOUNDARY FIX */
@media (min-width: 901px) {
    /* 1. Expand the master content wrapper to its wide cinematic scale */
    section.hero {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        max-width: 1600px !important;
        margin: 0 auto !important;
        justify-content: space-between !important;
        gap: 50px !important;
    }

    /* 2. Lock the left book column from sliding or expanding out of its area */
    .hero-left {
        flex: 1.5 !important;
        min-width: 400px !important;
        text-align: center !important;
    }

    /* 3. Give your right column video and buttons their wide breathing room back */
    .hero-right {
        flex: 1 !important;
        min-width: 350px !important;
        margin-top: 140px !important; /* Adjust this value to line the cards up with the book */
    }
}

/* ========================================================
   MASTER ALIGNMENT MATRIX: MOBILE PORTRAIT & LANDSCAPE LOCK
   ======================================================== */
@media (max-width: 932px) { 

    /* RE-REVEAL HAMBURGER ONLY ON MOBILE AND LANDSCAPE */
    .navbar-toggle, 
    .hamburger-icon, 
    [onclick="toggleMobileMenu()"] {
        display: block !important;
    }

    /* 1. Force tight layout alignment grid */ 
    section.hero { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: center !important; 
        padding: 90px 20px 10px 20px !important; /* Slightly optimized for landscape height */
        width: 100% !important; 
    } 

    /* 2. Anchor layout elements firmly in the center lane */ 
    .hero-left, .book-container { 
        width: 100% !important; 
        max-width: 100% !important; 
        text-align: center !important; 
        margin: 0 auto !important; 
        padding: 0 !important; 
    } 

    /* 3. Keep the book scaled, centered, and balanced */ 
    .hero-left .book-image { 
        display: block !important; 
        width: 75% !important; 
        max-width: 220px !important; /* Adjusted slightly to preserve viewport space when horizontal */
        margin: 15px auto !important; 
        margin-top: 15px !important; 
        margin-left: auto !important; 
        margin-right: auto !important; /* Forces physical centering block matrix symmetry */
    } 

    /* 4. Center your buying panels and trailer box right beneath the book */ 
    .hero-right { 
        width: 100% !important; 
        margin-top: 20px !important; 
        padding: 0 !important; 
    } 

        
/* ========================================================
   MASTER NAVIGATION CONTROL MODULE
   ======================================================== */

/* 1. HIDE the hamburger button when viewing on desktop monitors */
.navbar-toggle {
    display: none !important;
}

/* ========================================================
   MOBILE PHONE NAVIGATION OVERRIDES (BELOW 932PX)
   ======================================================== */
@media (max-width: 932px) {

    /* 2. RE-REVEAL the hamburger icon neatly on the right side of mobile screens */
    .navbar-toggle {
        display: block !important;
        position: relative;
        z-index: 1001;
    }

    /* 3. Transform the horizontal link bar into a hidden vertical glass menu tray */
    .navbar {
        display: none !important; /* Kept completely hidden until clicked */
        flex-direction: column !important;
        gap: 15px !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(5, 8, 22, 0.95) !important; /* Deep dark space overlay color */
        backdrop-filter: blur(15px) !important; /* Beautiful glass blur */
        padding: 20px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        z-index: 1000 !important;
    }

    /* 4. THE ACTION TRIGGER: This opens the menu instantly when JavaScript applies the 'mobile-open' tag */
    .navbar.mobile-open {
        display: flex !important;
    }

    /* 5. Clean up individual mobile link styling targets */
    .navbar a {
        width: 100% !important;
        padding: 10px 0 !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    }
}
	

/* ========================= MOBILE PHONE FIXES ========================= */ 
@media screen and (max-width: 480px) { 
  /* 1. This pulls the text and book UP, ONLY on the phone */ 
  #home { 
    margin-top: -50px !important; 
  } 
  
  /* --- REDUCE OR ENLARGE MOBILE HEADLINE TYPOGRAPHY CONTROLS --- */ 
  h1, .hero h1 { 
    font-size: 21px !important; 
  } 
}
	
/* ========================= MOBILE PHONE FIXES ========================= */
@media screen and (max-width: 480px) {
    
    /* 1. This pulls the text and book UP, ONLY on the phone */
    #home {
        margin-top: -50px !important; 
    }

    /* --- REDUCE OR ENLARGE MOBILE HEADLINE TYPOGRAPHY CONTROLS --- */
    h1, .hero h1 { font-size: 21px !important; }
}


/* SMARTPHONE-ONLY: SQUEEZES LETTERS TOGETHER FOR A COMPACT LOOK */
@media screen and (max-width: 480px) {
    .logo a, 
    .logo {
        font-family: 'Inter', sans-serif !important; 
        font-weight: 300 !important;                  
        font-size: 10px !important;                  
        letter-spacing: -0.5px !important;  /* FIXED: Negative spacing squeezes the letters tightly together */
        white-space: nowrap !important;               
    }
}

/* ==========================================================================
   FINAL MOBILE HEADER CONTROL DIRECTIVE
   ========================================================================== */
@media (max-width: 900px) {

    /* 1. Hides the wide horizontal desktop text links so they stop breaking your container margins */
    .navbar-header-engine nav,
    .navbar-inline nav,
    header nav {
        display: none !important;
    }

    /* 2. Forces the master header bar to remain inline and level from edge-to-edge */
    header, .navbar-header-engine {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; /* Locks brand on left, button on right */
        align-items: center !important;
        padding: 12px 15px !important; /* Compact header depth on touch screens */
        width: 100% !important;
        box-sizing: border-box !important;
    }

/* 3. Scale down and flatten the giant brand logo text home buttons on phones */ 
.logo { 
  /* REMOVED REDUNDANT SIZE: Handed complete font size control over to the link element below */ 
  max-width: 80% !important; 
  white-space: nowrap !important; /* Prevents text breaking into 3 stacked rows */ 
  overflow: hidden !important; 
} 
.logo a, .logo a:link, .logo a:visited { 
  font-size: 20px !important; /* KEEP THIS ONE: Your single, master mobile size controller */ 
  font-weight: 300 !important; 
  color: #ffffff !important; 
  text-decoration: none !important; 
  letter-spacing: -1px !important; /* ADDED HERE: Brings the letters closer together on the phone */ 
}

    /* 4. Forces your mobile hamburger toggle icon button to appear on the far right side */
    .mobile-toggle,
    .menu-toggle,
    header button,
    header .burger-box {
        display: block !important;
        background: none !important;
        border: none !important;
        color: white !important;
        font-size: 40px !important; /* Perfect touch-target size */
        cursor: pointer !important;
        margin: 0 !important;
        padding: .5px !important;
    }
}
  }

   /* --- REDUCE OR ENLARGE DESKTOP HEADLINE TYPOGRAPHY CONTROLS --- */ 
@media (min-width: 901px) {
  #home h1 { 
    font-size: 30px !important; /* TWEAK THIS NUMBER: Make it larger (24px) or smaller (18px) to find your perfect fit! */ 
    line-height: 1.4 !important; 
    letter-spacing: 0.5px !important; 
    margin: 10px 0 !important; 
    text-align: center !important; /* Keeps the text centered over the book graphic on phones */ 
	  
	    }
  }

/* ==========================================================================
   GLOBAL GLOW RESTORATION (EXPLICIT OUTSIDE MEDIA QUERIES)
   ========================================================================== */
.glowing-streak {an
  animation: masterStreakGlow 12s linear infinite !important;
  width: 500px !important;
}

@keyframes masterStreakGlow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (min-width: 901px) {
  .glowing-streak {
    background-size: 400% 100% !important; /* Extends runway strictly for desktop screens */
  }
}

/* Enlarges the book image slightly on phones without moving any other layout boxes */
@media screen and (max-width: 901px) {
    .book-image {
        transform: scale(1.35) !important; /* Increases the image size by 8% */
    }
}