/* ============================================================
   ATTRACTIONS PAGE MODULE | CONSOLIDATED FINAL VERSION
   ============================================================ */

/* Z-INDEX LAYER MAP
----------------------------------------------
100000 Preloader
 12000 Header
  9001 Attraction content (text)
  9000 Scroll container
     4 Hero text / overlays
     3 Feather vignette
     3 Freeze frame layer (active)
     2 Freeze frame base (active)
     1 Video (while playing) / background
     0 Video (after fade-out)
---------------------------------------------- */

/* --- PRELOADER --- */
#attractions-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  opacity: 1;
  transition: opacity 0.6s ease-out;
  pointer-events: none;
}

#attractions-preloader.fade-out { opacity: 0; }

@keyframes preloader-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Root / Page-level setup --- */
body.attractions-lock {
  overflow: hidden;
  height: 100vh;
}

#attractions-main {
  margin-top: var(--header-height, 150px);
  overflow-x: hidden;
  color: #f2f2f2;
  font-family: 'Poppins', sans-serif;
  background: #0d0d0d;
}

/* --- HERO VIDEO SECTION (desktop default) --- */
.attractions-hero,
.video-container {
  position: fixed;
  top: var(--header-height, 0px);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height, 0px) - var(--footer-height, 0px));
  overflow: hidden;
  z-index: 0;
}

.video-container::before,
.video-container::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;
  z-index: 3;
}

.video-container::before {
  top: 0;
  background: linear-gradient(to bottom, #0d0d0d 0%, rgba(13,13,13,0) 100%);
}

.video-container::after {
  bottom: 0;
  background: linear-gradient(to top, #0d0d0d 0%, rgba(13,13,13,0) 100%);
}

/* --- VIDEO & FREEZE FRAME --- */
/* Base stacking: while the video is playing, it sits above freeze frames */
.video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  transition: opacity 0.6s ease;
  display: block;
  backface-visibility: hidden;
  will-change: transform, opacity;
  z-index: 1; /* video above by default */
}

/* Freeze frames start underneath the video until we promote them after fade-out */
.video-container .freeze-frame,
.video-container .freeze-frame.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  z-index: 1; /* under video while playing */
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
  display: block;
  backface-visibility: hidden;
  will-change: opacity;
}

/* Promote freeze frames when JS signals video handoff */
body.freeze-promote .video-container video {
  z-index: 0 !important;
}
body.freeze-promote .video-container .freeze-frame.freeze-in {
  z-index: 2 !important;
}
body.freeze-promote .video-container .freeze-frame.layer.freeze-in {
  z-index: 3 !important;
}
/* When the video fades out, it drops behind the stills */
.video-container video.fade-out {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0; /* below promoted stills */
}

/* We only promote freeze frames above the video after end, toggled by body class */
body.freeze-promote .video-container .freeze-frame.freeze-in {
  opacity: 1;
  z-index: 2; /* base still above faded video */
}

body.freeze-promote .video-container .freeze-frame.layer.freeze-in {
  opacity: 1;
  z-index: 3; /* crossfade layer on top during transitions */
}

/* --- HERO TEXT --- */
.hero-text {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  z-index: 4;
}
.hero-text h1 {
  font-family: 'Sigmar', cursive;
  font-size: 3rem;
  letter-spacing: 1px;
  color: var(--pink, #E899F2);
}
.hero-text p {
  font-size: 1.2rem;
  color: #9BE2F2;
  margin-top: 0.5em;
}

/* --- INTERNAL SCROLL ZONE --- */
.scroll-zone {
  position: fixed;
  top: var(--header-height, 0px);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height, 0px) - var(--footer-height, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  z-index: 9000;
  padding-top: 10vh;
  padding-bottom: 10vh;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.scroll-zone::before,
.scroll-zone::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  height: 10vh;
  pointer-events: none;
  z-index: 6;
}
.scroll-zone::before {
  top: var(--header-height, 0px);
  background: linear-gradient(to bottom, #0d0d0d 0%, rgba(13,13,13,0) 100%);
}
.scroll-zone::after {
  bottom: var(--footer-height, 0px);
  background: linear-gradient(to top, #0d0d0d 0%, rgba(13,13,13,0) 100%);
}

/* --- ATTRACTION CONTENT --- */
.attraction-info {
  position: relative;
  z-index: 9001; /* text above media */
  padding: 75vh 10% 35vh 10%;
  min-height: 160vh;
  background: transparent;
}

.attraction-item {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  margin: calc(50vh + 6rem) auto;
  max-width: 700px;
}
.attraction-item.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   MOBILE OVERRIDES (<=767px)
   ============================================================ */
@media (max-width: 767px) {

  .attraction-info {
    padding: 0 6% 36px 6%;
    margin-top: calc(100dvh - var(--footer-height, 10px));
    min-height: auto;
  }

  .attraction-item {
    margin: 3rem auto;
    max-width: 92%;
    transform: translateY(60px);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    opacity: 0.85;
  }
  .attraction-item.visible { transform: translateY(0) scale(0.98); opacity: 1; }

  .hero-text h1 { font-size: 2rem; }
  .hero-text p  { font-size: 1rem; }

  /* Hero/video as fixed background using dynamic viewport */
  .attractions-hero,
  .video-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Media alignment and centering */
  #hero-video,
  .video-container video,
  .freeze-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 0 !important; /* mobile keeps media behind content */
  }

  /* Remove feather gradients & forced heights */
  .video-container::before,
  .video-container::after,
  .scroll-zone::before,
  .scroll-zone::after {
    display: none !important;
    background: transparent !important;
    height: 0 !important;
    content: none !important;
  }

  /* Scroll behavior */
  .scroll-zone {
    position: relative !important;
    height: auto !important;
    overflow-y: auto !important;
    z-index: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 60px !important;
  }

  /* Safe-area respect */
  .scroll-zone,
  .attraction-info,
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
  }
}

/* ============================================================
   SAFE-AREA SUPPORT (Global)
   ============================================================ */
.video-container,
.attractions-hero {
  height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
}

/* ==========================================
   DESKTOP: Header reveal behavior
   ========================================== */
@media (min-width: 993px) {
  .site-header.attractions-header .header-icons{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .site-header.attractions-header .main-nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.05s ease;
  }
  .site-header.attractions-header:hover .header-icons,
  .site-header.attractions-header:hover .main-nav {
    opacity: 1;
    pointer-events: auto;
  }
  .site-header.attractions-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 12000;
    background: transparent;
  }
  .site-header.attractions-header .header-icons {
    position: absolute;
    top: 0; right: 0;
    display: flex;
    gap: 10px;
    align-items: center;
  }
}