@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&display=swap');

* { box-sizing: border-box; }

:root {
    --bg: #0d0f14;
    --text: #e9ebf0;
    --text-strong: #ffffff;
    --muted: #9299a7;

    --surface-1: rgba(255,255,255,.055);
    --surface-2: rgba(255,255,255,.085);
    --surface-soft: rgba(255,255,255,.035);

    --border: rgba(255,255,255,.095);
    --border-strong: rgba(255,255,255,.16);

    --kub-yellow: #ffd84d;
    --kub-blue: #55b7ff;
    --kub-violet: #9678ff;
    --kub-green: #66d5a0;
    --kub-coral: #ff876f;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.16), 0 10px 30px rgba(0,0,0,.16);
    --shadow-sm: 0 2px 5px rgba(0,0,0,.18), 0 18px 48px rgba(0,0,0,.24);
    --shadow-md: 0 6px 18px rgba(0,0,0,.22), 0 30px 76px rgba(0,0,0,.32);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    /* v150 layout foundation. Reading pages stay compact on laptop widths, then
       grow moderately on large/zoomed-out viewports instead of remaining locked at
       860px. v152 deliberately halves the v150 expansion to protect text line length.
       Header/footer consume the same --content-text geometry. */
    --layout-reading-outer-max: clamp(860px, 52.5vw, 1050px);
    /* v143: shell and reading share one visible outer edge on laptop/ordinary desktop.
       Extra shell width begins only on genuinely large screens; it then grows fluidly
       and caps before the interface becomes a full-width strip. */
    --layout-shell-min: 860px;
    --layout-shell-fluid: calc(60vw - 100px);
    --layout-shell-cap: 1440px;
    --layout-shell-outer-max: clamp(var(--layout-shell-min), var(--layout-shell-fluid), var(--layout-shell-cap));
    --layout-page-gutter: 48px;
    --layout-page-inline-padding: 42px;
    --layout-reading-inner-max: calc(var(--layout-reading-outer-max) - 2 * var(--layout-page-inline-padding));

    --content-text: var(--layout-reading-outer-max);
    --content-wide: var(--layout-shell-outer-max);

    --font-ui: 'Montserrat', Arial, sans-serif;
    --font-text: 'Montserrat', Arial, sans-serif;
    --font-heading: 'Montserrat', Arial, sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
}

body {
    position: relative;
    isolation: isolate;
}

/* Floating Kubariy geometry. Decorative only; never intercepts input. */
body::before,
body::after,
.reveal::before,
.reveal::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: -2;
    border-radius: 21%;
    transform-origin: center;
    will-change: transform;
}

body::before {
    width: 250px;
    height: 250px;
    left: -110px;
    top: 6vh;
    background: linear-gradient(145deg, rgba(84,183,255,.18), rgba(150,120,255,.12));
    border: 1px solid rgba(84,183,255,.18);
    box-shadow: 0 30px 80px rgba(84,183,255,.08);
    transform: rotate(-17deg);
    animation: kub-float-a 16s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

body::after {
    width: 190px;
    height: 190px;
    right: -72px;
    bottom: 5vh;
    background: linear-gradient(145deg, rgba(255,216,77,.18), rgba(255,135,111,.07));
    border: 1px solid rgba(255,197,54,.17);
    box-shadow: 0 30px 90px rgba(255,196,60,.075);
    transform: rotate(31deg);
    animation: kub-float-b 19s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.reveal::before {
    width: 96px;
    height: 96px;
    right: 13vw;
    top: 12vh;
    background: rgba(102,213,160,.13);
    border: 1px solid rgba(102,213,160,.19);
    transform: rotate(8deg);
    animation: kub-float-c 13s ease-in-out infinite alternate;
}

.reveal::after {
    width: 72px;
    height: 72px;
    left: 16vw;
    bottom: 12vh;
    background: rgba(150,120,255,.12);
    border: 1px solid rgba(150,120,255,.18);
    transform: rotate(-34deg);
    animation: kub-float-d 17s ease-in-out infinite alternate;
}

@keyframes kub-float-a {
    0%   { transform: translate3d(0,0,0) rotate(-17deg) scale(1); }
    50%  { transform: translate3d(26px,38px,0) rotate(12deg) scale(1.035); }
    100% { transform: translate3d(58px,12px,0) rotate(43deg) scale(.97); }
}

@keyframes kub-float-b {
    0%   { transform: translate3d(0,0,0) rotate(31deg) scale(1); }
    50%  { transform: translate3d(-34px,-24px,0) rotate(-7deg) scale(.96); }
    100% { transform: translate3d(-60px,-52px,0) rotate(-38deg) scale(1.035); }
}

@keyframes kub-float-c {
    0%   { transform: translate3d(0,0,0) rotate(8deg); }
    50%  { transform: translate3d(-22px,31px,0) rotate(67deg); }
    100% { transform: translate3d(18px,62px,0) rotate(126deg); }
}

@keyframes kub-float-d {
    0%   { transform: translate3d(0,0,0) rotate(-34deg); }
    50%  { transform: translate3d(38px,-18px,0) rotate(21deg); }
    100% { transform: translate3d(18px,-52px,0) rotate(82deg); }
}

.reveal {
    width: 100%;
    height: 100%;
    color: var(--text);
    font-family: var(--font-text);
    background:
        radial-gradient(circle at 10% 9%, rgba(84,183,255,.055), transparent 24%),
        radial-gradient(circle at 92% 86%, rgba(255,216,77,.045), transparent 26%),
        var(--bg);
}

.reveal .slides,
.reveal .slides > section { text-align: left; }

.reveal h1,
.reveal h2,
.reveal h3 {
    text-transform: none;
    font-family: var(--font-heading);
    color: var(--text-strong);
}

.page-slide { width: 100%; height: 100%; }

.slide-page {
    width: calc(100% - 2 * var(--layout-page-gutter));
    max-width: var(--content-wide);
    height: 100%;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 34px var(--layout-page-inline-padding) 34px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) rgba(255,255,255,.035);
}

.text-page { max-width: var(--content-text); }
.gallery-page { max-width: var(--content-wide); }

.slide-page h1 {
    font-size: 46px;
    line-height: 1.06;
    margin: 0 0 24px;
    font-weight: 800;
    letter-spacing: -.035em;
}

.slide-page h2 {
    font-size: 36px;
    line-height: 1.1;
    margin: 0 0 22px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.slide-page h3 {
    font-size: 25px;
    line-height: 1.22;
    margin: 0 0 12px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.slide-page p {
    font-size: 19px;
    line-height: 1.68;
    margin: 10px 0 20px;
    font-weight: 400;
    letter-spacing: -.006em;
}

.lead {
    font-size: 24px !important;
    line-height: 1.55 !important;
    color: #c7cbd4;
    font-weight: 400;
}

.reveal a {
    color: #70c4ff;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* very light cursor feedback without turning the page into a neon UI */
@media (hover: hover) and (pointer: fine) {
    .slide-page a,
    .slide-page button,
    .content-panel,
    .overview-card,
    .gallery-item,
    .content-image img {
        transition-property: transform, box-shadow, border-color, background-color, opacity;
        transition-duration: 180ms;
        transition-timing-function: ease;
    }

    .slide-page a:hover { color: #9bd6ff; }
}

.slide-page::-webkit-scrollbar { width: 10px; }
.slide-page::-webkit-scrollbar-track {
    margin: 12px 0;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
}
.slide-page::-webkit-scrollbar-thumb {
    min-height: 52px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    background-clip: padding-box;
}
.slide-page::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.42);
    background-clip: padding-box;
}
.slide-page::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

.reveal .controls { color: #737d91; }
.reveal .progress { color: var(--kub-violet); background: rgba(35,42,59,.045); }



@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    .reveal::before,
    .reveal::after { animation: none !important; }
}

@media (max-width: 768px) {
    body::before { width: 176px; height: 176px; left: -92px; opacity: .9; }
    body::after { width: 132px; height: 132px; right: -62px; opacity: .9; }
    .reveal::before { width: 68px; height: 68px; right: 8vw; }
    .reveal::after { width: 54px; height: 54px; left: 7vw; }

    .slide-page {
        width: 100%;
        max-width: none;
        padding: max(12px, env(safe-area-inset-top)) 17px max(34px, env(safe-area-inset-bottom));

        /* Allow overscroll to bubble to the browser at scrollTop=0,
           restoring native mobile pull-to-refresh. */
        overscroll-behavior-y: auto;
    }

    .slide-page h1 { font-size: 39px; }
    .slide-page h2 { font-size: 33px; }
    .slide-page h3 { font-size: 24px; }
    .slide-page p { font-size: 19px; line-height: 1.56; }
    .lead { font-size: 23px !important; }

    .slide-page::-webkit-scrollbar { width: 7px; }
    .slide-page::-webkit-scrollbar-thumb { min-height: 38px; border-width: 2px; }
    .reveal .controls { right: 4px; bottom: 3px; transform: scale(.72); transform-origin: bottom right; }
}

@media (max-width: 380px) {
    .slide-page { padding-left: 13px; padding-right: 13px; }
    .slide-page h1 { font-size: 35px; }
    .slide-page h2 { font-size: 30px; }
    .slide-page h3 { font-size: 22px; }
    .slide-page p { font-size: 18px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .slide-page { padding-top: 10px; padding-bottom: 28px; }
    .slide-page h1 { font-size: 32px; }
    .slide-page h2 { font-size: 28px; }
    .slide-page h3 { font-size: 21px; }
    .slide-page p { font-size: 17px; line-height: 1.45; }
}


/* v63 — slightly softer programmatic page scrolling and a clearer grab handle. */
.slide-page {
    scroll-behavior: smooth;
}

.slide-page::-webkit-scrollbar { width: 14px; }
.slide-page::-webkit-scrollbar-track {
    margin: 16px 0;
    background: transparent;
}
.slide-page::-webkit-scrollbar-thumb {
    min-height: 54px;
    border: 4px solid transparent;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.78) 0 2px, transparent 2.5px),
        rgba(255,255,255,.20);
    background-clip: padding-box;
}
.slide-page::-webkit-scrollbar-thumb:hover {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
        rgba(255,255,255,.34);
    background-clip: padding-box;
}

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


/* v66 — native scrollbar restored. Smoothness is handled by wheel animation in JS. */
.slide-page {
    scrollbar-width: thin;
}

/* v92: Reveal navigation belongs above the fixed presentation footer. */
.reveal .controls {
    bottom: 54px;
}
@media (max-width: 768px) {
    .reveal .controls {
        bottom: 49px;
    }
}