/* ==========================================================================
   Donis — animated background + typographic hero
   Loaded AFTER site.css so it supersedes the old photo hero.
   ========================================================================== */

/* ---------- BACKGROUND FX: fixed, sits behind the whole page ------------- */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  /* own compositor layer so scrolling never repaints the blurred blobs */
  transform:translateZ(0);backface-visibility:hidden;contain:layout paint;
  background:
    radial-gradient(130% 85% at 50% -12%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 62%),
    radial-gradient(90% 60% at 100% 108%,color-mix(in srgb,var(--accent-deep) 55%,transparent),transparent 62%)}

.blob{position:absolute;border-radius:50%;filter:blur(92px);will-change:transform}
.b1{width:54vw;height:54vw;min-width:420px;min-height:420px;top:-18vh;left:-14vw;
  background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 68%);
  animation:bd1 32s ease-in-out infinite alternate}
.b2{width:46vw;height:46vw;min-width:340px;min-height:340px;top:24vh;right:-18vw;
  background:radial-gradient(circle at 55% 45%,color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 68%);
  animation:bd2 40s ease-in-out infinite alternate}
.b3{width:60vw;height:60vw;min-width:440px;min-height:440px;bottom:-26vh;left:20vw;
  background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--accent-deep) 62%,transparent),transparent 70%);
  animation:bd3 36s ease-in-out infinite alternate}
@keyframes bd1{to{transform:translate3d(11vw,9vh,0) scale(1.2)}}
@keyframes bd2{to{transform:translate3d(-13vw,14vh,0) scale(.88)}}
@keyframes bd3{to{transform:translate3d(9vw,-11vh,0) scale(1.22)}}

.mesh{position:absolute;inset:0;opacity:.55;
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(125% 72% at 50% 0%,#000 8%,transparent 70%);
  mask-image:radial-gradient(125% 72% at 50% 0%,#000 8%,transparent 70%)}

/* slow rotating light sweep */
.sweep{position:absolute;top:50%;left:50%;width:170vmax;height:170vmax;translate:-50% -50%;opacity:.3;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb,var(--accent) 28%,transparent) 42deg,
    transparent 96deg,
    transparent 250deg,
    color-mix(in srgb,var(--accent-2) 16%,transparent) 296deg,
    transparent 344deg);
  -webkit-mask-image:radial-gradient(circle,#000 8%,transparent 62%);
  mask-image:radial-gradient(circle,#000 8%,transparent 62%);
  animation:sweepSpin 58s linear infinite}
@keyframes sweepSpin{to{rotate:360deg}}

/* drifting shine motes (injected by app.js) */
.bgfx .mote{position:absolute;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 8px 1px color-mix(in srgb,var(--accent-2) 75%,transparent);
  opacity:0;will-change:transform,opacity;animation:moteUp linear infinite}
@keyframes moteUp{
  0%{opacity:0;transform:translate3d(0,4vh,0) scale(.5)}
  14%{opacity:.85}
  70%{opacity:.4}
  100%{opacity:0;transform:translate3d(4vw,-96vh,0) scale(1.15)}}

/* ---------- HERO: pure type, doubles as the site intro ------------------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--nav-h) + 44px) 0 clamp(3.2rem,9vw,5.5rem);
  overflow:hidden;isolation:isolate}

/* breathing spotlight behind the wordmark */
.hero::before{content:"";position:absolute;top:44%;left:50%;translate:-50% -50%;
  width:min(88vw,860px);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 64%);
  animation:spot 7s ease-in-out infinite}
@keyframes spot{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.1);opacity:1}}

.hero-in{display:flex;flex-direction:column;align-items:center;max-width:900px}

.hero-eyebrow{display:inline-flex;align-items:center;gap:11px;margin-bottom:clamp(1.1rem,3vw,1.8rem);
  font-family:var(--font);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);opacity:0;animation:hFade .8s cubic-bezier(.16,1,.3,1) .15s forwards}
.hero-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--accent);font-style:normal;
  box-shadow:0 0 10px var(--accent)}

/* the wordmark IS the logo — Archivo at max width, near-max weight */
.wordmark{font-family:'Archivo','Archivo Black',var(--disp),sans-serif;
  font-weight:800;font-stretch:125%;font-variation-settings:'wdth' 125,'wght' 800;
  line-height:.86;font-size:clamp(3.1rem,15.5vw,11rem);letter-spacing:-.022em;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--accent-deep) 70%,var(--text)) 0%,
    var(--text) 24%,
    #ffffff 38%,
    var(--accent-2) 50%,
    var(--text) 62%,
    color-mix(in srgb,var(--accent-deep) 70%,var(--text)) 100%);
  background-size:300% 100%;background-position:110% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 42px color-mix(in srgb,var(--accent) 42%,transparent));
  opacity:0;transform:translateY(26px) scale(.96);
  animation:wmIn 1.15s cubic-bezier(.16,1,.3,1) .3s forwards,
            wmSheen 5s linear 1.5s infinite}
@keyframes wmIn{to{opacity:1;transform:none}}
@keyframes wmSheen{from{background-position:110% 0}to{background-position:-190% 0}}

/* hairline + tagline under the name */
.hero-rule{height:1px;width:0;margin:clamp(.9rem,2.4vw,1.4rem) 0 clamp(.8rem,2vw,1.1rem);
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:ruleGrow 1s cubic-bezier(.16,1,.3,1) .95s forwards}
@keyframes ruleGrow{to{width:min(420px,72vw)}}

.hero-tag{font-family:var(--font);font-size:clamp(.7rem,2.1vw,.88rem);font-weight:600;
  letter-spacing:.4em;text-transform:uppercase;color:var(--accent);padding-left:.4em;
  opacity:0;animation:hFade .8s cubic-bezier(.16,1,.3,1) 1.05s forwards}

.hero .lede{color:var(--muted);max-width:46ch;margin-top:clamp(1.2rem,3vw,1.8rem);text-wrap:pretty;
  opacity:0;animation:hFade .8s cubic-bezier(.16,1,.3,1) 1.25s forwards}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(1.6rem,3.5vw,2.2rem);
  opacity:0;animation:hFade .8s cubic-bezier(.16,1,.3,1) 1.4s forwards}
@keyframes hFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* words-only service router, right in the hero */
.hero-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;
  margin-top:clamp(1.9rem,4vw,2.6rem);max-width:780px;
  opacity:0;animation:hFade .8s cubic-bezier(.16,1,.3,1) 1.55s forwards}
.hero-chips .grp{font-size:.61rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);padding:0 2px}
.hero-chips a{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:99px;
  font-size:.86rem;font-weight:500;color:var(--text);
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 60%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color .22s,background .22s,color .22s,transform .16s}
.hero-chips a:active{transform:scale(.96)}
@media(hover:hover){.hero-chips a:hover{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}}

.scroll-hint{position:absolute;left:50%;bottom:clamp(16px,3vw,26px);translate:-50% 0;display:flex;
  flex-direction:column;align-items:center;gap:8px;border:0;width:auto;height:auto;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
  opacity:0;animation:hFade .8s cubic-bezier(.16,1,.3,1) 1.9s forwards}
.scroll-hint .rail{width:20px;height:32px;border:1px solid var(--line-2);border-radius:99px;position:relative}
.scroll-hint .rail i{position:absolute;left:50%;top:7px;translate:-50% 0;width:3px;height:6px;border-radius:2px;
  background:var(--accent);animation:sdot 1.9s ease-in-out infinite}
@keyframes sdot{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(11px);opacity:.15}}
@media(max-width:640px){.scroll-hint{display:none}}

/* ---------- NAV: wordmark, no generic icon ------------------------------ */
.brand{display:flex;align-items:baseline;gap:9px;margin-right:auto;min-width:0}
.brand b{font-family:'Archivo','Archivo Black',var(--disp),sans-serif;font-weight:800;
  font-stretch:125%;font-variation-settings:'wdth' 125,'wght' 800;
  font-size:1.1rem;letter-spacing:.005em;text-transform:uppercase;line-height:1}
.brand .rule{width:1px;height:15px;background:var(--line-2);flex:none;align-self:center}
.brand small{font-family:var(--font);font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(max-width:520px){.brand .rule,.brand small{display:none}}

/* ---------- PHONE PERFORMANCE -------------------------------------------
   Three 90px-blur blobs + a spinning conic sweep + two backdrop-filters is
   more than a mid-range phone can composite at 60fps while scrolling.
   Keep the look, cut the cost.
   ------------------------------------------------------------------------ */
@media(max-width:820px){
  .sweep{display:none}                 /* conic gradient is the most expensive layer */
  .b2{display:none}                    /* two blobs read the same as three at this size */
  .blob{filter:blur(58px)}
  .mesh{opacity:.32;background-size:54px 54px}
  .grain{display:none}                 /* full-screen mix-blend-mode recomposites every frame */
  /* opaque bars instead of live backdrop blur */
  .nav.stuck{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .mbar{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-chips a{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:color-mix(in srgb,var(--surface) 88%,transparent)}
  .btn-ghost{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---------- reduced motion ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .blob,.sweep,.bgfx .mote,.hero::before{animation:none}
  .bgfx .mote{opacity:.4}
  .wordmark{opacity:1;transform:none;animation:none;background-position:0 0}
  .hero-eyebrow,.hero-tag,.hero .lede,.hero-cta,.hero-chips,.scroll-hint{opacity:1;animation:none}
  .hero-rule{width:min(420px,72vw);animation:none}
}