/*
 * riverbreeze.eu - temporary page (EN at /, LV at /lv/)
 * Design language of the old riverbreeze.eu: the navy panel of its opened menu on
 * the left (#0A122A), the photo full height, light text #EEF0F2, grey #A9A5B0,
 * copper #804E49, GHEA Narek for headlines, Core Sans NR for labels and text.
 * Screen 2 slides in from the right (main.js) in the Kliversala Bay identity.
 *
 * Desktop (1024px and up) is one scaled artboard: every size is N * --u, where
 * --u is 1px at 1440x900 and scales with the window.
 * Phones and tablets use plain px.
 *
 * 1. Fonts and tokens   2. Base   3. The navy panel (logo, language, Prokapital)
 * 4. Screen 1 (hero, invite)    5. Screen 2 (slide-in: Blue Marine, Kliversala Bay)
 * 6. Phones and tablets 7. Motion
 */

/* 1. Fonts and tokens ------------------------------------------------------ */
@font-face {
    font-family: "GHEA Narek";
    src: url("../fonts/GHEANarek.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Kliversala Bay identity (screen 2): TT Norms Pro, Portrait (only "Blue Marine° Residence") */
@font-face {
    font-family: "TT Norms Pro";
    src: url("../fonts/TTNormsPro-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "TT Norms Pro";
    src: url("../fonts/TTNormsPro-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PortraitBay";
    src: url("../fonts/portrait-lockup.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Core Sans";
    src: url("../fonts/CoreSansNR45Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Core Sans";
    src: url("../fonts/CoreSansNR65Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #0A122A;
    --navy-deep: #050A1C;
    --ink: #EEF0F2;
    --grey: #A9A5B0;
    --copper: #804E49;
    --pk: #192348;                         /* Prokapital navy */
    --sky: #C3DAE5;                        /* Kliversala Bay */
    --wood: #332D2B;
    --sand: #E0DAD0;
    --kb: "TT Norms Pro", "Helvetica Neue", Arial, sans-serif;
    --hair: rgba(238, 240, 242, .16);
    --serif: "GHEA Narek", Georgia, "Times New Roman", serif;
    --sans: "Core Sans", "Helvetica Neue", Arial, sans-serif;
    --u: clamp(.72px, min(100vw / 1440, 100vh / 900), 2px);
}
@supports (height: 100svh) {
    :root { --u: clamp(.72px, min(100vw / 1440, 100svh / 900), 2px); }
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--navy);
}
body {
    margin: 0;
    background: var(--navy);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
h1, h2, p { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; fill: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.eyebrow {
    font-family: var(--sans);
    font-weight: 700;
    font-size: calc(11 * var(--u));
    line-height: 1.6;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.eyebrow--copper { color: var(--grey); }

/* 3. The navy panel (the old site's opened menu) --------------------------- */
.panel {
    position: fixed;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(320 * var(--u));
    background: var(--navy);
}
/* the logo where the old opened menu had it: 31 / 32 from the corner */
.panel__logo {
    position: absolute;
    left: calc(31 * var(--u));
    top: calc(32 * var(--u));
    transition: opacity .3s;
}
.panel__lockup { width: calc(183 * var(--u)); height: calc(66 * var(--u)); }
.panel__foot {
    position: absolute;
    left: calc(32 * var(--u));
    right: calc(32 * var(--u));
    bottom: calc(32 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lang {
    display: flex;
    gap: calc(16 * var(--u));
    font-weight: 700;
    font-size: calc(11 * var(--u));
    letter-spacing: .18em;
    text-transform: uppercase;
}
.lang a {
    padding: calc(6 * var(--u)) 0 calc(6 * var(--u)) .18em; /* .18em: the tracking after the last letter */
    color: var(--ink);
    transition: color .3s;
}
.lang a[aria-current="page"] { color: var(--copper); } /* as the old site */
.panel__pk { display: block; opacity: .7; transition: opacity .3s; }
.panel__pk svg { width: calc(84 * var(--u)); height: calc(84 * 55.653 / 510.906 * var(--u)); }

/* 4. Screen 1 (hero) ------------------------------------------------------ */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: calc(640 * var(--u));
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    top: 0;
    left: calc(320 * var(--u));
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #656660; /* average colour of the photo, while it loads */
}
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(10, 18, 42, .30), rgba(10, 18, 42, 0) 100%),
        linear-gradient(180deg, rgba(10, 18, 42, .10) 0%, rgba(10, 18, 42, .06) 45%, rgba(10, 18, 42, .45) 100%);
}
.hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
}
/* the old site's opening screen: a small tracked line over the serif headline */
.hero__content {
    position: absolute;
    top: 0;
    left: calc(320 * var(--u));
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 calc(80 * var(--u));
    text-align: center;
    text-shadow: 0 0 calc(30 * var(--u)) rgba(5, 10, 28, .35);
}
.hero__title {
    max-width: calc(1000 * var(--u));
    text-wrap: balance; /* even lines, never one word alone */
    font-family: var(--serif);
    font-size: calc(52 * var(--u));
    line-height: 1.16;
    letter-spacing: -.01em;
}
.rule {
    display: block;
    width: calc(40 * var(--u));
    height: 1px;
    margin: calc(28 * var(--u)) 0 calc(20 * var(--u));
    background: var(--ink);
    opacity: .7;
}
.hero__status { font-size: calc(11 * var(--u)); letter-spacing: .2em; }

/* the invitation, in the panel where the old menu had its links */
.invite {
    position: absolute;
    z-index: 21;
    left: calc(32 * var(--u));
    top: 50%;
    width: calc(256 * var(--u));
    transform: translateY(-50%);
}
.invite__open,
.invite__back {
    display: block;
    transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .25, 1), visibility 0s;
}
.invite__lede {
    display: block;
    font-family: var(--serif);
    font-size: calc(30 * var(--u));
    line-height: 1.2;
    letter-spacing: -.005em;
}
.invite__cta,
.invite__back {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(12 * var(--u));
    padding-bottom: calc(9 * var(--u));
    font-weight: 700;
    font-size: calc(11 * var(--u));
    line-height: 1.4;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.invite__cta { margin-top: calc(24 * var(--u)); }
/* the copper hairline, and a light one that draws over it on hover */
.invite__cta::before,
.invite__cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--copper);
}
.invite__cta::after {
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.2, .7, .25, 1);
}
.invite__arrow {
    width: calc(22 * var(--u));
    height: calc(9 * var(--u));
    flex: none;
    transition: transform .4s cubic-bezier(.2, .7, .25, 1);
}
.invite__arrow--back { transform: rotate(180deg); }
/* the way back, shown in the same place while the new projects are open */
.invite__back {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: calc(-12 * var(--u));
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility 0s .5s;
}
/* the invite and the way back only crossfade, nothing moves */
.is-next .invite__open {
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility 0s .4s;
}
.is-next .invite__back {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s .35s, visibility 0s;
}

/* 5. Screen 2 (Blue Marine, Kliversala Bay) ------------------------------- */
/* Both blocks are in the Kliversala Bay identity of the current Blue Marine ads
   (studio/bay): sky #C3DAE5, dark wood #332D2B, sand #E0DAD0, TT Norms Pro,
   Portrait for "Blue Marine° Residence", the wave pattern. They sit on the River
   Breeze navy, so the two identities never mix. */
.next {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    margin-left: calc(320 * var(--u));
    display: grid;
    place-content: center;
    padding: calc(110 * var(--u)) calc(40 * var(--u)) calc(80 * var(--u));
    background: var(--navy);
}
.next:focus { outline: none; }
/* with JavaScript: a layer over the photo that slides in from the right */
.has-slide .next {
    position: fixed;
    z-index: 22;
    top: 0;
    bottom: 0;
    left: calc(320 * var(--u));
    right: 0;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .95s cubic-bezier(.77, 0, .18, 1), visibility 0s .95s;
}
.has-slide.is-next .next {
    transform: none;
    visibility: visible;
    transition: transform .95s cubic-bezier(.77, 0, .18, 1), visibility 0s;
}
/* only the layer moves: the photo and the text under it stay still */
.has-slide.is-next { overflow: hidden; }
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }

.next__label { margin-bottom: calc(22 * var(--u)); color: var(--grey); }
/* the close mark, as the old menu's */
.next__close {
    position: absolute;
    top: calc(32 * var(--u));
    right: calc(32 * var(--u));
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    display: grid;
    place-items: center;
    transition: transform .5s cubic-bezier(.2, .7, .25, 1);
}
.next__close span,
.next__close span::before {
    display: block;
    width: calc(20 * var(--u));
    height: 1px;
    background: var(--ink);
    transform: rotate(45deg);
}
.next__close span::before { content: ""; transform: rotate(90deg); }
.next__inner {
    display: flex;
    align-items: stretch;
    gap: calc(20 * var(--u));
    min-width: 0;
}

.bay {
    display: grid;
    min-width: 0;
    /* the field gives way first when a classic scrollbar takes width */
    grid-template-columns: minmax(0, calc(560 * var(--u))) calc(320 * var(--u));
    height: calc(480 * var(--u));
    color: var(--wood);
    font-family: var(--kb);
}
.bay__field {
    position: relative;
    overflow: hidden;
    background: var(--sky);
}
.bay__wave {
    position: absolute;
    right: calc(-40 * var(--u));
    top: calc(-40 * var(--u));
    width: calc(640 * var(--u));
    max-width: none;
    opacity: .85;
    pointer-events: none;
}
.bay__logo {
    position: absolute;
    left: calc(44 * var(--u));
    top: calc(40 * var(--u));
    width: calc(330 * var(--u));
    height: calc(330 * 138.95 / 1156.95 * var(--u));
}
.bay__copy {
    position: absolute;
    right: calc(44 * var(--u));
    bottom: calc(124 * var(--u));
    text-align: right;
}
.bay__title {
    font-family: var(--kb);
    font-weight: 500;
    font-size: calc(36 * var(--u));
    line-height: 1.14;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.bay__title span { display: block; white-space: nowrap; }
.bay__sub {
    margin-top: calc(12 * var(--u));
    font-family: "PortraitBay", Georgia, serif;
    font-weight: 300;
    font-size: calc(26 * var(--u));
    letter-spacing: .01em;
}
.bay__pk {
    position: absolute;
    left: calc(44 * var(--u));
    bottom: calc(52 * var(--u));
    font-weight: 500;
    font-size: calc(10 * var(--u));
    letter-spacing: .14em;
    text-transform: uppercase;
}
.bay__cta {
    position: absolute;
    right: calc(44 * var(--u));
    bottom: calc(40 * var(--u));
    display: inline-flex;
    align-items: center;
    gap: calc(12 * var(--u));
    padding: calc(13 * var(--u)) calc(24 * var(--u));
    border: 1px solid var(--wood);
    border-radius: 999px;
    font-weight: 500;
    font-size: calc(13 * var(--u));
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .35s, color .35s;
}
.bay__arrow,
.kbt__arrow {
    width: calc(22 * var(--u));
    height: calc(9 * var(--u));
    flex: none;
    transition: transform .3s;
}
.bay__photo {
    position: relative;
    overflow: hidden;
    background: #8FA3B8;
}
.bay__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% 50%;
    transition: transform 1.2s cubic-bezier(.2, .7, .25, 1);
}
.bay__pkmark {
    position: absolute;
    right: calc(20 * var(--u));
    bottom: calc(22 * var(--u));
    width: calc(96 * var(--u));
    height: calc(96 * 55.653 / 510.906 * var(--u));
    color: #fff;
}

.kbt {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: calc(280 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: calc(44 * var(--u)) calc(36 * var(--u)) calc(40 * var(--u));
    background: var(--wood);
    color: #fff;
    font-family: var(--kb);
    text-shadow: 0 0 calc(24 * var(--u)) rgba(0, 0, 0, .25);
}
/* the blurred horizon of kliversala.com, with its light column in the middle and
   that site's soft veil, a touch deeper at the bottom for the text */
.kbt__bg { position: absolute; inset: 0; z-index: -1; background: #8A7A66; }
.kbt__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.kbt__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .14) 45%, rgba(0, 0, 0, .42) 100%);
}
.kbt__logo {
    width: calc(150 * var(--u));
    height: calc(150 * 317.25 / 575.47 * var(--u));
    color: #fff; /* white on the photo, as on kliversala.com */
}
.kbt__text {
    margin-top: auto;
    font-size: calc(15 * var(--u));
    line-height: 1.6;
    letter-spacing: .01em;
}
.kbt__link {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--u));
    margin-top: calc(26 * var(--u));
    padding-bottom: calc(7 * var(--u));
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    color: #fff;
    font-weight: 500;
    font-size: calc(12 * var(--u));
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .3s, border-color .3s;
}

/* fitted to the area right of the panel (1120 x 900 at the reference size) */
.bay {
    grid-template-columns: minmax(0, calc(480 * var(--u))) calc(280 * var(--u));
    height: calc(460 * var(--u));
}
.bay__logo { left: calc(40 * var(--u)); top: calc(36 * var(--u)); width: calc(300 * var(--u)); height: calc(300 * 138.95 / 1156.95 * var(--u)); }
.bay__copy { right: calc(40 * var(--u)); bottom: calc(116 * var(--u)); }
.bay__title { font-size: calc(34 * var(--u)); }
.bay__sub { font-size: calc(24 * var(--u)); }
.bay__pk { left: calc(40 * var(--u)); bottom: calc(48 * var(--u)); }
.bay__cta { right: calc(40 * var(--u)); bottom: calc(36 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); font-size: calc(12 * var(--u)); }
.bay__pk { font-size: calc(9 * var(--u)); }
.kbt { width: calc(250 * var(--u)); padding: calc(40 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u)); }
.kbt__logo { width: calc(140 * var(--u)); height: calc(140 * 317.25 / 575.47 * var(--u)); }

.foot { display: none; } /* phones and tablets only, see 6. */

@media (hover: hover) and (pointer: fine) {
    .panel__logo:hover { opacity: .75; }
    .panel__pk:hover { opacity: 1; }
    .lang a:hover { color: var(--copper); }
    .invite__open:hover .invite__cta::after { transform: none; }
    .invite__open:hover .invite__arrow { transform: translateX(5px); }
    .invite__back:hover .invite__arrow--back { transform: rotate(180deg) translateX(5px); }
    .next__close:hover { transform: rotate(90deg); }
    .bay:hover .bay__cta { background: var(--wood); color: var(--sand); }
    .bay:hover .bay__arrow, .kbt:hover .kbt__arrow { transform: translateX(4px); }
    .kbt:hover .kbt__link { border-color: #fff; }
}

/* 6. Phones and tablets --------------------------------------------------- */
@media (max-width: 1023.98px) {
    :root { --u: 1px; }

    /* the navy bar of the old mobile site: logo left, language right */
    .panel {
        position: absolute;
        bottom: auto;
        right: 0;
        width: auto;
        height: 84px;
    }
    .panel__logo { left: 20px; top: 16px; }
    .panel__lockup { width: calc(52px * 183 / 66); height: 52px; }
    .panel__foot { left: auto; right: 8px; top: 20px; bottom: auto; }
    .lang { gap: 0; font-size: 11px; }
    .lang a { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 0 0 .18em; }
    .panel__pk { display: none; } /* at the end of the page instead */

    .hero { min-height: 560px; }
    .hero__bg { top: 84px; left: 0; }
    .hero__bg::after {
        background: linear-gradient(180deg, rgba(10, 18, 42, .06) 0%, rgba(10, 18, 42, .04) 30%, rgba(10, 18, 42, .55) 64%, rgba(10, 18, 42, .88) 100%);
    }
    .hero__photo { object-position: 54% 50%; }
    .hero__content {
        top: 84px;
        left: 0;
        justify-content: flex-end;
        padding: 0 24px 196px;
    }
    .hero__title { font-size: 34px; line-height: 1.18; max-width: 360px; }
    .rule { margin: 20px 0 16px; }
    .hero__status { font-size: 10px; letter-spacing: .18em; }

    .invite {
        z-index: 10;
        left: 24px;
        right: 24px;
        top: auto;
        bottom: 40px;
        width: auto;
        transform: none;
        text-align: center;
    }
    .invite__lede { font-size: 22px; }
    .invite__cta { margin-top: 14px; }
    .invite__back { display: none; } /* the layer has its own close mark */

    /* the new projects: a layer below the navy bar */
    .next {
        min-height: 0;
        margin-left: 0;
        display: block;
        padding: 56px 20px 64px;
    }
    .has-slide .next { z-index: 19; top: 84px; left: 0; }
    .next__close { top: 8px; right: 8px; }
    .next__label { margin-bottom: 18px; }
    .next__inner {
        flex-direction: column;
        gap: 16px;
        max-width: 560px;
        margin: 0 auto;
    }
    .next__label { max-width: 560px; margin-left: auto; margin-right: auto; }

    /* as the tall banners (300x600): logo top, slogan and button at the bottom, photo below */
    .bay { grid-template-columns: 1fr; height: auto; }
    .bay__field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-height: 400px;
        padding: 28px 24px 26px;
    }
    .bay__wave { right: -60px; top: -40px; width: 520px; }
    .bay__logo { position: relative; left: 0; top: 0; width: 230px; height: calc(230px * 138.95 / 1156.95); }
    .bay__copy { position: relative; right: 0; bottom: 0; margin-top: auto; text-align: left; }
    .bay__title { font-size: clamp(18px, 6vw, 27px); letter-spacing: .05em; } /* "TAVAS JAUNĀS MĀJAS" on one line */
    .bay__sub { margin-top: 8px; font-size: 20px; }
    .bay__pk { position: relative; left: 0; bottom: 0; margin-top: 22px; font-size: 9px; }
    .bay__cta { position: relative; right: 0; bottom: 0; margin-top: 14px; gap: 10px; padding: 12px 20px; font-size: 12px; }
    .bay__arrow, .kbt__arrow { width: 20px; height: 8px; }
    .bay__photo { aspect-ratio: 4 / 3; }
    .bay__pkmark { right: 16px; bottom: 16px; width: 84px; height: calc(84px * 55.653 / 510.906); }

    .kbt { width: auto; min-height: 360px; padding: 32px 24px 30px; }
    .kbt__logo { width: 140px; height: calc(140px * 317.25 / 575.47); }
    .kbt__text { margin-top: 24px; font-size: 15px; }
    .kbt__link { margin-top: 20px; padding: 10px 0 7px; font-size: 12px; }

    .foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 560px;
        margin: 48px auto 0;
        padding-top: 28px;
        border-top: 1px solid var(--hair);
        color: var(--grey);
    }
    .foot__mark { width: 112px; height: calc(112px * 55.653 / 510.906); color: var(--ink); }
}

@media (max-width: 359.98px) {
    .hero__title { font-size: 30px; }
    .invite__lede { font-size: 20px; }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
    .hero__title { font-size: 46px; max-width: 600px; }
    .hero__content { padding-bottom: 220px; }
    .invite__lede { font-size: 26px; }
}

/* 7. Motion: small and soft. Nothing moves with prefers-reduced-motion. ------ */
@media (prefers-reduced-motion: no-preference) {
    /* screen 1 settles once: the photo, then the lines, one after the other */
    .hero__photo { animation: settle 3s cubic-bezier(.2, .7, .25, 1) both; }
    .panel__logo { animation: fade 1.2s ease .1s both; }
    .hero__status, .hero__title, .invite__lede, .invite__cta { animation: up 1.1s cubic-bezier(.2, .7, .25, 1) both; }
    .hero__title { animation-delay: .3s; }
    .rule { animation: draw .9s cubic-bezier(.2, .7, .25, 1) .7s both; }
    .hero__status { animation-delay: .85s; }
    .invite__lede { animation-delay: .9s; }
    .invite__cta { animation-delay: 1.05s; }
    /* the arrow keeps inviting, very gently */
    .invite__open .invite__arrow { animation: nudge 2.4s ease-in-out 2.2s infinite; }

    @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
    @keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
    @keyframes nudge { 0%, 70%, 100% { transform: none; } 35% { transform: translateX(5px); } }

    /* screen 2: the blocks follow the layer in, the waves drift, the photo breathes */
    .has-slide [data-reveal] {
        opacity: 0;
        transition: opacity .9s cubic-bezier(.2, .7, .25, 1);
    }
    .has-slide .kbt[data-reveal] { transition-delay: .12s; }
    .has-slide [data-reveal].is-in { opacity: 1; }
    .bay__wave { animation: drift 26s ease-in-out infinite alternate; }
    .bay__photo img, .kbt__bg img { animation: breathe 22s ease-in-out infinite alternate; }
    @keyframes drift { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
    @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06); } }

    /* pressing: a tiny give */
    .bay:active .bay__cta, .kbt:active .kbt__link, .invite__open:active .invite__cta { transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
    .has-slide .next, .has-slide.is-next .next { transition: none; }
}