/* /demo/: a scroll-driven story over real screenshots of Mijn CloudVikings (assets/demo.js). The
   browser window stays in place while the steps scroll past; spotlights light up and the screen
   zooms in as you go. Without JavaScript every screenshot is simply shown, one under the other. */

.sv { --sv-bg: #ffffff; --sv-fg: #1d1d1f; --sv-muted: #6e6e73; --sv-soft: #f5f5f7; --sv-line: #e5e5ea;
    --sv-green: #04aa6d; --sv-ink: #047857; --sv-chrome: #f2f2f4; --sv-chrome-line: #e2e2e6;
    background: var(--sv-bg); color: var(--sv-fg); }
@media (prefers-color-scheme: dark) {
    .sv { --sv-bg: #0b1120; --sv-fg: #f5f5f7; --sv-muted: #a1a1a6; --sv-soft: #111a2e; --sv-line: #26304a; --sv-ink: #34d399;
        --sv-chrome: #1c2438; --sv-chrome-line: #2a3450; }
}
html:has(.sv) { overflow-x: clip; }

/* Hero */
.sv-hero { min-height: 92vh; display: grid; place-content: center; text-align: center; padding: 4rem 6%; }
.sv-eyebrow { color: var(--sv-ink); font-weight: 600; letter-spacing: .02em; margin: 0 0 1rem; }
.sv-hero h1 { font-size: clamp(2.6rem, 7.5vw, 5.6rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; margin: 0 auto 1.6rem; max-width: 14ch; }
.sv-hero h1 span { background: linear-gradient(100deg, #04aa6d, #0ea5e9 55%, #6366f1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-sub { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--sv-muted); max-width: 40rem; margin: 0 auto; line-height: 1.5; }
.sv-cue { margin: 3.5rem auto 0; display: grid; justify-items: center; gap: .6rem; color: var(--sv-muted); font-size: .85rem; }
.sv-cue span { width: 1.4rem; height: 2.2rem; border: 2px solid var(--sv-line); border-radius: 1rem; position: relative; }
.sv-cue span::after { content: ""; position: absolute; left: 50%; top: .35rem; width: .25rem; height: .45rem; margin-left: -.125rem; border-radius: 2px; background: var(--sv-muted); animation: sv-cue 1.8s ease-in-out infinite; }

/* Story: steps on the left, the window sticks on the right. */
.sv-story { position: relative; display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 3.5vw; width: min(1360px, 94%); margin: 0 auto; }
.sv-stage { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; display: grid; place-items: center; align-self: start; }
.sv-steps { grid-column: 1; grid-row: 1; }
.sv-step { min-height: 140vh; }
.sv-step-in { position: sticky; top: 12vh; padding-bottom: 54vh; opacity: .15; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.sv-step.is-active .sv-step-in { opacity: 1; transform: none; }
.sv-num { font-size: .9rem; font-weight: 600; color: var(--sv-ink); margin: 0 0 .8rem; font-variant-numeric: tabular-nums; }
.sv-step h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 1rem; font-weight: 700; }
.sv-step p:last-child { font-size: 1.12rem; line-height: 1.6; color: var(--sv-muted); margin: 0; }

/* The browser window with the real screens */
.sv-device { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: var(--sv-chrome);
    box-shadow: 0 0 0 1px var(--sv-chrome-line), 0 30px 60px -20px rgba(15, 23, 42, .3), 0 80px 140px -50px rgba(4, 120, 87, .3);
    transform: perspective(1800px) rotateX(calc(7deg - var(--tilt, 0) * 7deg)) scale(calc(.9 + var(--tilt, 0) * .1)); }
.sv-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border-bottom: 1px solid var(--sv-chrome-line); }
.sv-bar i { width: .66rem; height: .66rem; border-radius: 50%; }
.sv-bar i:nth-child(1) { background: #ff5f57; } .sv-bar i:nth-child(2) { background: #febc2e; } .sv-bar i:nth-child(3) { background: #28c840; }
.sv-url { margin: 0 auto; display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--sv-muted); background: var(--sv-bg); border-radius: 8px; padding: .25rem .9rem; max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-lock { width: .5rem; height: .5rem; border-radius: 50%; background: var(--sv-green); flex-shrink: 0; }
.sv-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.sv-shot { position: absolute; inset: 0; margin: 0; }
.sv-zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.22, .8, .2, 1); }
.sv-zoom img { display: block; width: 100%; height: 100%; }
/* A whole web page: as tall as it is, it scrolls through the window. */
.sv-shot[data-tall] .sv-zoom { bottom: auto; transition-duration: 1.3s; }
.sv-shot[data-tall] .sv-zoom img { height: auto; }
.sv-shot[data-tall] .sv-mark em { top: .7rem; bottom: auto; left: .7rem; transform-origin: top left; }

/* Spotlight: the rest dims, the box gets a ring, the label floats beside it. */
.sv-mark { position: absolute; border-radius: 10px; pointer-events: none; opacity: 0; transition: opacity .5s ease, box-shadow .6s ease;
    box-shadow: 0 0 0 2px rgba(4, 170, 109, 0), 0 0 0 200vmax rgba(15, 23, 42, 0); }
.sv-mark.is-in { opacity: 1; box-shadow: 0 0 0 2px #04aa6d, 0 0 0 6px rgba(4, 170, 109, .22), 0 0 0 200vmax rgba(15, 23, 42, .28); }
.sv-mark.is-past { opacity: 0; }
.sv-mark em { position: absolute; left: 0; top: calc(100% + .6rem); font-style: normal; font-size: .82rem; font-weight: 600; line-height: 1.35; color: #fff;
    background: #04aa6d; padding: .4rem .7rem; border-radius: 10px; white-space: normal; width: max-content; max-width: min(22rem, 70vw);
    box-shadow: 0 10px 24px -10px rgba(4, 120, 87, .7); transform-origin: top left; }
.sv-mark.is-low em { top: auto; bottom: calc(100% + .6rem); transform-origin: bottom left; }
/* Inside the zoom, the label keeps its size. */
.sv-mark em { transform: scale(var(--inv, 1)); }

/* The assistant, floating beside the window */
.sv-chat { position: absolute; left: calc(-45% - 3.5vw); bottom: 12vh; width: 42%; z-index: 3; background: var(--sv-bg);
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 24px; padding: 1.3rem 1.3rem 1.4rem; box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .35), 0 0 0 8px var(--sv-bg); transition: opacity .5s, transform .6s; }
@media (prefers-color-scheme: dark) { .sv-chat { background: #121b30; border-color: rgba(255, 255, 255, .14); } }
/* Step text scrolling past goes under the panel, not through it. */
.sv-stage { z-index: 2; }
.sv.is-js .sv-chat.is-hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
.sv-chat-title { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-muted); margin: 0 0 1rem; }
.sv-chat-title span { width: .55rem; height: .55rem; border-radius: 50%; background: #d97757; }
.sv-msgs { display: flex; flex-direction: column; gap: .75rem; max-height: min(22rem, 34vh); overflow: hidden; justify-content: flex-end; }
/* Only once older messages scroll away at the top. */
.sv-msgs.is-full { -webkit-mask-image: linear-gradient(transparent, #000 2rem); mask-image: linear-gradient(transparent, #000 2rem); }
.sv-msgs > * { flex-shrink: 0; }
.sv-msg { padding: .75rem 1rem; border-radius: 18px; font-size: .95rem; line-height: 1.5; }
.sv-user { background: var(--sv-fg); color: var(--sv-bg); align-self: flex-end; border-bottom-right-radius: 5px; max-width: 92%; }
.sv-ai { background: var(--sv-soft); border-bottom-left-radius: 5px; max-width: 96%; }
.sv-tool { display: grid; grid-template-columns: 1.3rem 1fr; column-gap: .7rem; row-gap: .1rem; align-items: start; padding: .8rem .95rem; border-radius: 16px;
    background: var(--sv-bg); border: 1px solid var(--sv-line); }
.sv-tool::before { content: ""; grid-row: span 3; width: 1.1rem; height: 1.1rem; margin-top: .1rem; border-radius: 50%; border: 2px solid var(--sv-line);
    border-top-color: var(--sv-green); animation: sv-spin .8s linear infinite; }
.sv-tool.is-done::before { content: "✓"; animation: none; border: 0; background: var(--sv-green); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.sv-tool b { font-size: .9rem; font-weight: 600; }
.sv-tool span { font-size: .82rem; color: var(--sv-muted); line-height: 1.4; }
.sv-tool code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; color: var(--sv-ink); margin-top: .15rem; }
.sv-thinking { display: inline-flex; gap: .3rem; padding: .7rem .9rem; border-radius: 16px; background: var(--sv-soft); align-self: flex-start; }
.sv-thinking i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--sv-muted); animation: sv-dot 1.2s ease-in-out infinite; }
.sv-thinking i:nth-child(2) { animation-delay: .15s; } .sv-thinking i:nth-child(3) { animation-delay: .3s; }
.sv-type.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -2px; animation: sv-blink 1s steps(1) infinite; }

.sv-dots { list-style: none; display: flex; gap: .45rem; justify-content: center; margin: 0; padding: 0; position: absolute; bottom: 4vh; left: 0; right: 0; }
.sv-dots li { width: .45rem; height: .45rem; border-radius: 999px; background: var(--sv-line); transition: width .4s, background .4s; }
.sv-dots li.is-active { width: 1.6rem; background: var(--sv-green); }

/* Scroll-driven states (only with JavaScript: .is-js). */
.sv.is-js .sv-shot { opacity: 0; transition: opacity .7s ease; }
.sv.is-js .sv-shot.is-current { opacity: 1; }
.sv.is-js .sv-msgs [data-step] { display: none; }
.sv.is-js .sv-msgs [data-step].is-in { display: block; animation: sv-in .5s cubic-bezier(.2, .8, .2, 1); }
.sv.is-js .sv-msgs .sv-tool.is-in { display: grid; }
.sv.is-js .sv-msgs .sv-thinking.is-in { display: inline-flex; }
.sv:not(.is-js) .sv-stage { position: static; height: auto; display: block; }
.sv:not(.is-js) .sv-device { transform: none; }
.sv:not(.is-js) .sv-screen { aspect-ratio: auto; }
.sv:not(.is-js) .sv-shot, .sv:not(.is-js) .sv-zoom { position: static; }
.sv:not(.is-js) .sv-mark, .sv:not(.is-js) .sv-dots, .sv:not(.is-js) .sv-cue, .sv:not(.is-js) .sv-chat { display: none; }
.sv:not(.is-js) .sv-step { min-height: 0; padding: 2rem 0; }
.sv:not(.is-js) .sv-step-in { position: static; opacity: 1; transform: none; padding: 0; }

/* Features and end */
.sv-features { width: min(1100px, 92%); margin: 0 auto; padding: 14vh 0 6vh; }
.sv-features h2, .sv-end h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); letter-spacing: -.03em; line-height: 1.06; text-align: center; margin: 0 0 3rem; font-weight: 700; }
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sv-tile { background: var(--sv-soft); border-radius: 26px; padding: 2rem; }
.sv-tile.sv-wide { grid-column: span 2; background: linear-gradient(135deg, rgba(4, 170, 109, .1), rgba(14, 165, 233, .08)); }
.sv-tile h3 { font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 .6rem; }
.sv-tile p { color: var(--sv-muted); margin: 0; line-height: 1.55; }
.sv-end { text-align: center; padding: 10vh 6% 14vh; }
.sv-end h2 { margin-bottom: 1rem; }
.sv-end > p { color: var(--sv-muted); font-size: 1.2rem; margin: 0 auto 2rem; max-width: 34rem; }
.sv-actions { display: flex; gap: 1.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.sv-link { color: var(--sv-ink); text-decoration: none; font-weight: 600; }
.sv-link:hover { text-decoration: underline; }
.sv-end .sv-note { color: var(--sv-muted); font-size: .8rem; margin-top: 3rem; max-width: 40rem; margin-left: auto; margin-right: auto; }

/* Narrow screens: the window on top, the steps scroll up under it. */
@media (max-width: 900px) {
    .sv-story { grid-template-columns: minmax(0, 1fr); width: 100%; }
    .sv-stage { grid-column: 1; height: auto; min-height: 0; z-index: 1; padding: .8rem 4% 1.2rem; align-items: start; background: var(--sv-bg); display: block; }
    .sv-steps { grid-row: 2; position: relative; z-index: 0; padding: 0 6%; }
    .sv-step { min-height: 110vh; }
    .sv-step-in { top: calc(62vw + 8.5rem); padding-bottom: 10vh; }
    .sv-step h2 { font-size: 1.7rem; }
    .sv-step p:last-child { font-size: 1.02rem; }
    .sv-device { transform: none; border-radius: 12px; }
    .sv-chat { position: relative; left: auto; bottom: auto; width: 100%; margin-top: .7rem; padding: .55rem .7rem; border-radius: 14px; box-shadow: none; }
    .sv-chat .sv-msgs { max-height: 4.2rem; }
    .sv-chat .sv-msg { font-size: .82rem; padding: .45rem .65rem; }
    .sv-chat .sv-tool { padding: .4rem .55rem; }
    .sv-chat .sv-tool b { font-size: .8rem; } .sv-chat .sv-tool span { font-size: .72rem; } .sv-chat .sv-tool code { display: none; }
    .sv-chat-title { display: none; }
    .sv.is-js .sv-chat.is-hidden { display: none; }
    .sv-mark em { font-size: .72rem; max-width: 60vw; }
    .sv-dots { display: none; }
    .sv-grid { grid-template-columns: minmax(0, 1fr); }
    .sv-tile.sv-wide { grid-column: auto; }
}

@keyframes sv-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(.7rem); } 100% { opacity: 0; } }
@keyframes sv-blink { 50% { opacity: 0; } }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes sv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .sv *, .sv *::before, .sv *::after { transition: none !important; animation: none !important; }
    .sv-device { transform: none !important; }
}

/* Low laptop screens: everything a bit more compact, so text and panel never meet. */
@media (max-height: 820px) and (min-width: 901px) {
    .sv-chat { bottom: 5vh; padding: 1rem 1.1rem 1.1rem; }
    .sv-msgs { max-height: 23vh; gap: .55rem; }
    .sv-step-in { top: 9vh; }
    .sv-step h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
    .sv-step p:last-child { font-size: 1rem; }
}