/*
Theme Name: Bridge Child
Theme URI: http://demo.qodeinteractive.com/bridge/
Description: A child theme of Bridge Theme
Author: Qode Interactive
Author URI: http://www.qodethemes.com/
Version: 1.0.0
Template: bridge
*/
@import url("../bridge/style.css");

/* === Layout === */
.bg-matrix .bg-row {
  display: flex;
/*   gap: 0 !important; */
}

.bg-matrix .bg-row .bg-tile {
  flex: 1 1 33.33%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: start;
  transition: transform .25s ease, color .25s ease;
  cursor: pointer;
  z-index: 0;
  border-radius: 25px;
}

/* === Checkerboard base colors === */
/* Row 1: black, white, black */
.bg-matrix .row-1 .bg-tile:nth-child(odd)  { background:#000; color:#fff; }
.bg-matrix .row-1 .bg-tile:nth-child(even) { background:#fff; color:#000; }

/* Row 2: white, black, white */
.bg-matrix .row-2 .bg-tile:nth-child(odd)  { background:#fff; color:#000; }
.bg-matrix .row-2 .bg-tile:nth-child(even) { background:#000; color:#fff; }

/* === Text color inside inner-content (opposite of background) === */

/* black tiles → white text */
.bg-matrix .row-1 .bg-tile:nth-child(odd) .inner-content h2,
.bg-matrix .row-1 .bg-tile:nth-child(odd) .inner-content p,
.bg-matrix .row-2 .bg-tile:nth-child(even) .inner-content h2,
.bg-matrix .row-2 .bg-tile:nth-child(even) .inner-content p {
  color: #fff;
  transition: color .3s ease;
}

/* white tiles → black text */
.bg-matrix .row-1 .bg-tile:nth-child(even) .inner-content h2,
.bg-matrix .row-1 .bg-tile:nth-child(even) .inner-content p,
.bg-matrix .row-2 .bg-tile:nth-child(odd) .inner-content h2,
.bg-matrix .row-2 .bg-tile:nth-child(odd) .inner-content p {
  color: #000;
  transition: color .3s ease;
}

/* === On hover: tiles that originally had white text → turn black === */

.bg-matrix .row-1 .bg-tile:nth-child(odd):hover .inner-content h2,
.bg-matrix .row-1 .bg-tile:nth-child(odd):hover .inner-content p,
.bg-matrix .row-2 .bg-tile:nth-child(even):hover .inner-content h2,
.bg-matrix .row-2 .bg-tile:nth-child(even):hover .inner-content p {
	color: #000;
}

/* Keep tile content above overlay */
.bg-matrix .bg-row .bg-tile > * {
  position: relative;
  z-index: 1;
}

/* === Hover linear gradient overlay === */
.bg-matrix .bg-row .bg-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  /* linear gradient instead of radial */
  background: linear-gradient(
    120deg,
    rgba(117,175,186,1) 0%,
    rgba(217,234,219,1) 50%,
    rgba(153,207,200,1) 100%
  );

  background-size: 200% 200%;
  background-position: 0% 50%;
  opacity: 0;
  transition: opacity .35s ease;
  animation: hoverLinearMove 5s ease-in-out infinite alternate;
  animation-play-state: paused;
}

/* === Hover state === */
.bg-matrix .bg-row .bg-tile:hover::after {
  opacity: 1;
  animation-play-state: running; /* animate only while hovered */
}
.bg-matrix .bg-row .bg-tile:hover {
/*   transform: translateY(-6px); */
}

/* === Keyframes: subtle movement left to right === */
@keyframes hoverLinearMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Accessibility: disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg-matrix .bg-row .bg-tile::after { animation: none !important; }
}

/* Scroll-driven reveal + parallax */
.scroll-reveal h2 {
  --x: -80px;   /* horizontal offset (starts off-screen to the left) */
  --y: 0px;     /* vertical parallax offset (JS updates) */
  --o: 0;       /* opacity 0→1 */

  position: relative;
  transform: translate3d(var(--x), var(--y), 0);
  opacity: var(--o);

  /* keep transitions “instant” so scroll feels 1:1; GPU friendly */
  transition: transform 0s, opacity 0s;
  will-change: transform, opacity;
}


@media only screen and (max-width: 768px) {
	.footer_top .footer_col1,
	.footer_top .footer_col3 {
		text-align: center;
	}
}