@font-face {
    font-family: "Oswald";
    src: url("oswald-variable.ttf") format("truetype");
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --ink: #111315;
    --panel: #1a1d1f;
    --panel-soft: #202326;
    --red: #a8212c;
    --red-bright: #cb303c;
    --ivory: #eee9df;
    --muted: #aaa8a2;
    --line: rgba(238, 233, 223, .18);
    --success: #5ba577;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--ink);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--ink);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ivory);
    background:
        radial-gradient(circle at 50% -15%, rgba(168, 33, 44, .18), transparent 38rem),
        linear-gradient(145deg, #17191b 0%, #0f1112 52%, #17191b 100%);
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: .18;
    background-image:
        repeating-linear-gradient(97deg, transparent 0 6px, rgba(255,255,255,.035) 7px, transparent 8px),
        repeating-linear-gradient(3deg, transparent 0 10px, rgba(0,0,0,.16) 11px, transparent 13px);
    mix-blend-mode: overlay;
}

button,
input,
summary {
    font: inherit;
}

button,
summary,
.picker {
    -webkit-tap-highlight-color: transparent;
}

.is-loading {
    overflow: hidden;
}

.mission-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: hidden;
    background:
        linear-gradient(105deg, rgba(18, 30, 39, .97) 0 38%, rgba(29, 23, 24, .97) 62% 100%),
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.03) 9px);
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility .3s ease;
}

html:not(.js) .mission-loader {
    display: none;
}

.mission-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-inner {
    width: min(34rem, 100%);
    max-height: 100%;
    padding: .2rem;
    overflow-y: auto;
    text-align: center;
}

.loader-code,
.loader-status {
    margin: 0;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.loader-code {
    color: var(--red-bright);
    font-size: .82rem;
    font-weight: 600;
}

.loader-status {
    color: var(--muted);
    font-size: .75rem;
}

.loader-status span {
    display: inline-block;
    color: var(--red-bright);
    animation: loader-blink 1s steps(3, end) infinite;
}

.intro-choice {
    width: min(25rem, 100%);
    margin: 1.15rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(238, 233, 223, .18);
}

.intro-choice > p {
    margin: 0 0 .75rem;
    color: var(--ivory);
    font-family: "Oswald", sans-serif;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.intro-choice-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.intro-choice-button {
    min-height: 3rem;
    padding: .7rem 1rem;
    color: var(--ivory);
    background: rgba(17, 19, 21, .75);
    border: 1px solid rgba(238, 233, 223, .35);
    font-family: "Oswald", sans-serif;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    cursor: pointer;
}

.intro-choice-button-primary {
    background: var(--red);
    border-color: var(--red-bright);
}

.intro-choice-button:focus-visible {
    outline: 2px solid var(--ivory);
    outline-offset: 3px;
}

.loader-map {
    position: relative;
    height: 13.5rem;
    margin: .7rem 0 .55rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(238,233,223,.15);
}

.loader-map::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(90deg, rgba(77,132,162,.1), transparent 45%, rgba(236,132,59,.1));
}

.loader-climate {
    position: absolute;
    top: .35rem;
    bottom: 1.45rem;
    width: 48%;
    overflow: hidden;
}

.loader-cold {
    left: 0;
    color: #b9d2df;
}

.loader-warm {
    right: 0;
    color: #f5bd73;
}

.climate-label,
.loader-climate > strong {
    position: absolute;
    z-index: 3;
    top: 0;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
}

.climate-label {
    left: .35rem;
    font-size: .62rem;
    letter-spacing: .12em;
}

.loader-warm .climate-label {
    right: .35rem;
    left: auto;
}

.loader-climate > strong {
    top: .9rem;
    left: .35rem;
    font-size: 1rem;
    font-weight: 500;
}

.loader-warm > strong {
    right: .35rem;
    left: auto;
}

.cold-landscape {
    position: absolute;
    bottom: 1.25rem;
    left: -1rem;
    z-index: 2;
    width: 11rem;
    fill: #334a57;
    opacity: .9;
}

.cold-landscape .snow-cap {
    fill: #c8dce5;
}

.snow {
    position: absolute;
    z-index: 3;
    color: #d9edf5;
    animation: snow-fall 2.2s linear infinite;
}

.snow-one {
    top: 1.2rem;
    left: 35%;
}

.snow-two {
    top: 2.5rem;
    left: 68%;
    animation-delay: -.8s;
}

.snow-three {
    top: 4.2rem;
    left: 15%;
    animation-delay: -1.4s;
}

.loader-sun {
    position: absolute;
    top: 1.5rem;
    right: 1.25rem;
    z-index: 2;
    width: 3.3rem;
    height: 3.3rem;
    background: #f4a941;
    border-radius: 50%;
    box-shadow: 0 0 0 .6rem rgba(244,169,65,.08), 0 0 2.4rem rgba(244,169,65,.35);
    animation: sun-rise 3.3s ease-out both;
}

.loader-palm {
    position: absolute;
    right: 2.4rem;
    bottom: .75rem;
    z-index: 3;
    width: 5rem;
    overflow: visible;
    transform-origin: 55% 100%;
    animation: palm-sway 2.4s ease-in-out infinite alternate;
}

.road-palm {
    position: absolute;
    bottom: 3.9rem;
    z-index: 5;
    width: 2.35rem;
    overflow: visible;
    transform-origin: 55% 100%;
    animation: roadside-palm-sway 1.7s ease-in-out infinite alternate;
}

.road-palm-one {
    left: 50%;
}

.road-palm-two {
    left: 68%;
    width: 1.85rem;
    animation-delay: -.7s;
}

.road-palm-three {
    left: 83%;
    width: 2.7rem;
    animation-delay: -1.2s;
}

.palm-trunk,
.palm-leaf {
    fill: none;
    stroke: #161719;
    stroke-linecap: round;
}

.palm-trunk {
    stroke-width: 7;
}

.palm-leaf {
    stroke-width: 6;
}

.loader-sea {
    position: absolute;
    right: -1rem;
    bottom: .6rem;
    z-index: 2;
    width: 11rem;
    height: 2.3rem;
    border-top: 3px solid #4d9bb0;
    border-radius: 50%;
    animation: sea-wave 2s ease-in-out infinite alternate;
}

.wave-two {
    right: -2.5rem;
    bottom: -.2rem;
    opacity: .55;
    animation-delay: -1s;
}

.loader-route-line {
    position: absolute;
    top: 67%;
    left: 8%;
    z-index: 4;
    width: 84%;
    border-top: 2px dashed rgba(238, 233, 223, .55);
}

.loader-route-line::after {
    position: absolute;
    top: -5px;
    right: -4px;
    width: 8px;
    height: 8px;
    content: "";
    border: 2px solid var(--red-bright);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(203, 48, 60, .13);
}

.loader-place {
    position: absolute;
    z-index: 7;
    bottom: .1rem;
    font-family: "Oswald", sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
}

.loader-place-start {
    left: 4%;
}

.loader-place-end {
    right: 1%;
    color: var(--red-bright);
}

.loader-van-track {
    position: absolute;
    top: 4.65rem;
    left: 1%;
    z-index: 6;
    width: 9.25rem;
    filter: drop-shadow(0 7px 6px rgba(0,0,0,.48));
    animation: van-drive 3.3s cubic-bezier(.35,.05,.22,1) infinite;
}

.loader-van {
    display: block;
    width: 100%;
    animation: van-bounce .58s ease-in-out infinite;
}

.van-body {
    fill: url(#van-body-gradient);
    stroke: #8a8e8f;
    stroke-width: 1.6;
}

.van-shadow {
    fill: rgba(0, 0, 0, .42);
}

.van-upper-shadow {
    fill: #090b0c;
    opacity: .8;
}

.van-roof-spoiler {
    fill: var(--red-bright);
    stroke: #ffd5cd;
    stroke-width: 1;
}

.van-window {
    fill: url(#van-window-gradient);
    stroke: #050607;
    stroke-width: 2;
}

.van-window-rear,
.van-window-middle {
    fill: #101719;
}

.van-stripe {
    fill: var(--red-bright);
    stroke: #ff6a58;
    stroke-width: .8;
}

.van-panel-line,
.van-door-handle {
    fill: none;
    stroke: #52585a;
    stroke-width: 1.2;
}

.van-door-handle {
    stroke: #959b9c;
    stroke-width: 2;
    stroke-linecap: round;
}

.van-mirror,
.van-bumper {
    fill: #080a0b;
    stroke: #8a8e8f;
    stroke-width: 1;
}

.van-headlight {
    fill: #ffd56c;
}

.van-tail-light {
    fill: var(--red-bright);
}

.van-wheel {
    fill: #050607;
    stroke: #b9b3a8;
    stroke-width: 2.4;
}

.van-rim {
    fill: #15191a;
    stroke: var(--red-bright);
    stroke-width: 3;
}

.van-spokes {
    fill: none;
    stroke: var(--red-bright);
    stroke-width: 1.7;
}

.van-hub {
    fill: var(--red-bright);
}

.van-wheel-detail {
    transform-box: fill-box;
    transform-origin: center;
    animation: wheel-spin .48s linear infinite;
}

.sound-toggle {
    position: fixed;
    top: max(.8rem, env(safe-area-inset-top));
    right: .8rem;
    z-index: 1100;
    display: flex;
    gap: .4rem;
    align-items: center;
    min-height: 2.4rem;
    padding: .45rem .65rem;
    color: var(--ivory);
    background: rgba(21,23,25,.9);
    border: 1px solid rgba(238,233,223,.22);
    box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.25);
    font-family: "Oswald", sans-serif;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    cursor: pointer;
    opacity: 1;
    transition: opacity .25s ease, border-color .2s ease, background .2s ease;
}

.is-loading .sound-toggle {
    opacity: 0;
    pointer-events: none;
}

.is-loading .sound-toggle {
    opacity: 0;
    pointer-events: none;
}

.sound-toggle:hover,
.sound-toggle.is-playing {
    background: rgba(168,33,44,.92);
    border-color: var(--red-bright);
}

.sound-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: var(--ivory);
}

.sound-toggle svg path:not(:first-child) {
    fill: none;
    stroke: var(--ivory);
    stroke-linecap: round;
    stroke-width: 1.7;
}

.sound-toggle .sound-wave {
    display: none;
}

.sound-toggle.is-playing .sound-wave {
    display: block;
}

.sound-toggle.is-playing .sound-off-mark {
    display: none;
}

.upload-app {
    width: min(100%, 52rem);
    margin: 0 auto;
    padding: 2.5rem 1rem calc(2rem + env(safe-area-inset-bottom));
}

.mission-hero {
    display: grid;
    justify-items: center;
    padding: 1.2rem 0 2.2rem;
    text-align: center;
}

.wolf-logo {
    width: clamp(4.8rem, 19vw, 6.8rem);
    height: auto;
    margin-bottom: .7rem;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.38));
}

.eyebrow,
.section-kicker {
    margin: 0;
    color: var(--muted);
    font-family: "Oswald", sans-serif;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
}

.eyebrow span {
    color: var(--red-bright);
}

.mission-hero h1 {
    margin: .15rem 0 0;
    font-family: "Oswald", sans-serif;
    font-size: clamp(3.1rem, 11.6vw, 5.9rem);
    font-weight: 650;
    line-height: .92;
    text-transform: uppercase;
    letter-spacing: -.035em;
}

.mission-hero h1 span {
    display: block;
    margin-bottom: .3em;
    color: var(--ivory);
    font-size: .58em;
    font-weight: 520;
    line-height: 1;
    letter-spacing: .34em;
    text-indent: .34em;
}

.mission-hero h1 {
    color: var(--red-bright);
}

.mission-tagline {
    margin: .85rem 0 0;
    color: var(--ivory);
    font-family: Georgia, serif;
    font-size: clamp(.95rem, 3vw, 1.08rem);
    font-style: italic;
}

.mission-briefing,
.upload-panel {
    position: relative;
    margin-bottom: 1.15rem;
    padding: 1.2rem;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(33,36,38,.96), rgba(22,24,26,.98));
    border: 1px solid var(--line);
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.22), inset 4px 0 0 var(--red);
}

.mission-briefing::after,
.upload-panel::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.4rem;
    height: 3.4rem;
    content: "";
    background: linear-gradient(135deg, transparent 49%, rgba(168,33,44,.35) 50%, rgba(168,33,44,.35) 52%, transparent 53%);
    pointer-events: none;
}

.section-stamp {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: .28rem .5rem;
    color: var(--red-bright);
    border: 1px solid rgba(203,48,60,.7);
    font-family: "Oswald", sans-serif;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    transform: rotate(-1deg);
}

.briefing-heading,
.upload-heading {
    display: flex;
    gap: .8rem;
    align-items: center;
}

.briefing-heading h2,
.upload-heading h2 {
    margin: .05rem 0 0;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.6rem, 6.4vw, 2.2rem);
    font-weight: 560;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.target-symbol,
.upload-symbol {
    position: relative;
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    flex: 0 0 2.9rem;
    place-items: center;
    color: var(--ivory);
    border: 1px solid var(--line);
}

.target-symbol::before,
.target-symbol::after,
.target-symbol span {
    position: absolute;
    content: "";
}

.target-symbol::before {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--ivory);
    border-radius: 50%;
}

.target-symbol::after {
    width: 2rem;
    height: 2px;
    background: var(--red-bright);
}

.target-symbol span {
    width: 2px;
    height: 2rem;
    background: var(--red-bright);
}

.upload-symbol svg {
    width: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.mission-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.2rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.mission-fact {
    display: grid;
    min-width: 0;
    padding: .85rem .5rem;
    text-align: center;
}

.mission-fact + .mission-fact {
    border-left: 1px solid var(--line);
}

.mission-fact svg {
    width: 1.35rem;
    margin: 0 auto .4rem;
    fill: none;
    stroke: var(--ivory);
    stroke-width: 1.7;
}

.mission-fact span,
.mission-fact strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mission-fact span {
    color: var(--red-bright);
    font-family: "Oswald", sans-serif;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mission-fact strong {
    margin-top: .1rem;
    font-family: "Oswald", sans-serif;
    font-size: .88rem;
    font-weight: 500;
    text-transform: uppercase;
}

.mission-fact--motto strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.18;
}

.briefing-copy,
.upload-copy {
    margin: 1rem 0;
    color: #d3d0c9;
    font-size: .9rem;
    line-height: 1.55;
}

.mission-details {
    border-top: 1px dashed var(--line);
}

.mission-details summary {
    position: relative;
    padding: .8rem 1.4rem .1rem 0;
    color: var(--ivory);
    list-style: none;
    font-family: "Oswald", sans-serif;
    font-size: .77rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .09em;
    cursor: pointer;
}

.mission-details summary::-webkit-details-marker {
    display: none;
}

.mission-details summary::after {
    position: absolute;
    right: .2rem;
    content: "+";
    color: var(--red-bright);
    font-size: 1.2rem;
    line-height: 1;
}

.mission-details[open] summary::after {
    content: "–";
}

.mission-details ul {
    display: grid;
    gap: .45rem;
    margin: .9rem 0 .25rem;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: .85rem;
}

.mission-details li::before {
    margin-right: .55rem;
    color: var(--red-bright);
    content: "#";
    font-family: "Oswald", sans-serif;
    font-weight: 700;
}

.upload-panel {
    padding-bottom: 1.3rem;
}

.picker {
    display: flex;
    gap: .85rem;
    align-items: center;
    justify-content: center;
    min-height: 6.8rem;
    padding: 1rem;
    color: var(--ivory);
    background: rgba(11,12,13,.35);
    border: 1px dashed rgba(203,48,60,.75);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.picker:hover {
    background: rgba(168,33,44,.09);
    border-color: var(--red-bright);
}

.picker:active {
    transform: scale(.99);
}

.picker:focus-within {
    outline: 2px solid var(--ivory);
    outline-offset: 3px;
}

.picker > svg {
    width: 2.5rem;
    flex: 0 0 2.5rem;
    fill: none;
    stroke: var(--red-bright);
    stroke-linecap: square;
    stroke-width: 2.2;
}

.picker-copy {
    display: grid;
    gap: .15rem;
}

.picker-copy strong {
    font-family: "Oswald", sans-serif;
    font-size: 1.08rem;
    font-weight: 560;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.picker-copy small {
    color: var(--muted);
    font-size: .75rem;
}

.picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.selection {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.selection-head {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
}

#selection-summary {
    font-family: "Oswald", sans-serif;
    font-size: .85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.text-button {
    padding: .35rem 0;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    font-family: "Oswald", sans-serif;
    font-size: .69rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}

.preview-list {
    display: grid;
    gap: .55rem;
    overflow-anchor: none;
}

.preview-card {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) 2.25rem;
    gap: .75rem;
    align-items: center;
    min-width: 0;
    padding: .6rem;
    background: rgba(10,11,12,.48);
    border: 1px solid var(--line);
    border-left: 3px solid #626266;
}

.preview-card img,
.preview-card video,
.generic-preview {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    background: #292c2e;
    border: 1px solid rgba(238,233,223,.12);
}

.generic-preview {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-family: "Oswald", sans-serif;
    font-size: .65rem;
    letter-spacing: .08em;
}

.file-details {
    display: grid;
    gap: .22rem;
    min-width: 0;
}

.file-details strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--ivory);
    font-size: .83rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-details span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-progress,
.overall-progress {
    height: 4px;
    overflow: hidden;
    background: rgba(238,233,223,.13);
}

.file-progress div,
.overall-progress div {
    width: 0;
    height: 100%;
    background: var(--red-bright);
    transition: width .15s linear;
}

.overall-progress {
    height: 7px;
    margin-top: 1rem;
}

.remove-file {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    place-items: center;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    font-size: 1.2rem;
    cursor: pointer;
}

.remove-file:hover {
    color: var(--ivory);
    border-color: var(--red-bright);
}

.state-done {
    border-left-color: var(--success);
}

.state-error {
    border-left-color: var(--red-bright);
}

.overall-status {
    min-height: 1.25rem;
    margin: .7rem 0;
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}

.upload-button {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.35rem;
    padding: .75rem 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--red), var(--red-bright));
    border: 0;
    box-shadow: 0 .7rem 1.5rem rgba(122,13,25,.23);
    font-family: "Oswald", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
}

.upload-button:not(:disabled):hover {
    filter: brightness(1.08);
}

button:disabled,
.picker:has(input:disabled) {
    cursor: not-allowed;
    opacity: .48;
}

.mission-footer {
    display: flex;
    gap: .7rem;
    align-items: center;
    justify-content: center;
    padding: 1rem 0 .2rem;
    color: #747474;
    font-family: "Oswald", sans-serif;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.mission-footer span:nth-child(2) {
    color: var(--red);
}

@keyframes van-drive {
    0% { transform: translateX(-55%) rotate(-2deg); }
    16% { transform: translateX(12%) rotate(1deg); }
    48% { transform: translateX(clamp(8rem, 35vw, 15rem)) rotate(-1deg); }
    76% { transform: translateX(clamp(12rem, 58vw, 21rem)) rotate(1deg); }
    100% { transform: translateX(calc(min(34rem, 100vw) - 10rem)) rotate(0); }
}

@keyframes van-bounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    28% { transform: translateY(-3px) rotate(-.45deg); }
    58% { transform: translateY(1px) rotate(.35deg); }
    78% { transform: translateY(-1px) rotate(-.2deg); }
}

@keyframes wheel-spin {
    to { transform: rotate(360deg); }
}

@keyframes roadside-palm-sway {
    from { transform: rotate(-3deg); }
    to { transform: rotate(3deg); }
}

@keyframes loader-blink {
    0%, 30% { opacity: .25; }
    60%, 100% { opacity: 1; }
}

@keyframes snow-fall {
    from { transform: translateY(-1rem) rotate(0); opacity: 0; }
    25% { opacity: .9; }
    to { transform: translateY(5rem) rotate(180deg); opacity: 0; }
}

@keyframes sun-rise {
    from { transform: translateY(4rem) scale(.7); opacity: 0; }
    55%, to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes palm-sway {
    from { transform: rotate(-2deg); }
    to { transform: rotate(3deg); }
}

@keyframes sea-wave {
    from { transform: translateX(-.5rem) scaleY(.85); }
    to { transform: translateX(.5rem) scaleY(1.1); }
}

@media (min-width: 640px) {
    .upload-app {
        padding-top: 3rem;
    }

    .mission-briefing,
    .upload-panel {
        padding: 1.55rem;
    }

    .mission-fact {
        padding: 1rem;
    }

    .briefing-copy,
    .upload-copy {
        font-size: .96rem;
    }
}

@media (max-width: 370px) {
    .upload-app {
        padding-inline: .7rem;
    }

    .mission-briefing,
    .upload-panel {
        padding: 1rem .85rem;
    }

    .mission-fact {
        padding-inline: .2rem;
    }

    .mission-fact strong {
        font-size: .78rem;
    }

    .preview-card {
        grid-template-columns: 3.5rem minmax(0, 1fr) 2rem;
        gap: .55rem;
    }

    .preview-card img,
    .preview-card video,
    .generic-preview {
        width: 3.5rem;
        height: 3.5rem;
    }

    .remove-file {
        width: 2rem;
        height: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}