/* =====================================================================
   Dynamite Ventures — FLAIR layer (loaded after style.css)
   Amplifies the home page and adds atmosphere across the site.
   ===================================================================== */

/* ---------- HERO atmosphere ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 78% 46%, color-mix(in srgb,var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(90% 80% at 16% 28%, color-mix(in srgb,var(--blue) 12%, transparent), transparent 60%),
    var(--ink);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero__scrim{
  z-index:1;
  background:
    linear-gradient(100deg,var(--ink) 24%, color-mix(in srgb,var(--ink) 42%, transparent) 54%, transparent 78%),
    linear-gradient(0deg,var(--ink), transparent 28%);
}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 240px 70px rgba(3,10,18,.85)}
.hero__inner{z-index:2}

/* eyebrow pulsing dot */
.hero__eyebrow .pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  display:inline-block;margin-left:2px;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent);
  animation:dotpulse 2.6s ease-out infinite}
@keyframes dotpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 65%,transparent)}
  70%{box-shadow:0 0 0 12px color-mix(in srgb,var(--accent) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}}

/* bigger, kinetic headline */
.hero__title{font-size:clamp(3rem,7.1vw,7rem);letter-spacing:-.035em}
.hero__title em{
  background:linear-gradient(100deg,var(--accent) 0%,var(--accent-hot) 38%,#EDFFD4 50%,var(--accent-hot) 62%,var(--accent) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 6.5s linear infinite}
@keyframes sheen{to{background-position:-260% 0}}

/* buttons: glow + sheen sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn:hover::after{left:140%}
.btn--primary{animation:btnpulse 3.6s ease-in-out infinite}
@keyframes btnpulse{
  0%,100%{box-shadow:0 10px 34px -12px rgba(116,200,28,.55)}
  50%{box-shadow:0 12px 48px -8px rgba(116,200,28,.85)}}

/* scroll cue a touch more alive (base already animates the line) */

/* ---------- TEASER cards: spotlight + tilt + glow border ---------- */
.tease{transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;
  transform-style:preserve-3d;will-change:transform}
.tease::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;
  pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
  color-mix(in srgb,var(--accent) 18%, transparent), transparent 62%)}
.tease:hover::after{opacity:1}
.tease:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:0 34px 70px -34px rgba(0,0,0,.75), 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.tease h3{transition:color .3s}
.tease:hover h3{color:var(--paper)}

/* ---------- STATEMENT band: gradient emphasis ---------- */
.band{background:
  radial-gradient(80% 120% at 82% 0%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 58%),
  radial-gradient(70% 120% at 10% 100%, color-mix(in srgb,var(--blue) 9%, transparent), transparent 60%),
  var(--ink)}
.band__quote b{
  background:linear-gradient(100deg,var(--accent),var(--accent-hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- INTERIOR page-heroes: soft glow so they feel richer ---------- */
.page-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(70% 130% at 88% 10%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(60% 120% at 4% 90%, color-mix(in srgb,var(--blue) 12%, transparent), transparent 62%),
    var(--ink)}
.page-hero::before{content:"";position:absolute;top:-40%;right:-6%;width:52%;height:170%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--accent) 22%, transparent), transparent 72%);
  filter:blur(6px);opacity:.9}
.page-hero .container{position:relative;z-index:1}

/* eyebrow line animates in on interior heroes */
.page-hero .eyebrow::before{animation:linegrow 1s cubic-bezier(.16,1,.3,1) both}
@keyframes linegrow{from{width:0;opacity:0}to{width:26px;opacity:.7}}

/* ---------- Section headline accents (thesis/approach/principles leads) ---------- */
.lead em, .thesis__lead em{
  background:linear-gradient(100deg,var(--accent),var(--accent-hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__title em{animation:none;background-position:0 0}
  .btn--primary{animation:none}
  .hero__eyebrow .pulse-dot{animation:none}
  .page-hero .eyebrow::before{animation:none;width:26px;opacity:.7}
  .btn::after{display:none}
}