/* REFERENCE IMAGE */
.reference-ep{
  position: absolute;
  /* CHANGED: avoid bottom:0 to prevent layout forcing */
  top: 0; left: 0; right: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 30;            /* as you had it */
  opacity: 1;
  pointer-events: none;
}


/* GHOST LOADER */
.ep-card.skel { pointer-events: none; }
.ep-card.skel .ep-media { background:#000; } /* black image area */
.ep-card.skel .skel-media { width:100%; height:100%; background:#000; }

.ep-card.skel .ep-text { /* keeps your existing spacing (padding-top / row-gap) */ }
.ep-card.skel .skel-title,
.ep-card.skel .skel-meta{
  background:#2a2a2a; border-radius:4px;
  animation: epPulse 1.4s ease-in-out infinite;
}
.ep-card.skel .skel-title{ height:27px; width:90%; }
.ep-card.skel .skel-meta { height:16px; width:55%; }

@keyframes epPulse{
  0%{opacity:.6} 50%{opacity:.9} 100%{opacity:.6}
}

/* LOAD MORE BUTTON */
.load-more{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  position: relative;         
  left: 50%;
  transform: translateX(-50%); /* Center Align */
  top: auto;
  z-index: 31;            

  /* Gallery Spacing */
  margin-top: 50px;

  /* 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: 0;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;

  cursor: pointer;
  transition: box-shadow 540ms ease;
  will-change: box-shadow;
  transition: box-shadow 540ms ease, text-shadow 360ms ease, color 360ms ease;

  margin-bottom: 100px;

}
.load-more:hover,
.load-more:focus-visible{
  /* keep your outer glow */
  box-shadow:
    0 0 22px 4px rgb(255, 246, 246),
    0 0 48px 18px rgba(255, 0, 0, 0);
  outline: none;

  /* soft inner/text glow (multiple subtle layers) */
  text-shadow:
    0 0 0.4px rgba(0,0,0,.45),
    0 0 0.8px rgba(0,0,0,.35),
    0 0 1.6px rgba(0,0,0,.25);
}
/* EPISODES/SHORTS BUTTON */
.shorts-btn{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  position: relative;         
  left: 7%;
  transform: translateX(-50%); /* Center Align */
  top: auto;
  z-index: 31;            

  /* Gallery Spacing */
  margin-top: 50px;

  /* 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: 0;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;

  cursor: pointer;
  transition: box-shadow 540ms ease;
  will-change: box-shadow;
  transition: box-shadow 540ms ease, text-shadow 360ms ease, color 360ms ease;

  margin-bottom: 100px;

}
.shorts-btn:hover,
.shorts-btn:focus-visible{
  /* keep your outer glow */
  box-shadow:
    0 0 22px 4px rgb(255, 246, 246),
    0 0 48px 18px rgba(255, 0, 0, 0);
  outline: none;

  /* soft inner/text glow (multiple subtle layers) */
  text-shadow:
    0 0 0.4px rgba(0,0,0,.45),
    0 0 0.8px rgba(0,0,0,.35),
    0 0 1.6px rgba(0,0,0,.25);
}
.ep-btn{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  position: relative;         
  left: 6%;
  transform: translateX(-50%); /* Center Align */
  top: auto;
  z-index: 31;            

  /* Gallery Spacing */
  margin-top: 50px;

  /* 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: 0;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;

  cursor: pointer;
  transition: box-shadow 540ms ease;
  will-change: box-shadow;
  transition: box-shadow 540ms ease, text-shadow 360ms ease, color 360ms ease;

  margin-bottom: 100px;

}
.ep-btn:hover,
.ep-btn:focus-visible{
  /* keep your outer glow */
  box-shadow:
    0 0 22px 4px rgb(255, 246, 246),
    0 0 48px 18px rgba(255, 0, 0, 0);
  outline: none;

  /* soft inner/text glow (multiple subtle layers) */
  text-shadow:
    0 0 0.4px rgba(0,0,0,.45),
    0 0 0.8px rgba(0,0,0,.35),
    0 0 1.6px rgba(0,0,0,.25);
}




/* FOOTER THAT MOVES */
.rectangle1 {
  width: 100%;            /* Full width of screen */
  
  height: 1.8px;       /* Height of rec. should be 1px */      
  background-color: #ececec; 

  left: 0px;              
  z-index: 0;
}
.footer-title1 {
  position: absolute;
  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-bottom1 {
  width: 100%;            
  top: 315vh;           /* NEEDS TO BE CHANGED FOR RELATIONAL PLACEMENT */
  height: 152px;          
  background-color: #000000; 
  position: absolute;      /* Positioning context */
  left: 0px;              
  z-index: 0;
}
.footer-privacy1 {
  -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-copyright1 {
  -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-credit1 {
  -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 */
}





/* VIDEO GALLERY CSS */

body{margin:0;background:#0a0a0a;color:#fff;font-family:Helvetica,Arial,sans-serif;z-index: 30;}
.ep-section{
  /* 150px side margins on wide screens, shrink responsibly on small screens */
  padding-inline: clamp(16px, 5vw, 150px);
  padding-block: 2rem;
  margin-inline:auto;
  max-width: 2560px; /* optional ultrawide cap */
  box-sizing:border-box;
  /* NEW: guard against 1px horizontal overflow inside section */
  overflow-x: clip;
}
/* NEW: hard-stop any stray horizontal scroll on the page */
html, body{ overflow-x: hidden; }

/* VERTICAL POSITIONING */
.ep-inner{
  position: relative;
  padding-top: 330px;
}

/* ROW SPACING */
.ep-row{
  /* CHANGED: use pixel gaps to avoid % rounding overflow */
  --gap-x: 25px;   /* HORIZONTAL */
  --gap-y: 25px;   /* VERTICAL */
  display:grid;
  /* CHANGED: minmax(0, …) guards against subpixel overflow */
  grid-template-columns: repeat(4, minmax(0, calc((100% - (3 * var(--gap-x))) / 4)));
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  justify-content:start;
}

/* CARD keeps the overall 643×(362+188) proportion */
.ep-card{
  aspect-ratio: 643 / 550;              /* total card proportion */
  display:grid;
  grid-template-rows: 362fr 188fr;       /* keep 362:188 split */
  /* background:#ff0000; */
  overflow:hidden;
  cursor:pointer;
}

/* IMAGE (top row) */
.ep-media{overflow:hidden;background:#111;}
.ep-media > img,
.ep-thumb{ /* support if you're still using <img class="ep-thumb"> */
  width:100%; height:100%; object-fit:cover; display:block;
}

/* TEXT BOX (bottom row) */
.ep-text{
  display:flex; flex-direction:column;
  padding-top: 4.7%;   /* TITLE VERTICAL SPACING */
  row-gap: 5.9098%;      /* 38 / 643 => title→meta spacing */
  /* padding-inline: 0; background:#ff0000; */
}
/* TITLE */
.ep-title{
  margin: 0;
  font-family:
    "HelveticaNeue LT 55 Roman",
    "Helvetica Neue LT",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-style: normal;
  font-weight: 400;      /* 55 Roman = normal */
  font-size: 19px;
  line-height: 27px;
  letter-spacing: -0.5px;
  color: #ffffff;

  /* keep truncation */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  /* optional polish */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  user-select: text;
  pointer-events: auto;
}
/* DESCRIPTION */
.ep-meta, .ep-dsc{
  margin: 0;
  color: rgb(255, 255, 255);
  font-size: clamp(12px, 0.798rem + 0.149vw, 15.9px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Responsive fallbacks: collapse columns when space is truly tight */
@media (max-width: 1200px){
  .ep-row{
    grid-template-columns: repeat(3, minmax(0, calc((100% - (2 * var(--gap-x))) / 3)));
  }
}
@media (max-width: 900px) {
  .ep-row{
    grid-template-columns: repeat(2, minmax(0, calc((100% - (1 * var(--gap-x))) / 2)));
  }
}
@media (max-width: 560px) {
  .ep-row{
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}


/* ------ CARD ANIMATION -------*/

.ep-card{
  position: relative;
  isolation: isolate;
  overflow: visible !important; /* let glow spill */
  transition: box-shadow 140ms ease;
}

/* Only the image moves. Text stays still. */
.ep-media{
  position: relative;
  overflow: visible !important;  /* prevent clipping of glow/shine */
  transform-origin: center;
  transition: transform 160ms ease;
  will-change: transform;
}
.ep-card:hover .ep-media{
  transform: translateY(-6px) scale(1.02);
}

/* Make sure the poster sits above the glow */
.ep-media img.ep-thumb{
  position: relative;
  z-index: 2;
  display: block;
}

/* DROP SHADOW */
.ep-media{
  box-shadow:
    0 6px 15px 0px rgba(0, 0, 0, 0.37), /* x-offset   y-offset   blur   spread */
    0 8px 22px  rgba(0, 0, 0, 0.084) !important;
  transition: transform 160ms ease, box-shadow 140ms ease;
}
.ep-card:hover .ep-media{
  box-shadow: none !important;
}

/* ADAPTIVE BLUR GLOW  */
.ep-media::before{
  content:"";
  position:absolute;
  inset: 0px;                    /* generous spill outside */
  z-index: 1;                     /* behind the image */
  background-image: var(--thumb, none);
  background-size: cover;
  background-position: center;
  filter: blur(30px) saturate(170%) brightness(1.20);
  opacity: 0;
  transition: opacity 120ms ease, filter 120ms ease;
  pointer-events:none;
}
.ep-card:hover .ep-media::before{
  opacity: 1;
  filter: blur(25px) saturate(185%) brightness(1);
}


/* HOVER SHINE */

/* poster shine sweep (confined) */
.ep-media{
  position: relative;
  overflow: hidden; /* ensures no bleed outside the media box */
}

/* sheen layer */
.ep-media::after{
  content:"";
  position:absolute; inset:0;
  z-index: 4;
  pointer-events:none;
  opacity: 0;
  mix-blend-mode: screen;

  /* slim bright streak with soft edges */
  background-image: linear-gradient(
    120deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.28) 49%,
    rgba(255,255,255,.28) 51%,
    rgba(255,255,255,0)   100%
  );
  background-repeat: no-repeat;

  /* give it extra canvas so it never “hard-cuts” at edges */
  background-size: 600% 240%;
  /* start inside the right edge a bit; avoids immediate clipping */
  background-position: 190% -40%;
  

  /* light softening */
  filter: blur(1px);

  will-change: background-position, opacity;
  transition: opacity 120ms ease;
  transition: opacity 0ms linear;
}

/* feather BOTH left and right edges so the streak fades out smoothly */
@supports (-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000)) {
  .ep-media::after{
    /* solid in the middle, feather last ~10% on each side */
    -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      #000 10%,
      #000 90%,
      rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      #000 10%,
      #000 90%,
      rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
}

/* fallback if masks aren't supported: keep it slightly off both edges */
@supports not ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))) {
  .ep-media::after{
    left: 4px; right: 4px; /* tiny insets avoid visible clipping on both sides */
  }
}

.ep-card:hover .ep-media::after{
  opacity: 1;
  animation: epSheenContained 2000ms ease-out 0ms forwards;
}

/* stop just BEFORE the left edge to avoid the end-of-run clip */
@keyframes epSheenContained{
  to {
    background-position: 1% 60%; /* was -40%; stopping at ~2% prevents left clip */
  }
}