/* Welcome and update dialogs (welcome-v3.js, update-notice.js). Tokens only, so every theme works.
   Final states are the base styles: reduced motion (v2.css kills animations) just shows it. */
.w3-back {
    position: fixed; inset: 0; z-index: var(--z-dialog, 10090);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box; overflow-y: auto;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(6px);
    animation: w3-fade .3s ease both;
}
.w3-back.w3-out { opacity: 0; transition: opacity .18s ease; }

.w3-card {
    position: relative; width: 100%; max-width: 560px; margin: auto;
    background: var(--v2-panel); border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-r-lg); box-shadow: var(--v2-shadow-pop);
    overflow: hidden; color: var(--text);
    animation: w3-rise .45s var(--v2-ease) both;
}

/* Hero: the logo crosses a finish line, then the version flips up on a timing board. */
.w3-hero {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: var(--s3);
    padding: var(--s6) var(--s5) var(--s5);
    background: var(--v2-inset); border-bottom: 1px solid var(--v2-line);
}
.w3-check {
    position: absolute; left: 0; right: 0; top: 0; height: 8px;
    background: repeating-conic-gradient(var(--text) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
    opacity: .16;
    animation: w3-wipe .9s var(--v2-ease) .1s both;
}
.w3-line {
    position: absolute; top: 0; bottom: 0; left: 18%; width: 6px;
    background: repeating-conic-gradient(var(--text) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
    opacity: .12;
    animation: w3-gate 1.2s ease .2s both;
}
.w3-logo {
    position: relative; display: block; height: 64px; width: auto; max-width: 100%;
    animation: w3-sweep .85s cubic-bezier(.3, .8, .25, 1) .2s both;
}
html[data-theme="daylight"] .w3-logo { filter: brightness(.45); }

.w3-board {
    position: relative; display: flex; align-items: center; gap: var(--s3);
    padding-left: var(--s3); border-left: 3px solid var(--accent);
    animation: w3-fade .3s ease .85s both;
}
.w3-cap {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600;
    letter-spacing: var(--v2-track-caps, .08em); text-transform: uppercase; color: var(--text-3, var(--text));
    writing-mode: vertical-rl; transform: rotate(180deg);
}
.w3-ver {
    display: inline-flex; overflow: hidden;
    font-family: var(--v2-font-display); font-weight: 800; font-stretch: 84%;
    font-variant-numeric: tabular-nums; line-height: .9;
    font-size: clamp(84px, 24vw, 132px); color: var(--text-hi, var(--text));
}
.w3-ver > span { display: inline-block; animation: w3-flip .5s var(--v2-ease) both; }
.w3-ver > span:nth-child(1) { animation-delay: .95s; }
.w3-ver > span:nth-child(2) { animation-delay: 1.05s; color: var(--accent); }
.w3-ver > span:nth-child(3) { animation-delay: 1.15s; }

.w3-body { padding: var(--s5); }
.w3-title {
    margin: 0 0 var(--s4); font-family: var(--v2-font-display); font-weight: 700; font-stretch: 94%;
    font-size: clamp(22px, 5.4vw, 28px); line-height: 1.15; color: var(--text-hi, var(--text));
    animation: w3-up .4s var(--v2-ease) 1.3s both;
}
.w3-list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s2); }
.w3-list li {
    display: flex; gap: var(--s3); align-items: baseline;
    font-size: var(--v2-fs-md); line-height: 1.4; color: var(--text-2, var(--text));
    padding: var(--s2) 0; border-top: 1px solid var(--v2-line);
    animation: w3-up .4s var(--v2-ease) both;
    animation-delay: calc(1.5s + var(--w3-i) * .15s);
}
.w3-list li:first-child { border-top: 0; }
.w3-n {
    flex: none; font-family: var(--v2-font-display); font-weight: 700; font-stretch: 84%;
    font-variant-numeric: tabular-nums; font-size: var(--v2-fs-sm); color: var(--accent);
}
.w3-acts {
    display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap;
    animation: w3-up .4s var(--v2-ease) 2.2s both;
}
/* margin 0: the global button margin (app.css) made the row 8 px taller and stretched the <a> to fill it. */
.w3-acts > * { margin: 0; min-height: var(--v2-h-lg); padding: 0 var(--s5); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
/* What's new is a link, at the start of the row; the two buttons sit together at the end. */
.w3-acts > .w3-link { margin-right: auto; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

@media (max-width: 480px) {
    .w3-hero { padding: var(--s5) var(--s4) var(--s4); }
    .w3-logo { height: 48px; }
    .w3-body { padding: var(--s4); }
    .w3-acts > button { flex: 1 1 0; }
    .w3-acts > .w3-link { flex: 1 0 100%; }
}

@keyframes w3-fade { from { opacity: 0; } }
@keyframes w3-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes w3-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes w3-wipe { from { transform: translateX(-100%); } }
@keyframes w3-sweep {
    0% { opacity: 0; transform: translateX(-110vw) skewX(-14deg); filter: blur(4px); }
    70% { opacity: 1; transform: translateX(10px) skewX(-4deg); filter: none; }
}
html[data-theme="daylight"] .w3-logo { animation-name: w3-sweep-day; }
@keyframes w3-sweep-day {
    0% { opacity: 0; transform: translateX(-110vw) skewX(-14deg); filter: brightness(.45) blur(4px); }
    70% { opacity: 1; transform: translateX(10px) skewX(-4deg); filter: brightness(.45); }
}
/* The finish line flashes in the accent as the logo crosses it. */
@keyframes w3-gate {
    0%, 30% { opacity: .12; }
    45% { opacity: 1; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
}
@keyframes w3-flip { from { opacity: 0; transform: translateY(70%); } }

@media (prefers-reduced-motion: reduce) {
    .w3-back, .w3-back * { animation: none !important; }
    .w3-back { animation: w3-fade .2s ease both !important; }
}