/* The boot splash and the text for search engines, shared by every HTML page
   in web/ (index.html, trekking_pole_guide.html). Loaded in <head>, so the
   first paint already shows the splash. */

html, body {
    margin: 0;
    background: #FFFFFF;
}

/* White with the KKFIELD logo in the middle (the SVG is inline in each page,
   so it needs no web font), from the first paint until the app has drawn its
   first page: web/splash.js and lib/common/boot_splash.dart. */
#app-splash {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: #FFFFFF;
    color: #333333;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    text-align: center;
}

/* 120px wide in the middle, like the app's splash used to be. Its fade-in
   starts at 0.01, so the first paint counts as contentful. */
#app-splash .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 123px;
    margin: -62px 0 0 -60px;
    animation: kk-splash-in 500ms ease-out both;
}

@keyframes kk-splash-in {
    from {
        opacity: 0.01;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app-splash .logo {
        animation: none;
    }
}

/* Going away in two steps over the app's first page: the logo fades out on
   the white first, then the white fades and shows the page. Taps reach the
   page at once. The logo fades with a filter, since its fade-in animation
   owns its opacity. */
#app-splash.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease-out 180ms;
}

#app-splash.is-hidden .logo,
#app-splash.is-hidden .note {
    filter: opacity(0);
    transition: filter 180ms ease-out;
}

/* Under the logo: a note when the app takes long, or without JavaScript. */
#app-splash .note {
    display: none;
    position: absolute;
    top: calc(50% + 62px + 32px);
    left: 0;
    right: 0;
    box-sizing: border-box;
    max-width: 360px;
    margin: 0 auto;
    padding: 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
}

#app-splash.is-slow .note,
#app-splash noscript .note {
    display: block;
}

#app-splash .note p {
    margin: 0 0 8px;
}

#app-splash button {
    margin-top: 8px;
    min-height: 44px;
    padding: 10px 24px;
    border: 1px solid #2C5F2D;
    border-radius: 22px;
    background: #FFFFFF;
    color: #2C5F2D;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* The page's text for search engines, which don't read what the app draws
   on its canvas. Hidden as screen-reader-only text is (display: none would
   hide it from them too): out of the layout, of taps and of sight, also once
   the app has started (it stays in the DOM for Google's rendering).
   aria-hidden in the page, since the app's own semantics serve screen
   readers. Never visible, so visitors never see it before the app. */
#seo-content {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}