/* Bezalel — Team Bezalel hero: the client's illustration IS the hero, full-bleed;
   text is printed straight onto its blank left side. Sequencing lives in js/team-hero.js.
   All colour/timing knobs are custom properties on .team-hero — edit here only. */

.team-hero{
  --th-terracotta:#D98F6F;
  --th-gold:#E0A94E;
  --th-bg-1:#FCF7EE;

  --th-text-step:130ms;

  position:relative;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  overflow:hidden;
  min-height:640px;
  display:flex;align-items:center;
  background:var(--th-bg-1) url('../assets/images/team-hero-multi.png') right center / cover no-repeat;
  padding:48px 24px;
}
@media (max-width:900px){
  .team-hero{min-height:560px;padding:40px 20px;background-position:68% center;}
}

/* Desktop: solid banner (cream, matching this page's own background) instead of a floating
   transparent overlay. .team-hero uses margin-top rather than padding so the whole box
   shifts down as one unit — the internal flex vertical-centering of .team-hero-text stays
   untouched. Mobile keeps the original fixed overlay + hamburger untouched. */
.topnav:not(.solid) .brand{color:var(--navy);}
.topnav:not(.solid) .nav-links a{color:var(--navy);}
.topnav:not(.solid) .nav-links a.active{color:var(--gold);}
.topnav:not(.solid) .nav-toggle span{background:var(--navy);}
@media (min-width:861px){
  .topnav,.topnav.solid{
    background:color-mix(in srgb, var(--cream) 82%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 20px rgba(23,59,98,.08);
  }
  .team-hero{margin-top:var(--nav-h);}
}

/* soft cream fade over the image's own blank side — keeps text legible no matter how
   tightly `cover` ends up cropping the photo at a given viewport ratio. */
.th-scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(252,247,238,.9) 0%,rgba(252,247,238,.55) 38%,rgba(252,247,238,0) 62%);
}
@media (max-width:900px){
  .th-scrim{background:linear-gradient(90deg,rgba(252,247,238,.94) 0%,rgba(252,247,238,.6) 46%,rgba(252,247,238,0) 72%);}
}

/* ---------- layout ---------- */
.team-hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;width:100%;}
.team-hero-text{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:440px;}
@media (max-width:900px){
  .team-hero-text{max-width:280px;}
}
.th-heading{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(36px,4.8vw,56px);color:var(--navy-deeper);
  margin:0 0 14px;letter-spacing:-.01em;
  opacity:0;transform:translateY(22px) scale(.96);filter:blur(6px);
  transition:opacity 650ms cubic-bezier(.16,.72,.28,1),transform 650ms cubic-bezier(.16,.72,.28,1),filter 650ms ease;
}
.th-subhead{
  position:relative;display:inline-block;
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(18px,2vw,23px);color:var(--th-terracotta);
  margin:0 0 26px;padding-bottom:10px;
  opacity:0;transform:translateY(16px);
  transition:opacity 450ms ease,transform 450ms ease;
}
.th-subhead::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--th-terracotta);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 550ms cubic-bezier(.16,.72,.28,1) .15s;
}
.team-hero.text-subhead-in .th-subhead::after{transform:scaleX(1);}
.th-paragraph{margin:0;font-size:16px;font-weight:500;line-height:1.75;color:var(--navy);}
.th-paragraph .th-line{display:block;opacity:0;transform:translateY(18px);transition:opacity 500ms ease,transform 500ms cubic-bezier(.16,.72,.28,1);}
.th-paragraph .th-line:nth-child(2){transition-delay:.12s;}
.th-paragraph .th-line:nth-child(3){transition-delay:.24s;}

.team-hero.text-heading-in .th-heading{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
.team-hero.text-subhead-in .th-subhead{opacity:1;transform:translateY(0);}
.team-hero.text-para-in .th-line{opacity:1;transform:translateY(0);}

/* ---------- floating particles (idle only) ---------- */
.th-particles{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;z-index:0;}
.team-hero.idle .th-particles{opacity:1;}
.th-particle{position:absolute;border-radius:50%;background:var(--th-gold);opacity:.35;}
.team-hero.idle .th-particle{animation:th-particle-float 9s ease-in-out infinite;}
@keyframes th-particle-float{
  0%,100%{transform:translate(0,0);opacity:.25;}
  50%{transform:translate(var(--pdx,10px),var(--pdy,-18px));opacity:.55;}
}

/* ---------- reduced motion: land in final state, no motion at all ---------- */
@media (prefers-reduced-motion:reduce){
  .th-heading,.th-subhead,.th-subhead::after,.th-paragraph .th-line{transition:none !important;}
  .team-hero.idle .th-particle{animation:none !important;}
}