/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Global Styles */

html, body{
  background-color:#000000 !important;
}

.padding-left--none {padding-left:0 !important;}
.radius-top-none {border-top-left-radius:0 !important;; border-top-right-radius:0 !important;}
.radius-btm-none {border-bottom-left-radius:0 !important;; border-bottom-right-radius:0 !important;}

.hero--text--gradient {
  color: #FFFFFF;
  background-image: linear-gradient(0deg, #FFFFFF 50%, #000000 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================
   HERO GRADIENT (lava/aurora)
   ============================================ */
.hero-gradient{
  --bg: #141413; /* must match the next section */
  position: relative;
  min-height: 100vh;   /* safety: ensures full-viewport hero */
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

/* Content above everything */
.hero-gradient > *{
  position: relative;
  z-index: 2;
}

/* === Blob layers === */
.hero-gradient::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index: 0;

  background:
    radial-gradient(900px 520px at 15% 55%, rgba(255,140,40,.85), rgba(255,140,40,0) 60%),
    radial-gradient(820px 520px at 55% 35%, rgba(120,220,190,.45), rgba(120,220,190,0) 62%),
    radial-gradient(760px 480px at 85% 75%, rgba(255,110,40,.55), rgba(255,110,40,0) 60%);

  filter: blur(80px) saturate(125%);
  opacity: .95;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation: heroAuroraA 11s ease-in-out infinite alternate;
  pointer-events:none;

  /* Fade blobs out before the bottom edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 92%);
}

.hero-gradient::after{
  content:"";
  position:absolute;
  inset:-45%;
  z-index: 0;

  background:
    radial-gradient(1100px 600px at 30% 30%, rgba(255,150,60,.55), rgba(255,150,60,0) 62%),
    radial-gradient(900px 520px at 70% 60%, rgba(120,220,190,.30), rgba(120,220,190,0) 60%),
    radial-gradient(1000px 560px at 60% 90%, rgba(255,100,35,.35), rgba(255,100,35,0) 62%);

  filter: blur(95px) saturate(120%);
  opacity: .75;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation: heroAuroraB 15s ease-in-out infinite alternate;
  pointer-events:none;

  /* Fade blobs out before the bottom edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 90%);
}

/* === Fade overlay (place an empty div with class hero-gradient__fade inside the hero) ===
   IMPORTANT FIX: background-color is set to var(--bg) so the base colour is always painted.
*/
.hero-gradient .hero-gradient__fade{
  position: absolute;
  inset: 0;
  z-index: 1;           /* above blobs, below content */
  pointer-events: none;

  /* Critical: solid base paint */
  background-color: var(--bg);

  /* Overlays */
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 42%, rgba(0,0,0,.65) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.45)),
    linear-gradient(to bottom, rgba(0,0,0,0) 55%, var(--bg) 92%, var(--bg) 100%);

  background-repeat: no-repeat;
  background-size: cover;
}

/* Animations */
@keyframes heroAuroraA{
  0%   { transform: translate3d(-5%, -2%, 0) scale(1.06) rotate(-8deg); }
  50%  { transform: translate3d( 2%,  3%, 0) scale(1.10) rotate( 4deg); }
  100% { transform: translate3d( 6%, -1%, 0) scale(1.12) rotate( 9deg); }
}

@keyframes heroAuroraB{
  0%   { transform: translate3d( 6%, -4%, 0) scale(1.06) rotate(10deg); }
  50%  { transform: translate3d(-3%,  2%, 0) scale(1.12) rotate(-4deg); }
  100% { transform: translate3d(-7%,  5%, 0) scale(1.16) rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce){
  .hero-gradient::before,
  .hero-gradient::after{
    animation:none;
    transform:none;
  }
}

/* ============================================
   FIT-TEXT (full-bleed + letter animation)
   ============================================ */
fit-text.hero-fit{
  display: block;
  width: 100%;
  white-space: nowrap;
  line-height: 0.85;
  text-align: center;
  margin: 0;
}

fit-text.hero-fit.is-full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* letters */
fit-text.hero-animate span{
  display: inline-block;
  transform: translateY(24%);
  opacity: 0;
  filter: blur(8px);
}

/* animation trigger */
fit-text.hero-animate.is-anim span{
  animation: heroIn 900ms cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}

@keyframes heroIn{
  to{
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  fit-text.hero-animate span{
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ============================================
   CASE STUDIES – STACKED CARDS (NO RESTYLING)
   Add classes:
   Section: .case-studies-stack
   Wrapper: .cs-stack
   Card Blocks: .cs-card
   ============================================ */

.case-studies-stack .cs-stack{
  /* Tweak these only */
  --stickyTop: 110px; /* distance from top when cards stick (account for header) */
  --stackGap: 18px;   /* how much each card peeks from behind the previous */
  
  position: relative;
}

/* Make each card sticky so it stacks while scrolling,
   and automatically un-stacks when scrolling back up. */
.case-studies-stack .cs-card{
  position: sticky;
  top: var(--stickyTop);

  /* IMPORTANT: do NOT set background, padding, radius, etc.
     This preserves your existing card design exactly. */

  /* Create scroll room between cards */
  margin-bottom: 14vh;

  /* Make stacking feel smooth (without changing design) */
  will-change: transform;
  transition: transform 350ms ease;
}

/* Stacking offsets (add more if you have more cards) */
.case-studies-stack .cs-card:nth-child(1){ transform: translateY(calc(var(--stackGap) * 0)); }
.case-studies-stack .cs-card:nth-child(2){ transform: translateY(calc(var(--stackGap) * 1)); }
.case-studies-stack .cs-card:nth-child(3){ transform: translateY(calc(var(--stackGap) * 2)); }
.case-studies-stack .cs-card:nth-child(4){ transform: translateY(calc(var(--stackGap) * 3)); }
.case-studies-stack .cs-card:nth-child(5){ transform: translateY(calc(var(--stackGap) * 4)); }
.case-studies-stack .cs-card:nth-child(6){ transform: translateY(calc(var(--stackGap) * 5)); }
.case-studies-stack .cs-card:nth-child(7){ transform: translateY(calc(var(--stackGap) * 6)); }
.case-studies-stack .cs-card:nth-child(8){ transform: translateY(calc(var(--stackGap) * 7)); }
.case-studies-stack .cs-card:nth-child(9){ transform: translateY(calc(var(--stackGap) * 8)); }
.case-studies-stack .cs-card:nth-child(10){ transform: translateY(calc(var(--stackGap) * 9)); }

/* Mobile: reduce the stack intensity + top offset */
@media (max-width: 768px){
  .case-studies-stack .cs-stack{
    --stickyTop: 86px;
    --stackGap: 12px;
  }
  .case-studies-stack .cs-card{
    margin-bottom: 10vh;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .case-studies-stack .cs-card{
    transition: none;
  }
}

.glass-button {
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-highlight: rgba(255, 255, 255, 0.6);
  --glass-shadow: rgba(0, 0, 0, 0.25);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.8em;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: linear-gradient(
    135deg,
    var(--glass-highlight),
    var(--glass-bg)
  );
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow:
    0 10px 30px var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
  cursor: pointer;
}

/* Hover */
.glass-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Active */
.glass-button:active {
  transform: translateY(0);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Focus (accessibility) */
.glass-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}


/* CUSTOM TO KEEP */

/* Container class you’ll add to the section */
.yld-highlight-animate strong,
.yld-highlight-animate em {
  font-style: inherit; /* keeps your existing <em> styling unless your theme changes it */
}

/* We wrap each word inside <strong>/<em> in a span */
.yld-highlight-animate .yld-hl-word {
  color: inherit;              /* start as normal */
  opacity: 0.45;               /* subtle "not yet highlighted" feel */
  transition: color 450ms ease, opacity 450ms ease;
  will-change: color, opacity;
}

.yld-highlight-animate .yld-hl-word.is-on {
  color: #fff;                 /* highlighted */
  opacity: 1;
}

/* Optional: if the background is light, you may want a darker base color */
.yld-highlight-animate h2 {
  /* color: #cfcfcf; */        /* uncomment if you want the non-highlight text lighter */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .yld-highlight-animate .yld-hl-word {
    transition: none;
    opacity: 1;
  }
}

/* Put this class on the section that contains the heading */
.yld-highlight-animate h2 {
  /* Your normal final colour comes from theme.
     If you want a specific final colour, uncomment: */
  /* color: #d8d8d8; */
}

/* Every word gets wrapped */
.yld-highlight-animate .yld-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease, color 520ms ease;
  will-change: opacity, transform, filter, color;
}

/* Normal words end in inherited color */
.yld-highlight-animate .yld-word.is-on {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  color: inherit;
}

/* Highlighted words (those that were inside strong/em) end white */
.yld-highlight-animate .yld-word.is-on.is-highlight {
  color: #fff;
}

/* Optional: while animating but not yet "on", keep a softer look */
.yld-highlight-animate .yld-word {
  color: inherit;
}

/* Reduced motion: show immediately */
@media (prefers-reduced-motion: reduce) {
  .yld-highlight-animate .yld-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}