/* ===== BGL Company — Custom Styles ===== */
/* Layout handled by portfolio-boilerplate.css (pf- classes).
   This file: hero parallax grid + floating squiggles only. */


/* ===== HERO: PARALLAX PHOTO GRID ===== */

.bg-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background: #fff;
  overflow: hidden;
}

.bg-hero__grid-wrap {
  position: absolute;
  inset: -25% -20%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 160%;
  transform: rotate(-15deg);
  transform-origin: center center;
  will-change: transform;
}

.bg-hero__row {
  display: flex;
  gap: 10px;
  justify-content: center;
  will-change: transform;
}

.bg-hero__cell {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  aspect-ratio: 3 / 2;
  flex: 0 0 calc(100% / 6 - 10px);
}

.bg-hero__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bg-hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 1;
}

.bg-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 85%);
}

/* Hero text — centered absolutely over grid */
.bg-hero .pf-hero-placeholder__title {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  width: 90%;
  max-width: 700px;
}

.bg-hero .pf-hero-placeholder__title h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

.bg-hero .pf-hero-placeholder__title h1 em {
  color: var(--pf-accent);
  font-style: normal;
}

.bg-hero__logo {
  width: clamp(150px, 25vw, 240px);
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}

.bg-hero__tagline {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  color: rgba(255,255,255,0.6);
  margin-top: 1.5rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Scroll indicator — bottom center */
.bg-hero .pf-hero-placeholder__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: bgScrollBounce 2s ease-in-out infinite;
}

@keyframes bgScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}


/* ===== UNIQUE: FLOATING SQUIGGLES ===== */

.bg-unique__squiggles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-unique__squiggle {
  position: absolute;
  opacity: 0.12;
}

.bg-unique__squiggle--1 { width: 180px; top: 8%; left: 5%; --r: 25deg; animation: bgFloat1 5.5s ease-in-out infinite; }
.bg-unique__squiggle--2 { width: 120px; top: 15%; right: 8%; --r: -40deg; animation: bgFloat2 6.2s ease-in-out -1.2s infinite; }
.bg-unique__squiggle--3 { width: 200px; top: 55%; left: -2%; --r: 60deg; opacity: 0.08; animation: bgFloat1 7s ease-in-out -2.5s infinite; }
.bg-unique__squiggle--4 { width: 100px; top: 35%; right: 15%; --r: -15deg; animation: bgFloat2 4.8s ease-in-out -0.8s infinite; }
.bg-unique__squiggle--5 { width: 150px; bottom: 15%; left: 12%; --r: 45deg; animation: bgFloat1 5s ease-in-out -3s infinite; }
.bg-unique__squiggle--6 { width: 90px; bottom: 20%; right: 5%; --r: -70deg; opacity: 0.15; animation: bgFloat2 6.8s ease-in-out -1.8s infinite; }
.bg-unique__squiggle--7 { width: 160px; top: 70%; left: 40%; --r: 30deg; opacity: 0.06; animation: bgFloat1 5.8s ease-in-out -4s infinite; }
.bg-unique__squiggle--8 { width: 110px; top: 5%; left: 55%; --r: -50deg; opacity: 0.10; animation: bgFloat2 6s ease-in-out -2s infinite; }

@keyframes bgFloat1 {
  0%, 100% { transform: rotate(var(--r, 25deg)) translate(0, 0); }
  50% { transform: rotate(var(--r, 25deg)) translate(30px, -45px); }
}

@keyframes bgFloat2 {
  0%, 100% { transform: rotate(var(--r, -40deg)) translate(0, 0); }
  50% { transform: rotate(var(--r, -40deg)) translate(-25px, 35px); }
}


/* ===== CTA floating squiggles ===== */
.bg-cta__squiggles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ===== DESIGN SCROLL: constrain tall image ===== */

.pf-design-scroll__right img {
  width: 100%;
  height: auto;
}


/* ===== CTA: STATIC BACKGROUND COVER ===== */

.pf-cta--static .pf-cta__bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  opacity: 0.2;
  mix-blend-mode: multiply;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {
  .bg-hero__grid {
    width: 180%;
    gap: 8px;
  }

  .bg-hero__row {
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .bg-hero {
    height: 80vh;
    min-height: 500px;
  }

  .bg-hero__grid {
    width: 200%;
    gap: 6px;
  }

  .bg-hero__row {
    gap: 6px;
  }

  .bg-unique__squiggle {
    display: none;
  }
}

@media (max-width: 480px) {
  .bg-hero__grid {
    width: 240%;
    gap: 5px;
  }

  .bg-hero__row {
    gap: 5px;
  }
}