/* Scroll reveal: fade-up on enter viewport (scroll-reveal.js) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.8, 0.22, 1),
    transform 0.7s cubic-bezier(0.22, 0.8, 0.22, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.reveal-img {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.22, 0.8, 0.22, 1);
  transition-delay: var(--d, 0ms);
  will-change: clip-path;
}

.reveal-img.in {
  clip-path: inset(0 0 0 0);
}

/* Cover stays layout-visible for scroll detection, hidden until wipe starts */
.post-detail-cover[data-reveal-cover]:not(.reveal-img) {
  opacity: 0;
}

/*
 * Story cards (insights grid + archive .blog-post-wrapper).
 * Must beat .story-card { transition: ... } from home.css so stagger works.
 */
a.story-card.reveal,
.story-card.reveal,
.latest-news .stories-grid .story-card.reveal,
.blog-post-wrapper .story-card.reveal {
  --card-reveal-duration: 0.9s;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--card-reveal-duration) cubic-bezier(0.22, 0.8, 0.22, 1),
    transform var(--card-reveal-duration) cubic-bezier(0.22, 0.8, 0.22, 1) !important;
  transition-delay: var(--d, 0ms) !important;
  will-change: opacity, transform;
}

a.story-card.reveal.in,
.story-card.reveal.in,
.latest-news .stories-grid .story-card.reveal.in,
.blog-post-wrapper .story-card.reveal.in {
  opacity: 1;
  transform: none;
}

/* Post article: headings & paragraphs fade-up on scroll */
.post-detail-content .reveal {
  transform: translateY(18px);
}

.post-detail-content .reveal.in {
  transform: none;
}

/* Single post hero: staggered fade-up for all blocks */
.post-detail-hero .reveal {
  transform: translateY(20px);
}

.post-detail-hero .reveal.in {
  transform: none;
}

/* Pre-footer CTA */
.travelai-cta .reveal {
  transform: translateY(22px);
}

.travelai-cta .reveal.in {
  transform: none;
}

/*
 * Elementor editor / preview canvas:
 * .reveal hides content until .in — keep everything visible while editing.
 */
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal,
body.travelai-no-reveal .reveal,
body.elementor-editor-active a.story-card.reveal,
body.elementor-editor-preview a.story-card.reveal,
body.travelai-no-reveal a.story-card.reveal,
body.elementor-editor-active .story-card.reveal,
body.elementor-editor-preview .story-card.reveal,
body.travelai-no-reveal .story-card.reveal,
html.elementor-html .reveal,
html.elementor-html a.story-card.reveal,
html.elementor-html .story-card.reveal,
body.elementor-editor-active .reveal-img,
body.elementor-editor-preview .reveal-img,
body.travelai-no-reveal .reveal-img,
html.elementor-html .reveal-img,
body.elementor-editor-active .post-detail-cover[data-reveal-cover],
body.elementor-editor-preview .post-detail-cover[data-reveal-cover],
body.travelai-no-reveal .post-detail-cover[data-reveal-cover],
html.elementor-html .post-detail-cover[data-reveal-cover] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in,
  a.story-card.reveal,
  .story-card.reveal,
  a.story-card.reveal.in,
  .story-card.reveal.in {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .reveal-img,
  .reveal-img.in {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}