/* Dee · the Digilayers mascot (R27). Pairs with site/js/dee.js. Transforms + opacity only. Docs: docs/DEE.md */

/* ---------- rig + tones ---------- */
.dee { display: block; width: 100%; height: auto; overflow: visible;
  --dee-b: #F27124; --dee-e: #1B1D1F; --dee-s1: #B9501A; --dee-s2: #1B1D1F; --dee-line: rgba(27,29,31,.32); }
.dee .dee-b { fill: var(--dee-b); }
.dee .dee-o, .dee .dee-hp, .dee .dee-hands { fill: var(--dee-e); }
.dee .dee-cl { fill: none; stroke: var(--dee-e); stroke-width: 3px; stroke-linecap: round; opacity: 0; }
.dee .dee-s1 { fill: var(--dee-s1); }
.dee .dee-s2 { fill: var(--dee-s2); }
.dee--ink { --dee-e: #121315; --dee-s1: #8C3D12; --dee-s2: #F3F1EC; }                       /* orange on ink */
.dee--mono { --dee-b: #E8EEF7; --dee-e: #05070D; --dee-s1: #009ADA; --dee-s2: rgba(0,154,218,.45); } /* aiLayers */
.dee--onorange { --dee-b: #1B1D1F; --dee-e: #F27124; --dee-s1: #FAFAF7; --dee-s2: #7A3510; }
.dee--outline .dee-b, .dee--outline .dee-s { fill: none; stroke: var(--dee-line); stroke-width: 1.4px;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dee--outline .dee-o, .dee--outline .dee-hp { fill: var(--dee-line); }
.dee--outline .dee-cl { stroke: var(--dee-line); stroke-width: 2.2px; }
.dee--outline .dee-s { opacity: 0; transition: opacity .2s; }
.dee--outline[data-x=think] .dee-s { opacity: 1; }
.on-dark .dee--outline, .dee--outline.is-dark { --dee-line: rgba(243,241,236,.26); }
.on-ai .dee--outline { --dee-line: rgba(0,154,218,.55); }

/* ---------- expressions (eyes only; data-x on the svg) ---------- */
.dee .dee-bd { transform-origin: 12px 121px; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.dee .dee-eyes { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.dee .dee-e { transform-origin: 0 0; transition: transform .14s ease-out; }
.dee .dee-o, .dee .dee-hp, .dee .dee-cl { transition: opacity .1s; }
.dee .dee-hp { opacity: 0; }
.dee .dee-s { transition: transform .35s ease-out; }
.dee.dee-bl .dee-e, .dee[data-x=blink] .dee-e { transform: scaleY(.1); transition-duration: .06s; }
.dee[data-x=look-l] .dee-eyes { transform: translate(-5px, 1px); }
.dee[data-x=look-r] .dee-eyes { transform: translate(5px, 1px); }
.dee[data-x=look-u] .dee-eyes { transform: translate(1px, -4.5px); }
.dee[data-x=look-d] .dee-eyes { transform: translate(0, 4px); }
.dee[data-x=look-l] .dee-bd { transform: rotate(-2deg); }
.dee[data-x=look-r] .dee-bd { transform: rotate(2deg); }
.dee[data-x=happy] .dee-o { opacity: 0; }
.dee[data-x=happy] .dee-hp { opacity: 1; }
.dee[data-x=wow] .dee-e { transform: scale(1.28); }
.dee[data-x=sleepy] .dee-o { opacity: 0; }
.dee[data-x=sleepy] .dee-cl { opacity: 1; }
.dee[data-x=think] .dee-eyes { transform: translate(3.5px, -4px); }
.dee[data-x=think] .dee-bd { transform: rotate(-3deg); }
.dee[data-x=think] .dee-s1 { animation: dee-sh1 .5s ease-in-out infinite alternate; }        /* the layer shuffle */
.dee[data-x=think] .dee-s2 { animation: dee-sh2 .5s .14s ease-in-out infinite alternate; }
.dee[data-x=drowsy] .dee-e { transform: translateY(2.5px) scaleY(.45); }                    /* half open (waking, yawning) */
.dee[data-x=annoyed] .dee-eyes { transform: translate(-3px, 1.5px); }                      /* flat side-eye */
.dee[data-x=annoyed] .dee-e { transform: translateY(2px) scaleY(.36); }
.dee[data-x=annoyed] .dee-bd { transform: rotate(-2deg); }
.dee[data-x=dizzy] .dee-eyes > g:first-child .dee-e { transform: translate(3.5px, 1.5px) scale(.7); }   /* crossed */
.dee[data-x=dizzy] .dee-eyes > g:last-child .dee-e { transform: translate(-3.5px, -1.5px) scale(.7); }
@keyframes dee-sh1 { to { transform: translate(-12px, 5px); } }
@keyframes dee-sh2 { to { transform: translate(12px, 9px); } }

/* ---------- click / tap reactions (dee.js react()): moves run on .dee-all inside the svg, so nothing shifts ---------- */
.dee { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.dee .dee-all { transform-origin: 55.6px 121.4px; }                                        /* foot of the D */
.dee-amb .dee, .dee-help-d .dee { pointer-events: auto; }   /* wrappers stay click-through; only Dee's own box takes a tap */

/* ---------- inline glyph in a headline ---------- */
.dee-inline { display: inline-block; width: .72em; margin: 0 .1em 0 .06em; line-height: 0; vertical-align: baseline; }
.dee-inline .dee { width: 100%; }

/* ---------- helper on hesitation (fixed layer; only the bubble takes taps) ---------- */
.dee-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; }               /* above header (50), below sticky CTA (60) */
.dee-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dee-help { position: absolute; display: flex; align-items: flex-end; gap: 4px; --dee-size: 64px; }
.dee-help--left { left: 0; }
.dee-help--right { right: 0; flex-direction: row-reverse; }
.dee-help-d { flex: none; width: var(--dee-size); will-change: transform; }
.dee-help--left .dee-help-d { margin-left: 14px; }                                          /* slides in from the edge */
.dee-help--right .dee-help-d { margin-right: 14px; }
.dee-bubble { position: relative; pointer-events: auto; margin-bottom: calc(var(--dee-size) * .62);
  max-width: min(300px, calc(100vw - var(--dee-size) - 32px)); padding: 11px 40px 12px 14px;
  background: #fff; color: #1B1D1F; border: 1px solid #E6E3DE; border-radius: 14px;
  box-shadow: 0 2px 6px rgba(27,29,31,.06), 0 18px 40px -14px rgba(27,29,31,.22);
  font: 400 15px/1.45 var(--font-body, Inter, system-ui, sans-serif); text-wrap: pretty;
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98);
  transition: opacity .22s, transform .35s cubic-bezier(.16,1,.3,1), visibility 0s .22s; }
.dee-bubble.is-in { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .35s cubic-bezier(.16,1,.3,1), visibility 0s; }
.dee-bubble::after { content: ""; position: absolute; bottom: 12px; width: 10px; height: 10px; background: inherit;
  border: inherit; border-width: 0 0 1px 1px; }
.dee-help--left .dee-bubble::after { left: -6px; transform: rotate(45deg); }
.dee-help--right .dee-bubble::after { right: -6px; transform: rotate(-135deg); }
.dee-line { margin: 0; }
.dee-link { font-weight: 600; color: inherit; white-space: nowrap; text-decoration: underline;
  text-decoration-color: #F27124; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dee-link:hover { text-decoration-thickness: 3px; }
.dee-x { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; color: #6B6F73; background: none; border: 0; padding: 0; cursor: pointer; }
.dee-x svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.dee-x:hover { background: rgba(27,29,31,.06); color: #1B1D1F; }
.dee-x:focus-visible, .dee-link:focus-visible { outline: 2px solid #F27124; outline-offset: 2px; }
.dee-help--dark .dee-bubble { background: #1B1D1F; color: #F3F1EC; border-color: rgba(255,255,255,.14); }
.dee-help--dark .dee-x { color: #A3A6A9; }
.dee-help--dark .dee-x:hover { background: rgba(255,255,255,.08); color: #F3F1EC; }

/* phone: docked 48 px bottom-left above the safe area (and above a sticky CTA); one low strip, line to the right */
.dee-help--dock { left: 12px; right: 12px; align-items: flex-end; gap: 8px; --dee-size: 48px; }
.dee-help--dock .dee-bubble { margin: 0; max-width: none; flex: 1; padding: 8px 44px 9px 12px; font-size: 14px; line-height: 1.4; }
.dee-help--dock .dee-bubble::after { left: -6px; bottom: 14px; transform: rotate(45deg); }
.dee-help--dock .dee-x { top: 50%; right: 0; width: 44px; height: 44px; margin-top: -22px; }
/* phone tap rule (dee.js): docked Dee shows alone with a dot; a tap on Dee opens the line */
.dee-help--dock.is-tap .dee-bubble { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.dee-help--dock.is-tap .dee-help-d { pointer-events: auto; cursor: pointer; position: relative; }
.dee-help--dock.is-tap .dee-help-d::after { content: ""; position: absolute; inset: -6px; }
.dee-help--dock.is-tap { right: auto; }
.dee-tap-hint { position: absolute; left: 100%; bottom: 8px; margin-left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange, #F27124);
  box-shadow: 0 0 0 3px #fff; pointer-events: none; }
.dee-help--dock:not(.is-tap) .dee-tap-hint { display: none; }

/* ---------- ambient moments (behind content, never take taps) ---------- */
.dee-slotted { isolation: isolate; }
.dee-amb { position: absolute; pointer-events: none; }
.dee-walk { left: 0; right: 0; overflow: hidden; z-index: -1; opacity: .5; }
.dee-walk.is-behind { opacity: .26; }
.on-dark .dee-walk, .on-ai .dee-walk { opacity: .64; }
.on-dark .dee-walk.is-behind, .on-ai .dee-walk.is-behind { opacity: .36; }
.dee-walk .dee-mover { position: absolute; left: 0; bottom: 0; will-change: transform; }
.dee-bob { transform-origin: 50% 100%; }
.dee-walk.is-walking .dee-bob { animation: dee-bob .38s ease-in-out infinite alternate; }
@keyframes dee-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-5px) rotate(3deg); } }
.dee-peek { bottom: 100%; overflow: hidden; z-index: 0; }
.dee-peek .dee-mover { transform: translateY(105%); will-change: transform; }

/* footer nap: outline Dee asleep, zzz + breathing while on screen */
.dee-napbox { position: relative; width: 100%; color: var(--dee-z, rgba(27,29,31,.4)); }
.on-dark .dee-napbox { --dee-z: rgba(243,241,236,.45); }
.dee-napbox .dee-bd { transform-origin: 55px 121px; }
.dee-napbox.is-napping .dee-bd { animation: dee-breath 2.6s ease-in-out infinite; }
@keyframes dee-breath { 50% { transform: scale(1.025, 1.04); } }
.dee-z { position: absolute; left: 82%; top: 2%; font: 600 15px/1 var(--font-mono, monospace); }
.dee-z i { position: absolute; font-style: normal; opacity: 0; }
.is-napping .dee-z i { animation: dee-zz 2.6s ease-out infinite; }   /* not dee-z: shell.css owns that name (static footer art) */
.is-napping .dee-z i:nth-child(2) { animation-delay: .87s; font-size: .8em; }
.is-napping .dee-z i:nth-child(3) { animation-delay: 1.73s; font-size: .67em; }
@keyframes dee-zz { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 25% { opacity: 1; }
  100% { opacity: 0; transform: translate(16px, -36px) scale(1.15); } }

/* footer (every page, shell.css .dee-slot): the rig replaces the static .dee-nap art in the same box. The margins
   are that art's viewBox (-6 -34 150 162) around the 111 x 121 D, so the swap does not move a pixel. */
.dee-slot.is-rigged > .dee-nap { display: none; }
.dee-napbox.dee-foot { width: 74.16%; margin: 22.67% 0 4.4% 4%; }
.dee-foot .dee--outline { --dee-line: rgba(243,241,236,.5); --dee-fe: rgba(243,241,236,.7); }
.dee-foot .dee--outline .dee-b, .dee-foot .dee--outline .dee-s { stroke-width: 2px; }
.dee-foot .dee--outline .dee-o, .dee-foot .dee--outline .dee-hp { fill: var(--dee-fe); }
.dee-foot .dee--outline .dee-cl { stroke: var(--dee-fe); stroke-width: 2px; }
.dee-foot .dee-z { font-size: clamp(10px, 1vw, 13px); }

/* empty state: holds a tiny sign */
.dee-signbox { display: inline-flex; flex-direction: column; align-items: center; --dee-size: 64px; }
.dee-sign { position: relative; min-width: calc(var(--dee-size) * 1.05); margin-bottom: calc(var(--dee-size) * .03);
  padding: 6px 10px; text-align: center; background: #fff; color: #1B1D1F; border: 1.5px solid #1B1D1F; border-radius: 6px;
  font: 500 11px/1.25 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }
.dee-signbox .dee { position: relative; z-index: 1; width: var(--dee-size); }    /* hands in front of the sign */

/* off screen = paused */
.dee-paused, .dee-paused * { animation-play-state: paused !important; }

/* reduced motion: static Dee, no ambient, helper appears without movement */
@media (prefers-reduced-motion: reduce) {
  .dee, .dee *, .dee-bubble, .dee-bob, .dee-z i { animation: none !important; transition: none !important; }
  .dee-z { display: none; }
}
[data-dee-still] .dee, [data-dee-still] .dee *, [data-dee-still] .dee-bubble { animation: none !important; transition: none !important; }
[data-dee-still] .dee-z { display: none; }
/* footer Dee awake: the outline fills with brand orange while it is up, then fades back as it dozes off */
.dee-foot .dee--outline .dee-b { transition: fill .45s ease, stroke .45s ease; }
.dee-foot .dee--outline .dee-o, .dee-foot .dee--outline .dee-hp { transition: fill .45s ease, opacity .1s; }
.dee-foot.is-awake .dee--outline .dee-b { fill: var(--dee-b); stroke: var(--dee-b); }
.dee-foot.is-awake .dee--outline { --dee-fe: #121315; }