/* lychee.cx: the coming soon page in lychee's rose, its previews full behind it */
:root {
  --bg: #0d0a0c; --rose: #eb6f92; --pink: #ff9ec4; --hi: #f0e4e8; --text: #c9aab3; --dim: #8a7280;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --side: clamp(20px, 5vw, 72px); --low: max(clamp(28px, 8vh, 88px), env(safe-area-inset-bottom));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body { color: var(--text); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--rose); color: var(--bg); }

/* the previews: one fading over the next at full strength so a fade never dips; the dim lives in the shade,
   since opacity on the stage would redraw the whole screen offscreen each frame */
.stage { position: fixed; inset: 0; overflow: hidden; contain: strict; background: var(--bg); }
.stage > img, .stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s cubic-bezier(.45, 0, .55, 1); will-change: opacity; }
.stage > .on { opacity: 1; z-index: 1; }
.stage > .under { opacity: 1; }
/* a still is pushed in slowly; a clip moves on its own */
.stage > img { animation: push 12s linear both; }
@keyframes push { from { transform: scale(1.015); } to { transform: scale(1.07); } }
/* standing up, the whole preview shows, high on the screen, the words under it */
@media (max-aspect-ratio: 1/1) {
  .stage > img, .stage > video { object-fit: contain; object-position: 50% 36%; }
  .stage > img { animation-name: push-small; }
}
@keyframes push-small { from { transform: scale(1); } to { transform: scale(1.03); } }

.shade { position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 100% at 55% 35%, rgba(13, 10, 12, 0) 52%, rgba(13, 10, 12, .62) 100%),
    linear-gradient(0deg, rgba(13, 10, 12, .9) 0%, rgba(13, 10, 12, .4) 30%, rgba(13, 10, 12, 0) 56%),
    linear-gradient(90deg, rgba(13, 10, 12, .5) 0%, rgba(13, 10, 12, 0) 42%); }
.trails { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.say { position: fixed; left: var(--side); bottom: var(--low); max-width: calc(100vw - 2 * var(--side)); z-index: 2; }
.brand { --big: clamp(46px, 7.4vw, 92px); display: flex; align-items: center; margin: 0; color: var(--hi); font: 300 var(--big)/1 var(--sans); letter-spacing: -.045em; }
.mark { width: 1.1em; height: 1.1em; margin-right: .16em; object-fit: contain; filter: drop-shadow(0 .08em .2em rgba(0, 0, 0, .55)); animation: bob 5.5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-.06em) rotate(3deg); } }
/* the name lit by a light that sweeps across it, as lychee's own page does */
.name { padding-right: .04em; background-image: linear-gradient(90deg, var(--hi) 34%, var(--rose) 50%, var(--hi) 66%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: sweep 6s linear infinite; text-shadow: none; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* otw rides at the letters' shoulder, beside the name, not at the mark's top */
.otw { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 calc(var(--big) * .34) calc(var(--big) * .12); color: var(--rose); font: 500 13px/1 var(--mono); letter-spacing: .14em; text-shadow: 0 0 14px rgba(235, 111, 146, .55); }
.otw i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 10px var(--rose); animation: beat 1.8s ease-in-out infinite; }
@keyframes beat { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.lead { margin: 14px 0 0 2px; color: var(--hi); font: 400 15px/1.4 var(--mono); letter-spacing: .02em; opacity: .82; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
/* the cord: bare words and discord's own mark in the rose, brighter and glowing under a pointer */
.cord { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0 2px; color: var(--text); font: 500 15px/1 var(--sans); text-decoration: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); transition: color .25s, text-shadow .25s; }
.cord svg { width: 22px; height: 22px; flex: none; fill: var(--rose); filter: drop-shadow(0 0 8px rgba(235, 111, 146, .4)); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), filter .25s; }
.cord:hover, .cord:focus-visible { color: var(--hi); text-shadow: 0 0 18px rgba(235, 111, 146, .6); outline: none; }
.cord:hover svg, .cord:focus-visible svg { filter: drop-shadow(0 0 12px rgba(235, 111, 146, .85)); transform: translateY(-1px) rotate(-8deg) scale(1.08); }

/* which preview of how many, and how far through it */
.count { position: fixed; right: var(--side); bottom: var(--low); z-index: 2; display: grid; justify-items: end; gap: 8px; color: rgba(240, 228, 232, .5); font: 400 11px/1 var(--mono); letter-spacing: .1em; transition: opacity .6s; }
.count b { color: var(--hi); font-weight: 500; }
.count.none { opacity: 0; }
.hair { display: block; width: 88px; height: 1px; overflow: hidden; background: rgba(240, 228, 232, .14); }
.hair i { display: block; height: 100%; background: linear-gradient(90deg, var(--rose), var(--pink)); transform: scaleX(0); transform-origin: 0 50%; }

@media (max-width: 640px) {
  .count { top: max(18px, env(safe-area-inset-top)); bottom: auto; left: var(--side); right: auto; justify-items: start; }
  .lead, .cord { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage > img, .mark, .name, .otw i { animation: none; }
  .stage > img, .stage > video { transition-duration: .8s; }
}