/* ============================================
   Travelers Inn — Rustic Lodge Warmth
   Scroll & Interaction Animations
   GPU-optimized: opacity + transform only (no blur)
   Triggered by IntersectionObserver (.tib-visible)
   ============================================ */

/* ============================================
   Base: Hidden state for animated blocks
   will-change hints GPU to prepare composite layer
   ============================================ */
[data-animation]:not([data-animation=""]):not([data-animation="none"]) {
  opacity: 0;
  will-change: opacity, transform;
}

/* Visible state — triggered by JS adding .tib-visible */
[data-animation].tib-visible {
  opacity: 1;
  transform: none !important;
  will-change: auto;
}


/* ============================================
   Scroll-Triggered Entrance Animations
   ============================================ */

/* ---- Fade Up ---- */
[data-animation="fade-up"] {
  transform: translateY(32px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Fade Down ---- */
[data-animation="fade-down"] {
  transform: translateY(-32px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Fade In (no movement, just materializes) ---- */
[data-animation="fade-in"] {
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Slide Left (enters from right) ---- */
[data-animation="slide-left"] {
  transform: translateX(48px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Slide Right (enters from left) ---- */
[data-animation="slide-right"] {
  transform: translateX(-48px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Zoom In — scale from slightly smaller ---- */
[data-animation="zoom-in"] {
  transform: scale(0.92);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Flip Up — perspective tilt with rise ---- */
[data-animation="flip-up"] {
  transform: perspective(1000px) rotateX(8deg) translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================
   Gentle Loading Animations — Smooth Easy Ease
   Softer, slower, elegant page-load feel
   ============================================ */

/* ---- Easy Fade Up — gentle rise with smooth ease ---- */
[data-animation="easy-fade-up"] {
  transform: translateY(24px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

/* ---- Easy Fade Down — soft descend ---- */
[data-animation="easy-fade-down"] {
  transform: translateY(-24px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

/* ---- Easy Fade In — pure dissolve, no movement ---- */
[data-animation="easy-fade-in"] {
  transition: opacity 1.2s ease-in-out;
}

/* ---- Easy Slide Left — gentle drift from right ---- */
[data-animation="easy-slide-left"] {
  transform: translateX(36px);
  transition:
    opacity 1s ease-in-out,
    transform 1s ease-in-out;
}

/* ---- Easy Slide Right — gentle drift from left ---- */
[data-animation="easy-slide-right"] {
  transform: translateX(-36px);
  transition:
    opacity 1s ease-in-out,
    transform 1s ease-in-out;
}

/* ---- Soft Scale — breathes into view ---- */
[data-animation="soft-scale"] {
  transform: scale(0.94);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

/* ---- Soft Rise — minimal distance, very smooth ---- */
[data-animation="soft-rise"] {
  transform: translateY(14px);
  transition:
    opacity 0.9s ease-in-out,
    transform 0.9s ease-in-out;
}


/* ---- Text Reveal — JS staggers child text elements ---- */
/* Parent becomes visible immediately; JS handles child stagger */
[data-animation="text-reveal"] {
  opacity: 1 !important;
  transform: none !important;
}


/* ============================================
   Stagger Children — Orchestrated Grid Reveal
   Use on parent containers (grids, card groups)
   ============================================ */

/* Parent stays visible; children animate individually */
[data-animation="stagger-up"] {
  opacity: 1 !important;
  transform: none !important;
}

[data-animation="stagger-up"] > * {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animation="stagger-up"].tib-visible > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stagger delays — each child enters slightly after the previous */
[data-animation="stagger-up"].tib-visible > *:nth-child(1) { transition-delay: 0s; }
[data-animation="stagger-up"].tib-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-animation="stagger-up"].tib-visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-animation="stagger-up"].tib-visible > *:nth-child(4) { transition-delay: 0.3s; }
[data-animation="stagger-up"].tib-visible > *:nth-child(5) { transition-delay: 0.4s; }
[data-animation="stagger-up"].tib-visible > *:nth-child(6) { transition-delay: 0.5s; }
[data-animation="stagger-up"].tib-visible > *:nth-child(7) { transition-delay: 0.6s; }
[data-animation="stagger-up"].tib-visible > *:nth-child(8) { transition-delay: 0.7s; }


/* ============================================
   Button Styles — Tactile, Warm, Responsive
   ============================================ */

/* Shared CTA base — all interactive buttons */
/* hero-cta removed — now styled by .ti-btn in button.css */
.room-cta,
.booking-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  position: relative;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease !important;
}

.room-cta:hover,
.booking-cta:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 28px rgba(181, 71, 59, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

.room-cta:active,
.booking-cta:active {
  transform: translateY(-1px);
  transition-duration: 0.1s;
}

/* Button icon sizing */
.btn-icon {
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hero-cta .btn-icon removed — now uses ::after pseudo-element */

.btn-icon--right {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Arrow icon — slides forward on hover */
.btn-icon--arrow {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover .btn-icon--arrow,
button:hover .btn-icon--arrow {
  transform: translateX(5px);
}

/* Phone icon — ring wiggle on hover */
@keyframes phone-ring {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  22% { transform: rotate(-12deg); }
  34% { transform: rotate(10deg); }
  46% { transform: rotate(-8deg); }
  58% { transform: rotate(5deg); }
  70% { transform: rotate(-3deg); }
  82% { transform: rotate(1deg); }
}

a:hover .btn-icon--phone {
  animation: phone-ring 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}


/* ============================================
   Booking CTA — Warm Glow Pulse
   ============================================ */

@keyframes bookingGlow {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(181, 71, 59, 0.2),
      0 0 0 0 rgba(181, 71, 59, 0.15);
  }
  50% {
    box-shadow:
      0 4px 16px rgba(181, 71, 59, 0.25),
      0 0 0 8px rgba(181, 71, 59, 0);
  }
}

.booking-cta {
  animation: bookingGlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.booking-cta:hover {
  animation: none;
  box-shadow:
    0 10px 36px rgba(181, 71, 59, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 0 transparent !important;
}


/* ============================================
   Card & Section Interaction — Visual Depth
   ============================================ */

/* Cards: lift with layered shadow on hover */
.fact-item,
.location-item {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fact-item:hover,
.location-item:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(212, 165, 116, 0.08);
}

/* Amenity items — icon + text hover only */
.amenity-item .amenity-icon,
.amenity-item .amenity-label {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}

.amenity-item:hover .amenity-icon {
  transform: translateY(-4px);
}

.amenity-item:hover .amenity-label {
  color: #3C2415;
}

/* Room card image — parallax-style zoom with slow ease */
.wp-block-travelers-inn-blocks-room-block .room-image img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-block-travelers-inn-blocks-room-block:hover .room-image img {
  transform: scale(1.07);
}

/* About block image — gentle drift zoom */
.wp-block-travelers-inn-blocks-about-block .about-image img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-block-travelers-inn-blocks-about-block:hover .about-image img {
  transform: scale(1.04);
}

/* Contact card — warm terracotta glow on hover */
.contact-card {
  transition:
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 36px rgba(181, 71, 59, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.06);
}


/* ============================================
   Room CTA — Warm hover treatment
   ============================================ */
.room-cta {
  position: relative;
  overflow: hidden;
}

.room-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.room-cta:hover::before {
  left: 100%;
}


/* ============================================
   Reduced Motion — Respect user preference
   Strip all animation, keep layout intact
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  /* Disable scroll-triggered animations */
  [data-animation]:not([data-animation=""]):not([data-animation="none"]) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-animation="stagger-up"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Disable hover transforms */
  .room-cta:hover,
  .booking-cta:hover,
  .fact-item:hover,
  .location-item:hover,
  .contact-card:hover {
    transform: none !important;
  }

  .amenity-item:hover .amenity-icon {
    transform: none !important;
  }

  /* Disable icon animations */
  a:hover .btn-icon--phone {
    animation: none !important;
  }

  a:hover .btn-icon--arrow {
    transform: none !important;
  }

  /* Disable booking glow pulse */
  .booking-cta {
    animation: none !important;
  }

  /* Disable shimmer effects */
  .room-cta::before {
    display: none !important;
  }

  /* Disable image zooms */
  .wp-block-travelers-inn-blocks-room-block:hover .room-image img,
  .wp-block-travelers-inn-blocks-about-block:hover .about-image img {
    transform: none !important;
  }
}