/* StudioHawk hero hawk - skin for the procedural SVG (hawk.js).
   Three flat values do the work of feather structure. One aqua light on each
   leading edge and the brow, one warm accent (the talons), a flat Picton ring.
   No gradients, no glows, no outlines. */

[data-hawk] { display: block; width: 100%; max-width: 680px; margin: 0 auto; aspect-ratio: 680 / 586; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
[data-hawk].is-ready { opacity: 1; transform: none; }
[data-hawk] svg { width: 100%; height: 100%; display: block; overflow: visible; }
[data-hawk][data-mode="video"] { position: relative; --vx: 12%; --vy: 4%; --vw: 88%; }
[data-hawk] .hawk-video { position: absolute; left: var(--vx); top: var(--vy); width: var(--vw); height: auto; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
[data-hawk] .hawk-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: opacity .6s ease; }
[data-hawk] .hawk-still + svg, [data-hawk][data-mode="video"] > svg { position: relative; }
[data-hawk][data-mode="video"] .hawk-still { z-index: 2; }
[data-hawk].is-live .hawk-still { opacity: 0; }
[data-hawk].is-live .hawk-video { opacity: 1; }

.hawk {
  --ink: #121A28;            /* dark slate: body, near-wing panel */
  --ink-2: #1B2637;          /* mid slate: breast, coverts, primaries */
  --under: #214A66;          /* desaturated Picton over the body: the far wing shows its underside */
  --line: rgba(1, 255, 255, .22);
  --line-far: rgba(1, 255, 255, .16);
  --aqua: #01FFFF;
  --picton: #3DB7E9;
  --violet: #ADBAFF;
  --yellow: #FECF40;
}

/* backdrop */
.hawk .ring { fill: none; stroke: var(--picton); stroke-width: 62; }
.hawk .violet { fill: var(--violet); }

/* near wing */
.hawk .membrane { fill: var(--ink); }
.hawk .sec-lines { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; }
.hawk .feather.pri { fill: var(--ink-2); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.hawk .covert { fill: #22304A; }          /* one step lighter: coverts vs primaries */
.hawk .alula { fill: var(--ink-2); }
.hawk .lead { fill: none; stroke: var(--aqua); stroke-width: 2.2; stroke-linecap: round; }

/* far wing: underside, one step lighter */
.hawk .wing.far .membrane { fill: var(--under); }
.hawk .wing.far .sec-lines { stroke: #2C5C7A; }
.hawk .wing.far .feather.pri { fill: var(--under); stroke: var(--ink); stroke-width: 1.2; }
.hawk .wing.far .covert, .hawk .wing.far .alula { fill: #2A5A78; }
.hawk .wing.far .lead { stroke-width: 1.8; opacity: .75; }

/* body */
.hawk .torso, .hawk .neck, .hawk .head { fill: var(--ink); }
.hawk .breast { fill: var(--ink-2); }
.hawk .cheek { fill: var(--ink-2); }
.hawk .brow { fill: none; stroke: var(--aqua); stroke-width: 1.8; stroke-linecap: round; }
.hawk .eye { fill: var(--aqua); }
.hawk .pupil { fill: #05070A; }
.hawk .glint { fill: #fff; }

/* tail */
.hawk .tail-panel { fill: var(--ink-2); }
.hawk .tail-lines { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.hawk .tail-covert { fill: var(--ink); }

/* legs: the one warm accent */
.hawk .shank { stroke: var(--yellow); stroke-width: 5.5; stroke-linecap: round; fill: none; }
.hawk .toes, .hawk .hallux { stroke: var(--yellow); stroke-width: 3.4; stroke-linecap: round; fill: none; }
.hawk .claws { stroke: #1B2637; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.hawk .far-foot .shank, .hawk .far-foot .toes, .hawk .far-foot .hallux { stroke: #B08A22; }

@media (max-width: 860px) {
  [data-hawk] svg { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  [data-hawk] { transition: none; }
}