/* =========================================================
   Motion: the Skull's world.

   The mascot is a rig (src/components/skull.mjs) and this file
   is how it moves. /js/skull.js adds the parts that need to know
   where the pointer is; everything else is CSS.

   The language:
   - Physical. Things hop, squash, overshoot and settle, the way
     something with weight would. Nothing just fades.
   - Quick. Most of it is over before you would think to wait.
   - Earned. Every movement is feedback, attention or character.
     Ambient motion is kept to the Skull blinking and the odd
     small moment, and it pauses when it is off screen.

   Timing, loosely:
     --t-micro      120-180ms   presses, face changes
     --t-ui         240-300ms   hover lifts, arrows
     --t-character  450-700ms   hops, leans, reactions
     --t-scene      800-1200ms  entrances, a book opening
     ambient        seconds     blinks, bobbing, drifting shapes

   Everything that moves sits inside the no-preference query.
   What stays outside is state: which face is showing, whether
   the book is open. Under reduced motion the Skull still reacts,
   it just does not move to do it.
   ========================================================= */

:root {
  --t-micro: 150ms;
  --t-ui: 260ms;
  --t-character: 560ms;
  --t-scene: 950ms;
  /* A spring: overshoots, then settles. */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* A snappier one for small parts. */
  --snap: cubic-bezier(0.2, 1.8, 0.45, 1);
  --settle: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ═══════════════════════════ THE RIG ═══════════════════════════ */

.skull__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sk-char,
.sk-lean {
  transform-box: fill-box;
  transform-origin: 50% 92%;
}

.sk-eye,
.sk-prop,
.sk-prop * {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Faces ----------
   One face shows at a time. The base, unless the card around the
   Skull is hovered (its hover face) or the script has given it a
   mood (an alternate face). State, not motion: always on. */

.sk-face--alt,
.sk-face--hover,
.sk.has-mood .sk-face--base,
.sk.has-mood .sk-face--hover {
  display: none;
}

.sk.has-mood .sk-face--alt.is-on {
  display: inline;
}

:is(.capability, .family-card, .service-card, .problem, .skull, .page-head__art):is(:hover, :focus-within)
  .sk--hover:not(.has-mood)
  .sk-face--base {
  display: none;
}

:is(.capability, .family-card, .service-card, .problem, .skull, .page-head__art):is(:hover, :focus-within)
  .sk--hover:not(.has-mood)
  .sk-face--hover {
  display: inline;
}

/* Motion marks exist only while their motion plays. */
.sk-motion {
  opacity: 0;
}

/* A book that opens: shut until its card is engaged. */
.sk-prop--textbook .sk-pages {
  opacity: 0;
  transform: scaleX(0.2);
}

.sk-prop--textbook .sk-cover {
  transform-origin: 0% 50%;
}

:is(.family-card, .skull):is(:hover, :focus-within) .sk-prop--textbook .sk-pages {
  opacity: 1;
  transform: none;
}

:is(.family-card, .skull):is(:hover, :focus-within) .sk-prop--textbook .sk-cover {
  opacity: 0;
  transform: scaleX(0);
}

/* The bulb lights when the idea lands. */
:is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--bulb .sk-glass {
  fill: #f7df8a;
}

/* The laptop screen wakes up. */
:is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--laptop .sk-screen {
  fill: var(--sol-wash);
}

/* The network comes up. */
:is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--nodes .sk-node {
  fill: var(--sol);
}

.skull__svg[data-skull-poke] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════ MOVEMENT ═══════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  /* Ambient work pauses off screen. Without the script, .is-inview
     never arrives and the animations simply run. */
  .sk-js .sk:not(.is-inview),
  .sk-js .sk:not(.is-inview) * {
    animation-play-state: paused !important;
  }

  /* ---------- Idle ---------- */

  .sk-eye {
    animation: sk-blink 6.8s infinite;
  }

  /* Skulls do not blink in unison: a crowd that blinks together
     reads as a machine. */
  .skull:nth-of-type(2n) .sk-eye { animation-duration: 7.9s; animation-delay: -2.1s; }
  .skull:nth-of-type(3n) .sk-eye { animation-duration: 5.7s; animation-delay: -4.3s; }
  li:nth-child(2n) .sk-eye { animation-delay: -1.3s; }
  li:nth-child(3n) .sk-eye { animation-duration: 8.6s; }

  .sk-look {
    transform: translate(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px));
    transition: transform var(--t-ui) var(--settle);
  }

  .sk-lean {
    transform: rotate(calc(var(--lean, 0) * 1deg));
    transition: transform var(--t-character) var(--spring);
  }

  /* A face change lands with a small squash, so it reads as the
     Skull reacting rather than the drawing being swapped. */
  .sk.has-mood .sk-face--alt.is-on,
  :is(.capability, .family-card, .service-card, .problem, .skull, .page-head__art):is(:hover, :focus-within)
    .sk--hover:not(.has-mood)
    .sk-face--hover {
    animation: sk-face-in var(--t-micro) var(--snap);
    transform-box: fill-box;
    transform-origin: center;
  }

  .sk-zzz {
    animation: sk-zzz 3.6s var(--settle) infinite;
    transform-box: fill-box;
    transform-origin: 0 100%;
  }

  /* ---------- Reactions (classes from /js/skull.js) ---------- */

  .sk.is-hop .sk-char {
    animation: sk-hop var(--t-character) var(--settle);
  }

  .sk.is-hop .sk-motion--hop {
    animation: sk-mark-flash var(--t-character) ease-out;
  }

  .sk.is-shake .sk-char {
    animation: sk-shake 0.5s var(--settle);
  }

  .sk.is-wave .sk-char {
    animation: sk-wave 1.1s var(--settle);
  }

  .sk.is-wave .sk-motion--wave {
    animation: sk-mark-flash 1.1s ease-out;
  }

  .sk.is-nod .sk-char {
    animation: sk-nod 0.5s var(--settle);
  }

  .sk.is-glance .sk-glance {
    animation: sk-glance 2.4s var(--settle);
  }

  .sk.is-pop .sk-char {
    animation: sk-pop var(--t-character) var(--spring) both;
  }

  /* ---------- Cards: the Skull does its job on hover ---------- */

  :is(.capability, .service-card, .problem, .family-card, .split__skull, .page-head__art):hover .sk-char {
    animation: sk-perk var(--t-character) var(--spring);
  }

  :is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--wrench {
    animation: sk-tighten 0.9s var(--settle);
    transform-origin: 20% 80%;
  }

  :is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--laptop .sk-logo {
    animation: sk-bounce 0.5s var(--snap) 0.1s;
  }

  :is(.capability, .service-card):is(:hover, :focus-within) .skull--cap-software .sk-char {
    animation: sk-typing 0.32s steps(2) 4;
  }

  :is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--lock .sk-shackle {
    animation: sk-unlock 0.9s var(--settle);
    transform-origin: 50% 100%;
  }

  :is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--bulb .sk-rays {
    animation: sk-rays 0.6s var(--snap);
  }

  :is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--nodes .sk-node {
    animation: sk-node 0.45s var(--snap) both;
  }

  :is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--nodes .sk-node--2 { animation-delay: 0.12s; }
  :is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--nodes .sk-node--3 { animation-delay: 0.24s; }
  :is(.capability, .service-card, .skull):is(:hover, :focus-within) .sk-prop--nodes .sk-node--4 { animation-delay: 0.36s; }

  :is(.service-card, .family-card, .skull):is(:hover, :focus-within) .sk-prop--magnifier {
    animation: sk-inspect 1.3s var(--settle);
  }

  .sk-prop--textbook .sk-pages,
  .sk-prop--textbook .sk-cover {
    transition:
      transform 0.45s var(--spring),
      opacity 0.2s linear;
  }

  :is(.family-card, .skull):is(:hover, :focus-within) .sk-prop--textbook .sk-pages {
    transition-delay: 0.12s;
  }

  .sk-prop--laptop .sk-screen,
  .sk-prop--bulb .sk-glass,
  .sk-prop--nodes .sk-node {
    transition: fill var(--t-ui) var(--settle);
  }

  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--terminalError,
  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--warning .sk-bang {
    animation: sk-shake 0.45s var(--settle);
  }

  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--server .sk-led,
  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--circuit .sk-led {
    animation: sk-led 0.3s steps(1) 4;
  }

  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--gear {
    animation: sk-spin 1.1s var(--settle);
  }

  :is(.service-card, .skull):is(:hover, :focus-within) :is(.sk-prop--check, .sk-prop--board) .sk-tick {
    stroke-dasharray: 40;
    animation: sk-draw 0.6s var(--settle) both;
  }

  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--bug .sk-legs {
    animation: sk-scuttle 0.16s steps(1) 5;
  }

  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--phone {
    animation: sk-buzz 0.4s steps(4) 2;
  }

  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--target .sk-crosshair {
    animation: sk-spin 0.9s var(--spring);
  }

  :is(.service-card, .skull):is(:hover, :focus-within) .sk-prop--packets .sk-signal {
    stroke-dasharray: 70;
    animation: sk-draw 0.8s linear both;
  }

  /* ═══════════════════════════ HERO ═══════════════════════════ */

  /* In, quickly, and settled before anyone has read the headline. */
  /* On the svg, not .sk-char: reactions animate .sk-char, and when one
     ends the entrance would be back in its animation list and replay. */
  .system__hub .skull__svg {
    transform-box: fill-box;
    transform-origin: 50% 90%;
    animation: sk-pop 0.7s var(--spring) 0.15s both;
  }

  .system__hub .skull {
    animation: sk-drift 5s ease-in-out 1s infinite;
  }

  .system__node {
    animation: sk-float 6s ease-in-out infinite;
    transition: box-shadow var(--t-ui) var(--settle), background-color var(--t-ui) var(--settle);
  }

  .system__node--2 { animation-duration: 7.4s; animation-delay: -3s; }
  .system__node--3 { animation-duration: 5.4s; animation-delay: -1s; }
  .system__node--4 { animation-duration: 6.8s; animation-delay: -4s; }
  .system__node--5 { animation-duration: 5.9s; animation-delay: -2.4s; }
  .system__node--6 { animation-duration: 7.1s; animation-delay: -5s; }
  .system__node--7 { animation-duration: 6.3s; animation-delay: -0.6s; }

  .system__node:hover {
    background: var(--sol-tint);
    box-shadow: 3px 3px 0 var(--ink);
  }

  /* The printer's state is unknown, and stays unknown when you look at it. */
  .system__node--joke:hover {
    animation: sk-rattle 0.4s steps(3) 2;
  }

  .system__wire {
    animation: sk-flow 2.8s linear infinite;
  }

  .sk-js .hero:not(:hover) .system__wire {
    animation-play-state: paused;
  }

  /* ═══════════════════════════ THE WORLD ═══════════════════════════ */

  /* Background shapes drift with scroll at their own depth and a
     little with the pointer. Scroll-linked where the browser can do it
     without script; otherwise they simply sit still. */
  .doodle {
    transform: translate(calc(var(--px, 0) * var(--depth) * 10px), calc(var(--py, 0) * var(--depth) * 8px));
    transition: transform 0.9s var(--settle);
  }

  .doodle svg {
    animation: sk-float-rot 9s ease-in-out infinite;
  }

  .doodle:nth-child(2n) svg { animation-duration: 11s; animation-delay: -4s; }
  .doodle:nth-child(3n) svg { animation-duration: 13s; animation-direction: reverse; }

  @supports (animation-timeline: view()) {
    .doodle {
      animation: sk-parallax linear both;
      animation-timeline: view();
    }

    .cable__line {
      animation: sk-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }

    .cable__plug {
      animation: sk-plug linear both;
      animation-timeline: view();
      animation-range: cover 25% cover 40%;
    }

    .split__skull,
    .capability__art .skull,
    .problem__face .skull,
    .service-card__head .skull,
    .family-card > .skull {
      animation: skull-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }

  /* ---------- Peekers and walkers ---------- */

  .peeker__skull {
    transition: transform 0.5s var(--spring);
  }

  .peeker.is-peeking .peeker__skull {
    transform: translateY(12%);
  }

  .walker.is-walking .walker__skull {
    animation: sk-walk 7.5s linear both;
  }

  .walker.is-walking.is-reverse .walker__skull {
    animation-direction: reverse;
  }

  .walker.is-walking.is-reverse .sk {
    transform: scaleX(-1);
  }

  .walker.is-walking .sk-char {
    animation: sk-step 0.38s steps(2) infinite;
  }

  /* ---------- Interface ---------- */

  .btn:active {
    transform: translate(2px, 2px) scale(0.98);
  }

  .btn .icon--external {
    transition: transform var(--t-ui) var(--spring);
  }

  .btn:hover .icon--external,
  .more:hover .icon--external {
    transform: translate(2px, -2px);
  }

  .btn:active .icon--arrow {
    transform: translateX(6px);
  }

  .capability:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--sol);
    transition-duration: 80ms;
  }

  .capability__art {
    transition: background-position 0.6s var(--settle);
  }

  .capability:hover .capability__art {
    background-position: 11px 11px;
  }

  .family-card {
    transition: transform var(--t-ui) var(--settle), box-shadow var(--t-ui) var(--settle);
  }

  .family-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--sol);
  }

  .family-card--sploit:hover {
    box-shadow: 6px 6px 0 var(--sploit);
  }

  .family-card--edu:hover {
    box-shadow: 6px 6px 0 var(--edu);
  }

  .ask__button {
    transition: box-shadow var(--t-micro) var(--settle), transform var(--t-micro) var(--settle);
  }

  .ask__button:active {
    transform: translate(2px, 2px);
    box-shadow: none;
  }

  .mark .mark__eye {
    transform-box: fill-box;
    transform-origin: center;
  }

  a.brand:hover .mark {
    animation: skull-wiggle 0.6s var(--settle);
  }

  a.brand:hover .mark__eye {
    animation: sk-blink-once 0.35s var(--settle) 0.1s;
  }

  .enquiry__link {
    transition: transform var(--t-micro) var(--settle);
  }

  .enquiry__link:active {
    transform: translateY(2px);
  }

  .site-footer__skull .skull__svg:hover .sk-char {
    animation: sk-snore 1.2s var(--settle);
  }

  /* 404: looking for the page, left, right, and under the desk. */
  .not-found__skull .sk-glance {
    animation: sk-search 5.5s var(--settle) infinite;
  }
}

/* ═══════════════════════════ KEYFRAMES ═══════════════════════════ */

@keyframes sk-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

@keyframes sk-blink-once {
  50% { transform: scaleY(0.1); }
}

@keyframes sk-face-in {
  0% { transform: scale(0.86, 1.08); }
  100% { transform: none; }
}

@keyframes sk-pop {
  0% { opacity: 0; transform: translateY(24%) scale(0.6, 0.4); }
  45% { opacity: 1; transform: translateY(-6%) scale(0.94, 1.1); }
  70% { transform: translateY(1%) scale(1.06, 0.94); }
  100% { opacity: 1; transform: none; }
}

@keyframes sk-hop {
  0% { transform: none; }
  18% { transform: scale(1.1, 0.86); }
  45% { transform: translateY(-16%) scale(0.94, 1.08); }
  72% { transform: translateY(0) scale(1.08, 0.9); }
  88% { transform: scale(0.98, 1.03); }
  100% { transform: none; }
}

@keyframes sk-perk {
  0% { transform: none; }
  35% { transform: translateY(-5%) scale(0.97, 1.05); }
  70% { transform: scale(1.03, 0.97); }
  100% { transform: none; }
}

@keyframes sk-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-4%) rotate(-5deg); }
  40% { transform: translateX(4%) rotate(4deg); }
  60% { transform: translateX(-3%) rotate(-3deg); }
  80% { transform: translateX(2%) rotate(2deg); }
}

@keyframes sk-wave {
  0%, 100% { transform: none; }
  15% { transform: rotate(9deg); }
  35% { transform: rotate(-6deg); }
  55% { transform: rotate(8deg); }
  75% { transform: rotate(-3deg); }
}

@keyframes sk-nod {
  0%, 100% { transform: none; }
  40% { transform: translateY(4%) scale(1.03, 0.96); }
}

@keyframes sk-glance {
  0%, 100% { transform: none; }
  20%, 42% { transform: translateX(-4px); }
  55%, 80% { transform: translate(4px, -1px); }
}

@keyframes sk-search {
  0%, 12%, 100% { transform: none; }
  22%, 36% { transform: translateX(-5px); }
  48%, 62% { transform: translate(5px, 1px); }
  74%, 86% { transform: translate(0, 3px); }
}

@keyframes sk-mark-flash {
  0% { opacity: 0; transform: translateX(-3px); }
  25%, 70% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes sk-zzz {
  0% { opacity: 0.2; transform: translate(-3px, 4px) scale(0.85); }
  60% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(4px, -6px) scale(1.05); }
}

@keyframes sk-snore {
  0%, 100% { transform: none; }
  40% { transform: scale(1.05, 0.95); }
}

@keyframes sk-typing {
  50% { transform: translateY(2%); }
}

@keyframes sk-tighten {
  0%, 100% { transform: none; }
  25% { transform: rotate(-24deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-12deg); }
}

@keyframes sk-bounce {
  40% { transform: translateY(-3px) scale(1.15); }
}

@keyframes sk-unlock {
  0%, 100% { transform: none; }
  30% { transform: translateY(-3px); }
  45% { transform: translateY(-3px) rotate(-8deg); }
  60% { transform: translateY(-1px) rotate(6deg); }
  80% { transform: translateY(0); }
}

@keyframes sk-rays {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: none; }
}

@keyframes sk-node {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.3); }
  100% { transform: none; }
}

@keyframes sk-inspect {
  0%, 100% { transform: none; }
  30% { transform: translate(-58px, -46px) scale(1.15); }
  55% { transform: translate(-30px, -48px) scale(1.15); }
  75% { transform: translate(-44px, -40px) scale(1.1); }
}

@keyframes sk-led {
  50% { opacity: 0.2; }
}

@keyframes sk-spin {
  to { transform: rotate(180deg); }
}

@keyframes sk-draw {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}

@keyframes sk-scuttle {
  50% { transform: scaleY(0.8); }
}

@keyframes sk-buzz {
  25% { transform: translateX(-1.5px) rotate(-3deg); }
  75% { transform: translateX(1.5px) rotate(3deg); }
}

@keyframes sk-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes sk-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes sk-rattle {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  33% { translate: -2px 0; rotate: -2deg; }
  66% { translate: 2px 0; rotate: 2deg; }
}

@keyframes sk-flow {
  to { stroke-dashoffset: -18; }
}

@keyframes sk-float-rot {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-5px); }
}

@keyframes sk-parallax {
  from { translate: 0 calc(var(--depth) * 26px); }
  to { translate: 0 calc(var(--depth) * -26px); }
}

@keyframes sk-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes sk-plug {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: none; }
}

@keyframes sk-walk {
  from { transform: translateX(-48px); }
  to { transform: translateX(calc(100cqw + 8px)); }
}

@keyframes sk-step {
  50% { transform: translateY(-8%) rotate(4deg); }
}

@keyframes skull-wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-5deg); }
  65% { transform: rotate(4deg); }
}

@keyframes skull-rise {
  from { opacity: 0; transform: translateY(18px) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}

/* ═══════════════════════════ WORLD LAYOUT ═══════════════════════════
   Placement for the pieces motion drives. Not motion itself, so
   outside the query: with motion off they are still where they
   belong, just still. */

/* ---------- Doodles ---------- */

.doodles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
}

.doodle {
  position: absolute;
  width: var(--size, 28px);
  opacity: 0.16;
}

.doodle svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.doodle--accent {
  color: var(--sol-ink);
  opacity: 0.3;
}

.section--night .doodles,
.site-footer .doodles {
  color: var(--on-night);
}

.doodles--hero .doodle--1 { --depth: 1.4; --size: 30px; left: 46%; top: 12%; }
.doodles--hero .doodle--2 { --depth: 0.8; --size: 22px; left: 4%; bottom: 8%; }
.doodles--hero .doodle--3 { --depth: 2; --size: 38px; right: 3%; top: 6%; }
.doodles--hero .doodle--4 { --depth: 1.2; --size: 26px; left: 44%; bottom: 10%; }
.doodles--hero .doodle--5 { --depth: 0.6; --size: 20px; right: 8%; bottom: 14%; }

.doodles--services .doodle--1 { --depth: 1.2; --size: 34px; right: 6%; top: 5%; }
.doodles--services .doodle--2 { --depth: 0.7; --size: 24px; right: 30%; top: 9%; }
.doodles--services .doodle--3 { --depth: 1.6; --size: 28px; left: 2%; bottom: 6%; }
.doodles--services .doodle--4 { --depth: 1; --size: 22px; right: 3%; bottom: 3%; }

.doodles--family .doodle--1 { --depth: 1.4; --size: 30px; right: 8%; top: 7%; }
.doodles--family .doodle--2 { --depth: 0.8; --size: 24px; right: 34%; top: 12%; }
.doodles--family .doodle--3 { --depth: 1.2; --size: 26px; left: 3%; bottom: 7%; }

.doodles--contact .doodle--1 { --depth: 1; --size: 28px; left: 42%; top: 10%; }
.doodles--contact .doodle--2 { --depth: 1.6; --size: 22px; left: 3%; bottom: 10%; }
.doodles--contact .doodle--3 { --depth: 0.8; --size: 32px; right: 4%; bottom: 5%; }

@media (max-width: 47.99em) {
  .doodle--wide {
    display: none;
  }
}

/* Content above the doodles. */
.has-doodles > .container {
  position: relative;
}

/* ---------- The family cards ----------
   SkullSploit's card is night, and its props are drawn in ink, so on
   this ground they take the light line instead. The Skull's own line
   is untouched: its face is porcelain either way. */

.family-cards--two .family-card > .skull {
  width: 8.5rem;
  margin: -0.5rem 0 0 -1rem;
}

.family-card--sploit .sk-prop [stroke] {
  stroke: var(--on-night);
}

/* ---------- Cables between sections ----------
   A wire drops from the section above into this section's index
   box, so each section is plugged into the last. */

.cable {
  position: absolute;
  top: calc(var(--section-space) * -1);
  left: calc(max(var(--gutter), env(safe-area-inset-left)) + 0.95rem);
  width: 14px;
  height: calc(var(--section-space) - 0.35rem);
  margin-left: -7px;
  pointer-events: none;
}

.cable__line {
  position: absolute;
  top: 0;
  bottom: 7px;
  left: 6px;
  width: 0;
  border-left: 1.5px dashed var(--rule-mid);
  transform-origin: 50% 0;
}

.cable__plug {
  position: absolute;
  bottom: 0;
  left: 1px;
  width: 12px;
  height: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 1px 1px 3px 3px;
  background: var(--porcelain);
}

/* ---------- Peekers ---------- */

.peeker {
  position: absolute;
  right: 12%;
  bottom: 100%;
  width: 44px;
  height: 30px;
  overflow: hidden;
  pointer-events: none;
}

.peeker .peeker__skull {
  width: 44px;
  margin: 0;
  transform: translateY(100%);
}

.peeker--left {
  right: auto;
  left: 14%;
}

/* ---------- Walkers ---------- */

.walker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 36px;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
}

.walker__skull {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 34px;
  transform: translateX(-48px);
}

.relative,
.family-card,
.container:has(> .cable) {
  position: relative;
}