/* Dockyard motifs. The hero ends in a dock band with one of three scenes
   (dock.js); sections open with a row of stacked boxes, and cards sit stacked
   on a container behind them. Every colour comes from the theme tokens. */

/* ---------- shared details ---------- */
.hero { padding-bottom: calc(var(--dock-h, 200px) + 40px); }
.hero .wrap { position: relative; z-index: 1; }

/* stencilled container codes on section labels */
.kicker[data-code]::after {
  content: attr(data-code);
  margin-left: 4px; padding: 3px 7px;
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em;
  color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 4px;
  white-space: nowrap;
}

/* the mark blinks, and nudges forward on hover */
.eye { transform-box: fill-box; transform-origin: center; animation: blink-eye 5.5s infinite; }
@keyframes blink-eye { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
.brand-mark { transition: transform .25s ease; }
.brand:hover .brand-mark { transform: translateX(3px); }

/* three boxes in the terminal title bar, booting in turn */
.term-stack { margin-left: auto; display: inline-flex; gap: 4px; }
.term-stack b {
  width: 10px; height: 8px; border-radius: 2px; transform: skewX(-10deg);
  background: #2E3640; animation: stack 2.4s ease-in-out infinite;
}
.term-stack b:nth-child(2) { animation-delay: .3s; }
.term-stack b:nth-child(3) { animation-delay: .6s; }
@keyframes stack { 0%, 60%, 100% { background: #2E3640; } 20% { background: var(--ember); } }

/* "later" tag on the planned stormglass box in the diagram */
.a-later { font: 600 10.5px var(--f-mono); fill: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* sections open with a row of stacked boxes */
.section-alt { position: relative; }
.section-alt::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; opacity: .55;
  background:
    repeating-linear-gradient(90deg, var(--line-strong) 0 46px, transparent 46px 50px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 25px, var(--line-strong) 25px 71px, transparent 71px 75px) 0 11px / 100% 9px no-repeat;
}

/* cards sit stacked on a container behind them */
.card, .chain, .bn-tile { position: relative; }
.card, .bn-tile, .chain { box-shadow: 9px 9px 0 -1px var(--surface-2), 9px 9px 0 0 var(--line-strong); }
.bn-boot { box-shadow: 9px 9px 0 -1px color-mix(in srgb, var(--ember) 40%, var(--surface-2)), 9px 9px 0 0 var(--line-strong); }

@media (max-width: 640px) { .kicker[data-code]::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .eye, .term-stack b { animation: none !important; } }

/* ---------- the rest of the page: plain sections show the terminal from above,
   grey sections show the ribbed steel of a container wall ---------- */
.section { position: relative; }
.section > .wrap { position: relative; z-index: 1; }
.section:not(.section-alt)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--line); opacity: .55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='93'%3E%3Crect x='0' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='42' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='84' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='126' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='210' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='0' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='42' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='126' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='168' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='210' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='0' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='84' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='126' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='168' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='210' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='0' y='60' width='38' height='15' rx='1.5'/%3E%3Crect x='42' y='60' width='38' height='15' rx='1.5'/%3E%3Crect x='84' y='60' width='38' height='15' rx='1.5'/%3E%3Crect x='126' y='60' width='38' height='15' rx='1.5'/%3E%3Crect x='168' y='60' width='38' height='15' rx='1.5'/%3E%3C/svg%3E"), linear-gradient(to left, #000 0%, rgba(0,0,0,.6) 30%, transparent 70%);
  -webkit-mask-repeat: repeat, no-repeat;
  -webkit-mask-position: right 24px top 24px, 0 0;
  -webkit-mask-composite: source-in;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='93'%3E%3Crect x='0' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='42' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='84' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='126' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='210' y='0' width='38' height='15' rx='1.5'/%3E%3Crect x='0' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='42' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='126' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='168' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='210' y='20' width='38' height='15' rx='1.5'/%3E%3Crect x='0' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='84' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='126' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='168' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='210' y='40' width='38' height='15' rx='1.5'/%3E%3Crect x='0' y='60' width='38' height='15' rx='1.5'/%3E%3Crect x='42' y='60' width='38' height='15' rx='1.5'/%3E%3Crect x='84' y='60' width='38' height='15' rx='1.5'/%3E%3Crect x='126' y='60' width='38' height='15' rx='1.5'/%3E%3Crect x='168' y='60' width='38' height='15' rx='1.5'/%3E%3C/svg%3E"), linear-gradient(to left, #000 0%, rgba(0,0,0,.6) 30%, transparent 70%);
  mask-repeat: repeat, no-repeat;
  mask-position: right 24px top 24px, 0 0;
  mask-composite: intersect;
}
.section-alt {
  background-image: repeating-linear-gradient(90deg,
    transparent 0 14px, color-mix(in srgb, var(--ink) 3.5%, transparent) 14px 17px, transparent 17px 20px);
}

/* ---------- the footer: a harbour skyline on a strip of water ---------- */
.footer { position: relative; padding-top: 150px; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; pointer-events: none;
  background: var(--line-strong); opacity: .5;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='96'%3E%3Crect x='0' y='81' width='40' height='13' rx='1'/%3E%3Crect x='0' y='66' width='40' height='13' rx='1'/%3E%3Crect x='43' y='81' width='40' height='13' rx='1'/%3E%3Crect x='43' y='66' width='40' height='13' rx='1'/%3E%3Crect x='43' y='51' width='40' height='13' rx='1'/%3E%3Crect x='43' y='36' width='40' height='13' rx='1'/%3E%3Crect x='86' y='81' width='40' height='13' rx='1'/%3E%3Crect x='86' y='66' width='40' height='13' rx='1'/%3E%3Crect x='86' y='51' width='40' height='13' rx='1'/%3E%3Crect x='129' y='81' width='40' height='13' rx='1'/%3E%3Crect x='172' y='81' width='40' height='13' rx='1'/%3E%3Crect x='172' y='66' width='40' height='13' rx='1'/%3E%3Crect x='172' y='51' width='40' height='13' rx='1'/%3E%3Crect x='172' y='36' width='40' height='13' rx='1'/%3E%3Crect x='172' y='21' width='40' height='13' rx='1'/%3E%3Crect x='215' y='81' width='40' height='13' rx='1'/%3E%3Crect x='215' y='66' width='40' height='13' rx='1'/%3E%3Crect x='215' y='51' width='40' height='13' rx='1'/%3E%3Crect x='258' y='81' width='40' height='13' rx='1'/%3E%3Crect x='258' y='66' width='40' height='13' rx='1'/%3E%3Crect x='301' y='81' width='40' height='13' rx='1'/%3E%3Crect x='301' y='66' width='40' height='13' rx='1'/%3E%3Crect x='301' y='51' width='40' height='13' rx='1'/%3E%3Crect x='301' y='36' width='40' height='13' rx='1'/%3E%3Crect x='387' y='81' width='40' height='13' rx='1'/%3E%3Crect x='387' y='66' width='40' height='13' rx='1'/%3E%3Crect x='387' y='51' width='40' height='13' rx='1'/%3E%3Crect x='430' y='81' width='40' height='13' rx='1'/%3E%3Crect x='430' y='66' width='40' height='13' rx='1'/%3E%3Crect x='430' y='51' width='40' height='13' rx='1'/%3E%3Crect x='430' y='36' width='40' height='13' rx='1'/%3E%3Crect x='430' y='21' width='40' height='13' rx='1'/%3E%3Crect x='473' y='81' width='40' height='13' rx='1'/%3E%3Crect x='473' y='66' width='40' height='13' rx='1'/%3E%3Crect x='516' y='81' width='40' height='13' rx='1'/%3E%3Crect x='516' y='66' width='40' height='13' rx='1'/%3E%3Crect x='516' y='51' width='40' height='13' rx='1'/%3E%3Crect x='516' y='36' width='40' height='13' rx='1'/%3E%3Crect x='559' y='81' width='40' height='13' rx='1'/%3E%3Crect x='602' y='81' width='40' height='13' rx='1'/%3E%3Crect x='602' y='66' width='40' height='13' rx='1'/%3E%3Crect x='602' y='51' width='40' height='13' rx='1'/%3E%3Crect x='348' y='14' width='4' height='82'/%3E%3Crect x='378' y='14' width='4' height='82'/%3E%3Crect x='328' y='10' width='86' height='5'/%3E%3Crect x='366' y='15' width='2' height='26'/%3E%3Crect x='352' y='41' width='30' height='11' rx='1'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat-x; -webkit-mask-position: center bottom;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='96'%3E%3Crect x='0' y='81' width='40' height='13' rx='1'/%3E%3Crect x='0' y='66' width='40' height='13' rx='1'/%3E%3Crect x='43' y='81' width='40' height='13' rx='1'/%3E%3Crect x='43' y='66' width='40' height='13' rx='1'/%3E%3Crect x='43' y='51' width='40' height='13' rx='1'/%3E%3Crect x='43' y='36' width='40' height='13' rx='1'/%3E%3Crect x='86' y='81' width='40' height='13' rx='1'/%3E%3Crect x='86' y='66' width='40' height='13' rx='1'/%3E%3Crect x='86' y='51' width='40' height='13' rx='1'/%3E%3Crect x='129' y='81' width='40' height='13' rx='1'/%3E%3Crect x='172' y='81' width='40' height='13' rx='1'/%3E%3Crect x='172' y='66' width='40' height='13' rx='1'/%3E%3Crect x='172' y='51' width='40' height='13' rx='1'/%3E%3Crect x='172' y='36' width='40' height='13' rx='1'/%3E%3Crect x='172' y='21' width='40' height='13' rx='1'/%3E%3Crect x='215' y='81' width='40' height='13' rx='1'/%3E%3Crect x='215' y='66' width='40' height='13' rx='1'/%3E%3Crect x='215' y='51' width='40' height='13' rx='1'/%3E%3Crect x='258' y='81' width='40' height='13' rx='1'/%3E%3Crect x='258' y='66' width='40' height='13' rx='1'/%3E%3Crect x='301' y='81' width='40' height='13' rx='1'/%3E%3Crect x='301' y='66' width='40' height='13' rx='1'/%3E%3Crect x='301' y='51' width='40' height='13' rx='1'/%3E%3Crect x='301' y='36' width='40' height='13' rx='1'/%3E%3Crect x='387' y='81' width='40' height='13' rx='1'/%3E%3Crect x='387' y='66' width='40' height='13' rx='1'/%3E%3Crect x='387' y='51' width='40' height='13' rx='1'/%3E%3Crect x='430' y='81' width='40' height='13' rx='1'/%3E%3Crect x='430' y='66' width='40' height='13' rx='1'/%3E%3Crect x='430' y='51' width='40' height='13' rx='1'/%3E%3Crect x='430' y='36' width='40' height='13' rx='1'/%3E%3Crect x='430' y='21' width='40' height='13' rx='1'/%3E%3Crect x='473' y='81' width='40' height='13' rx='1'/%3E%3Crect x='473' y='66' width='40' height='13' rx='1'/%3E%3Crect x='516' y='81' width='40' height='13' rx='1'/%3E%3Crect x='516' y='66' width='40' height='13' rx='1'/%3E%3Crect x='516' y='51' width='40' height='13' rx='1'/%3E%3Crect x='516' y='36' width='40' height='13' rx='1'/%3E%3Crect x='559' y='81' width='40' height='13' rx='1'/%3E%3Crect x='602' y='81' width='40' height='13' rx='1'/%3E%3Crect x='602' y='66' width='40' height='13' rx='1'/%3E%3Crect x='602' y='51' width='40' height='13' rx='1'/%3E%3Crect x='348' y='14' width='4' height='82'/%3E%3Crect x='378' y='14' width='4' height='82'/%3E%3Crect x='328' y='10' width='86' height='5'/%3E%3Crect x='366' y='15' width='2' height='26'/%3E%3Crect x='352' y='41' width='30' height='11' rx='1'/%3E%3C/svg%3E"); mask-repeat: repeat-x; mask-position: center bottom;
}
.footer::after {
  content: ""; position: absolute; left: 0; right: 0; top: 96px; height: 22px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--bar-other) 35%, transparent) 0 18px, transparent 18px 26px) 0 4px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--bar-other) 25%, transparent) 9px 22px, transparent 22px 26px) 0 12px / 100% 2px no-repeat,
    color-mix(in srgb, var(--bar-other) 10%, transparent);
  animation: waves 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .footer::after { animation: none; } }