/* MOVIEWARD_CINEMATIC_V2 */
:root {
  --pf-glow: #3aafa9;
  --pf-glow-soft: rgba(58,175,169,.25);
}

/* Ambient background */
body {
  position: relative;
}

.pf-v2-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .42;
}

.pf-v2-aurora::before,
.pf-v2-aurora::after {
  content: "";
  position: absolute;
  width: 65vw;
  height: 65vw;
  min-width: 450px;
  min-height: 450px;
  border-radius: 50%;
  filter: blur(95px);
  animation: pfAurora 24s ease-in-out infinite alternate;
}

.pf-v2-aurora::before {
  left: -30%;
  top: 5%;
  background: radial-gradient(circle,rgba(58,175,169,.25),transparent 70%);
}

.pf-v2-aurora::after {
  right: -30%;
  bottom: 5%;
  background: radial-gradient(circle,rgba(22,110,132,.22),transparent 70%);
  animation-delay: -12s;
}

@keyframes pfAurora {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(15%,10%,0) scale(1.15); }
  100% { transform: translate3d(-8%,-10%,0) scale(.9); }
}

/* Keep website content above ambient effects */
body > main,
body > header,
body > footer,
body > nav,
body > .pf-patreon-section {
  position: relative;
  z-index: 1;
}

/* Cursor glow */
.pf-v2-cursor {
  position: fixed;
  width: 360px;
  height: 360px;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(58,175,169,.13),transparent 68%);
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transform: translate3d(-50%,-50%,0);
  transition: opacity .3s ease;
}

/* Navigation glow */
header a,
nav a,
header button,
nav button {
  transition: color .25s,filter .25s,transform .25s;
}

header a:hover,
nav a:hover,
header button:hover,
nav button:hover {
  filter: drop-shadow(0 0 10px rgba(58,175,169,.55));
}

/* Poster effects */
.movie-card,
.poster-card,
.pf-movie-card,
.pf-premium-card,
.card:has(.poster) {
  transform-style: preserve-3d;
  will-change: auto;
  transition: transform .25s ease,box-shadow .3s ease;
}

.movie-card:hover,
.poster-card:hover,
.pf-movie-card:hover,
.pf-premium-card:hover,
.card:has(.poster):hover {
  box-shadow: 0 20px 45px rgba(0,0,0,.45),
              0 0 24px rgba(58,175,169,.2);
}

/* Button glow */
button,
.primary,
.pf-patreon-nav,
.pf-patreon-join,
.actions a {
  transition: transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

button:hover,
.primary:hover,
.pf-patreon-nav:hover,
.pf-patreon-join:hover,
.actions a:hover {
  filter: brightness(1.08);
}

/* Cinematic section headings */
main h2 {
  text-shadow: 0 0 25px rgba(58,175,169,.13);
}

/* Entrance animations */
.pf-v2-enter {
  animation: pfEnter .7s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes pfEnter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Decorative cinema orbs */
.pf-v2-orb {
  position: absolute;
  border: 1px solid rgba(113,240,229,.28);
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(58,175,169,.07),
              0 0 35px rgba(58,175,169,.1);
  pointer-events: none;
  animation: pfOrbFloat 10s ease-in-out infinite alternate;
}

@keyframes pfOrbFloat {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-25px) rotate(12deg); }
}

/* Navigation loading indicator */
.pf-v2-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 99999;
  background: linear-gradient(90deg,#3aafa9,#a0fff4);
  box-shadow: 0 0 12px #3aafa9;
  pointer-events: none;
  transition: width .3s ease,opacity .3s ease;
}

/* Keep effects lightweight on mobile */
@media (max-width: 800px) {
  .pf-v2-aurora { opacity: .2; }
  .pf-v2-cursor,
  .pf-v2-orb { display: none; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .pf-v2-aurora *,
  .pf-v2-orb,
  .pf-v2-enter {
    animation: none !important;
  }
  .pf-v2-enter {
    opacity: 1 !important;
    transform: none !important;
  }
  .movie-card,
  .poster-card,
  .pf-movie-card,
  .pf-premium-card {
    transition: none !important;
  }
}


/* MOVIEWARD RESPONSIVE HEADER — ZOOM AND MOBILE FIX */
@media (max-width: 1600px) {
  header,
  .site-header,
  .main-header,
  .navbar,
  .nav-container {
    max-width: 100%;
    box-sizing: border-box;
  }

  header nav,
  .site-header nav,
  .main-header nav,
  .navbar {
    min-width: 0;
  }
}

@media (max-width: 1250px) {
  body > header,
  .site-header,
  .main-header {
    height: auto !important;
    min-height: 70px;
  }

  body > header > *,
  .site-header > *,
  .main-header > * {
    min-width: 0;
  }

  header nav,
  .site-header nav,
  .main-header nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
}

@media (max-width: 850px) {
  header nav,
  .site-header nav,
  .main-header nav {
    gap: 8px;
  }

  header a,
  header button {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* MOVIEWARD_ZOOM_HEADER_WRAP_V2 */
@media (max-width: 1450px) {
  #app > header.nav {
    display:flex !important;
    flex-flow:row wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px 18px !important;
    width:100% !important;
    height:auto !important;
    min-height:76px !important;
    padding:12px clamp(14px, 3vw, 40px) !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  #app > header.nav > .brand {
    position:static !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    transform:none !important;
  }
  #app > header.nav > .navlinks {
    position:static !important;
    flex:1 1 400px !important;
    width:auto !important;
    min-width:250px !important;
    max-width:100% !important;
    height:auto !important;
    display:flex !important;
    flex-flow:row wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px 12px !important;
    margin:0 !important;
    transform:none !important;
  }
  #app > header.nav > .nav-right {
    position:static !important;
    inset:auto !important;
    transform:none !important;
    flex:1 1 100% !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    display:flex !important;
    flex-flow:row wrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
  }
  #app > header.nav .pf-header-cta {
    position:static !important;
    inset:auto !important;
    float:none !important;
    transform:none !important;
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
    white-space:normal !important;
  }
}
@media (max-width:650px) {
  #app > header.nav { justify-content:center !important; }
  #app > header.nav > .brand { margin-inline:auto !important; }
  #app > header.nav > .navlinks {
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  #app > header.nav > .nav-right { justify-content:center !important; }
  #app > header.nav .pf-header-cta {
    font-size:14px !important;
    padding:10px 12px !important;
  }
}

/* MOVIEWARD_FINAL_ZOOM_LAYOUT_V3 */
#app > header.nav {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr) !important;
  grid-template-areas:
    "brand links"
    "actions actions" !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 12px 24px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 16px clamp(14px, 3vw, 44px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  isolation: isolate !important;
}

#app > header.nav > .brand {
  grid-area: brand !important;
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
}

#app > header.nav > .navlinks {
  grid-area: links !important;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#app > header.nav > .navlinks > a {
  position: relative !important;
  inset: auto !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
}

#app > header.nav > .nav-right {
  grid-area: actions !important;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#app > header.nav > .nav-right > * {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

#app > header.nav .pf-header-cta {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

#app > header.nav button,
#app > header.nav a {
  max-width: 100% !important;
}

@media (max-width: 760px) {
  #app > header.nav {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "brand" "links" "actions" !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }

  #app > header.nav > .brand {
    justify-self: center !important;
  }

  #app > header.nav > .navlinks,
  #app > header.nav > .nav-right {
    justify-content: center !important;
  }

  #app > header.nav > .nav-right > * {
    flex-shrink: 1 !important;
  }
}

@media (max-width: 420px) {
  #app > header.nav > .navlinks {
    gap: 4px 6px !important;
  }

  #app > header.nav > .navlinks > a,
  #app > header.nav > .nav-right > * {
    font-size: 12px !important;
  }
}

/* MOVIEWARD_ADAPTIVE_ONE_TO_THREE_ROWS_V4 */

/* Default: original compact, single-row desktop header */
#app > header.nav {
  display: grid !important;
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  grid-template-areas: "brand links actions" !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: clamp(10px, 1.3vw, 26px) !important;
  row-gap: 0 !important;
  padding: 12px clamp(16px, 2.5vw, 42px) !important;
}

#app > header.nav > .brand {
  grid-area: brand !important;
  justify-self: start !important;
  white-space: nowrap !important;
}

#app > header.nav > .navlinks {
  grid-area: links !important;
  flex-flow: row nowrap !important;
  justify-content: center !important;
  gap: clamp(5px, .8vw, 14px) !important;
}

#app > header.nav > .navlinks > a {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  padding-inline: clamp(5px, .7vw, 13px) !important;
}

#app > header.nav > .nav-right {
  grid-area: actions !important;
  flex-flow: row nowrap !important;
  justify-content: flex-end !important;
  gap: clamp(5px, .6vw, 12px) !important;
}

#app > header.nav > .nav-right > * {
  flex: 0 1 auto !important;
  white-space: nowrap !important;
}

/* When zoom reduces available width, use three deliberate rows */
@media (max-width: 1500px) {
  #app > header.nav {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "brand" "links" "actions" !important;
    row-gap: 12px !important;
    padding: 14px clamp(16px, 3vw, 40px) !important;
  }

  #app > header.nav > .brand {
    justify-self: center !important;
  }

  #app > header.nav > .navlinks {
    flex-flow: row wrap !important;
    justify-content: center !important;
    gap: 6px 12px !important;
  }

  #app > header.nav > .navlinks > a {
    white-space: nowrap !important;
  }

  #app > header.nav > .nav-right {
    flex-flow: row wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #app > header.nav > .nav-right > * {
    white-space: normal !important;
    max-width: 100% !important;
  }
}

/* Small screens: retain the same order and prevent horizontal overflow */
@media (max-width: 600px) {
  #app > header.nav {
    row-gap: 10px !important;
    padding: 12px !important;
  }

  #app > header.nav > .navlinks,
  #app > header.nav > .nav-right {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #app > header.nav > .nav-right > * {
    font-size: clamp(11px, 3vw, 14px) !important;
  }
}

/* MOVIEWARD_REMOVE_STATUS_BADGES_V1 */
#app > header.nav .nav-live,
#app > header.nav .nav-showing,
#app > header.nav .now-showing {
  display: none !important;
}

/* MOVIEWARD MOBILE HEADER GAP FIX */
@media (max-width: 760px) {
  #app > header.nav {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    margin: 0 !important;
  }

  #app > header.nav > .brand {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 auto !important;
  }

  #app > header.nav > .navlinks {
    display: none !important;
  }

  #app > header.nav > .nav-right {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* MOVIEWARD MOBILE HEADER GAP FIX */
@media (max-width: 760px) {
  #app > header.nav {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    margin: 0 !important;
  }

  #app > header.nav > .brand {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 auto !important;
  }

  #app > header.nav > .navlinks {
    display: none !important;
  }

  #app > header.nav > .nav-right {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}