/* Dream Villa Connect host - progressive-enhancement visuals for ~/js/site.js.
   Every selector is gated on a class that ONLY site.js adds at runtime: with JS off
   (or site.js deleted) nothing here matches and the server-rendered page is untouched.
   Values consume the RCL's --dvc-* tokens; raw literals live only in the --dvc-enh-*
   definitions below (this block is the tokenization point). */
:root {
  --dvc-enh-toast-center: -50%;
  --dvc-enh-toast-drop: 12px;
  --dvc-enh-toast-exit: 0.3s;
  --dvc-enh-pop-rise: 5px;
  --dvc-enh-pop-scale: 0.96;
  --dvc-enh-pop-duration: 0.22s;
  --dvc-enh-reveal-rise: 10px;
  --dvc-enh-reveal-duration: 0.45s;
}

/* Toast exit (entrance stays the RCL's own dvc-toast-in animation; replaying it from a
   deferred script would double the slide-in). Declared on the -out state so the change
   transitions when site.js adds the class, then removes the node. */
.dvc-toast.dvc-enh-toast-out {
  opacity: 0;
  transform: translate(var(--dvc-enh-toast-center), var(--dvc-enh-toast-drop));
  transition:
    opacity var(--dvc-enh-toast-exit) var(--dvc-ease),
    transform var(--dvc-enh-toast-exit) var(--dvc-ease);
}

/* Transient hover preview between a picked check-in and the hovered check-out; mirrors
   the server's data-state="in-range" paint. site.js only tags open days, and the
   [data-state="open"] guard keeps stronger day states (selected/booked/listed) intact. */
.dvc-cal-day[data-state="open"].dvc-enh-range-preview {
  background: var(--dvc-coral-soft);
  border-color: var(--dvc-coral-soft);
}

/* Soft pop on popover open (toggle event hook). The RCL's .dvc-dialog:popover-open rule
   carries higher specificity and keeps its own dvc-pop animation, so this effectively
   lands on menus and other bare popovers. */
@keyframes dvc-enh-pop-in {
  from {
    opacity: 0;
    transform: translateY(var(--dvc-enh-pop-rise)) scale(var(--dvc-enh-pop-scale));
  }
}

.dvc-enh-pop-open {
  animation: dvc-enh-pop-in var(--dvc-enh-pop-duration) var(--dvc-ease) both;
}

/* Listing-card entrance: site.js hides (.dvc-enh-reveal), then swaps to
   .dvc-enh-reveal-in the first time the card intersects the viewport. */
.sp-listing-card.dvc-enh-reveal {
  opacity: 0;
}

@keyframes dvc-enh-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--dvc-enh-reveal-rise));
  }
}

.sp-listing-card.dvc-enh-reveal-in {
  animation: dvc-enh-fade-up var(--dvc-enh-reveal-duration) var(--dvc-ease-out) both;
}

/* site.js already skips the card reveal under reduced motion; these guards also still
   the class-driven effects if the preference flips mid-session. */
@media (prefers-reduced-motion: reduce) {
  .dvc-toast.dvc-enh-toast-out {
    transition: none;
  }

  .dvc-enh-pop-open,
  .sp-listing-card.dvc-enh-reveal-in {
    animation: none;
  }

  .sp-listing-card.dvc-enh-reveal {
    opacity: 1;
  }
}