/* The hullgrave.com holding page: the hero's hanging sign over the About scene, both from the main site
   (HeroSection.vue, AboutSection.vue); slate.css is copied in from app/assets/css by tools/holding/build.mjs. */
body { min-height: 100vh; background: linear-gradient(180deg, var(--ab2) 0%, var(--ab1) 30%, var(--ab0) 100%); }
.page { padding: 0 24px 40px; text-align: center; overflow: hidden; }

/* logo_hanging.png is 414x244: an 84-row sign under 160 rows of chain. The title box shows the bottom 124 rows; the
   rest rise above the page's top edge, so the chains run up out of sight. 0.41% of the sign's rows is one art pixel. */
.title { position: relative; margin: 0 auto; width: min(828px, 100%); aspect-ratio: 414 / 124; }
.sign { position: absolute; left: 0; right: 0; bottom: 0; display: block; animation: drop 1.7s .25s both; }
.sign img { display: block; width: 100%; height: auto; animation: creak 6s steps(1, end) 2s infinite; }
@keyframes drop {
  0% { transform: translateY(-62%); animation-timing-function: cubic-bezier(.55, 0, 1, .55); }
  42% { transform: translateY(2.46%); animation-timing-function: ease-out; }
  58% { transform: translateY(-1.23%); animation-timing-function: ease-in-out; }
  72% { transform: translateY(.82%); animation-timing-function: ease-in-out; }
  86% { transform: translateY(-.41%); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0); }
}
@keyframes creak {
  0%, 60%, 100% { transform: translate(0, 0); }
  66% { transform: translate(0, .41%); }
  74% { transform: translate(.24%, .41%); }
  82% { transform: translate(0, 0); }
  90% { transform: translate(-.24%, 0); }
}
.tag { margin: 20px 0 28px; font: 27px/1 var(--s); color: var(--hz3); letter-spacing: 4px; }

.log { max-width: 848px; margin: 0 auto; text-align: left; }
.body { padding: 18px 20px 22px; }
.scene { position: relative; overflow: hidden; border: 2px solid var(--st0); }
.scene img { image-rendering: pixelated; image-rendering: crisp-edges; }
.bg { display: block; width: 100%; height: auto; }
.fg { position: absolute; inset: 0; width: 100%; height: 100%; }
.passer { position: absolute; height: auto; animation: linear infinite; }
.levi { width: 39.625%; top: 62%; opacity: .75; transform: scaleX(-1); animation-name: pass-l; animation-duration: 95s; animation-delay: -30s; }
.whale { width: 22.875%; top: 50%; opacity: .6; animation-name: pass-r; animation-duration: 70s; animation-delay: -12s; }
@keyframes pass-r { from { left: -50%; } to { left: 105%; } }
@keyframes pass-l { from { left: 105%; } to { left: -85%; } }
/* the arks' sky band ends inside the solid wave body (row 204 of 500) and the wave strip (rows 184-215) covers it */
.sky { position: absolute; left: 0; top: 0; width: 100%; height: 40.8%; overflow: hidden; }
.waves { position: absolute; left: 0; top: 36.8%; width: 100%; height: auto; }
.ark { position: absolute; height: auto; animation: launch infinite cubic-bezier(.42, 0, .9, .65); }
.a0 { width: 11.5%; left: 81.75%; animation-duration: 16s; animation-delay: -5s; }
.a1 { width: 9%; left: 72%; animation-duration: 22s; animation-delay: -15s; }
.a2 { width: 7.25%; left: 89.5%; animation-duration: 28s; animation-delay: -2s; opacity: .85; }
@keyframes launch { from { top: 100%; } to { top: -185%; } }
.scout { position: absolute; width: 5.25%; height: auto; animation: patrol 26s infinite; }
@keyframes patrol {
  0% { left: 8%; top: 54%; transform: scaleX(1); animation-timing-function: ease-in-out; }
  46% { left: 44%; top: 49%; transform: scaleX(1); animation-timing-function: steps(1, end); }
  50% { left: 44%; top: 49%; transform: scaleX(-1); animation-timing-function: ease-in-out; }
  96% { left: 8%; top: 54%; transform: scaleX(-1); animation-timing-function: steps(1, end); }
  100% { left: 8%; top: 54%; transform: scaleX(1); }
}
.quote { margin: 20px 0 12px; color: var(--foam); }
.lede { margin: 0 0 16px; color: var(--bo3); }
.status { display: flex; flex-wrap: wrap; gap: 8px; }
.foot { margin-top: 28px; color: var(--bo2); }

@media (max-width: 768px) {
  .page { padding: 0 16px 32px; }
  .tag { font-size: 27px; letter-spacing: 2px; }
  .body { padding: 14px 14px 18px; }
  .trow { flex-wrap: wrap; }
  .trow .meta { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sign, .sign img { animation: none; }
  .passer, .scout { display: none; }
  .ark { animation: none; }
  .a0 { top: 12%; } .a1 { top: 38%; } .a2 { top: 22%; }
}