/* ===== DocsHound hero "scene" — hand-tuned scroll choreography =====
   Principles (per the art direction): restraint, transform/opacity only,
   one blue accent, full prefers-reduced-motion static state. */
.scene{position:relative}
.scene .mascot{position:relative;z-index:2}
.scene .mascot img{display:block;width:100%;height:auto}

/* 1) hero "inks itself in": wipe up + settle */
[data-scene] .mascot img{
  clip-path:inset(0 0 100% 0);
  opacity:0;transform:translateY(16px);
}
[data-scene].in .mascot img{
  clip-path:inset(0 0 0 0);opacity:1;transform:none;
  transition:clip-path .8s cubic-bezier(.22,1,.36,1),
             opacity .45s ease,
             transform .8s cubic-bezier(.22,1,.36,1);
}

/* 2) the one blue accent — shared "!" bubble pops last, with a single micro-bounce */
.scene-bubble{
  position:absolute;z-index:3;width:clamp(56px,13%,88px);height:auto;
  top:4%;right:7%;transform:scale(0);transform-origin:bottom left;opacity:0;
  filter:drop-shadow(0 8px 14px rgba(26,115,232,.22));
}
[data-scene].in .scene-bubble{animation:dhBubble .55s cubic-bezier(.34,1.56,.64,1) .85s forwards}
@keyframes dhBubble{0%{transform:scale(0);opacity:0}55%{opacity:1}100%{transform:scale(1);opacity:1}}

/* 3) loose ink marks — fade in, parallax on scroll (translateY set by JS) */
.scene-marks{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;will-change:transform}
.scene-marks .mk{opacity:0;transition:opacity .7s ease .3s}
[data-scene].in .scene-marks .mk{opacity:.5}

/* 4) hand-drawn ground line draws in under the dog */
.scene-ground{position:absolute;z-index:1;bottom:3%;left:50%;width:66%;
  transform:translateX(-50%) scaleX(0);transform-origin:center;opacity:0}
[data-scene].in .scene-ground{animation:dhGround .65s cubic-bezier(.22,1,.36,1) .55s forwards}
@keyframes dhGround{to{transform:translateX(-50%) scaleX(1);opacity:.8}}

/* reduced motion: everything in its gorgeous final state, no movement */
@media (prefers-reduced-motion: reduce){
  [data-scene] .mascot img{clip-path:none;opacity:1;transform:none;transition:none}
  .scene-bubble{animation:none;transform:scale(1);opacity:1}
  .scene-marks .mk{opacity:.5;transition:none}
  .scene-ground{animation:none;transform:translateX(-50%) scaleX(1);opacity:.8}
  .scene-marks{transform:none!important}
}

/* job beat: the one blue accent morphs ask("!") -> handled(check) on reveal */
.scene-bubble .b-ask,.scene-bubble .b-done{transform-origin:60px 42px}
.scene-bubble .b-done{opacity:0}
[data-scene].in .scene-bubble .b-ask{animation:dhAskOut .3s ease forwards var(--beat,2.2s)}
[data-scene].in .scene-bubble .b-done{animation:dhDoneIn .45s cubic-bezier(.34,1.56,.64,1) forwards var(--beat,2.2s)}
@keyframes dhAskOut{to{opacity:0;transform:scale(.5)}}
@keyframes dhDoneIn{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
[data-profile="firm"]{--beat:2.7s}[data-profile="practice"]{--beat:2.6s}[data-profile="portfolio"]{--beat:1.8s}
@media (prefers-reduced-motion: reduce){.scene-bubble .b-ask{opacity:1;animation:none}.scene-bubble .b-done{opacity:0;animation:none}}

/* optical-scale normalization: every industry dog sits to one baseline + height
   so /plumbing -> /law -> /restaurant feels like the same camera distance */
.scene .mascot{display:flex;justify-content:center;align-items:flex-end;min-height:clamp(300px,42vh,470px)}
.scene .mascot img,.scene-dog{width:auto;height:auto;max-height:clamp(300px,42vh,470px);max-width:100%}

/* ===== MOVEMENT: living mascot + cursor interaction ===== */
.scene{perspective:1100px}
/* reveal owns clip-path+opacity only; breathe owns transform on the img */
[data-scene] .mascot img,[data-scene].in .mascot img{transform:none}
.scene .mascot img{animation:dhBreathe 5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes dhBreathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.2%) rotate(.35deg)}}
/* cursor-reactive tilt (vars set by scene.js) */
.scene .mascot{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .3s ease-out;will-change:transform}
/* floating ink marks */
.scene-marks .mk{animation:dhFloat 6s ease-in-out infinite}
.scene-marks .mk:nth-child(2n){animation-duration:7.4s;animation-delay:-2s}
.scene-marks .mk:nth-child(3n){animation-duration:5.3s;animation-delay:-1s}
@keyframes dhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* module dogs: sizing + scroll reveal + hover life */
.agent-art{overflow:visible}
.agent-dog{width:auto;max-width:100%;height:auto;max-height:210px;display:block;margin:0 auto}
.agent-card{transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .55s ease}
.agent-card.rv{opacity:0;transform:translateY(28px)}
.agent-card.rv.in{opacity:1;transform:none}
/* module-dog hover-zoom removed — animation is hero-only (Fireflies feedback) */
@media (prefers-reduced-motion: reduce){
  .scene .mascot img{animation:none}
  .scene .mascot{transform:none !important}
  .scene-marks .mk{animation:none}
  .agent-card.rv{opacity:1;transform:none}
  .agent-dog,.agent-card{transition:none}
}

/* ===== scroll-SCRUBBED job beat: asked -> handled, driven by scroll (--p) ===== */
[data-scene].scrub .scene-bubble .b-ask{animation:none;opacity:clamp(0,calc((0.5 - var(--p,0))*6),1)}
[data-scene].scrub .scene-bubble .b-done{animation:none;opacity:clamp(0,calc((var(--p,0) - 0.45)*6),1);transform:scale(clamp(.3,calc(.3 + var(--p,0)*0.9),1))}
[data-scene].scrub .mascot img{} /* dog gives a small "working" nod as the beat progresses */
[data-scene].scrub .scene-ground{opacity:calc(.5 + var(--p,0)*.3)}
@media (prefers-reduced-motion: reduce){
  [data-scene].scrub .scene-bubble .b-ask{opacity:0}
  [data-scene].scrub .scene-bubble .b-done{opacity:1;transform:scale(1)}
}

/* peek banner "your" — intentional accent emphasis, clean spacing */
.peek-your{color:var(--accent);font-weight:700}
/* module-dog idle float + hover removed — animation is hero-only (Fireflies feedback) */
@media (prefers-reduced-motion: reduce){ .agents .agent-art{animation:none} }

/* ===== per-industry JOB BEAT: scroll works the dog through its request types ===== */
body.js-scrub .hero-tag{position:relative;transition:color .25s,border-color .25s,background .25s}
body.js-scrub .hero-tag:nth-child(1){--t:.08}
body.js-scrub .hero-tag:nth-child(2){--t:.17}
body.js-scrub .hero-tag:nth-child(3){--t:.26}
body.js-scrub .hero-tag:nth-child(4){--t:.35}
body.js-scrub .hero-tag:nth-child(5){--t:.44}
body.js-scrub .hero-tag:nth-child(6){--t:.53}
body.js-scrub .hero-tag:nth-child(7){--t:.62}
body.js-scrub .hero-tag{--d:clamp(0,calc((var(--p,0) - var(--t,1))*14),1)}
body.js-scrub .hero-tag{border-color:color-mix(in srgb, var(--accent) calc(var(--d)*100%), var(--edge));background:color-mix(in srgb, var(--tint) calc(var(--d)*100%), #fff)}
body.js-scrub .hero-tag::after{content:"✓";margin-left:6px;color:var(--accent);opacity:var(--d);font-weight:800}
@media (prefers-reduced-motion:reduce){ body.js-scrub .hero-tag::after{opacity:1} body.js-scrub .hero-tag{border-color:var(--accent)} }

/* pose-performance: the dog works through the beat (bob + lean), composed with cursor tilt */
.scene .mascot{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--bob,0px)) rotate(var(--lean,0deg));transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){ .scene .mascot{transform:none !important} }

/* ===== chips into the ink hand (Halli's last seam): sketchy hand-drawn borders ===== */
.hero-tag,.tag{border-width:1.8px;border-style:solid;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;background:#fff}
.hero-tag:nth-child(even){border-radius:15px 225px 15px 255px/225px 15px 255px 15px}
.hero-tag:nth-child(3n){border-radius:225px 15px 255px 15px/15px 255px 15px 225px}
body:not(.js-scrub) .hero-tag{border-color:var(--ink,#15213B)}
body.js-scrub .hero-tag{border-color:color-mix(in srgb, var(--accent) calc(var(--d,0)*100%), var(--ink,#15213B));background:color-mix(in srgb, var(--tint) calc(var(--d,0)*100%), #fff)}
.tag{border-color:var(--ink,#15213B);color:var(--ink,#15213B);background:#fff}
/* hand-drawn underline on nav links */
.nav>a:hover{text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%}

/* brush CTA + character dogs (replacing the last clipart) */
.cta-mascot .cta-dog{width:auto;max-height:150px !important;display:block;margin:0 auto}
.char-dog{width:auto;max-height:200px;display:block;margin:0 auto 4px}
/* outer char dogs face inward: 3rd (shop) flipped to face left (1st already faces right) */
.chars .char:nth-child(3) .char-dog{transform:scaleX(-1)}
/* char-dog hover-zoom removed — animation is hero-only (Fireflies feedback) */

/* rigged hero (plumbing): wrench layered over the raised paw, turns on scroll */
.scene .mascot[data-rig]{position:relative}
.scene .mascot[data-rig] .rig-body{position:relative;z-index:1}
.scene .mascot[data-rig] .rig-tool{position:absolute;z-index:2;left:53%;top:3%;width:15%;height:auto;transform-origin:50% 90%}
@media (prefers-reduced-motion:reduce){ .scene .mascot[data-rig] .rig-tool{transform:rotate(20deg)} }

/* per-kind rigged tool placement (overrides the single-rig rule) */
.scene .mascot[data-rig] .rig-tool{position:absolute;z-index:2;height:auto;left:auto;top:auto}
.scene .mascot[data-rig-kind="crank"] .rig-tool{left:11%;top:3%;width:17%;transform-origin:50% 88%}
.scene .mascot[data-rig-kind="stamp"] .rig-tool{left:17%;top:28%;width:14%;transform-origin:50% 100%}
.scene .mascot[data-rig-kind="lift"] .rig-tool{left:36%;top:40%;width:28%;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){
  .scene .mascot[data-rig-kind="crank"] .rig-tool{transform:rotate(22deg)}
  .scene .mascot[data-rig-kind="lift"] .rig-tool{transform:translateY(-22%)}
}

/* fix character-card overlap: contain the brush dog inside the art box, title below */
.char .art{height:220px;overflow:visible}
.char-dog{max-height:200px;margin:0 auto}
.char{display:flex;flex-direction:column}

/* "Find your industry" self-select input */
.vert-try{display:flex;gap:8px;max-width:480px;margin:16px auto 6px;justify-content:center}
.vert-try .combo{flex:1;margin:0;position:relative}
.vert-try .combo input{width:100%}
.vert-try .btn{white-space:nowrap}

/* kill hero entrance flash: hide mascot before GSAP entrance (JS only), show for reduced-motion/no-JS */
.dh-js [data-scene] .mascot{opacity:0}
@media (prefers-reduced-motion:reduce){ .dh-js [data-scene] .mascot{opacity:1} }

/* PUPPET RIG owns the hero dog: #heroDog is a rig container (not an <img>); the
   engine builds layered part-sprites inside and transforms the joints itself.
   Kill the old CSS reveal/breathe/clip so nothing fights the rig. */
.anim-on [data-scene] .mascot{opacity:1 !important}
.anim-on .hero-art .mascot{width:min(100%,470px)}
#heroDog.scene-dog{display:block;margin:0 auto;max-width:none}
#heroDog .rig-stage,#ctaMascot .rig-stage{position:relative}
/* rig part-sprites must be immune to the legacy mascot-img reveal/breathe/clip rules */
#heroDog img{animation:none !important;clip-path:none !important;opacity:1 !important;transform:none !important;max-width:none !important;max-height:none !important;width:auto;height:auto}

/* ===== HERO TYPING RIG — opt-in via #heroMascot[data-typing]. The static
   #heroDog (hero-scene.webp) is the instant fallback: delete the data-typing
   attribute to revert. base = scene with the raised paw erased; paw = that paw
   on its own layer, pivoting at the elbow in a typing rhythm. ===== */
#heroMascot .rig-base,#heroMascot .rig-paw{display:none}
#heroMascot[data-typing] #heroDog{display:none}
#heroMascot[data-typing] .rig-base{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;max-height:clamp(320px,48vh,520px)}
#heroMascot[data-typing] .rig-paw{display:block;position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:auto;max-width:100%;height:auto;max-height:clamp(320px,48vh,520px);transform-origin:61.6% 51.1%;transform:rotate(-4deg);animation:dhTypeTap .62s ease-in-out infinite;pointer-events:none;will-change:transform}
@keyframes dhTypeTap{0%,100%{transform:rotate(-4deg)}45%{transform:rotate(-9deg)}}
@media (prefers-reduced-motion:reduce){#heroMascot[data-typing] .rig-paw{animation:none;transform:rotate(-4deg)}}
/* mobile: use the static hero (simpler, avoids tiny-screen alignment) */
@media(max-width:620px){#heroMascot[data-typing] #heroDog{display:block}#heroMascot[data-typing] .rig-base,#heroMascot[data-typing] .rig-paw{display:none}}
/* declutter the stray ink marks + bubble so the living character is the whole moment */
.anim-on #heroScene .scene-marks,.anim-on #heroScene .scene-bubble{display:none}

/* static premium scene hero: hide the old rig decorations; size the scene image */
#heroScene .blob,#heroScene .scene-marks,#heroScene .scene-bubble,#heroScene .scene-ground{display:none}
#heroScene .mascot{opacity:1 !important}
img#heroDog{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;max-height:clamp(320px,48vh,520px);clip-path:none !important}
/* ambient marks + glow removed — they read as floating artifacts (Adi) */
/* better mobile hero: smaller dog + headline, tidy spacing, drop ambient marks */
@media(max-width:620px){
  img#heroDog{max-height:clamp(210px,32vh,290px)}
  #heroScene .scene-marks{display:none}
  .scene .mascot{min-height:auto}
  .hero-art{min-height:auto}
  .hero-title{font-size:clamp(30px,8.2vw,42px);max-width:none}
  .hero-sub{font-size:16.5px}
  .hero-try-row{max-width:none}
}