@charset "UTF-8";
/* Lifeclips landing page — one line of serif type, one rainbow rule. */

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Serif+TC:wght@400;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");

@font-face {
  font-family: 'OPPO'; /* 自定义字体名称 */
  src: url('../fonts/OPPO\ Sans\ 4.0.ttf') format('woff2'), /* 优先使用高压缩格式 */
       url('../fonts/OPPO\ Sans\ 4.0.ttf') format('truetype'); /* 备用格式 */
  font-weight: normal;
  font-style: normal;
}

:root {
    --font-serif: "PT Serif", Georgia, "Noto Serif TC", "Noto Serif SC", Serif;

    --color: #1d1d1f;
    --bg: #f5f5f7;
    --muted: rgba(29, 29, 31, 0.56);

    --accent-a: #e23838;
    --accent-b: #f78200;
    --accent-c: #ffb900;
    --accent-d: #5ebd3e;
    --accent-e: #009cdf;
    --accent-f: #973999;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color: #f5f5f7;
        --bg: #1d1d1f;
        --muted: rgba(245, 245, 247, 0.56);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    display: grid;
    place-items: center;
    padding: max(8vh, 48px) clamp(20px, 8vw, 96px);
    background-color: var(--bg);
    color: var(--color);
    font-family: var(--font-serif);
    font-size: clamp(20px, 4.4vw, 30px);
    line-height: 1.75;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.main p {
    margin: 0;
    max-width: 40ch;
    text-wrap: balance;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    animation: rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

.main p::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin-bottom: 1.1em;
    background-color: var(--accent-a);
    box-shadow: 6px 0 var(--accent-b), 12px 0 var(--accent-c), 18px 0 var(--accent-d),
        24px 0 var(--accent-e), 30px 0 var(--accent-f);
}

a {
    position: relative;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.12em;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
            var(--accent-a) 0%,
            var(--accent-b) 20%,
            var(--accent-c) 40%,
            var(--accent-d) 60%,
            var(--accent-e) 80%,
            var(--accent-f) 100%);
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

a:hover::after,
a:focus-visible::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 0 50%;
}

a:focus-visible {
    outline: 2px solid var(--accent-e);
    outline-offset: 4px;
    border-radius: 3px;
}

@keyframes rise {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main p {
        opacity: 1;
        transform: none;
        animation: none;
    }

    a::after {
        transition-duration: 1ms;
    }
}

@media (prefers-contrast: more) {
    :root {
        --muted: var(--color);
    }

    a::after {
        height: 3px;
    }
}