/* ============================================
   Cinematic Modules
   ============================================ */

/* ---------- Reveal Text ---------- */
.reveal-text {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
}

.reveal-text.is-revealed {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
}

.reveal-fade {
  opacity: 0;
  transform: translateY(30px);
}

.reveal-fade.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Parallax container ---------- */
.parallax-wrap {
  overflow: hidden;
}

.parallax-wrap img {
  will-change: transform;
}

/* ---------- Accordion Slider ---------- */
.accordion-slider {
  display: flex;
  height: clamp(400px, 60vh, 650px);
  gap: 6px;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.accordion-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  transition: flex 0.6s ease-out;
}

.accordion-panel:hover {
  flex: 3.5;
}

.accordion-panel-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease-out;
}

.accordion-panel:hover .accordion-panel-bg {
  transform: scale(1.05);
}

/* Destination gradients */
.accordion-panel[data-dest="mexico"] .accordion-panel-bg {
  background: linear-gradient(135deg, #1a6b4a 0%, #0d3326 40%, #3797a7 100%);
}

.accordion-panel[data-dest="hawaii"] .accordion-panel-bg {
  background: linear-gradient(135deg, #2980b9 0%, #1a3a5c 40%, #3797a7 100%);
}

.accordion-panel[data-dest="palm-springs"] .accordion-panel-bg {
  background: linear-gradient(135deg, #c0862b 0%, #5c3a0d 40%, #3797a7 100%);
}

.accordion-panel[data-dest="scottsdale"] .accordion-panel-bg {
  background: linear-gradient(135deg, #a75337 0%, #4a2215 40%, #3797a7 100%);
}

.accordion-panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.35);
  transition: background 0.6s ease-out;
}

.accordion-panel:hover .accordion-panel-overlay {
  background: rgba(10, 10, 10, 0.15);
}

.accordion-panel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 2;
}

.accordion-panel-number {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.accordion-panel-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 2rem);
  text-transform: uppercase;
  color: var(--color-heading);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.accordion-panel-tagline {
  font-size: 0.9rem;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out 0.15s, transform 0.4s ease-out 0.15s;
  max-width: 300px;
}

.accordion-panel:hover .accordion-panel-tagline {
  opacity: 1;
  transform: translateY(0);
}

/* Vertical label when collapsed */
.accordion-panel-title {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  position: absolute;
  bottom: 2rem;
  left: 50%;
  translate: -50% 0;
  transition: all 0.4s ease-out;
}

.accordion-panel:hover .accordion-panel-title {
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
  position: relative;
  bottom: auto;
  left: auto;
  translate: 0 0;
}

.accordion-panel-number,
.accordion-panel-content {
  pointer-events: none;
}

.accordion-panel .accordion-panel-number {
  opacity: 0;
  transition: opacity 0.3s ease-out 0.1s;
}

.accordion-panel:hover .accordion-panel-number {
  opacity: 1;
}

/* ---------- Counter ---------- */
.counter-value {
  font-variant-numeric: tabular-nums;
}

/* ---------- Scroll Progress Bar ---------- */
.scroll-progress {
  transition: none;
}

/* ---------- Magnetic Button ---------- */
.magnetic-btn {
  display: inline-block;
  transition: transform 0.3s ease-out;
}

/* ---------- Mobile: Accordion becomes stack ---------- */
@media (max-width: 900px) {
  .accordion-slider {
    flex-direction: column;
    height: auto;
    gap: 4px;
  }

  .accordion-panel {
    flex: none !important;
    height: 140px;
  }

  .accordion-panel:hover {
    flex: none !important;
  }

  .accordion-panel-title {
    writing-mode: horizontal-tb !important;
    transform: rotate(0deg) !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    translate: 0 0 !important;
  }

  .accordion-panel-tagline {
    opacity: 1;
    transform: translateY(0);
  }

  .accordion-panel .accordion-panel-number {
    opacity: 1;
  }

  .accordion-panel-bg {
    transform: none !important;
  }

  .accordion-panel-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
  }
}

/* ---------- Mobile: Disable complex effects ---------- */
@media (hover: none) {
  .accordion-panel:hover {
    flex: 1;
  }

  .accordion-panel:active {
    flex: 3;
  }
}