/*----------------------------------------------------------------------------------------------------------------------
Pixiplay site

Stylesheet for the marketing pages (home, about, contact, terms), Arabic and English alike.
Standalone: it does not load the old style.css, which was built for the fixed full-height
coming-soon canvas and sets overflow:hidden on the body.

Every page exists twice, once per language, and the header carries a switch between the two.
A page is never bilingual.

The palette is taken from the logo: a faceted purple wordmark with a yellow-winged fairy. The
purples carry the brand and the yellow is the single warm accent, used sparingly on highlights
and one card border in five. The logo artwork is purple on a light ground, so the header stays
light and the deep purple is spent on the footer and the headings instead.

Type is Cairo throughout, with IBM Plex Mono reserved for the company record -- legal name,
email, phone -- because that is record data and it is what an app-store reviewer comes to read.
----------------------------------------------------------------------------------------------------------------------*/

:root {
    --cream: #fffcf9;
    --paper: #ffffff;

    --ink: #2e1440;
    --ink-soft: #6b5580;
    --ink-faint: #9b8aac;
    --rule: #ece2f4;

    --grape: #5d2183;
    --violet: #8a2bae;
    --orchid: #b96fd8;
    --rose: #f27bb8;
    --sun: #ffce3d;

    --violet-tint: #f4ebfb;
    --lilac-tint: #efe9fa;
    --rose-tint: #fdeaf5;
    --sun-tint: #fff7e0;

    --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --font-rec: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    --gutter: 1.25rem;
    --radius: 1.25rem;
}

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

html { scroll-behavior: smooth; }

html, body { background: var(--cream); }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

img { max-width: 100%; }

.wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding-inline: var(--gutter);
}

a:focus-visible, button:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 3px;
    border-radius: .25rem;
}

/* ---------------------------------------------------------------- Header

   One grid row: navigation, logo, language switch. The columns are logical, so the links sit
   on the reading-start side -- right in Arabic, left in English -- and the switch sits opposite,
   with the logo centred between them whatever the language.

   Under 760px the row becomes menu button / logo / switch, and the links drop into a panel
   on a second row that the button reveals. */

.site-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: rgba(255, 252, 249, .94);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--rule);
}

.site-header .wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "nav logo lang";
    align-items: center;
    gap: 1rem;
    padding-block: .75rem;
}

.brand { grid-area: logo; }

/* Sized by height, so a replacement logo of any proportion drops straight in. */

.brand img {
    height: 5.1rem;
    width: auto;
    display: block;
}

.site-nav {
    grid-area: nav;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    font-size: .875rem;
    font-weight: 700;
}

.site-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: .375rem .875rem;
    border-radius: 999px;
    transition: color .2s ease, background-color .2s ease;
}

.site-nav a:hover, .site-nav a:focus-visible { color: var(--grape); background: var(--violet-tint); }

/* The language switch is a control, not a page link, so it reads as one. */

.lang-switch {
    grid-area: lang;
    justify-self: end;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--grape);
    color: var(--grape);
    border-radius: 999px;
    padding: .1875rem .875rem;
    transition: background-color .2s ease;
}

.lang-switch:hover, .lang-switch:focus-visible { background: var(--sun); }

/* ---------------------------------------------------------------- Menu button */

.nav-toggle {
    display: none;
    grid-area: toggle;
    justify-self: start;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 2px solid var(--grape);
    border-radius: .75rem;
    background: var(--paper);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .3125rem;
}

.nav-toggle span {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--grape);
    transition: transform .25s ease, opacity .2s ease;
}

.site-header[data-open="true"] .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header[data-open="true"] .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header[data-open="true"] .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
    .site-header .wrap {
        grid-template-areas:
            "toggle logo lang"
            "nav    nav  nav";
        gap: .5rem 1rem;
    }

    .nav-toggle { display: flex; }

    .site-nav {
        display: none;
        justify-self: stretch;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-block: .5rem;
        border-top: 2px solid var(--rule);
    }

    .site-header[data-open="true"] .site-nav { display: flex; }

    .site-nav a { padding: .625rem .75rem; border-radius: .5rem; text-align: start; }
}

/* ---------------------------------------------------------------- Hero */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--violet-tint), var(--cream));
}

.hero .wrap {
    position: relative;
    padding-block: 4rem 4.5rem;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 1rem;
    text-wrap: balance;
    letter-spacing: -.01em;
    color: var(--grape);
}

.hero .sub {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    color: var(--ink-soft);
    max-width: 40rem;
    margin: 0 auto 2rem;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .875rem;
}

.badges img { width: 10.5rem; height: auto; display: block; }

/* ---------------------------------------------------------------- Sections + waves

   Each section paints its own ground and carries a wave cut into the section above it. The
   wave is filled from the same custom property as the background, so the two cannot drift. */

.section {
    position: relative;
    padding-block: 4rem;
    background: var(--sec-bg, var(--paper));
}

.section--paper  { --sec-bg: var(--paper); }
.section--violet { --sec-bg: var(--violet-tint); }
.section--lilac  { --sec-bg: var(--lilac-tint); }
.section--rose   { --sec-bg: var(--rose-tint); }
.section--sun    { --sec-bg: var(--sun-tint); }

.wave {
    position: absolute;
    top: -2.75rem;
    inset-inline: 0;
    width: 100%;
    height: 2.8rem;
    display: block;
    fill: var(--sec-bg);
    pointer-events: none;
}

.section-head { margin-bottom: 2.25rem; max-width: 42rem; }

.section h2 {
    font-size: clamp(1.625rem, 4vw, 2.375rem);
    font-weight: 900;
    line-height: 1.3;
    margin: 0 0 .625rem;
    text-wrap: balance;
    color: var(--grape);
}

.section h2 mark {
    background: linear-gradient(transparent 60%, var(--sun) 60%);
    color: inherit;
    padding-inline: .1875rem;
    border-radius: .125rem;
}

.section-head p { color: var(--ink-soft); margin: 0; font-size: 1.0625rem; }

/* A section that opens on a paragraph rather than a heading: the text is carrying the
   section by itself, so it reads at lead size instead of as support under a title. */

.section-head--lead { max-width: 46rem; }

.section-head--lead p {
    font-size: 1.1875rem;
    line-height: 1.85;
    color: var(--ink);
}

/* ---------------------------------------------------------------- Activity marquee

   Three rows of the app's own artwork drifting past in alternating directions. The thumbnails
   already carry their own titles, so nothing is captioned underneath.

   Each track holds the same cards twice over; translating by exactly -50% therefore lands on
   an identical frame and the loop is seamless. The row is laid out LTR whatever the page
   direction, so the animation alone decides which way the cards travel. */

.marquee {
    overflow: hidden;
    direction: ltr;
    padding-block: .5rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}

.marquee + .marquee { margin-top: .75rem; }

.marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    list-style: none;
    margin: 0;
    padding: 0;
    will-change: transform;
    animation: drift-right 115s linear infinite;
}

.marquee--rtl .marquee-track { animation-name: drift-left; }
.marquee--r2 .marquee-track { animation-duration: 132s; }
.marquee--r3 .marquee-track { animation-duration: 104s; }

@keyframes drift-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@keyframes drift-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.mcard {
    flex: none;
    width: 10.925rem;
    aspect-ratio: 2 / 3;
    border: 4px solid var(--violet);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--rule);
    box-shadow: 0 4px 0 rgba(46, 20, 64, .12);
    transition: transform .25s ease;
}

.marquee-track .mcard:nth-child(5n+2) { border-color: var(--sun); }
.marquee-track .mcard:nth-child(5n+3) { border-color: var(--orchid); }
.marquee-track .mcard:nth-child(5n+4) { border-color: var(--rose); }
.marquee-track .mcard:nth-child(5n+5) { border-color: var(--grape); }

.marquee-track .mcard:nth-child(3n+1) { transform: rotate(-1.5deg); }
.marquee-track .mcard:nth-child(3n+2) { transform: rotate(1.25deg); }
.marquee-track .mcard:nth-child(3n+3) { transform: rotate(-.5deg); }

.mcard:hover { transform: rotate(0deg) scale(1.05); }

.mcard img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- Gallery

   A still grid of the same artwork, for pages that want to show the product without the
   homepage's moving rows. It sits outside .prose, which is measured for reading not images. */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 0;
}

.gallery li {
    aspect-ratio: 2 / 3;
    border: 4px solid var(--violet);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--rule);
    box-shadow: 0 4px 0 rgba(46, 20, 64, .12);
    transition: transform .25s ease;
}

.gallery li:nth-child(5n+2) { border-color: var(--sun); }
.gallery li:nth-child(5n+3) { border-color: var(--orchid); }
.gallery li:nth-child(5n+4) { border-color: var(--rose); }
.gallery li:nth-child(5n+5) { border-color: var(--grape); }

.gallery li:nth-child(3n+1) { transform: rotate(-1.5deg); }
.gallery li:nth-child(3n+2) { transform: rotate(1.25deg); }
.gallery li:nth-child(3n+3) { transform: rotate(-.5deg); }

.gallery li:hover { transform: rotate(0deg) scale(1.04); }

.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- Pillars */

.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pillar {
    background: var(--paper);
    border: 3px solid var(--grape);
    border-radius: var(--radius);
    box-shadow: 0 4px 0 var(--grape);
    padding: 1.25rem 1.375rem;
}

.pillar:nth-child(1) { background: var(--violet-tint); }
.pillar:nth-child(2) { background: var(--sun-tint); }
.pillar:nth-child(3) { background: var(--rose-tint); }
.pillar:nth-child(4) { background: var(--lilac-tint); }

.pillar h3 { margin: 0 0 .375rem; font-size: 1.0625rem; font-weight: 900; color: var(--grape); }
.pillar p { margin: 0; font-size: .9375rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- The maker */

.maker {
    background: var(--paper);
    border: 3px solid var(--grape);
    border-radius: var(--radius);
    box-shadow: 0 6px 0 var(--grape);
    padding: 2rem 2.25rem;
    max-width: 52rem;
}

.maker h2 { margin-bottom: .25rem; }

.maker-role {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--violet);
    margin: 0 0 1.75rem;
}

.creds {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 1.125rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.creds li { border-top: 3px solid var(--rose); padding-top: .75rem; }
.creds li:nth-child(2) { border-top-color: var(--violet); }
.creds li:nth-child(3) { border-top-color: var(--sun); }

.creds b { display: block; font-weight: 900; font-size: .9375rem; line-height: 1.5; }
.creds span { display: block; font-size: .875rem; color: var(--ink-soft); line-height: 1.6; }

.maker > p:last-child { margin-bottom: 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------- Parents */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 2.5rem;
    align-items: start;
}

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }

.checks li { position: relative; padding-inline-start: 2rem; color: var(--ink-soft); }

.checks li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .625rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--sun);
    border: 3px solid var(--grape);
}

.checks b { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- Company record */

.record {
    font-family: var(--font-rec);
    font-size: .8125rem;
    line-height: 2;
    background: var(--grape);
    color: #f6eefb;
    border-radius: var(--radius);
    padding: 1.625rem 1.875rem;
    direction: ltr;
    text-align: left;
    max-width: 32rem;
}

.record dl { margin: 0; }
.record dt { color: var(--orchid); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.record dd { margin: 0 0 .875rem; }
.record dd:last-of-type { margin-bottom: 0; }
.record a { color: var(--sun); text-decoration: none; }
.record a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Prose */

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.375rem; font-weight: 900; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.0625rem; font-weight: 700; margin: 1.75rem 0 .5rem; color: var(--grape); }
.prose p { color: var(--ink-soft); margin: 0 0 1rem; }
.prose ul { color: var(--ink-soft); padding-inline-start: 1.375rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--grape); text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 3px; }

.page-title {
    font-size: clamp(1.875rem, 5vw, 2.75rem);
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 .5rem;
    text-wrap: balance;
    color: var(--grape);
}

.page-intro { font-size: 1.0625rem; color: var(--ink-soft); margin: 0 0 2.5rem; max-width: 40rem; }

.divider { border: none; border-top: 2px dashed var(--rule); margin: 3rem 0; }

/* ---------------------------------------------------------------- Footer */

.site-footer {
    background: var(--grape);
    color: #e5d4ef;
    padding-block: 3rem 2rem;
    font-size: .875rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-grid h3 {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sun);
    margin: 0 0 .75rem;
    font-weight: 700;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .375rem; }
.footer-grid a { color: #e5d4ef; text-decoration: none; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }

.site-footer a:focus-visible { outline-color: var(--sun); }

.footer-legal {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    color: var(--orchid);
    font-family: var(--font-rec);
    font-size: .75rem;
    direction: ltr;
    text-align: left;
}

@media (max-width: 640px) {
    .section { padding-block: 2.75rem; }
    .hero .wrap { padding-block: 2.75rem 3rem; }
    .record { padding: 1.25rem 1.375rem; }
    .maker { padding: 1.5rem 1.25rem; }
    .mcard { width: 8.3375rem; border-width: 3px; }
    .marquee-track { gap: .75rem; }
    .gallery { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .75rem; }
    .gallery li { border-width: 3px; }
    .brand img { height: 3.9rem; }
    .marquee {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
                mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
    .marquee { overflow-x: auto; }
    .marquee-track { animation: none !important; }
    .gallery li, .mcard { transform: none !important; }
}