/* brandon.house — custom effect layer (works alongside theme.json + core blocks) */

:root{
  --bh-lime:#C6F03C;
  --bh-blue:#3D5AF1;
  --bh-muted:#8f98c2;
  --bh-line:rgba(244,246,255,.10);
  --bh-navy:#0A0E27;
  --bh-navy2:#0e1433;
  /* static fill for solid shapes */
  --bh-grad:linear-gradient(100deg,#EEF52B 0%,#79C82D 45%,#26AAB0 100%);
  /* high-contrast palindrome (teal<->yellow) for a visible looping sweep */
  --bh-grad-anim:linear-gradient(100deg,#26AAB0 0%,#7AC92C 18%,#EEF52B 40%,#C6F03C 50%,#EEF52B 60%,#7AC92C 82%,#26AAB0 100%);
}

html{scroll-behavior:smooth}
body{overflow-x:hidden;position:relative}

/* subtle film grain */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wp-site-blocks{position:relative;z-index:2}
::selection{background:var(--bh-lime);color:var(--bh-navy)}

/* ===== animated gradient (text + solid) ===== */
.grad,.grad-block,.srv h3{
  background:var(--bh-grad-anim);background-size:200% auto;background-repeat:repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:bh-grad-shift 3.5s linear infinite;
  will-change:background-position;
}
@keyframes bh-grad-shift{from{background-position:0% 50%}to{background-position:200% 50%}}

/* ---------- NAV (full width, logo left / actions right; keyed to block classes so the editor matches) ---------- */
.wp-block-template-part.header{position:sticky;top:0;z-index:50;background:var(--bh-navy);border-bottom:none}
/* the sticky bar sits above the body grain, so give it the same grain to match exactly */
.wp-block-template-part.header::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wp-block-template-part.header>*{position:relative;z-index:1}
/* bar spans the viewport; its contents sit in the shared wide column */
.wp-block-template-part.header>.header-wrap,
.header-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:var(--wp--style--global--wide-size,96rem)!important;width:100%;
  margin-left:auto!important;margin-right:auto!important;
  padding:1.1rem 0;box-sizing:border-box;
}
.header-wrap .logo{margin:0;display:flex;align-items:center}
.header-wrap .logo img,.header-wrap .logo svg{height:54px;width:auto;display:block}
.header-wrap .nav-right{display:flex;align-items:center;gap:1.6rem}
/* kill core's block gap so the note and the button share one vertical center */
.header-wrap .nav-right>*{margin-top:0!important;margin-bottom:0!important}
.header-wrap .nav-note{margin:0;font-size:.82rem;color:var(--bh-muted);letter-spacing:.04em}
.header-wrap .nav-note a{color:var(--bh-lime);text-decoration:none}
/* CONTACT button = animated signature gradient */
.header-wrap .wp-block-button__link{
  background:var(--bh-grad-anim)!important;background-size:200% auto!important;
  color:var(--bh-navy)!important;border:none!important;
  animation:bh-grad-shift 3.5s linear infinite;
  transition:transform .25s,box-shadow .25s;
}
.header-wrap .wp-block-button__link:hover{
  transform:translateY(-2px);box-shadow:0 8px 26px rgba(198,240,60,.28);
}

/* let alignfull children escape: the post-content wrapper itself must not be capped
   (its children keep their own constrained max-width, so other sections stay put) */
/* ===== one shared "wide" column (wideSize) for header, content and footer ===== */
main.main{max-width:none!important}
.wp-block-post-content{
  max-width:var(--wp--style--global--wide-size,96rem)!important;
  margin-left:auto!important;margin-right:auto!important;
}
/* sections fill that column; their children are not re-capped or re-centered */
.hero,.statement-block,.services,.fame,.hello{padding-left:0!important;padding-right:0!important}
.statement-block>*,.services>*,.fame>*{max-width:none!important;margin-left:0!important;margin-right:0!important}

/* ---------- HERO (full-bleed, tight vertical rhythm) ---------- */
/* legacy css/styles.css sets .hero{padding-top:120px} and loads after this file */
.hero{
  max-width:none!important;width:100%;margin-inline:0;
  padding-top:clamp(.5rem,1vw,1rem)!important;padding-bottom:clamp(1rem,2vw,2rem)!important;
}
.hero .avatar-stage,.hero .hero-copy{margin-top:0!important}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;max-width:none}
.hero .kicker{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bh-muted);margin:0 0 1.4rem;
}
/* core/image avatar behaves like the old bare <img> */
.avatar-stage .wp-block-image{display:contents}
/* neutralise flow gaps inside the grids so blocks align like the design */
.statement-grid>*,.reel>.reel-item,.reel-item>*{margin-top:0}
.hero .kicker a{color:var(--bh-lime);text-decoration:none}
.hero h1{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:clamp(2.6rem,5.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;margin:0;
}
/* oval is flush to the right edge of the wide column (in line with the CONTACT button),
   and the avatar stays centered over it */
.avatar-stage{
  /* scales up on larger screens; avatar keeps a constant ratio to the oval */
  --bh-oval-w:clamp(220px,24vw,520px);
  --bh-av-w:calc(var(--bh-oval-w) * 1.63);
  position:relative;display:flex;justify-content:flex-end;align-items:center;min-height:0;overflow:visible;
}
.avatar-stage::before{
  content:"";position:absolute;right:0;top:0;bottom:0;margin-block:auto;
  width:var(--bh-oval-w);height:calc(var(--bh-oval-w) / .66);border-radius:9999px;
  background:linear-gradient(180deg,#27ABB1 0%,#7AC92C 52%,#EEF52B 100%);background-size:100% 220%;
  z-index:0;animation:bh-pulse 6s ease-in-out infinite,bh-capshift 8s ease-in-out infinite;
}
.avatar-stage img{
  position:relative;z-index:2;width:var(--bh-av-w);max-width:none;height:auto;
  margin-right:calc((var(--bh-oval-w) - var(--bh-av-w)) / 2);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.45));animation:bh-float 6s ease-in-out infinite;
}
@keyframes bh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes bh-pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.05);opacity:1}}
@keyframes bh-capshift{0%,100%{background-position:50% 0%}50%{background-position:50% 100%}}

/* ---------- SECTION RHYTHM ---------- */
.statement-block{padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(2rem,5vw,4rem)}
.services{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.fame{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.hello{padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
footer.wp-block-template-part.footer{margin-top:2rem}

/* ---------- STATEMENT + BIO (two-column, gradient) ---------- */
/* first column hugs the statement text so the callout sits close beside it */
.statement-grid{display:grid;grid-template-columns:fit-content(46%) minmax(0,1fr);gap:clamp(1.25rem,2.5vw,2.75rem);align-items:start}
.statement-grid .statement{
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.14;letter-spacing:-.015em;margin:0;max-width:18ch;
}
.statement-grid .callout{
  font-family:'Poppins',sans-serif;font-weight:700;color:#F4F6FF;
  font-size:clamp(1.45rem,2.3vw,2.1rem);line-height:1.45;margin:.35rem 0 0;max-width:24ch;
}
.bio.grad-block{
  font-family:'Poppins',sans-serif;font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.5;letter-spacing:-.005em;max-width:64ch;
  margin:clamp(3rem,6vw,6rem) 0 0;
}

/* ---------- SECTION LABEL ---------- */
.section-label{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--bh-muted);
  display:flex;align-items:center;gap:1rem;margin:0 0 2.5rem;
}
.section-label::before{content:"";width:34px;height:2px;background:var(--bh-lime);flex:0 0 auto}
/* no section divider lines anywhere */
.rule-top{border-top:none!important}

/* ---------- SERVICES ---------- */
.srv{
  display:grid;grid-template-columns:.5fr 1fr;gap:2rem;align-items:baseline;
  padding:1.7rem 0;border-bottom:1px solid var(--bh-line);
}
.srv h3{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;margin:0;
}
.srv p{color:#c2c9ea;font-size:1rem;line-height:1.6;margin:0}
/* avoid a double rule where the last service row meets the next section's top border */
.services .srv:last-child{border-bottom:none}

/* ---------- HALL OF FAME ---------- */
.marquee{
  overflow:hidden;margin:0 0 3rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.m-track{display:flex;width:max-content;animation:bh-scroll 42s linear infinite}
.m-track span{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.1rem,2vw,1.6rem);
  color:#F4F6FF;white-space:nowrap;padding:0 1.6rem;opacity:.9;
}
.m-track span::after{content:"\2726";color:var(--bh-lime);margin-left:1.6rem;font-size:.7em;vertical-align:middle}
@keyframes bh-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.reel-item{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem;align-items:baseline;
  padding:1.3rem 0;border-bottom:1px solid var(--bh-line);
}
.reel-item:first-child{border-top:1px solid var(--bh-line)}
.reel-item .r-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.15rem;margin:0;color:#F4F6FF}
.reel-item .r-desc{color:var(--bh-muted);font-size:.98rem;line-height:1.5;margin:0;text-align:right}
.reel .reel-item:last-child{border-bottom:none}

/* ---------- CONTACT ---------- */
.hello{text-align:center}
.hello h2{font-family:'Poppins',sans-serif;font-weight:900;font-size:clamp(2.4rem,6vw,4.5rem);line-height:1;letter-spacing:-.02em;margin:0}
.hello .sub{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.3rem,3vw,2rem);margin-top:.4rem}
.hello .hello-lede{color:var(--bh-muted);max-width:44ch;margin:1.4rem auto 0;line-height:1.6}
.hello .gform_wrapper{max-width:620px;margin:2.6rem auto 0;text-align:left}
.hello .gform_wrapper form{display:flex;flex-direction:column;gap:1rem}

/* Gravity Forms dark theme */
.hello .gfield_label{color:var(--bh-muted);font-family:'Inter',sans-serif;font-weight:500;font-size:.85rem}
.hello .ginput_container input,
.hello .ginput_container textarea,
.hello .ginput_container select{
  width:100%;background:var(--bh-navy2)!important;border:1px solid var(--bh-line)!important;border-radius:14px!important;
  padding:1rem 1.1rem!important;color:#F4F6FF!important;font-family:'Inter',sans-serif;font-size:1rem;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease;
}
.hello .ginput_container input::placeholder,
.hello .ginput_container textarea::placeholder{color:#6f77a0;transition:color .25s ease}
/* hover: lift text + placeholder contrast */
.hello .ginput_container input:hover,
.hello .ginput_container textarea:hover,
.hello .ginput_container select:hover{
  border-color:rgba(198,240,60,.45)!important;background:#121a40!important;color:#ffffff!important;
}
.hello .ginput_container input:hover::placeholder,
.hello .ginput_container textarea:hover::placeholder{color:#b3bce4}
/* focus: full-opacity lime pulse */
.hello .ginput_container input:focus,
.hello .ginput_container textarea:focus,
.hello .ginput_container select:focus{
  outline:none;border-color:var(--bh-lime)!important;color:#ffffff!important;
  animation:bh-input-pulse 1.5s ease-in-out infinite;
}
@keyframes bh-input-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(198,240,60,0)}
  50%{box-shadow:0 0 0 3px rgba(198,240,60,1),0 0 14px 1px rgba(198,240,60,.85)}
}
.hello .gform_footer{display:flex;justify-content:center;margin-top:.4rem}
.hello .gform_button{
  background:var(--bh-grad-anim)!important;background-size:200% auto!important;
  color:var(--bh-navy)!important;border:none!important;font-family:'Poppins',sans-serif!important;font-weight:800!important;font-size:1rem!important;
  padding:1rem 2.4rem!important;border-radius:100px!important;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;
  transition:transform .25s,box-shadow .25s;animation:bh-grad-shift 3.5s linear infinite;
}
.hello .gform_button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(198,240,60,.3)}
.hello .gfield_required,
.hello .gfield_required_text{color:var(--bh-muted)!important}
/* ---- error states: lime, rounded, navy text (override Gravity Forms' red) ---- */
/* broad (unscoped) so it beats GF's own red border/outline wherever it renders */
.gform_wrapper .gform_validation_errors,
.hello .gform_wrapper .gform_validation_errors{
  background:var(--bh-lime)!important;border:2px solid var(--bh-lime)!important;
  border-radius:16px!important;box-shadow:none!important;outline:none!important;
  padding:1rem 1.2rem!important;margin-bottom:1.2rem!important;
}
.gform_wrapper.gform_validation_error,
.gform_wrapper .gform_validation_error{border:none!important;outline:none!important;box-shadow:none!important}
.hello .gform_wrapper .gform_validation_errors>h2,
.hello .gform_wrapper .gform_validation_errors .gform_submission_error,
.hello .gform_wrapper .gform_validation_errors ol li,
.hello .gform_wrapper .gform_validation_errors ol li a{
  color:var(--bh-navy)!important;background:transparent!important;border:none!important;
  text-decoration:none!important;font-family:'Inter',sans-serif;
}
.hello .gform_wrapper .gform_validation_errors ol li a:hover{text-decoration:underline!important}
/* hide GF's warning icon entirely */
.hello .gform_wrapper .gform_validation_errors .gform-icon,
.hello .gform_wrapper .gform_submission_error .gform-icon,
.hello .gform_wrapper .gform_validation_errors svg,
.hello .gform_wrapper .gform_submission_error::before,
.hello .gform_wrapper .gform_validation_errors::before{display:none!important}
.hello .gform_wrapper .gform_submission_error{padding-left:0!important}

/* per-field messages */
.hello .gform_wrapper .validation_message,
.hello .gform_wrapper .gfield_validation_message,
.hello .gform_wrapper .gfield_error .validation_message{
  background:var(--bh-lime)!important;color:var(--bh-navy)!important;
  border:none!important;border-radius:12px!important;padding:.7rem .9rem!important;margin-top:.5rem!important;
  font-family:'Inter',sans-serif;font-size:.9rem;
}
/* the field itself when errored */
.hello .gform_wrapper .gfield_error input,
.hello .gform_wrapper .gfield_error textarea,
.hello .gform_wrapper .gfield_error select{border-color:var(--bh-lime)!important}
.hello .gform_wrapper .gfield_error .gfield_label,
.hello .gform_wrapper .gfield_error legend{color:var(--bh-lime)!important}

/* ---------- FOOTER (big gradient circle clipped at the bottom; keyed to block classes for editor parity) ---------- */
.footer-wrap{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;
  max-width:var(--wp--style--global--wide-size,96rem);margin-inline:auto;
  padding:2.4rem 0;box-sizing:border-box;
  min-height:480px;overflow:hidden;
}
.footer-wrap .logo{margin:0;display:flex;align-items:center;position:relative;z-index:2}
.footer-wrap .logo img,.footer-wrap .logo svg{height:52px;width:auto;display:block}
/* NOTE: the theme's legacy css/styles.css sets `.footer-wrap p{opacity:.25;color:blue}`
   and `.footer p{text-align:center}` — these must out-specify it. */
.footer-wrap .foot-copy{
  position:relative;z-index:2;font-size:.8rem;line-height:1.8;
  margin-left:auto;text-transform:none!important;letter-spacing:normal!important;
}
.footer-wrap .foot-copy,
.footer-wrap .foot-copy p,
.footer-wrap .foot-copy .wp-block-create-block-unbox-copyright{
  color:#F4F6FF!important;opacity:1!important;text-align:right!important;margin:0!important;
  text-transform:none!important;letter-spacing:normal!important;
}
.footer-wrap .foot-copy a,
.footer-wrap .foot-copy p a{color:var(--bh-lime)!important;opacity:1!important;text-decoration:none}
.footer-wrap .foot-copy a:hover{text-decoration:underline}
/* the avatar + circle: centered, big, spilling past the bottom edge */
.foot-avatar{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:520px;z-index:1;pointer-events:none;margin:0}
.foot-avatar .wp-block-image{display:contents}
.foot-avatar::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:96px;
  width:500px;height:500px;border-radius:50%;
  background:linear-gradient(160deg,#27ABB1 0%,#7AC92C 52%,#EEF52B 100%);background-size:100% 220%;z-index:0;
  animation:bh-capshift 8s ease-in-out infinite;
}
.foot-avatar img{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);width:460px;height:auto;z-index:1;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.4));
}

/* ---------- REVEAL (gated on JS so no-JS users still see content) ---------- */
.bh-js .rv{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}
.bh-js .rv.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr!important}
  .avatar-stage{order:-1;min-height:300px}
  .statement-grid{grid-template-columns:1fr;gap:1.4rem}
  .srv{grid-template-columns:1fr;gap:.4rem}
  .reel-item{grid-template-columns:1fr;gap:.3rem}
  .nav-note{display:none}
  .wp-block-template-part.header .logo svg{height:42px}
  .wp-block-template-part.footer .footer-wrap{min-height:320px;padding-top:1.4rem}
  .wp-block-template-part.footer .logo svg{height:34px}
  .foot-avatar{width:330px}
  .foot-avatar::before{width:300px;height:300px;top:70px}
  .foot-avatar img{width:290px;top:8px}
  .foot-copy{font-size:.68rem}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .avatar-stage img,.avatar-stage::before,.m-track,.grad,.grad-block,.srv h3,
  .foot-avatar::before,.gform_button,.wp-block-template-part.header .wp-block-button__link{animation:none!important}
  .grad,.grad-block,.srv h3{background:var(--bh-grad);background-size:100% auto}
  .hello .ginput_container input:focus,
  .hello .ginput_container textarea:focus{animation:none!important}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
}