/* =============================================================
   bt-theme-2026 — Visual Enhancements
   Smooth section transitions, improved marquee, layout polish
   ============================================================= */

/* ── MARQUEE: smoother, faster, pauses on hover ─────────────── */
.marquee-container {
  overflow: hidden;
  position: relative;
  padding: 12px 0;
  /* subtle top/bottom fade mask */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.marquee {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

/* smoother, slightly faster scroll */
.marquee-top {
  animation: scroll-right 28s linear infinite;
}

.marquee-bottom {
  animation: scroll-left 32s linear infinite;
}

/* pause on hover for interactivity */
.marquee-container:hover .marquee {
  animation-play-state: paused;
}

@keyframes scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

@keyframes scroll-left {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* rounded images in marquee look more polished */
.marquee .wp-block-image img,
.marquee figure img {
  border-radius: 16px !important;
  object-fit: cover;
  height: 220px !important;
  width: auto !important;
  max-width: none !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.marquee .wp-block-image:hover img,
.marquee figure:hover img {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
}


/* ── SECTION TRANSITION DIVIDERS (SVG wave overlays) ─────────── */
/* These invisible pseudo-elements add a soft wave cutout at the
   bottom of each major section, blending it into the next. */

.wp-block-cover.alignfull {
  position: relative;
  overflow: visible;
}

/* Hero section bottom blend — dark fade into the marquee area */
.wp-block-group.alignfull:first-of-type::after,
.wp-block-cover.alignfull::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  background: inherit;
  /* Wave via clip-path */
  clip-path: ellipse(55% 100% at 50% 100%);
  pointer-events: none;
  z-index: 3;
}

/* ── UNIVERSAL SECTION TRANSITIONS ───────────────────────────── */
/* All full-width groups get a smooth top gradient that bleeds
   into the color of the section above */
.wp-block-group.alignfull {
  position: relative;
}

/* Smooth fade-in veil at the top of each section */
.wp-block-group.alignfull > .wp-block-cover__background,
.wp-block-group.alignfull + .wp-block-group.alignfull::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── IMPROVED COVER BLOCK BLENDING ───────────────────────────── */
/* The parallax cover blocks had hard borders – this softens them */
.wp-block-cover.has-parallax {
  box-shadow: 0 -40px 80px rgba(0,0,0,0.6) inset,
              0 40px 80px rgba(0,0,0,0.6) inset !important;
  overflow: hidden;
}

/* Hard-bordered service card covers (the 3-column section) */
.wp-block-cover[style*="border-width:8px"] {
  border-radius: 16px !important;
  border: none !important;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.wp-block-cover[style*="border-width:8px"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(162,0,255,0.35) !important;
}


/* ── SECTION SPACING & CONTENT POLISH ───────────────────────── */

/* Prevent sections from running right into each other */
.wp-block-group.alignfull + .wp-block-group.alignfull {
  margin-top: 0 !important;
}

/* Content cards with borders – make them feel like proper cards */
.wp-block-group.has-border-color {
  border-radius: 12px !important;
  border-color: rgba(162,0,255,0.4) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-color: rgba(1,1,3,0.72) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group.has-border-color:hover {
  border-color: rgba(247,109,4,0.6) !important;
  box-shadow: 0 0 30px rgba(247,109,4,0.15) !important;
}

/* Hero heading – prevent awkward text overflow on small screens */
.wp-block-cover__inner-container h2.text_mobile {
  word-break: break-word;
}


/* ── CONTACT / FORM SECTION ──────────────────────────────────── */
/* The contact section uses a fixed background image. Add a proper
   glass-morphism overlay on the form column */
.column-right-contact-home.has-background {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(162,0,255,0.25) !important;
  border-radius: 16px !important;
}


/* ── ABOUT / WHY PARTNER SECTIONS ────────────────────────────── */
/* Headings and paragraphs that have background color "pills"
   look jarring. Give them a smooth backdrop-blur instead */
.has-background-terciary-background-color {
  background-color: rgba(1,0,3,0.72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 8px 16px !important;
  border: 1px solid rgba(162,0,255,0.2);
}

.has-background-secondary-background-color.has-background {
  background-color: rgba(5,0,10,0.85) !important;
}


/* ── BLOG / RECENT POSTS CARDS ───────────────────────────────── */
.wp-block-post-template .wp-block-group {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10,5,20,0.6) !important;
  border: 1px solid rgba(162,0,255,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wp-block-post-template .wp-block-group:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(162,0,255,0.25);
  border-color: rgba(162,0,255,0.45);
}

.wp-block-post-featured-image img {
  transition: transform 0.5s ease;
}

.wp-block-post-template .wp-block-group:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}


/* ── SCROLL-REVEAL ELEMENTS ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}


/* ── NAVBAR GLASS EFFECT ─────────────────────────────────────── */
.navbar {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background-color: rgba(0,0,0,0.25) !important;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease !important;
}

.navbar.scrolled {
  background-color: rgba(0,0,0,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}


/* ── BUTTONS ─────────────────────────────────────────────────── */
.wp-element-button {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
  border-radius: 6px !important;
}

.wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(162,0,255,0.35) !important;
}


/* ── RESPONSIVE FIXES ────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .marquee .wp-block-image img,
  .marquee figure img {
    height: 150px !important;
  }
}