/* Kestrel & Vane -- an invented advertiser of the Starward demonstration website.
   index.html is the rectangle: 250 high, fluid in width. A drawn helmet over the photograph. */

:root {
    --graphite: #16181b;
    --steel: #c9ccd1;
    --signal: #ff6a2b;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--graphite); overflow: hidden; }
body { font-family: 'Inter', system-ui, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; }

.piece { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; overflow: hidden; }
.photo { position: absolute; inset: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); animation: drift 18s ease-in-out infinite alternate; }
.shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(22, 24, 27, .96) 0%, rgba(22, 24, 27, .82) 48%, rgba(22, 24, 27, .2) 100%); }

.notice { position: absolute; top: 7px; right: 9px; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

.helmet { position: absolute; right: -14px; bottom: -8px; width: 150px; height: 150px; opacity: .95; }
.helmet .visor { animation: glint 5s ease-in-out 1.2s infinite; }

.words { position: absolute; left: 18px; top: 18px; bottom: 18px; right: 40%; display: flex; flex-direction: column; }
.mark { font: 700 11px/1 'Inter', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--steel); }
.mark b { color: var(--signal); }
.headline {
    display: block;
    margin-top: 14px;
    font: 600 27px/1.02 'Fraunces', Georgia, serif;
    letter-spacing: -.015em;
    animation: rise .8s ease-out both .2s;
}
.headline span { display: block; color: var(--signal); font-style: italic; }
.sub { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .78); animation: rise .8s ease-out both .45s; }
.go {
    margin-top: auto;
    align-self: flex-start;
    padding: 8px 13px;
    border: 1px solid var(--signal);
    border-radius: 999px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .2s ease;
}
.piece:hover .go { background: var(--signal); }

@media (min-width: 420px) { .headline { font-size: 33px; } .helmet { width: 180px; height: 180px; } }

@keyframes drift { from { transform: scale(1.05); } to { transform: scale(1.15) translateX(-3%); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes glint { 0%, 80%, 100% { opacity: .9; } 88% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }