/* Puppy Dog Lane V3 additions. site.css is the untouched compiled Tailwind from the V2 build. */

/* scroll reveals: resting state is the V2 final state; hidden only while JS is running */
.js [data-reveal] { opacity: 0; transition: opacity .5s ease-out, transform .5s ease-out; }
.js [data-reveal="up20"] { transform: translateY(20px); }
.js [data-reveal="up30"] { transform: translateY(30px); }
.js [data-reveal="sc95"] { transform: scale(.95); }
.js [data-reveal="sc90"] { transform: scale(.9); }
.js [data-reveal="upsc"] { transform: translateY(20px) scale(.95); }
.js [data-reveal].revealed { opacity: 1; transform: none; }

/* booking modal, cloned from <template id="tpl-booking-modal"> */
[data-booking-modal] [data-modal-backdrop] { opacity: 0; transition: opacity .2s ease-out; }
[data-booking-modal] [data-modal-panel] { opacity: 0; transform: translateY(20px) scale(.95); transition: opacity .2s ease-out, transform .2s ease-out; }
[data-booking-modal].is-open [data-modal-backdrop] { opacity: .7; }
[data-booking-modal].is-open [data-modal-panel] { opacity: 1; transform: none; }

/* desktop nav dropdowns (Services / Areas We Serve): site.css was purged of the
   Tailwind utilities the original Radix menu needed (opacity-100, translate-y-2,
   translate-y-0 do not exist in the compiled bundle), so this is plain CSS instead,
   toggled by js/main.js adding/removing .v3-open on the panel. */
.v3-dropdown { position: relative; }
.v3-dropdown-panel {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: .5rem;
  background: #fff;
  color: hsl(var(--foreground));
  border-radius: .5rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1);
  border: 1px solid hsl(var(--border));
  padding: .75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s;
  z-index: 50;
}
.v3-dropdown-panel.v3-open { opacity: 1; visibility: visible; transform: translateY(0); }
.v3-panel-wide { width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.v3-panel-areas { width: 420px; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.v3-dropdown-item { display: block; padding: .625rem .75rem; border-radius: .375rem; text-decoration: none; transition: background-color .15s; }
.v3-dropdown-item:hover { background: hsl(var(--muted)); }
.v3-item-title { font-weight: 600; color: hsl(var(--foreground)); font-size: .9375rem; }
.v3-item-desc { font-size: .8125rem; color: hsl(var(--muted-foreground)); margin-top: .125rem; line-height: 1.3; }
.v3-dropdown-item-compact { font-weight: 500; color: hsl(var(--foreground)); font-size: .9375rem; }

@media (max-width: 1023px) {
  .v3-panel-wide, .v3-panel-areas { width: 320px; }
}