/* ============================================================================
   appsoon.css - the "Android app is coming" panel on the member dashboard

   A teaser that has to look like the app it is promising. Two halves: the
   promise on the left, a phone showing the member's own dashboard on the right.

   The phone is drawn here rather than shipped as a picture. A screenshot would
   go stale the next time the dashboard changed, would need a second file to sit
   on a dark background, and would cost a download on the very phones this is
   aimed at. The only image is the logo the site already serves.

   Everything that moves stops for prefers-reduced-motion, at the bottom.
   ========================================================================= */

.av-appsoon {
    position: relative;
    overflow: hidden;
    margin-top: 22px;
    padding: 38px 40px;
    border-radius: 22px;
    background: var(--av-grad-hero);
    color: #fff;
    box-shadow: var(--av-shadow-lg);

    display: grid;
    /* The copy takes what it needs and the phone keeps its own width, so the
       two never fight over the middle. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
}

/* A slow drifting light behind it all, the same idea as the greeting card so
   the two read as one family. */
.av-appsoon__glow {
    position: absolute;
    inset-block-start: -160px;
    inset-inline-end: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
                rgba(122, 193, 67, .28), rgba(27, 117, 188, .12) 45%, rgba(255, 255, 255, 0) 70%);
    animation: avAppGlow 16s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes avAppGlow {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-50px, 40px, 0) scale(1.18); }
}

/* ---- the promise -------------------------------------------------------- */

.av-appsoon__copy { position: relative; min-width: 0; }

.av-appsoon__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(251, 167, 27, .18);
    border: 1px solid rgba(251, 167, 27, .45);
    color: #FBC46B;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.av-appsoon__title {
    margin: 16px 0 0;
    color: #fff;
    font-size: 2.1rem;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* The second half of the headline in the leaf green, so the eye lands on
   "is on its way" rather than on the product name it already knows. */
.av-appsoon__title span {
    display: block;
    background: linear-gradient(90deg, var(--av-leaf), #BDE88F);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.av-appsoon__lead {
    margin: 14px 0 0;
    max-width: 52ch;
    color: rgba(255, 255, 255, .84);
    font-size: 1rem;
    line-height: 1.65;
}

.av-appsoon__list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 26px;
}

.av-appsoon__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .92);
    font-size: .91rem;
    font-weight: 600;
}

.av-appsoon__list svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(122, 193, 67, .22);
    color: var(--av-leaf);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
}

.av-appsoon__store {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Looks like a store button and is deliberately not one. There is nothing to
   link to yet, and a button that goes nowhere is worse than a label that says
   so plainly. */
.av-appsoon__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    backdrop-filter: blur(4px);
}

.av-appsoon__soon {
    color: rgba(255, 255, 255, .62);
    font-size: .86rem;
}

/* ---- the phone ---------------------------------------------------------- */

.av-appsoon__phone {
    position: relative;
    display: flex;
    justify-content: center;
}

.av-phone {
    position: relative;
    width: 232px;
    height: 466px;
    padding: 11px;
    border-radius: 36px;
    background: linear-gradient(160deg, #2B3550, #131A2B 60%);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .13),
        0 28px 60px rgba(0, 0, 0, .42);
    animation: avPhoneFloat 7s ease-in-out infinite alternate;
}

@keyframes avPhoneFloat {
    from { transform: translate3d(0, 0, 0) rotate(-2.2deg); }
    to   { transform: translate3d(0, -14px, 0) rotate(-0.6deg); }
}

.av-phone__notch {
    position: absolute;
    inset-block-start: 11px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 17px;
    border-radius: 0 0 12px 12px;
    background: #131A2B;
    z-index: 2;
}

.av-phone__screen {
    width: 100%;
    height: 100%;
    border-radius: 27px;
    overflow: hidden;
    padding: 26px 15px 15px;
    background: linear-gradient(170deg, #11265A 0%, #16407E 45%, #0F5C34 100%);
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.av-phone__top { display: flex; justify-content: center; padding-block: 2px 4px; }
.av-phone__logo { width: 104px; height: auto; opacity: .95; }

.av-phone__hero {
    border-radius: 13px;
    padding: 12px 13px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .14);
}
.av-phone__hero small {
    display: block;
    font-size: .58rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.av-phone__hero b {
    display: block;
    margin-top: 3px;
    font-size: 1.12rem;
    font-weight: 800;
    color: #fff;
    /* A long figure must shrink rather than burst the phone. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.av-phone__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.av-phone__tiles div {
    border-radius: 11px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .1);
    min-width: 0;
}
.av-phone__tiles small {
    display: block;
    font-size: .54rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}
.av-phone__tiles b {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Decoration, not data: no numbers, no labels, nothing a member could read a
   meaning into. They grow once when the panel arrives and then hold still. */
.av-phone__bars {
    flex: 1;
    min-height: 74px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 11px 11px 9px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .09);
}
.av-phone__bars i {
    flex: 1;
    height: var(--h);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--av-leaf), rgba(122, 193, 67, .35));
    transform-origin: bottom;
    animation: avBarGrow .9s cubic-bezier(.2, .8, .3, 1) backwards;
}
.av-phone__bars i:nth-child(1) { animation-delay: .20s; }
.av-phone__bars i:nth-child(2) { animation-delay: .28s; }
.av-phone__bars i:nth-child(3) { animation-delay: .36s; }
.av-phone__bars i:nth-child(4) { animation-delay: .44s; }
.av-phone__bars i:nth-child(5) { animation-delay: .52s; }
.av-phone__bars i:nth-child(6) { animation-delay: .60s; }

@keyframes avBarGrow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

.av-phone__rows { display: flex; flex-direction: column; gap: 7px; }
.av-phone__rows span {
    height: 9px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .13);
}
.av-phone__rows span:nth-child(2) { width: 78%; }
.av-phone__rows span:nth-child(3) { width: 56%; }

/* ---- the public site's copy of the panel -------------------------------- */
/* The dashboard sits inside a card already, so there it needs no outer margin.
   On the public site it is a band of its own between two sections. */
.av-appsoon--site { margin-top: 0; padding: 44px 48px; }

/* ---- the phone, showing the shop (public site) -------------------------- */
/* A shop screen rather than a dashboard: this page is public, and a phone
   showing somebody's income on a public page is an earnings claim. */
.av-phone__screen--shop { gap: 9px; }

.av-phone__search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .62);
    font-size: .6rem;
}
.av-phone__search svg {
    flex: 0 0 auto;
    width: 11px; height: 11px;
    fill: none; stroke: currentColor; stroke-width: 2.4;
}

.av-phone__shop {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-content: start;
}
.av-phone__prod {
    border-radius: 11px;
    padding: 9px 8px 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .11);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* A jar shape, drawn with a border radius and a lid. Four colours from the
   brand so the grid reads as a range rather than four of the same thing. */
.av-phone__jar {
    position: relative;
    height: 36px;
    border-radius: 7px 7px 9px 9px;
    margin-bottom: 2px;
}
.av-phone__jar::before {
    content: "";
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .55);
}
.av-phone__jar--1 { background: linear-gradient(170deg, #8FD35B, #4E9B2E); }
.av-phone__jar--2 { background: linear-gradient(170deg, #FBC46B, #E0821E); }
.av-phone__jar--3 { background: linear-gradient(170deg, #6FC2F0, #1B75BC); }
.av-phone__jar--4 { background: linear-gradient(170deg, #C4A2E8, #7B52B8); }

/* The two lines under each jar: a name and a price, said without words. */
.av-phone__prod span {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .26);
}
.av-phone__prod span.is-short { width: 48%; background: rgba(255, 255, 255, .16); }

.av-phone__nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 9px 4px 3px;
    border-block-start: 1px solid rgba(255, 255, 255, .12);
}
.av-phone__nav i {
    width: 15px; height: 15px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .2);
}
.av-phone__nav i.is-on { background: var(--av-leaf); }

/* ---- narrower screens --------------------------------------------------- */

@media (max-width: 1080px) {
    .av-appsoon { padding: 32px 30px; gap: 30px; }
    .av-appsoon__title { font-size: 1.8rem; }
    .av-phone { width: 206px; height: 414px; }
}

@media (max-width: 860px) {
    /* The phone goes under the words rather than shrinking to nothing beside
       them, and the promises become one column so no line has to wrap. */
    .av-appsoon {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        padding: 30px 22px 34px;
    }
    .av-appsoon__lead { margin-inline: auto; }
    .av-appsoon__list { grid-template-columns: minmax(0, 1fr); justify-items: start; max-width: 300px; margin-inline: auto; }
    .av-appsoon__store { justify-content: center; }
    .av-appsoon__phone { order: 2; }
}

@media (max-width: 420px) {
    .av-appsoon__title { font-size: 1.55rem; }
    .av-appsoon__chip { width: 100%; justify-content: center; }
    .av-phone { width: 200px; height: 402px; padding: 9px; border-radius: 30px; }
    .av-phone__screen { border-radius: 23px; padding-block-start: 23px; }

    /* A rank name has to fit on the smallest phone. At the full size it did,
       and here "Diamond" came out as "Dia..." - a mock-up that looks broken
       does the opposite of what this panel is for. A longer name than that
       still ellipses, which is fine on a picture of a screen. */
    .av-phone__tiles b { font-size: .7rem; letter-spacing: -.01em; }
    .av-phone__tiles div { padding-inline: 8px; }
}

/* ---- for anyone who asked for less movement ----------------------------- */

@media (prefers-reduced-motion: reduce) {
    .av-appsoon__glow,
    .av-phone { animation: none; }
    .av-phone { transform: rotate(-1.4deg); }
    .av-phone__bars i { animation: none; }
}