/* "For friends" landing. */
body { --drop-y: -90px; --drop-r: 16deg; --drop-s: 1.15; --lift: -10px; }
.av { width: 34px; height: 34px; border-radius: 50%; background: #2A2A2A; border: 1px solid #3A3A3A; display: flex; align-items: center; justify-content: center; object-fit: cover; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.pill { padding: 7px 14px; border-radius: 100px; background: #161616; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #9A9A9A; }

/* Hero collage. */
.hero-art { height: 660px; }
.ha-1 { left: 0; top: 40px; width: 270px; --r: -8deg; animation-delay: .35s; }
.ha-2 { right: 0; top: 0; width: 256px; --r: 7deg; animation-delay: .5s; }
.ha-3 { right: -10px; top: 340px; width: 220px; --r: 11deg; animation-delay: .65s; }
.ha-4 { left: 130px; top: 250px; width: 290px; --r: -2deg; animation-delay: .8s; }
.ha-tag { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 12px; border-radius: 100px; }
.ha-tag .mono { font-size: 13px; font-weight: 500; }
.ha-tag-1 { right: 20px; top: 250px; animation-delay: 1.3s; }
.ha-tag-2 { left: 30px; top: 570px; animation-delay: 1.6s; }

/* Shot on LYPA ribbon. */
.ribbon { padding: 56px 0 72px; display: flex; flex-direction: column; gap: 24px; overflow: hidden; }
.ribbon .micro { color: #8A8A8A; }
.marquee { display: flex; width: max-content; animation: marquee var(--marquee-duration, 60s) linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee-set { display: flex; gap: 20px; padding-right: 20px; flex: none; }
.marquee .print { width: 230px; box-shadow: none; }

/* Feature cards. */
.cards { grid-template-rows: repeat(2, 480px); }
.c-feed { grid-row: span 2; padding-bottom: 0; }
.feed-win { position: relative; flex-grow: 1; margin: 14px -36px 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%); }
.feed-track { animation: feed 34s linear infinite; }
.feed-win:hover .feed-track { animation-play-state: paused; }
.feed-post { padding: 0 36px 30px; display: flex; flex-direction: column; gap: 12px; }
.feed-top { display: flex; align-items: center; gap: 12px; }
.feed-top b { font-weight: 700; font-size: 15px; }
.feed-top .mono { margin-left: auto; font-size: 12px; color: #6E6E6E; }
.feed-post .print { box-shadow: none; }
.feed-meta { display: flex; gap: 18px; font-size: 13px; color: #BBBBBB; }
.feed-meta span { display: flex; align-items: center; gap: 6px; }
.now-seq { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.pill-me { align-self: flex-end; background: #fff; color: #000; font-weight: 700; }
.q4 { align-self: center; }
.now-timer { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 100px; }
.now-timer b { font-weight: 700; font-size: 13px; }
.now-timer .mono { font-size: 12px; color: #BBBBBB; }
.now-reply { align-self: flex-start; display: flex; align-items: flex-end; gap: 10px; }
.now-photo { width: 92px; flex-shrink: 0; }
.now-photo .print, .fly .print { transform: rotate(-2deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.fly .print { transform: none; }
.now-reply > span, .react-bubble { padding: 10px 14px; line-height: 1.35; }
.now-reply > span { border-radius: 18px 18px 18px 6px; background: #1C1C1C; font-size: 14.5px; }
.react-art { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.react-photo { position: relative; width: 160px; flex-shrink: 0; }
.react-photo .print { transform: rotate(-2deg); }
.react-bubble { max-width: 150px; border-radius: 18px 18px 6px 18px; background: #fff; color: #000; font-size: 14px; }
.flt { position: absolute; bottom: 18%; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 7px; border-radius: 100px; opacity: 0; animation: flt 4.2s cubic-bezier(.25, 1, .5, 1) infinite; }
.flt .mono { font-size: 11px; }
.flt:nth-child(2) { left: -14px; }
.flt:nth-child(3) { right: -24px; animation-delay: .7s; }
.flt:nth-child(4) { left: 30px; animation-delay: 1.4s; }
.flt:nth-child(5) { right: -4px; animation-delay: 2.1s; }
.flt:nth-child(6) { left: -6px; animation-delay: 2.8s; }
.flt:nth-child(7) { right: -18px; animation-delay: 3.5s; }
.pers-art { position: relative; height: 200px; margin-top: auto; }
.fly { position: absolute; left: 0; top: 0; width: 96px; animation: fly 4.5s cubic-bezier(.65, 0, .35, 1) infinite; }
.pers-avs { position: absolute; left: 20px; right: 0; top: 130px; display: flex; gap: 12px; }
.pers-avs .av { width: 48px; height: 48px; font-size: 16px; opacity: .35; }
.pers-avs .tgt { opacity: 1; background: #3A3A3A; animation: tgt 4.5s ease-out infinite; }
.pers-art .tag { position: absolute; left: 117px; top: 96px; background: #D92828; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; padding: 5px 10px; border-radius: 100px; white-space: nowrap; animation: tag 4.5s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.dump-stack { position: relative; width: 150px; height: 179px; margin: auto auto 6px; }
.shuf { position: absolute; inset: 0; animation: shuf 6s cubic-bezier(.65, 0, .35, 1) infinite; }
.shuf:nth-child(2) { animation-delay: -4s; }
.shuf:nth-child(3) { animation-delay: -2s; }

/* Invite. */
.invite-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.invite-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.invite h2 { font-size: 56px; line-height: 1.02; letter-spacing: -2.2px; }
.invite-copy p { max-width: 460px; font-size: 18px; line-height: 1.55; color: #A8A8A8; }
.invite-copy .btn-sm { margin-top: 16px; }
.invite-art { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.invite-avs { display: flex; align-items: center; }
.invite-avs .av { width: 84px; height: 84px; font-size: 26px; border: 4px solid #000; animation-delay: .2s; }
.invite-avs .av + .av { margin-left: -18px; }
.invite-avs .av:nth-child(2) { animation-delay: .45s; }
.invite-avs .av:nth-child(3) { animation-delay: .7s; }
.invite-avs .av:nth-child(4) { animation-delay: .95s; }
.invite-avs .av:nth-child(5) { animation-delay: 1.2s; }
.invite-avs .av:nth-child(6) { font-size: 30px; background: #fff; color: #000; animation-delay: 1.45s; }
.invite-note { display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; border-radius: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); animation-delay: 1.8s; }
.invite-note .av { width: 44px; height: 44px; font-size: 16px; }
.invite-note div { display: flex; flex-direction: column; gap: 3px; }
.invite-note b { font-weight: 700; font-size: 16px; }
.invite-note .mono { font-size: 12px; color: #8A8A8A; }

/* Closing photo row. */
.final-art { display: flex; gap: 20px; align-items: flex-start; }
.final-art > * { position: relative; width: 190px; flex-shrink: 0; }
.final-art > :nth-child(even) { margin-top: 40px; }
.fa-1 { --r: -8deg; animation-delay: .1s; }
.fa-2 { --r: 5deg; animation-delay: .2s; }
.fa-3 { --r: -3deg; animation-delay: .3s; }
.fa-4 { --r: 7deg; animation-delay: .4s; }
.fa-5 { --r: -6deg; animation-delay: .5s; }
.fa-6 { --r: 4deg; animation-delay: .6s; }
.final h2 { margin-top: 64px; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes feed { to { transform: translateY(-50%); } }
@keyframes q1 { 0% { opacity: 0; transform: translateY(10px); } 5%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes q2 { 0%, 14% { opacity: 0; transform: translateY(10px); } 20%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes q3 { 0%, 40% { opacity: 0; transform: translateY(12px) scale(.9); } 47%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes q4 { 0%, 55% { opacity: 0; transform: translateY(10px); } 61%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes flt { 0% { opacity: 0; transform: translateY(0) scale(.6); } 14% { opacity: 1; transform: translateY(-24px) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--flt-y, -190px)) scale(.9); } }
@keyframes fly { 0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(-4deg); } 8%, 14% { opacity: 1; transform: translate(0, 0) scale(1) rotate(-4deg); } 45% { opacity: 1; transform: translate(var(--fly-x, 116px), var(--fly-y, 97px)) scale(.28) rotate(0); } 50%, 100% { opacity: 0; transform: translate(var(--fly-x, 116px), var(--fly-y, 97px)) scale(.28); } }
@keyframes tgt { 0%, 44% { box-shadow: 0 0 0 0 rgba(217, 40, 40, 0); transform: scale(1); } 50% { box-shadow: 0 0 0 4px #D92828; transform: scale(1.18); } 58%, 86% { box-shadow: 0 0 0 3px #D92828; transform: scale(1); } 100% { box-shadow: 0 0 0 0 rgba(217, 40, 40, 0); transform: scale(1); } }
@keyframes tag { 0%, 46% { opacity: 0; transform: translateY(6px) scale(.6); } 54%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes shuf { 0%, 26% { transform: translate(0, 0) rotate(-2deg); z-index: 3; opacity: 1; } 33% { transform: translate(115%, -14px) rotate(14deg); z-index: 3; opacity: 0; } 34% { transform: translate(-20px, 16px) rotate(-9deg); z-index: 1; opacity: 0; } 40%, 59% { transform: translate(-20px, 16px) rotate(-9deg); z-index: 1; opacity: 1; } 66%, 93% { transform: translate(-10px, 8px) rotate(-5deg); z-index: 2; opacity: 1; } 100% { transform: translate(0, 0) rotate(-2deg); z-index: 3; opacity: 1; } }
.q1 { animation: q1 9s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
.q2 { animation: q2 9s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
.q3 { animation: q3 9s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
.q4 { animation: q4 9s cubic-bezier(.34, 1.56, .64, 1) infinite both; }

@media (max-width: 1023px) {
    body { --drop-y: -80px; --flt-y: -170px; --fly-x: 118px; --fly-y: 84px; }
    .hero { padding-bottom: 40px; }
    .av { width: 30px; height: 30px; font-size: 12px; }
    .pill { padding: 6px 12px; font-size: 11px; }

    .hero-art { height: 440px; margin-top: 30px; }
    .ha-1 { top: 18px; width: 186px; }
    .ha-2 { width: 176px; }
    .ha-3 { right: -8px; top: 228px; width: 150px; }
    .ha-4 { left: 62px; top: 150px; width: 200px; }
    .ha-tag { gap: 8px; height: 40px; padding: 0 14px 0 10px; }
    .ha-tag svg { width: 20px; height: 20px; }
    .ha-tag .mono { font-size: 12px; }
    .ha-tag-1 { right: 4px; top: 132px; }
    .ha-tag-2 { left: 0; top: 372px; }

    .ribbon { padding: 40px 0 44px; gap: 18px; }
    .marquee { animation-duration: var(--marquee-duration-mobile, 45s); }
    .marquee-set { gap: 14px; padding-right: 14px; }
    .marquee .print { width: 160px; }

    .c-feed { padding-bottom: 0; }
    .feed-win { flex: none; height: 340px; margin: 10px -22px 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%); }
    .feed-track { animation-duration: 30s; }
    .feed-post { padding: 0 22px 26px; gap: 10px; }
    .feed-top { gap: 10px; }
    .feed-top b { font-size: 14px; }
    .feed-top .mono { font-size: 11px; }
    .feed-meta { gap: 16px; font-size: 12px; }
    .feed-meta svg { width: 16px; height: 16px; }
    .now-seq { margin-top: 10px; height: 300px; }
    .now-timer { padding: 8px 14px 8px 8px; }
    .now-timer .ring { width: 32px; height: 32px; }
    .now-photo { width: 128px; }
    .react-art { margin-top: 12px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px; }
    .react-photo { width: 220px; margin: 0 auto; }
    .react-bubble { align-self: flex-end; max-width: 230px; font-size: 14.5px; }
    .flt { height: 34px; padding: 0 10px 0 6px; }
    .flt:nth-child(2) { left: -18px; }
    .flt:nth-child(3) { right: -20px; }
    .flt:nth-child(4) { left: 50px; }
    .flt:nth-child(5) { right: 10px; }
    .flt:nth-child(7) { right: -14px; }
    .pers-art { height: 176px; margin-top: 10px; }
    .fly { width: 80px; }
    .pers-avs { top: 110px; gap: 14px; }
    .pers-avs .av { width: 44px; height: 44px; font-size: 15px; }
    .pers-art .tag { left: 112px; top: 78px; font-size: 9.5px; padding: 5px 9px; }
    .dump-stack { width: 196px; height: 234px; margin: 18px auto 8px; }

    .invite-in { display: flex; flex-direction: column; gap: 14px; }
    .invite-copy, .invite-art { display: contents; }
    .invite h2 { font-size: min(32px, 8.2vw); line-height: 1.06; letter-spacing: -1.2px; }
    .invite-copy p { max-width: none; font-size: 16px; line-height: 1.5; }
    .invite-avs { margin-top: 14px; }
    .invite-avs .av { width: 52px; height: 52px; font-size: 17px; border-width: 3px; }
    .invite-avs .av + .av { margin-left: -12px; }
    .invite-avs .av:nth-child(5) { display: none; }
    .invite-avs .av:nth-child(6) { font-size: 17px; animation-delay: 1.2s; }
    .invite-note { align-self: flex-start; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; box-shadow: none; animation-delay: 1.6s; }
    .invite-note .av { width: 30px; height: 30px; font-size: 12px; }
    .invite-note div { gap: 2px; }
    .invite-note b { font-size: 13.5px; }
    .invite-note .mono { font-size: 11px; }
    .invite .btn-wide { margin-top: 12px; }

    .final-art { gap: 10px; }
    .final-art > * { width: 110px; }
    .final-art > :nth-child(even) { margin-top: 22px; }
    .final-art > :nth-child(n+5) { display: none; }
    .final h2 { margin-top: 40px; }
}