/*
Copyright (c) 2026 Martin Bartos
Licensed under the MIT License. See LICENSE file for details.
*/

/*
Page layout, mobile first: the hero fills the first screen on its own, the download section and the footer follow
below. A round arrow button at the bottom of the hero shows that the page continues and scrolls to the downloads.
*/

/* in-page links (the arrow button) glide instead of jumping, unless the visitor prefers reduced motion */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/*
Blob background (blobs.js): a fixed canvas behind all content, as tall as the largest viewport, so mobile toolbars
coming and going don't resize it. Its opacity of 0.25 is the app's control opacity; it fades in once the first frame
is drawn, and without JS the page simply shows its background color.
*/
.blobs {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease-out;
}

.blobs.is-visible {
    opacity: 0.25;
}

/*
Header: the switches stay at the top right while the page scrolls. Once the page is scrolled (header.js), the header
fades in a translucent page-colored background, so content passing underneath doesn't clash with the switches.
*/
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
}

@media (min-width: 48rem) {
    .site-header {
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}

/*
the background is a layer behind the switches that only fades its opacity, so it appears and disappears smoothly
while theme changes stay instant, as in the app
*/
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: color-mix(in srgb, var(--sem-background-blobs) 85%, transparent);
    -webkit-backdrop-filter: blur(0.75rem);
    backdrop-filter: blur(0.75rem);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.site-header.is-scrolled::before {
    opacity: 1;
}

/* a header taller than a fifth of the screen (very large text on a phone) scrolls away instead (header.js) */
.site-header.is-tall {
    position: absolute;
}

/*
Hero, after the onboarding's Welcome step: logo, title and subtitle centered in the first screen, the scroll cue at
its bottom edge. Sizes start at the app's values (logo 90px, title 32px, 30px from logo to title) up to 768px wide,
then grow linearly to 1.5 times those values at 1920px. The subtitle grows from 18px to 24px, slightly above the app's
16px, in the darker strong brand color for contrast (decision D4).
*/
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;

    /*
    equal top and bottom padding center the content in the screen: the top keeps it clear of the header (and grows
    with a taller one, e.g. with very large text), the bottom holds the arrow button
    */
    padding: max(5rem, var(--header-height, 0px) + var(--spacing-xxs)) var(--spacing-xs) 5rem;
    text-align: center;
}

.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-logo {
    height: clamp(5.625rem, 3.75rem + 3.906vw, 8.4375rem);
    width: auto;
    margin-bottom: clamp(1.875rem, 1.25rem + 1.302vw, 2.8125rem);
}

.hero-title {
    font-size: clamp(2rem, 1.333rem + 1.389vw, 3rem);
}

/* one line while it fits the screen; when it has to wrap, balanced lines avoid a lone last word */
.hero-subtitle {
    margin-top: 0.25rem;
    font-size: clamp(1.125rem, 0.875rem + 0.521vw, 1.5rem);
    text-wrap: balance;
}

/*
Actions below the subtitle, where the onboarding has "Get Started": the app places it 128px under the text, here the
distance grows from 40px on phones to 128px on wide screens. The buttons wrap on narrow screens.
*/
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: clamp(2.5rem, 1rem + 5vw, 8rem);
}

/* Scroll cue: a round arrow button at the bottom of the hero, a link to the download section */
.scroll-cue.button {
    position: absolute;
    right: 0;
    bottom: var(--spacing-lg);
    left: 0;
    width: fit-content;
    margin: 0 auto;
    padding: 0.75rem;
}

.scroll-cue .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

/* Entry animation: the items fade in and rise once, one after another; the scroll cue comes last */
@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
        filter: blur(0.375rem);
    }
}

@keyframes hero-fade {
    from {
        opacity: 0;
    }
}

.hero-content > *,
.scroll-cue {
    animation: hero-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-content > :nth-child(2) {
    animation-delay: 120ms;
}

.hero-content > :nth-child(3) {
    animation-delay: 240ms;
}

.hero-content > :nth-child(4) {
    animation-delay: 360ms;
}

.scroll-cue {
    animation-delay: 700ms;
}

/* wait for the translation, so Hungarian visitors see the animation in Hungarian */
html.i18n-pending .hero-content > *,
html.i18n-pending .scroll-cue {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hero-content > *,
    .scroll-cue {
        animation-name: hero-fade;
    }
}

/*
Download. Together with the footer it fills at least one screen, content centered, so the arrow button lands on a
screen of its own. The section is a size container: the platform cards go side by side when the section itself is
wide enough, not just the window.
*/
.download {
    container: download / inline-size;
    display: grid;

    /* the column may shrink below its content's width, so the section always fits the screen */
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: var(--spacing-sm);
    max-width: 60rem;
    min-height: calc(100vh - var(--footer-height));
    min-height: calc(100svh - var(--footer-height));
    margin: 0 auto;

    /* the top padding keeps the heading clear of the fixed header after the arrow button's jump */
    padding: max(5.5rem, var(--header-height, 0px) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-xxl);
}

.download-header {
    margin-bottom: var(--spacing-xs);
    text-align: center;
}

.download-release {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.125rem 0.5rem;
    margin-top: var(--spacing-xxs);
}

.download-platforms {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
}

@container download (min-width: 34rem) {
    .download-platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.platform {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.platform-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.platform-title .icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

/* side by side while both fit, otherwise each on its own full-width row */
.platform-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.platform-buttons .button {
    flex: 1 1 auto;
}

/* Before you install: a heading and the notes as a bulleted list with brand-colored bullets */
.install-notes {
    display: grid;
    gap: var(--spacing-xs);
}

.install-notes-list {
    display: grid;
    gap: var(--spacing-xs);
    margin: 0;
    padding-left: 1.25rem;
}

.install-notes-list li {
    padding-left: 0.25rem;
}

.install-notes-list li::marker {
    color: var(--sem-brand-strong);
}

/* on the page background: the foreground color keeps AA contrast (subtle and muted don't) */
.download-platforms-note {
    text-align: center;
    text-wrap: balance;
}

/* Footer: "Made with" and the copyright, at least as tall as the space the download section leaves for it */
:root {
    --footer-height: 5rem;
}

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: var(--footer-height);
    padding: var(--spacing-xs) var(--spacing-lg) 1.25rem;
    text-align: center;
}

/* "Made with ♥ from Hungary": text and heart in a row with 4px gaps, as in the app's credits */
.made-with {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}