/*
  Homepage interactive layer
  - Adds subtle motion, hover effects, marquee headings, and parallax.
  - Loaded only on the homepage via index2.php.
*/

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:root{
  --lm-int-ease: cubic-bezier(.2,.8,.2,1);
  --lm-int-shadow: 0 22px 60px rgba(15,23,42,.14);
  --lm-int-border: rgba(62,167,249,.35);
}

/* Cards: lift + soft color shift on hover */
html.lm-js .lm-card{
  position:relative;
  overflow:hidden;
  transition: transform .22s var(--lm-int-ease), box-shadow .22s var(--lm-int-ease), border-color .22s var(--lm-int-ease);
  will-change: transform;
}

html.lm-js .lm-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 180px at 10% 0%, rgba(62,167,249,.20), transparent 55%),
              radial-gradient(700px 180px at 90% 100%, rgba(39,60,143,.10), transparent 60%);
  opacity:0;
  transition: opacity .22s var(--lm-int-ease);
  pointer-events:none;
}

html.lm-js .lm-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--lm-int-shadow);
  border-color: var(--lm-int-border);
}

html.lm-js .lm-card:hover::before{ opacity:1; }

/* Small photos added to the top 3 cards */
.lm-card-photo{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.55);
  margin:.15rem 0 .95rem;
}

@media (max-width:720px){
  .lm-card-photo{ height:150px; }
}

.proof-marquee{
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08);
  background:#f1f7ff;
  color:#0b1220;
}


.proof-marquee .label{ opacity:.95; }

.proof-marquee .marquee-track{
  gap:44px;
  font-weight:500;
  letter-spacing:.01em;
  /* JS-driven by default */
  animation: none;
  will-change: transform;
}

/* Fallback animation if JS doesn't attach */
.proof-marquee:not(.lm-marquee-ready) .marquee-track{
  animation: lm-marquee-fallback 28s linear infinite;
}

@keyframes lm-marquee-fallback{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Reveal-on-scroll */
.lm-reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .55s var(--lm-int-ease), transform .55s var(--lm-int-ease);
}

.lm-reveal.lm-inview{
  opacity:1;
  transform: translateY(0);
}

/* Title marquee (JS wraps headings into viewport+track) */
.lm-title-marquee{
  position:relative;
  overflow:hidden;
}

/* subtle moving underline even before marquee is built */
[data-title-marquee]{
  position:relative;
}

[data-title-marquee]::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:3px;
  width:120px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(62,167,249,.0), rgba(62,167,249,.85), rgba(62,167,249,.0));
  opacity:.75;
  transform: translateX(-35%);
  animation: lm-underline-sweep 3.6s linear infinite;
}

@keyframes lm-underline-sweep{
  from{ transform: translateX(-35%); }
  to{ transform: translateX(220%); }
}

.lm-title-marquee__viewport{ overflow:hidden; }
.lm-title-marquee__track{
  display:inline-flex;
  gap:2.4rem;
  white-space:nowrap;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.lm-title-marquee__item{ display:inline-block; }

/* Sticky media (desktop only) */
@media (min-width: 960px){
  .lm-sticky-media{ position: sticky; top: 110px; }
}

/* Photo strip (building section) */
.lm-photo-strip{
  margin-top:.95rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.65rem;
}

.lm-photo-strip img{
  display:block;
  width:100%;
  height:92px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.55);
}

@media (max-width:720px){
  .lm-photo-strip{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .lm-photo-strip img{ height:100px; }
}

/* Buttons: tiny nudge on hover */
html.lm-js .lm-btn{
  transition: transform .18s var(--lm-int-ease), box-shadow .18s var(--lm-int-ease);
}
html.lm-js .lm-btn:hover{ transform: translateY(-2px); }

/* Card hover: switch from blue to red + white text */
.lm-card.lm-hover-red:hover,
.lm-card.lm-hover-red:focus-within{
  background: #bb2926 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Make all text inside go white on hover */
.lm-card:hover h1,
.lm-card:hover h2,
.lm-card:hover h3,
.lm-card:hover h4,
.lm-card:hover p,
.lm-card:hover li,
.lm-card:hover span,
.lm-card:focus-within h1,
.lm-card:focus-within h2,
.lm-card:focus-within h3,
.lm-card:focus-within h4,
.lm-card:focus-within p,
.lm-card:focus-within li,
.lm-card:focus-within span{
  color: #fff !important;
}

/* Button inside card (ghost button) should stay readable */
.lm-card:hover .lm-btn-ghost,
.lm-card:focus-within .lm-btn-ghost{
  color: #fff !important;
  border-color: rgba(255,255,255,.75) !important;
  background: transparent !important;
}

.lm-card:hover .lm-btn-ghost:hover,
.lm-card:focus-within .lm-btn-ghost:hover{
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
}

/* Smoother hover transitions */
.lm-card{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.lm-card h1,
.lm-card h2,
.lm-card h3,
.lm-card h4,
.lm-card p,
.lm-card li,
.lm-card span,
.lm-card a,
.lm-card .lm-btn{
  transition: color .35s ease, background-color .35s ease, border-color .35s ease;
}

/* Optional: reduce the "pop" lift if it feels too aggressive */
.lm-card:hover{
  transform: translateY(-2px); /* was likely more */
}


/* ================================
   Key services at a glance (unique hover)
================================== */
.lm-glance-cards .lm-card{
  background:#fff;
  color:#0b1220;
  border:1px solid rgba(15,23,42,.10);
  transition: transform .45s ease, box-shadow .45s ease, background-color .45s ease, border-color .45s ease;
  will-change: transform;
}

/* Override your red hover INSIDE this section */
.lm-glance-cards .lm-card:hover,
.lm-glance-cards .lm-card:focus-within{
  background:#f1f7ff !important;
  color:#0b1220 !important;
  border-color: rgba(62,166,249,.30) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

/* Keep headings/text dark */
.lm-glance-cards .lm-card:hover h3,
.lm-glance-cards .lm-card:hover p,
.lm-glance-cards .lm-card:focus-within h3,
.lm-glance-cards .lm-card:focus-within p{
  color:#0b1220 !important;
}

/* Slight image "alive" effect */
.lm-glance-cards .lm-card img{
  transition: transform .45s ease, filter .45s ease;
}
.lm-glance-cards .lm-card:hover img,
.lm-glance-cards .lm-card:focus-within img{
  transform: translateY(-4px) scale(1.04);
}

/* Different motion per card (nth-child) */
.lm-glance-cards .lm-card:nth-child(1):hover{ transform: translateX(-10px) translateY(-3px); } /* slide from left */
.lm-glance-cards .lm-card:nth-child(2):hover{ transform: translateY(-12px); }                  /* from top */
.lm-glance-cards .lm-card:nth-child(3):hover{ transform: translateX(10px) translateY(-3px); }  /* slide from right */

/* Button: keep it readable on the light blue hover */
.lm-glance-cards .lm-card .lm-btn-primary{
  transition: transform .25s ease, box-shadow .25s ease;
}
.lm-glance-cards .lm-card:hover .lm-btn-primary{
  transform: translateY(-1px);
}

/* Accessibility: reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  .lm-glance-cards .lm-card,
  .lm-glance-cards .lm-card img{
    transition: none !important;
  }
  .lm-glance-cards .lm-card:hover{ transform:none !important; }
}

/* Prevent white-on-white: only cards that OPT-IN should get white text */
.lm-card:not(.lm-hover-red):hover h1,
.lm-card:not(.lm-hover-red):hover h2,
.lm-card:not(.lm-hover-red):hover h3,
.lm-card:not(.lm-hover-red):hover h4,
.lm-card:not(.lm-hover-red):hover p,
.lm-card:not(.lm-hover-red):hover li,
.lm-card:not(.lm-hover-red):hover span,
.lm-card:not(.lm-hover-red):hover small,
.lm-card:not(.lm-hover-red):hover a,
.lm-card:not(.lm-hover-red):focus-within h1,
.lm-card:not(.lm-hover-red):focus-within h2,
.lm-card:not(.lm-hover-red):focus-within h3,
.lm-card:not(.lm-hover-red):focus-within h4,
.lm-card:not(.lm-hover-red):focus-within p,
.lm-card:not(.lm-hover-red):focus-within li,
.lm-card:not(.lm-hover-red):focus-within span,
.lm-card:not(.lm-hover-red):focus-within small,
.lm-card:not(.lm-hover-red):focus-within a{
  color:#0b1220 !important;
}

/* Clean photo texture background (no text pills) */
.lm-prescription-cards .lm-card.lm-hover-red{
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #0b1220;
}

/* Photo texture */
.lm-prescription-cards .lm-card.lm-hover-red::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("../img/leslie-pharmacy-hps5.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.05) brightness(1.08);
  opacity: .95;
  transform: scale(1.04);
  z-index: 0;
}

/* Flat modern grey overlay */
.lm-prescription-cards .lm-card.lm-hover-red::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(243,244,246,.88);
  z-index: 0;
}

/* Keep card content above overlays */
.lm-prescription-cards .lm-card.lm-hover-red > *{
  position: relative;
  z-index: 1;
}

/* Fade overlays out on hover so red hover shows clean */
.lm-prescription-cards .lm-card.lm-hover-red:hover::before,
.lm-prescription-cards .lm-card.lm-hover-red:hover::after,
.lm-prescription-cards .lm-card.lm-hover-red:focus-within::before,
.lm-prescription-cards .lm-card.lm-hover-red:focus-within::after{
  opacity: 0;
  transition: opacity .60s ease;
}


.lm-prescription-cards .lm-card.lm-hover-red{
  border: 3px solid rgba(187, 41, 38);
}

.lm-form p.form-note {
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
  color: #6b7280 !important;
}