/* =========================================================
   DAN TOURS — Animations & Keyframes (Luxury Cinematic)
   ========================================================= */

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes bounceArrow {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(10px); }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 0 0 20px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ---- Page load ---- */
main { animation: pageFadeIn 0.6s ease both; }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.visible           { opacity: 1; transform: none; }
.reveal.from-left         { transform: translateX(-48px); }
.reveal.from-right        { transform: translateX(48px); }
.reveal.scale-up          { transform: scale(0.94); }
.reveal.from-left.visible,
.reveal.from-right.visible,
.reveal.scale-up.visible  { transform: none; opacity: 1; }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ---- Hero words ---- */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px);
}
.hero-word.visible {
  animation: wordSlideUp 0.9s var(--ease-out) forwards;
}

/* ---- Editorial curtain reveal ---- */
.editorial-img-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.editorial-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.editorial-row.visible .editorial-img-wrap img {
  clip-path: inset(0 0% 0 0);
}

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 2000;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}

/* ---- Bounce arrow ---- */
.hero-scroll-arrow {
  animation: bounceArrow 2.2s ease-in-out infinite;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal                 { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-word              { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-scroll-arrow      { animation: none !important; }
  .floating-whatsapp      { animation: none !important; }
  main                    { animation: none !important; }
  .scroll-progress        { display: none !important; }
  .editorial-img-wrap img { clip-path: none !important; transition: none !important; }
  .detail-slider-track    { transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* =========================================================
   GRAFTON-STYLE ADDITIONS
   ========================================================= */

/* ---- AnimatedTitle: word mask reveals ---- */
[data-animate-title] .at-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
[data-animate-title] .at-word {
  display: inline-block;
  transform: translateY(115%);
  transition: transform var(--t-title);
}
[data-animate-title].at-in .at-word { transform: translateY(0); }

/* ---- Parallax / zoom media hosts ---- */
.media-clip {
  overflow: hidden;
  position: relative;
}
.media-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Photos are static site-wide — the scroll-driven zoom is disabled (JS no
   longer animates these), so keep them at natural scale. */
[data-zoom] {
  transform: none;
  transition: none;
}

/* ---- Parallax carousel ---- */
.pcarousel { position: relative; }
.pcarousel-track {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding-bottom: 8px;
}
.pcarousel-track::-webkit-scrollbar { display: none; }
.pcarousel-track.dragging { cursor: grabbing; user-select: none; }
.pcarousel-item {
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 460px);
  position: relative;
}
.pcarousel-item .media-clip {
  aspect-ratio: 3 / 4;
}
.pcarousel-item img {
  pointer-events: none;
  transform: none;   /* static — no parallax scale */
}
.pcarousel-count {
  font-family: var(--font-body);
  font-size: 0.91rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 20px;
}

/* ---- Accordion ---- */
.accordion { border-top: 1px solid rgba(29,29,29,0.12); }
.accordion-item { border-bottom: 1px solid rgba(29,29,29,0.12); }
.accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--charcoal);
}
.accordion-head::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--gold);
  transition: transform var(--t-base);
  flex: 0 0 auto;
}
.accordion-item.open .accordion-head::after { transform: rotate(45deg); }
/* grid-template-rows 0fr -> 1fr rather than an animated max-height, matching
   .itinerary-day-body in main.css. Animates to the content's true height and
   needs no JS measurement. (No page currently uses .accordion-*; kept correct
   in case the component is reinstated.) */
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.accordion-item.open .accordion-body { grid-template-rows: 1fr; }
.accordion-body-inner {
  min-height: 0;   /* lets the 0fr row actually collapse */
  overflow: hidden;
  /* Bottom spacing is the ::after spacer below, not padding: `min-height: 0`
     zeroes only the CONTENT contribution to a 0fr track, so bottom padding
     would leave a sliver of every closed item visible. */
  padding: 0 4px 0;
  color: var(--muted);
  line-height: 1.75;
}
.accordion-body-inner::after {
  content: "";
  display: block;
  height: 26px;
}

/* ---- Reduced motion for new pieces ---- */
@media (prefers-reduced-motion: reduce) {
  [data-animate-title] .at-word { transform: none !important; transition: none !important; }
  [data-zoom]                   { transform: none !important; }
  [data-parallax]               { transform: none !important; }
  .pcarousel-item img           { transform: none !important; }
  .accordion-body               { transition: none !important; }
}

/* parallax images must not fight hover-zoom transitions */
[data-parallax] { transition: none !important; }