/* Reset */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    color: #111;
    background: #fff;
}

img {
    width: 100%;
}

/* Header */

.site-header {
    padding: 20px 24px;
    background: #111;
    color: #fff;
    position: relative;
    /* remove if you have a fixed header */
    text-align: center;
}

/* Generic panel styling */

.panel {
    width: 100%;
    margin: -5px 0 0 0;
}

.panel-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* Section 1 & 3 look */

.panel--s1 .panel-inner,
.panel--s3 .panel-inner {
    background: #e9e9e9;
    border: 1px solid #d1d1d1;
    min-height: 60vh;
    display: grid;
    place-items: center;
}

/* Full horizontal section container */

.panel--full-horizontal {
    position: relative;
    padding: 0;
    background: #fff;
}

/* The element that becomes sticky/pinned */

.horizontal-wrap {
    position: sticky;
    top: 0;
    /* JS will override if you have a fixed header */
    height: 100vh;
    overflow: hidden;
    width: 100%;
    background: #f4f4f4;
    display: block;
}

/* The track that slides horizontally (absolute inside the sticky wrapper) */

.horizontal-track {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    display: flex;
    will-change: transform;
    transition: transform 0.03s linear;
    /* width is set by JS based on number of panels (panels * 100vw) */
}

/* Individual horizontal panels (each is 100vw in width) */

.hp-panel {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
}

.hp-inner {
    width: calc(100% - 80px);
    height: calc(100% - 120px);
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #111;
    font-weight: 600;
}

/* Panel colors for clarity */

.hp-panel--1 .hp-inner {
    background: #dcdcdc;
}

.hp-panel--2 .hp-inner {
    background: #d0d8e6;
}

.hp-panel--3 .hp-inner {
    background: #dcd1e6;
}

/* Small accessibility: reduce transition if prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {
    .horizontal-track {
        transition: none !important;
    }
}

/* Basic responsive niceties */

@media (max-width: 700px) {
    .panel-inner {
        padding: 28px 16px;
    }
    .hp-inner {
        width: calc(100% - 40px);
        height: calc(100% - 80px);
        font-size: 14px;
    }
}