/* FUNCTIONS */
html, body {
  /* Horizontal scroll kill switch */
  overflow-x: hidden;
}

/* FONTS */
@font-face {
  font-family: 'BootlegTimBurton';
  src: url('../fonts/BootlegTimBurton.woff2') format('woff2'),
       url('../fonts/BootlegTimBurton.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'DrawFont';
  src: url('../fonts/DrawFont.woff2') format('woff2'),
       url('../fonts/DrawFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* BACKGROUND */
body {
  margin: 0;
  background-color: #080808;  
}

/* REF. IMAGE */
.reference-img {

  /* https://southpark.cc.com/ */
  /* https://www.adultswim.com/rick-and-morty */
  /* https://www.adultswim.com/videos/rick-and-morty */
  
  width: 100%;    /* Width full length of the screen */
  height: auto;   /* Retains aspect ratio */
  display: block; /* Removes any inline spacing issues */
  z-index: -1;    /* send it behind everything */
}

/* 404 LINKED */
.title-error{
  position: absolute;
  top: 40%;
  left: 50%;                 /* move to horizontal center */
  transform: translateX(-50%); /* center the element */
  font-size: 6rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -1.2px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 10;
  opacity: 1;
}
.text-error{
  position: absolute;
  top: 60%;
  left: 50%;                 /* move to horizontal center */
  transform: translateX(-50%); /* center the element */
  font-size: 6rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -1.2px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 11;
  opacity: 1;
}
.dsc-error{
  position: absolute;
  top: 70%;
  left: 50%;                 /* move to horizontal center */
  transform: translateX(-50%); /* center the element */
  font-size: 6rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -1.2px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 11;
  opacity: 1;
}


/* NAVIGATION BAR */
.rectangle-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 60px;
  background: #000;

  z-index: 1000;

  display: flex;
  align-items: center;   /* vertically center logo + links */
  gap: 24px;             /* space between logo and links */
  padding: 0 16px;       /* inner horizontal padding */
}
.HeaderLogo {
  display: block;
  width: 100px;
  height: auto;

  /* kill prior absolute/transform/z-index so it can't hide behind the bar */
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
}
.brand {
  display: flex;
  align-items: center; /* ensures the image aligns nicely in the bar */
}
/* LINKS INLINE AFTER THE LOGO */
.nav-bar {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;       /* wrap on small screens instead of overlapping */
  font: 0.95rem/1 'Helvetica', sans-serif;
}
.nav-bar a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.nav-bar a:hover {
  opacity: 0.7;
}




/* LANDER VIDEO */
#landerVideo {
    position: absolute;
    top: 700px;
    left: 150px;
    width: 700px;
    height: auto;
    object-fit: contain;  
    z-index: 10;
    }


/* LANDER THMB IMAGE */
.lander-thmb {    /* Thumbnail Image */
  position: absolute;
  top: 54%;       /* Center Y position from Photoshop */
  transform: translateY(-50%); 
  left: 5%;       /* Starts at the 150px mark in Photoshop */
  width: 45%;     /* Stretches across 1350px in Photoshop */
  height: auto;   /* Maintain aspect ratio */
  z-index: 2;
}
.lander-thmb-glow {  /* Background Glow */
  will-change: filter, transform, opacity;
  image-rendering: auto;
  position: absolute;
  top: 54%;          /* Inherits parent values */
  transform: translateY(-50%); 
  left: 5%;       
  width: 45%;     
  height: auto;
  z-index: 0;
  
  filter: blur(25px) saturate(1.4);
  transform: translateY(-50%);
  opacity: 0.9999;
  pointer-events: none;

  transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
}
.lander-thmb:hover + .lander-thmb-glow { /* Increases background glow on hover */
  filter: blur(25px) saturate(1.4);
  transform: translateY(-50%) scale(1.009);
  opacity: 1;
  z-index: 1;
}
.spotlight-overlay { /* Thumbnail Mouse Spotlight */
  position: fixed;           /* position relative to viewport */
  pointer-events: none;      /* ignore mouse */
  z-index: 2;                /* above .lander-thmb (z:1) and .lander-thmb-glow (z:0) */
  opacity: 0;                /* hidden by default */
  transition: opacity .2s ease;
  /* Linked to JS */
  background: radial-gradient(
    circle at var(--sx,50%) var(--sy,50%),
    rgba(255,255,255,0.08) 20%,   /*  Center Glow*/
    rgba(255,255,255,0.08) 20%,  /* Edge Glow */
    transparent 45%                /* Radius Size */
  );
  filter: blur(40px);
  mix-blend-mode: screen;    /* gives a light/shine feel */
  border-radius: 8px;               
  clip-path: inset(0 round 8px);
}
/* LANDER TEXT */
.episode-title {
  position: absolute;
  top: 35.5855%; 
  left: 54%; 
  transform: translateX(0);  /* Use -50% if you want the *center* to be aligned */
  font-size: 2.09rem;
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  letter-spacing: -1.2px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 10;
  opacity: 1;
}
.episode-dsc {
  position: absolute;
  top: 43.3%;
  left: 54%; 
  transform: translateX(0); 
  font-size: 1.485rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -1.2px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 10;
  opacity: 1;
}
.episode-info {
  position: absolute;
  top: 49.69%;
  left: 54%; 
  transform: translateX(0); 
  font-size: 1.027rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -0.5px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 10;
  opacity: 1;
}
.episode-sub {
  position: absolute;
  top: 69.5%;
  left: 54.15%; 
  transform: translateX(0); 
  font-size: 0.66rem;
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  letter-spacing: -0.26px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 10;
  opacity: 1;
}
.episode-sub a {
  /* Extension for linked hyper text */
  color: #ffffff;               /* Forces link color to match */
  text-decoration: underline;
}
.highlight-txt-1 {
  position: absolute;
  top: 17%;
  left: 64.5%; 
  transform: translateX(0); 
  font-size: 4.2rem;
  font-family: 'BootlegTimBurton', sans-serif;
  letter-spacing: -1.2px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 11;
  opacity: 1;

  /* floating animation */
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.highlight-txt-2 {
  position: absolute;
  top: 17%;
  left: 75%; 
  transform: translateX(0); 
  font-size: 4.2rem;
  font-family: 'DrawFont', sans-serif;
  letter-spacing: -1.2px;
  color: rgb(255, 255, 255);
  user-select: text;
  pointer-events: auto;
  z-index: 11;
  opacity: 1;

  /* floating animation */
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}


/* NEWSLETTER STYLING */
.newsletter-dis1-card {
  position: relative;      /* controls the whole card */
  width: 80%;
  max-width: 1200px;
  margin: 150px auto;      /* 🔹 controls vertical placement on page */
  font-family: 'Helvetica', sans-serif;
}

/* Image */
.newsletter-dis1-image {
  width: 100%;
}
.newsletter-dis1-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
/* Footer rectangle */
.newsletter-dis1-inner-rectangle {
  width: 100%;
  background: #000;
  padding: 20px;
  box-sizing: border-box;
}
/* Text wrapper */
.newsletter-dis1-text {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  z-index: 2;
}
/* Left column */
.newsletter-dis1-left {
  flex: 1;
}
.newsletter-dis1-tag {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 6px;
}
.newsletter-dis1-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
/* Right column */
.newsletter-dis1-right {
  flex: 2;
}

/* Description text */
.newsletter-dis1-dsc {
  font-size: 1.485rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -1.2px;
  color: #fff;
  user-select: text;
  pointer-events: auto;
  line-height: 1.4;
}




/* BUTTON */
.button-watchnow {
  -webkit-font-smoothing: antialiased;   
  -moz-osx-font-smoothing: grayscale;    
  text-rendering: optimizeLegibility;
  
  /* Position */
  position: absolute;
  top: 55.7%;
  left: 54.2%;
  transform: translate(0); /* use translate(-50%,-50%) if you want to center on that point */
  z-index: 10;

  /* Size */
  width: 153px;        
  height: 42.5px;     

  /* Layout: center the text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 16px;  

  /* Style */
  background: #ffffff;
  color: #000000;
  border-radius:4px;
  text-decoration: none;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;

  transition: box-shadow 540ms ease;
  will-change: box-shadow;

}
a.button-watchnow:hover {
  /* soft outer glow only (no crisp inner ring) */
  box-shadow:
    0 0 22px 4px rgb(255, 246, 246),  /**/
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.button-clips {
  -webkit-font-smoothing: antialiased;   
  -moz-osx-font-smoothing: grayscale;    
  text-rendering: optimizeLegibility;
  
  /* Position */
  position: absolute;
  top: 55.7%;
  left: 65.23%;
  transform: translate(0); /* use translate(-50%,-50%) if you want to center on that point */
  z-index: 10;

  /* Size */
  width: 97.4px;        
  height: 42.5px;     

  /* Layout: center the text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 16px;  

  /* Style */
  background: #0a0b0b;
  border: 1.5px solid #ffffff;     
  color: #ffffff;
  border-radius:4px;
  text-decoration: none;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;

  transition: transform 0.05s ease, background 0.2s ease, border-color 0.2s ease;
}

/* FOOTER */

.rectangle {
  width: 100%;            /* Full width of screen */
  top: 300vh;           /* Screen height placement WILL BE: 336.17vh*/
  height: 1.8px;       /* Height of rec. should be 1px */      
  background-color: #ececec; 
  position: absolute;      /* Positioning context */
  left: 0px;              
  z-index: 0;
}
.footer-title {
  position: absolute;
  top: 2600%;              /* Linked screen placement % to rec. ratio */
  left: 3.04%; 
  transform: translateX(0);  /* Use -50% if you want the *center* to be aligned */
  font-size: 2.03rem;
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  letter-spacing: -1.2px;
  color: #ffffff;
  user-select: text;
  pointer-events: auto;
  z-index: 10;
  opacity: 1;
  z-index: 0;
}
.rectangle-bottom {
  width: 100%;            /* Use 100% NOT 100vw */
  top: 13500%;           /* Screen hieght placement SHOULD BE */
  height: 152px;          
  background-color: #000000; 
  position: absolute;      /* Positioning context */
  left: 0px;              
  z-index: 0;
}
.footer-privacy {
  -webkit-font-smoothing: antialiased;   /* Chrome / Safari */
  -moz-osx-font-smoothing: grayscale;    /* Firefox on macOS */
  text-rendering: optimizeLegibility;    /* better kerning/ligatures */

  position: absolute;
  top: 26.7%;
  /* left: 379.2px; */
  width: 100%;            /* span the entire screen width */
  text-align: center;    
  font-size: 0.739rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -0.3px;
  color: #ffffff;
  user-select: text;
  pointer-events: auto;
  opacity: 1;
  z-index: 10;            /* keep this one */
}
.footer-copyright {
  -webkit-font-smoothing: antialiased;   /* Chrome / Safari */
  -moz-osx-font-smoothing: grayscale;    /* Firefox on macOS */
  text-rendering: optimizeLegibility;    /* better kerning/ligatures */

  position: absolute;
  top: 48.2%;
  /* left: 379.2px; */
  width: 100%;            /* span the entire screen width */
  text-align: center;    
  font-size: 0.739rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -0.3px;
  color: #ffffff;
  user-select: text;
  pointer-events: auto;
  opacity: 1;
  z-index: 10;            /* keep this one */
}
.footer-credit {
  -webkit-font-smoothing: antialiased;   /* Chrome / Safari */
  -moz-osx-font-smoothing: grayscale;    /* Firefox on macOS */
  text-rendering: optimizeLegibility;    /* better kerning/ligatures */

  position: absolute;
  top: 63%;
  /* left: 379.2px; */
  width: 100%;            /* span the entire screen width */
  text-align: center;    
  font-size: 0.739rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: -0.3px;
  color: #ffffff;
  user-select: text;
  pointer-events: auto;
  opacity: 1;
  z-index: 10;            /* keep this one */
}