/* ==========================================================================
   enhance.css  —  shared visual polish for the main interior pages
   --------------------------------------------------------------------------
   Loaded after site.css. Every rule is scoped with :is() to ONLY these four
   pages: about, consulting (Services), aigxp (AI in GxP), frameworks. It
   cannot affect the book, assessment, article, or any other page. It reuses
   the live brand tokens, adds no new fonts, and changes no markup: a page
   header aurora + grid texture, a gentle entrance, an eyebrow hairline, and
   button + card micro-interactions, to match the home page.
   ========================================================================== */

:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]){ --clay:#b4541e; --easeI:cubic-bezier(.22,.7,.2,1); --easeOutI:cubic-bezier(.16,1,.3,1); }

/* ----- page header / hero: depth, grid texture, drifting aurora --------- */
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero){ position:relative; overflow:hidden; }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(31,58,95,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,58,95,.05) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(120% 92% at 80% 18%,#000 20%,transparent 76%);
          mask-image:radial-gradient(120% 92% at 80% 18%,#000 20%,transparent 76%);
}
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero)::after{
  content:""; position:absolute; inset:-20% -10% auto auto; width:55%; height:130%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 50% at 75% 30%,rgba(14,124,107,.10),transparent 70%),radial-gradient(42% 42% at 88% 60%,rgba(31,58,95,.07),transparent 72%);
  animation:tbAuroraI 18s var(--easeI) infinite alternate;
}
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero) .wrap{ position:relative; z-index:1; }
@keyframes tbAuroraI{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-3%,2%) scale(1.06);} }

/* ----- gentle entrance on the header (CSS only; content always shows) --- */
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero) :is(.eyebrow,h1,p.sub,.ctas){ animation:tbRiseI .7s var(--easeOutI) both; }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero) h1{ animation-delay:.08s; }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero) p.sub{ animation-delay:.16s; }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero) .ctas{ animation-delay:.24s; }
@keyframes tbRiseI{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }

/* ----- signature: title underline draws itself in ---------------------- */
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero) h1{ position:relative; }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero) h1::after{
  content:""; display:block; width:0; height:3px; margin-top:16px; border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--teal-dk)); animation:tbDrawI .9s var(--easeOutI) .4s forwards;
}
@keyframes tbDrawI{ to{ width:66px; } }

/* ----- scroll reveal applied by enhance.js (no markup change) ----------- */
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]).tb-js .tb-rv{ opacity:0; transform:translateY(20px); }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .tb-rv.tb-in{ opacity:1; transform:none; transition:opacity .65s var(--easeOutI), transform .65s var(--easeOutI); }

/* ----- eyebrow hairline rule ------------------------------------------- */
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .eyebrow::before{
  content:""; display:inline-block; width:24px; height:1px; background:currentColor; vertical-align:middle; margin-right:10px; opacity:.55;
}

/* ----- buttons: lift + light sweep ------------------------------------- */
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .btn{ position:relative; overflow:hidden; }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -14px rgba(20,32,46,.5); }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.btn-primary,.btn-teal)::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-20deg);
  transition:left .6s var(--easeI); pointer-events:none;
}
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.btn-primary,.btn-teal):hover::after{ left:140%; }

/* ----- cards: animated accent bar + deeper hover ----------------------- */
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .card{ position:relative; overflow:hidden; }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .card::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--teal-dk)); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--easeOutI);
}
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .card:hover::before{ transform:scaleX(1); }
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .card:hover{ transform:translateY(-6px); box-shadow:0 22px 50px -28px rgba(20,32,46,.35); border-color:rgba(14,124,107,.4); }

/* ----- reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  :is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero)::after{ animation:none; }
  :is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero) :is(.eyebrow,h1,p.sub,.ctas){ animation:none; opacity:1; transform:none; }
  :is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .btn:hover,
  :is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) .card:hover{ transform:none; }
  :is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.btn-primary,.btn-teal)::after{ display:none; }
}