/* ==========================================================================
   BRUSH & ROLL - PREMIUM CARD EFFECTS
   Loaded AFTER components.css so these rules win via cascade order.
   Light aesthetic: white/mist/sage/sand + teal accent (no blue glows).
   Pointer tilt / reveals live in js/card-effects.js (GSAP v3).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared Primitives — gradient border (::before) + cursor spotlight (::after)
   Applied to: all glass cards (services, team, value, service-details,
   contractors-cta), review cards, and the Google summary card.
   -------------------------------------------------------------------------- */

.glass-card,
.review-card,
.google-reviews-placeholder-card {
  position: relative;
  isolation: isolate;
}

/* Gradient border ring — fades in on hover (masked 1.5px ring) */
.glass-card::before,
.review-card::before,
.google-reviews-placeholder-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg,
      var(--color-teal) 0%,
      var(--color-sage) 45%,
      rgba(255, 255, 255, 0) 78%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 2;
}

/* Cursor spotlight — --mx/--my set by card-effects.js, centered fallback */
.glass-card::after,
.review-card::after,
.google-reviews-placeholder-card::after,
.supply-options-card::after,
.double-bezel-outer::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      var(--color-teal-soft),
      transparent 65%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 2;
}

.glass-card:hover::before,
.review-card:hover::before,
.google-reviews-placeholder-card:hover::before {
  opacity: 1;
}

.glass-card:hover::after,
.review-card:hover::after,
.google-reviews-placeholder-card:hover::after,
.supply-options-card:hover::after,
.double-bezel-outer:hover::after {
  opacity: 1;
}

/* Bezel frames need positioning context for the spotlight layer */
.double-bezel-outer,
.supply-options-card {
  position: relative;
  isolation: isolate;
}

/* Tilt state: GSAP writes inline transforms — strip transform from the CSS
   transition so the two never fight (compound selector outranks base rules) */
.glass-card.fx-tilt,
.review-card.fx-tilt,
.google-reviews-placeholder-card.fx-tilt,
.supply-options-card.fx-tilt,
.double-bezel-outer.fx-tilt,
.gallery-card-wrapper.fx-tilt,
.gallery-card.fx-tilt {
  transition-property: box-shadow, border-color, background-color, opacity, filter;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   2. Services Grid Cards (.services-card.glass-card)
   -------------------------------------------------------------------------- */

.services-card {
  border-radius: var(--radius-services);
}

.services-card:hover {
  box-shadow: var(--shadow-glass), var(--shadow-inner-bezel), var(--shadow-glow-teal);
  border-color: rgba(42, 157, 143, 0.35);
}

/* Icon chip: square-to-blob morph + teal gradient tint */
.services-card .services-card-icon {
  transition:
    transform var(--transition-normal),
    background-color var(--transition-normal),
    color var(--transition-normal),
    border-radius var(--transition-normal);
}

.services-card:hover .services-card-icon {
  transform: rotate(-8deg) scale(1.08);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.16), rgba(168, 197, 160, 0.28));
  color: var(--color-teal);
}

/* Title teal underline sweep */
.services-card .services-card-title {
  display: inline-block;
  padding-bottom: 5px;
  background-image: linear-gradient(var(--color-teal), var(--color-teal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--transition-slow);
}

.services-card:hover .services-card-title {
  background-size: 100% 2px;
}

/* Link arrow: keep slide, shift to teal */
.services-card:hover .services-card-link {
  color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   3. Paint Supply Card (.supply-options-card) — leaf-shaped sage callout
   -------------------------------------------------------------------------- */

.supply-options-card {
  border-radius: var(--radius-supply);
  overflow: hidden;
  border-color: rgba(168, 197, 160, 0.4);
}

/* Sage dot pattern that drifts on hover */
.supply-options-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(168, 197, 160, 0.35) 1px, transparent 1.5px);
  background-size: 15px 15px;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 0;
}

.supply-options-card:hover::before {
  opacity: 1;
  animation: pattern-drift 6s linear infinite;
}

.supply-options-card:hover {
  box-shadow: var(--shadow-md), var(--shadow-glow-teal);
  border-color: rgba(42, 157, 143, 0.35);
}

/* Icon wobble */
.supply-options-card:hover .supply-options-icon {
  color: var(--color-teal);
  animation: icon-wobble 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes icon-wobble {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-12deg) scale(1.15); }
  60% { transform: rotate(8deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Keep content above pattern/spotlight layers */
.supply-options-card > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Gallery Swatch / Preview Cards (.gallery-placeholder-card in bezels)
   -------------------------------------------------------------------------- */

.gallery-card-wrapper .double-bezel-outer {
  border-radius: var(--radius-gallery);
}

.gallery-card-wrapper .double-bezel-outer:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow-teal);
}

/* Image zoom + caption lift on hover */
.gallery-card-wrapper .double-bezel-inner {
  overflow: hidden;
}

.gallery-card-wrapper .gallery-preview-img,
.gallery-card-wrapper .gallery-placeholder-card img {
  transition: transform var(--transition-slow);
}

.gallery-card-wrapper .double-bezel-outer:hover .gallery-preview-img,
.gallery-card-wrapper .double-bezel-outer:hover .gallery-placeholder-card img {
  transform: scale(1.06);
}

.swatch-caption {
  transition: background-color var(--transition-normal), transform var(--transition-normal);
}

.double-bezel-outer:hover .swatch-caption {
  transform: translateY(-4px);
}

/* Swatch icon spins into a teal accent */
.double-bezel-outer:hover .swatch-icon {
  color: var(--color-teal);
  box-shadow: var(--shadow-glow-teal);
}

/* --------------------------------------------------------------------------
   5. Google Review Summary Card (.google-reviews-placeholder-card)
   -------------------------------------------------------------------------- */

.google-reviews-placeholder-card {
  border-radius: 24px 24px 24px 8px;
}

.google-reviews-placeholder-card:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow-teal);
  border-color: rgba(42, 157, 143, 0.3);
}

/* Score in teal→sage gradient text */
.google-score {
  background: linear-gradient(135deg, var(--color-teal), var(--color-sage));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Star twinkle, staggered left to right */
.google-reviews-placeholder-card:hover .stars-row svg {
  animation: star-twinkle 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.google-reviews-placeholder-card:hover .stars-row svg:nth-child(1) { animation-delay: 0s; }
.google-reviews-placeholder-card:hover .stars-row svg:nth-child(2) { animation-delay: 0.06s; }
.google-reviews-placeholder-card:hover .stars-row svg:nth-child(3) { animation-delay: 0.12s; }
.google-reviews-placeholder-card:hover .stars-row svg:nth-child(4) { animation-delay: 0.18s; }
.google-reviews-placeholder-card:hover .stars-row svg:nth-child(5) { animation-delay: 0.24s; }

/* CTA button: teal gradient fill on hover (magnetic pull comes from JS) */
.google-actions .write-review-btn {
  border-radius: 50px;
  transition:
    transform var(--transition-fast),
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.google-actions .write-review-btn:hover {
  background: linear-gradient(135deg, var(--color-sage), var(--color-teal));
  border-color: var(--color-teal);
  color: var(--color-white);
  box-shadow: var(--shadow-glow-teal);
}

/* --------------------------------------------------------------------------
   6. Dynamic Testimonial Cards (.review-card) — JS-rendered
   -------------------------------------------------------------------------- */

.review-card {
  border-radius: var(--radius-review);
  overflow: hidden;
}

/* Oversized decorative quote that drifts on hover */
.review-card .review-card-body {
  position: relative;
}

.review-card .review-card-body::before {
  content: '\201C';
  position: absolute;
  top: -1.6rem;
  left: -0.6rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: rgba(168, 197, 160, 0.22);
  pointer-events: none;
  transition: transform var(--transition-slow), color var(--transition-slow);
  z-index: 0;
}

.review-card:hover .review-card-body::before {
  transform: translate(6px, -4px);
  color: rgba(42, 157, 143, 0.28);
}

.manual-reviews-grid .review-card:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow-teal);
  border-color: rgba(42, 157, 143, 0.3);
}

/* --------------------------------------------------------------------------
   7. Communities We Serve Card (.service-area-card) + city pills
   -------------------------------------------------------------------------- */

.double-bezel-outer.service-area-card-wrapper {
  border-radius: 30px 16px 30px 16px;
}



/* City pills: static simple styling */
.city-pill {
  cursor: default;
}

/* --------------------------------------------------------------------------
   8. Map Container Card (.map-bezel-outer)
   -------------------------------------------------------------------------- */

.map-bezel-outer {
  border-radius: var(--radius-map);
}

.map-bezel-outer:hover {
  box-shadow: 0 0 0 3px var(--color-teal-soft), var(--shadow-md), var(--shadow-glow-teal);
}

.map-bezel-inner {
  border-radius: 26px 14px 26px 14px;
  box-shadow: var(--shadow-inner-bezel);
}

/* Floating "open in maps" pill — appears on hover */
.map-open-pill {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-tags);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(42, 157, 143, 0.3);
  border-radius: 50px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal),
    background-color var(--transition-fast), color var(--transition-fast);
  pointer-events: none;
}

.map-open-pill .iconify,
.map-open-pill svg {
  width: 13px;
  height: 13px;
}

.map-bezel-outer:hover .map-open-pill,
.map-open-pill:focus-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.map-open-pill:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   9. Interactive Free Callback Form Card (.cta-form-card) — lightened glass
   The navy CTA *section* stays; the card itself becomes premium light glass.
   -------------------------------------------------------------------------- */

.cta-bezel-outer {
  border-radius: 30px 18px 30px 18px;
}

.cta-bezel-inner {
  border-radius: 22px 12px 22px 12px;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(168, 197, 160, 0.35);
}

.cta-form-card .form-label {
  color: var(--color-navy);
}

.cta-form-card .form-label .required {
  color: var(--color-teal);
}

/* Light input fields with organic corner */
.cta-form-card .form-input,
.cta-form-card .form-select,
.cta-form-card .form-textarea {
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.16);
  color: var(--color-navy);
  border-radius: 12px 12px 12px 4px;
}

.cta-form-card .form-input::placeholder,
.cta-form-card .form-textarea::placeholder {
  color: rgba(108, 117, 125, 0.55);
}

.cta-form-card .form-input:hover,
.cta-form-card .form-select:hover,
.cta-form-card .form-textarea:hover {
  background-color: var(--color-white);
  border-color: rgba(42, 157, 143, 0.45);
}

.cta-form-card .form-input:focus,
.cta-form-card .form-select:focus,
.cta-form-card .form-textarea:focus {
  background-color: var(--color-white);
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-teal-soft);
}

/* Select chevron: navy instead of white */
.cta-form-card .select-wrapper-custom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3E%3Cpath stroke='%231D3557' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  opacity: 0.8;
}

.cta-form-card .form-select option {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.cta-form-card .form-select option:disabled {
  color: rgba(108, 117, 125, 0.5);
}

/* Submit button: sage→teal gradient hover */
.btn-submit-cta:hover {
  background: linear-gradient(135deg, var(--color-sage), var(--color-teal));
  border-color: var(--color-teal);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-teal);
}

/* Success / error states: flip white text to light-card palette */
.cta-form-card .success-title,
.cta-form-card .error-state-title {
  color: var(--color-navy);
}

.cta-form-card .success-desc {
  color: var(--color-gray);
}

.cta-form-card .success-desc-sub {
  color: var(--color-gray);
}

.cta-form-card .success-desc-sub strong {
  color: var(--color-navy);
}

.cta-form-card .error-state-desc {
  color: var(--color-gray);
}

.cta-form-card .btn-reset-form {
  border-color: rgba(29, 53, 87, 0.3);
  color: var(--color-navy);
}

.cta-form-card .btn-reset-form:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* Success icon: teal pulse ring on reveal */
.cta-form-card .success-icon-wrapper {
  animation: success-pulse 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s 2;
}

.cta-form-card .success-check-icon {
  color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   10. Team Member Cards (.team-card.glass-card)
   -------------------------------------------------------------------------- */

.team-card {
  border-radius: var(--radius-team);
}

.team-card:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow-teal);
}

/* Photo frame: organic bezel + image zoom */
.team-card .double-bezel-outer {
  border-radius: 24px 24px 24px 10px;
}

.team-card .team-photo-placeholder .team-image,
.team-card .team-photo-placeholder img {
  object-position: top center;
  transition: transform var(--transition-slow);
}

.team-card:hover .team-photo-placeholder .team-image,
.team-card:hover .team-photo-placeholder img {
  transform: scale(1.05);
}

/* Role tag becomes a teal pill on hover */
.team-role-tag {
  display: inline-block;
  width: fit-content;
  padding: 3px 12px;
  border-radius: 50px;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.team-card:hover .team-role-tag {
  background-color: var(--color-teal-soft);
  color: var(--color-teal);
}

/* Member name underline sweep */
.team-member-name {
  display: inline-block;
  padding-bottom: 5px;
  background-image: linear-gradient(var(--color-sage), var(--color-sage));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  transition: background-size var(--transition-slow);
}

.team-card:hover .team-member-name {
  background-size: 100% 3px;
}

/* Skill badges pop with stagger on hover */
.team-skill-badge {
  transition: transform var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.team-card:hover .team-skill-badge {
  transform: translateY(-3px);
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 6px 14px -6px rgba(42, 157, 143, 0.35);
}

.team-card:hover .team-skill-badge:nth-child(1) { transition-delay: 0s; }
.team-card:hover .team-skill-badge:nth-child(2) { transition-delay: 0.05s; }
.team-card:hover .team-skill-badge:nth-child(3) { transition-delay: 0.1s; }
.team-card:hover .team-skill-badge:nth-child(4) { transition-delay: 0.15s; }
.team-card:hover .team-skill-badge:nth-child(5) { transition-delay: 0.2s; }

/* --------------------------------------------------------------------------
   11. Accessibility guards
   -------------------------------------------------------------------------- */

/* Touch devices: no cursor, so no spotlight */
@media (hover: none) {
  .glass-card::after,
  .review-card::after,
  .google-reviews-placeholder-card::after,
  .supply-options-card::after,
  .double-bezel-outer::after {
    display: none;
  }
}

/* Reduced motion: kill effect animations, keep static styling */
@media (prefers-reduced-motion: reduce) {
  .supply-options-card:hover::before {
    animation: none;
  }

  .google-reviews-placeholder-card:hover .stars-row svg,
  .supply-options-card:hover .supply-options-icon,
  .cta-form-card .success-icon-wrapper {
    animation: none !important;
  }

  .map-open-pill {
    transition: none;
  }
}