/* Declutter: this site's own styles, on top of the round 3 system (assets/system/) and area.css. */

/* The name in the second navbar takes its label character (brief 8.3): Funnel Display. */
.area-nav-name { font-family: var(--face-caps); font-weight: 650; letter-spacing: .01em; }

/* On the front page the name does what it says, once: its letters tumble in, then stack neatly, the last one settling (680 ms). */
@media (prefers-reduced-motion: no-preference) {
  .page-front .name-move > span { animation: dc-tumble 680ms var(--ease-out) both; }
  .page-front .name-move > span:nth-child(2) { animation-delay: 40ms; }
  .page-front .name-move > span:nth-child(3) { animation-delay: 80ms; }
  .page-front .name-move > span:nth-child(4) { animation-delay: 120ms; }
  .page-front .name-move > span:nth-child(5) { animation-delay: 160ms; }
  .page-front .name-move > span:nth-child(6) { animation-delay: 200ms; }
  .page-front .name-move > span:nth-child(7) { animation-delay: 240ms; }
  .page-front .name-move > span:nth-child(8) { animation-delay: 280ms; }
  .page-front .name-move > span:nth-child(9) { animation-delay: 320ms; animation-name: dc-settle; }
  html.lt-js:not(.lt-ready) .page-front .name-move > span { animation-play-state: paused; }
}
@keyframes dc-tumble { 0% { transform: translateY(-0.55em) rotate(-16deg); opacity: 0; } 55% { transform: translateY(0.05em) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes dc-settle { 0% { transform: translateY(-0.7em) rotate(22deg); opacity: 0; } 50% { transform: translateY(0.04em) rotate(-6deg); opacity: 1; } 75% { transform: rotate(2deg); } 100% { transform: none; } }

/* The hero's round: the cupboard in a circle, its pattern at the edge. */
.hero-frame.frame--circle { width: min(100%, 30rem); }

/* Where each annotation sits on the cupboard (percentages of the 4:3 picture). */
.pin-floor { left: 50%; top: 90%; }
.pin-bulb { left: 63%; top: 9%; }
.pin-inside { left: 61%; top: 33%; }
.pin-coats { left: 24%; top: 59%; }
.pin-shoes { left: 47%; top: 67%; }
.pin-cables { left: 69%; top: 80%; }
.pin-chair { left: 9%; top: 47%; }
.pin-boxes { left: 43%; top: 50%; }
.pin-shelf { left: 70%; top: 16%; }
.pin-hooks { left: 60%; top: 25%; }