.scroll-dim {
    position: fixed; inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(0,0,0,0.45);
    opacity: var(--p, 0);
}


.hero {
    min-height: 88vh;
    min-height: 88dvh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 22px;
    padding: 90px 20px 40px;
}

.logo-sizer {
    display: block;
    max-width: 65vw;
    max-height: 35vh;
    width: auto; height: auto;
    visibility: hidden;
}
@media (min-width: 768px) {
    .logo-sizer { max-width: 30vw; max-height: 30vh; }
}

.logo-fly {
    pointer-events: none;
    position: fixed;
    top: 0; left: 0;
    z-index: 100;
    display: block;
    will-change: transform;
}
.logo-shift {
    display: block;
    transition: transform .4s var(--ease-smooth);
}
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(78px + env(safe-area-inset-top));
    z-index: 96;
    pointer-events: none;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    opacity: 0;
    transform: translateY(-100%);
    transition: transform .55s var(--ease-out), opacity .35s ease;
}
html.docked .site-header { opacity: 1; transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: rgba(255,255,255,0.96); }
}

.logo-fly.logo-moving,
.logo-fly.logo-moving .logo-scale {
    transition: transform .65s cubic-bezier(.22,.9,.24,1);
}
@media (hover: hover) {
    html.docked .menu:not(.open):hover ~ .logo-fly .logo-shift { transform: translateX(70px); }
}

.logo-scale {
    display: block;
    transform-origin: 0 0;
}
.logo-art {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
    animation: logo-in .8s var(--ease-out) backwards;
    animation-play-state: paused;
}
html:not(.placed) .logo-fly { visibility: hidden; }

.play-btn {
    width: 100%;
    max-width: 320px;
    min-height: 52px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 18px;
    border: none;
    background-color: var(--blue);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    animation: row-in .55s var(--ease-out) .65s backwards;
}
.play-btn i { font-size: .9rem; }

.hero-fade {
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
    opacity: calc(1 - var(--p, 0) * 1.4);
    transform: translateY(calc(var(--p, 0) * -12px));
}

.share {
    width: 100%;
    max-width: 360px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: 4px;
    animation: row-in .55s var(--ease-out) .75s backwards;
}
.share-label {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.share-box {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--glass-rim);
    background-color: var(--glass-fill);
    background-image: var(--glass-gloss);
    backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop);
    box-shadow: var(--glass-drop), var(--glass-bevel);
}
.share-link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
    font-weight: 500;
    color: var(--text);
    user-select: all;
}
.copy-btn {
    flex-shrink: 0;
    height: 36px;
    padding: 0 16px;
    display: inline-flex; align-items: center; gap: 8px;
    border: none;
    border-radius: 999px;
    background-color: #111;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .3s ease;
}
.copy-btn.copied { background-color: #8e8e93; }
.copy-icons {
    position: relative;
    width: 14px; height: 14px;
    display: inline-block;
}
.copy-icons i {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: opacity .25s ease, transform .35s var(--ease-spring);
}
.copy-icons .fa-check { opacity: 0; transform: scale(.4); }
.copy-btn.copied .fa-copy { opacity: 0; transform: scale(.4); }
.copy-btn.copied .fa-check { opacity: 1; transform: scale(1); }
.copy-text {
    display: inline-block;
    min-width: 50px;
    text-align: left;
}

.logo-art, .play-btn, .share { animation-play-state: paused; }
html.loaded .logo-art, html.loaded .play-btn, html.loaded .share { animation-play-state: running; }

.sheet {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    margin-top: 24px;
    display: flex; flex-direction: column;
    border-radius: 28px 28px 0 0;
    background: #fff;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
}
.posts {
    flex: 1;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}
.about {
    max-width: 560px;
    margin: 8px auto 34px;
    text-align: center;
}
.about-title {
    margin: 0 0 14px;
    font-size: clamp(1.7rem, 5vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.15;
    color: #111;
}
.about-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #3a3a3c;
}
.side {
    display: inline-block;
    padding: 0 .28em;
    margin: 0 .04em;
    font-weight: 700;
    color: #111;
    border-radius: .35em .9em .45em .8em;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%;
    transition: background-size .55s cubic-bezier(.3,.7,.25,1);
}
.side.good {
    rotate: -1.5deg;
    background-image:
        linear-gradient(176deg, rgba(90,165,255,0) 34%, rgba(90,165,255,0.55) 36%, rgba(90,165,255,0.42) 88%, rgba(90,165,255,0) 91%);
}
.side.evil {
    rotate: 1.2deg;
    background-image:
        linear-gradient(184deg, rgba(255,95,80,0) 32%, rgba(255,95,80,0.5) 35%, rgba(255,95,80,0.4) 87%, rgba(255,95,80,0) 90%);
}
html.can-reveal .about:not(.in) .side { background-size: 0% 100%; }
html.can-reveal .about.in .side.good { transition-delay: .45s; }
html.can-reveal .about.in .side.evil { transition-delay: .85s; }

.post-list {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.follow-card {
    width: 100%;
    max-width: 550px;
    margin-top: 10px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-align: center;
}
.follow-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.follow-card.no-image .follow-image { display: none; }
.follow-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #111;
}

.avatars {
    width: 100vw;
    margin: 10px calc(50% - 50vw) 0;
    padding: 0 clamp(10px, 5vw, 80px);
    display: flex; align-items: flex-start; justify-content: space-between;
}
.avatar {
    flex: 0 0 auto;
    margin: 0;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.avatar-pic {
    position: relative;
    display: block;
    transition: transform .45s var(--ease-spring);
}
.avatar-pic::before {
    content: '';
    position: absolute;
    inset: -18% -22% -6%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0,0,0,0.2), rgba(0,0,0,0.07) 55%, rgba(0,0,0,0));
    opacity: 0;
    transform: scale(.8);
    transition: opacity .4s ease, transform .5s var(--ease-spring);
    pointer-events: none;
}
@media (hover: hover) {
    .crew .avatar:hover .avatar-pic::before { opacity: 1; transform: none; }
}
.avatar-pic::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 20%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
}
.avatar img {
    display: block;
    height: clamp(104px, 24vw, 210px);
    width: auto;
}
.avatar figcaption {
    margin-top: 6px;
    display: flex; flex-direction: column; align-items: center;
}
.avatar-name {
    white-space: nowrap;
    font-size: clamp(.68rem, 2.6vw, .9rem);
    font-weight: 700;
    color: #111;
}
.avatar-nick {
    margin-top: 1px;
    font-size: clamp(.64rem, 2.3vw, .8rem);
    font-weight: 500;
    color: #8e8e93;
}
html.can-reveal .avatars.reveal { opacity: 1; transform: none; }
html.can-reveal .avatars .avatar {
    opacity: 0;
    transition: opacity .5s ease, transform .9s var(--ease-spring), rotate .5s var(--ease-spring);
}
html.can-reveal .avatars .avatar-left { transform: translateX(-70px) rotate(-6deg); }
html.can-reveal .avatars .avatar-right { transform: translateX(70px) rotate(6deg); }
html.can-reveal .avatars .avatar-middle {
    transform: translateY(50px) scale(.9);
    transition: opacity .5s ease .15s, transform .9s var(--ease-spring) .15s, rotate .5s var(--ease-spring);
}
html.can-reveal .avatars.in .avatar { opacity: 1; transform: none; }

.avatar-left { rotate: -8deg; }
.avatar-middle { rotate: 5deg; translate: 0 22px; }
.avatar-right { rotate: -4deg; translate: 0 6px; }
.avatars { padding-bottom: 22px; }

.crew {
    position: relative;
    width: 100%;
    padding: 34px 20px 56px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.crew-head {
    max-width: 540px;
    margin: 0 auto 30px;
}
.crew-sub {
    margin: 10px 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: #6b6b70;
}
.crew-text {
    margin: 0;
    text-wrap: balance;
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.25;
    color: #111;
}
.crew .avatars { margin-top: 0; }

@media (min-width: 1100px) {
    .crew { padding: 60px 20px 70px; }
    .crew-head { margin-bottom: 30px; }
    .crew .avatars {
        width: auto;
        margin: 0;
        padding: 0;
        justify-content: center;
    }
    .crew .avatar-left,
    .crew .avatar-right { position: absolute; }
    .avatar img { height: clamp(150px, 13vw, 220px); }
    .crew .avatar-left {
        left: clamp(24px, 6vw, 160px);
        top: 30px;
        rotate: -9deg;
    }
    .crew .avatar-right {
        right: clamp(24px, 6vw, 160px);
        top: 20px;
        rotate: 8deg;
        translate: none;
    }
    .crew .avatar-middle {
        rotate: -5deg;
        translate: none;
    }
}



html.can-reveal .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * .06s);
}
html.can-reveal .reveal.in {
    opacity: 1;
    transform: none;
}
.site-footer {
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    background: #f2f2f7;
    border-top: 1px solid rgba(0,0,0,0.06);
    text-align: center;
    font-size: .78rem;
    font-weight: 500;
    color: #6b6b70;
}
.site-footer p { margin: 0; }


html.docked .hero-fade { pointer-events: none; }

.avatar-name { transition: color .25s ease; }
@media (hover: hover) {
    .crew .avatar:hover { rotate: 0deg; }
    .crew .avatar:hover .avatar-pic { transform: translateY(-10px) scale(1.05); }
    .crew .avatar:hover .avatar-name { color: var(--blue); }
}

@keyframes sheet-up {
    from { transform: translateY(45vh); }
    to   { transform: none; }
}
.sheet {
    animation: sheet-up 1.1s cubic-bezier(.22,.9,.24,1) .85s backwards;
    animation-play-state: paused;
}
html.loaded .sheet { animation-play-state: running; }

.spotlight {
    position: fixed; inset: 0;
    z-index: 95;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
            rgba(255,255,255,0) 0, rgba(255,255,255,0) 150px,
            rgba(255,255,255,0.6) 330px, rgba(255,255,255,0.75) 100%);
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
html.spotlight-on .spotlight {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility 0s;
}

.logo-art { pointer-events: auto; }