/* Home "Chimney Services Showcase": 3D flip cards. Front shows the service logo, back the service summary.
   Colors come only from :root. The back text stays in the HTML (indexable, read by screen readers). */
.dcs-flip {
  position: relative;
  display: block;
  height: 240px;
  border-radius: 10px;
  color: var(--pbmit-blackish-color);
  text-decoration: none;
  perspective: 1100px;
  -webkit-tap-highlight-color: transparent;
}
.dcs-flip-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 750ms cubic-bezier(.3, 1.35, .45, 1);
}
.dcs-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Front: logo */
.dcs-flip-front {
  padding: 32px 24px;
  background: var(--pbmit-white-color);
  transition: box-shadow 400ms ease;
}
.dcs-flip-front img {
  width: min(170px, 80%);
  height: auto;
  transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
}
.dcs-flip-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--pbmit-global-color-rgb), 0.1);
  color: var(--pbmit-global-color);
  transition: transform 500ms ease;
}

/* Back: service summary */
.dcs-flip-back {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 26px 24px 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--pbmit-global-color-rgb), 0.38), transparent 58%),
    var(--pbmit-secondary-color);
  color: var(--pbmit-white-color);
  text-align: left;
  transform: rotateY(180deg);
}
/* Light sweep across the back as it turns */
.dcs-flip-back::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(var(--pbmit-white-color-rgb), 0.16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.dcs-flip-title {
  position: relative;
  margin: 0;
  padding-bottom: 10px;
  color: var(--pbmit-white-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.dcs-flip-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--pbmit-global-color);
  transition: width 600ms cubic-bezier(.2, .8, .2, 1) 250ms;
}
.dcs-flip-text {
  display: block;
  color: rgba(var(--pbmit-white-color-rgb), 0.82);
  font-size: 15px;
  line-height: 1.55;
}
.dcs-flip-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pbmit-global-color);
  font-size: 14px;
  font-weight: 700;
}
.dcs-flip-cta svg { transition: transform 400ms cubic-bezier(.2, .8, .2, 1); }

/* Flip on hover (mouse), keyboard focus, or tap (touch, set by script) */
@media (hover: hover) {
  .dcs-flip:hover .dcs-flip-inner { transform: rotateY(180deg); }
  .dcs-flip:hover .dcs-flip-front img { transform: scale(0.9); }
}
.dcs-flip:focus-visible .dcs-flip-inner,
.dcs-flip.is-flipped .dcs-flip-inner { transform: rotateY(180deg); }
.dcs-flip:hover .dcs-flip-title::after,
.dcs-flip:focus-visible .dcs-flip-title::after,
.dcs-flip.is-flipped .dcs-flip-title::after { width: 64px; }
.dcs-flip:hover .dcs-flip-back::after,
.dcs-flip:focus-visible .dcs-flip-back::after,
.dcs-flip.is-flipped .dcs-flip-back::after { animation: dcs-flip-shine 900ms ease 200ms; }
.dcs-flip:hover .dcs-flip-cta svg,
.dcs-flip:focus-visible .dcs-flip-cta svg { transform: translateX(5px); }
.dcs-flip:focus-visible {
  outline: 3px solid var(--pbmit-global-color);
  outline-offset: 3px;
}
.dcs-flip:hover .dcs-flip-hint { transform: rotate(180deg); }

/* Entrance "peek": each card turns slightly in sequence to show it can flip */
.client-one-area.is-peeking .pbmit-logo-ele .dcs-flip-inner { animation: dcs-flip-peek 1100ms cubic-bezier(.3, 1.2, .4, 1) both; }
.client-one-area.is-peeking .pbmit-logo-ele:nth-child(2) .dcs-flip-inner { animation-delay: 150ms; }
.client-one-area.is-peeking .pbmit-logo-ele:nth-child(4) .dcs-flip-inner { animation-delay: 300ms; }
.client-one-area.is-peeking .row + .row .pbmit-logo-ele:nth-child(2) .dcs-flip-inner { animation-delay: 450ms; }
.client-one-area.is-peeking .row + .row .pbmit-logo-ele:nth-child(3) .dcs-flip-inner { animation-delay: 600ms; }
.client-one-area.is-peeking .row + .row .pbmit-logo-ele:nth-child(4) .dcs-flip-inner { animation-delay: 750ms; }

@keyframes dcs-flip-peek {
  0%, 100% { transform: rotateY(0); }
  40% { transform: rotateY(-28deg); }
  70% { transform: rotateY(8deg); }
}
@keyframes dcs-flip-shine {
  from { left: -60%; }
  to { left: 130%; }
}

/* Responsive */
@media (max-width: 1199px) {
  .dcs-flip { height: 250px; }
  .dcs-flip-title { font-size: 19px; }
  .dcs-flip-text { font-size: 14px; }
}
@media (max-width: 767px) {
  .dcs-flip { height: 225px; }
}
@media (max-width: 575px) {
  .dcs-flip { height: 200px; }
  .dcs-flip-back { padding: 22px 20px 18px; }
  .dcs-flip-title { font-size: 18px; }
}

/* Reduced motion: no 3D turn, cross-fade between faces instead */
@media (prefers-reduced-motion: reduce) {
  .dcs-flip-inner,
  .dcs-flip-front img,
  .dcs-flip-hint,
  .dcs-flip-title::after,
  .dcs-flip-cta svg { transition: none; }
  .dcs-flip-inner,
  .dcs-flip:hover .dcs-flip-inner,
  .dcs-flip:focus-visible .dcs-flip-inner,
  .dcs-flip.is-flipped .dcs-flip-inner { transform: none; animation: none; }
  .dcs-flip-face { transition: opacity 250ms ease; }
  .dcs-flip-back { transform: none; opacity: 0; }
  .dcs-flip:hover .dcs-flip-back,
  .dcs-flip:focus-visible .dcs-flip-back,
  .dcs-flip.is-flipped .dcs-flip-back { opacity: 1; }
  .dcs-flip-back::after { display: none; }
}