/* Public landing page (index.html).
 *
 * Kept separate from app.css on purpose: that file is the levels editor's
 * stylesheet, and restyling the marketing page must not be able to regress the
 * editor.
 *
 * Layout follows the reference template the owner supplied, rebuilt for RTL
 * Persian and for this server's CSP. Two constraints shape the whole file:
 *
 *   1. `style-src 'self'` with no 'unsafe-inline' — there is no <style> block
 *      and no style attribute in index.html, so every value lives here.
 *   2. The reference's three commercial fonts (Wintyr VF, Def Sans VF,
 *      Infamous) are neither licensed to us nor present in the save. Vazirmatn
 *      replaces them: a Persian face, SIL OFL, self-hosted because font-src is
 *      'self' and a CDN would be blocked. Licence: /fonts/vazirmatn-OFL.txt.
 */

/* One variable file covers 100–900, so the 500/600/700/900 weights this page
   uses cost a single request instead of four. */
@font-face {
    font-family: "Vazirmatn";
    src: url("/fonts/vazirmatn-variable.woff2") format("woff2") tech(variations),
         url("/fonts/vazirmatn-variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-yellow: #FFD445;
    --primary-red: #FA6A42;
    --primary-blue: #2E97EE;
    --primary-black: #2D2A27;
    --primary-white: #F3EDE1;
    --font-family-main: "Vazirmatn", Tahoma, "Segoe UI", "Iranian Sans", sans-serif;
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, li, figure, small {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-main);
    background: var(--primary-yellow);
    color: var(--primary-black);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

section {
    position: relative;
    z-index: 2;
    margin-bottom: 22vh;
}

/* ---------- the fixed wordmark behind everything ---------- */

/* Persian has no capitals to lean on, so this is sized to fill the viewport
   width and sits behind the content rather than competing with it. */
/* Selector is the id alone, not h1#: on the landing page the wordmark IS the
   page heading, but on the document pages it is decoration and the real <h1>
   is the document title, so it ships there as an aria-hidden <div>. */
#hugeheading {
    position: fixed;
    top: calc(50% - 0.75em);
    /* 100% of the ICB, not 100vw: vw units include the scrollbar gutter, which
       made this 15px wider than the client area and forced a horizontal
       scrollbar on any viewport that shows one. */
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    font-size: 24vw;
    /* Persian ascenders and descenders need real room at this size; line-height
       1 clipped the top of the ق and و. */
    line-height: 1.5;
    font-weight: 700;
    color: var(--primary-black);
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
}

/* ---------- hero ---------- */

#hero {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-top: 6vh;
}

body.loaded #hero {
    opacity: 1;
    transform: translateY(0);
}

#screenrecord {
    position: relative;
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 60px;
    background: url("/img/site/dotgrid.svg") center center;
    background-size: 6px auto;
}

/* <video>, not <img>: the reset's `img { max-width: 100% }` does not reach it,
   so the cap is repeated here or the clip overflows its frame on narrow
   screens. The background keeps the box on-palette while the file loads. */
#heroshot {
    display: block;
    max-height: 70vh;
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 40px;
    border: 4px solid var(--primary-black);
    background: var(--primary-yellow);
}

/* Floating callout bubbles. Each pops in on its own delay, so at most one or
   two are on screen at a time. */
h3.callout {
    position: absolute;
    z-index: 3;
    display: inline-block;
    padding: 0.75em 0.9em;
    background: var(--primary-white);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
    transform-origin: center;
    visibility: hidden;
    animation-name: popInOut;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: transform 0.3s ease;
}

h3.callout:hover {
    transform: scale(1.15);
    z-index: 4;
}

@keyframes popInOut {
    0%   { visibility: visible; transform: scale(0); }
    5%   { transform: scale(1.1); }
    8%   { transform: scale(1); }
    22%  { transform: scale(1); }
    28%  { transform: scale(0); }
    100% { visibility: hidden; transform: scale(0); }
}

#c-free     { right: -40px; top: 28%;  rotate: -8deg;  border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; animation-delay: 600ms; }
#c-noads    { left: -40px;  top: 12%;  rotate: 9deg;   border-radius: 60% 60% 40% 40% / 30% 70% 30% 70%; animation-delay: 2100ms; }
#c-offline  { left: -70px;  top: 70%;  rotate: 13deg;  border-radius: 60% 55% 45% 40% / 60% 70% 30% 40%; animation-delay: 3600ms; }
#c-levels   { right: -70px; top: 62%;  rotate: 6deg;   border-radius: 45% 60% 55% 40% / 30% 60% 40% 70%; animation-delay: 5100ms; }
#c-music    { right: 24%;   top: -5%;  rotate: -3deg;  border-radius: 60% 55% 40% 45% / 60% 40% 70% 30%; animation-delay: 6600ms; }
#c-downloads{ left: 20%;    bottom: -6%; rotate: -10deg; border-radius: 55% 45% 60% 40% / 40% 60% 35% 65%; animation-delay: 8100ms; }

#storelinks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding-top: 50px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

#storelinks.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Styled for both states: an inert <li> now, an <a href> at launch. The hover
   lift is scoped to the anchor form so a chip that does nothing does not
   pretend to be pressable. */
.storebtn {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.6em 1.2em;
    border: 2px solid var(--primary-black);
    border-radius: 50px;
    background: var(--primary-black);
    color: var(--primary-yellow);
    font-size: 17px;
    font-weight: 600;
    transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

a.storebtn:hover {
    transform: scale(1.12);
}

.storelogo {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
}

.soon {
    padding: 0.15em 0.7em;
    border-radius: 50px;
    background: var(--primary-yellow);
    color: var(--primary-black);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- the comeback story panel ---------- */

#story-panel {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4vw;
    width: 85vw;
    margin: 0 auto;
    /* Modest padding now that the panel holds a real image column; the old
       22vh/18vh existed only to give a bare background photo some height. */
    padding: 4vw;
    border-radius: 60px;
    overflow: hidden;
    /* Flat warm-dark panel. The placeholder skyline that used to sit here
       competed with the character art once the real illustration landed. */
    background: radial-gradient(120% 90% at 85% 20%, #3b3026 0%, var(--primary-black) 62%);
    color: var(--primary-yellow);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#story-panel.reveal {
    opacity: 1;
    transform: scale(1);
}

.story-art {
    flex: 0 0 auto;
    width: 34%;
    max-width: 380px;
}

.story-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 36px;
}

.story-text {
    flex: 1 1 0;
    min-width: 0;
}

#story-panel h6 {
    margin-bottom: 0.15em;
    color: var(--primary-white);
    font-size: clamp(28px, 3.2vw, 52px);
    font-weight: 800;
    line-height: 1.3;
}

.story-lede {
    margin-bottom: 1.2em;
    font-size: clamp(17px, 1.5vw, 24px);
    font-weight: 600;
}

#story-panel p {
    font-size: calc(15px + 0.35vw);
    line-height: 1.9;
}

#story-overlay {
    display: none;
}

/* ---------- how to play ---------- */

.howcard {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 70vw;
    margin: 0 auto 24vh;
}

/* Outlined numerals: they read as decoration, not as content. */
p.progress {
    margin: 0 0 0 -0.25em;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--primary-white);
    font-size: 16vw;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: translateY(50px) scale(0.9) rotate(-5deg);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

p.progress.reveal {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}

#step2 p.progress {
    margin: 0 -0.25em 0 0;
}

.stepwrap {
    width: 49vw;
    min-width: 550px;
    padding: 20px;
    border-radius: 60px;
    background: url("/img/site/dotgrid.svg") center center;
    background-size: 6px auto;
    opacity: 0;
    transform: translateX(50px) rotate(8deg);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stepwrap.reveal {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}

#step2 .stepwrap {
    transform: translateX(-50px) rotate(-8deg);
}

#step2 .stepwrap.reveal {
    transform: translateX(0) rotate(0deg);
}

.step {
    padding: 50px;
    border-radius: 50px;
    background: var(--primary-black);
    color: var(--primary-yellow);
    transform-style: preserve-3d;
    /* The tilt handler writes `transform` directly; keep the two properties it
       animates listed here so the mouseleave reset eases back. */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

#step2 .step {
    background: var(--primary-white);
    color: var(--primary-black);
}

/* Step 2 mirrors the layout so the three cards alternate down the page. */
#step2.howcard,
#step2 .columns {
    flex-direction: row-reverse;
}

.columns {
    display: flex;
    flex-direction: row;
    gap: 6%;
    align-items: center;
}

/* The board is a fixed-aspect illustration; the text column takes whatever is
   left. Without the explicit basis the Persian copy — which runs longer than
   the reference template's English — collapsed to two or three words a line. */
/* Fixed share, no shrink: with `flex-shrink: 1` the long Persian copy in the
   sibling column won the negotiation and squeezed the board down to a thumbnail. */
.columns img {
    flex: 0 0 auto;
    width: 38%;
    max-width: 290px;
    border-radius: 20px;
    transition: transform 0.4s ease;
}

.columns img:hover {
    transform: scale(1.15) rotate(-2deg);
}

.step .content {
    flex: 1 1 0;
    min-width: 0;
}

.step h6 {
    margin-bottom: 2em;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.step .columns p {
    margin-bottom: 2em;
    font-size: calc(14px + 0.7vw);
    line-height: 1.6;
    font-weight: 500;
}

.step .content small {
    font-size: calc(11px + 0.3vw);
    line-height: 1.5;
    opacity: 0.8;
}

#step2 .content strong {
    display: inline-block;
    padding: 0 4px;
    border: 2px solid var(--primary-red);
    border-radius: 3px;
}

/* ---------- "همچنین" list ---------- */

#lastly {
    width: 60vw;
    /* Shorthand, so keep the section's bottom margin: plain `0 auto` here
       silently zeroed it and the list collided with the footer button. */
    margin: 0 auto 22vh;
}

#lastly h5 {
    margin-bottom: 0;
    color: var(--primary-white);
    font-size: 9vw;
    font-weight: 900;
    text-align: center;
    line-height: 1.2;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#lastly h5.reveal {
    opacity: 1;
    transform: scale(1);
}

#lastly div {
    position: relative;
    max-width: 70%;
    margin: 0 auto;
}

#lastly ul {
    position: relative;
    z-index: 2;
    padding: 4vw 6vw;
}

#lastly li {
    position: relative;
    margin-bottom: 4em;
    font-size: calc(15px + 0.9vw);
    line-height: 1.5;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease, rotate 0.3s ease;
}

#lastly li.reveal {
    opacity: 1;
    transform: translateY(0);
}

#lastly li:nth-child(odd) {
    rotate: 3deg;
}

#lastly li:nth-child(even) {
    rotate: -3deg;
}

#lastly li:hover {
    transform: translateY(-5px) scale(1.05);
    rotate: -8deg;
    z-index: 5;
}

/* The blob sits behind its own <li>, sized to it. */
#lastly span {
    position: absolute;
    inset: -25px -18px;
    z-index: -1;
    display: block;
    transition: transform 0.3s ease;
}

#lastly li:hover span {
    transform: scale(1.1);
}

#lastly span img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* ---------- footer ---------- */

/* ---------- closing character ---------- */

#farewell {
    margin-bottom: 4vh;
    text-align: center;
}

#farewell-art {
    display: block;
    width: min(340px, 74vw);
    height: auto;
    margin: 0 auto 18px;
    border-radius: 32px;
}

.farewell-line {
    margin-bottom: 26px;
    font-size: calc(16px + 0.6vw);
    font-weight: 700;
}

#goplay {
    position: relative;
    z-index: 2;
    display: block;
    width: 270px;
    margin: 0 auto 12vh;
    padding: 0.5em;
    border: 2px solid var(--primary-black);
    border-radius: 50px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 200ms ease;
}

#goplay:hover {
    transform: scale(1.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#copyright {
    position: relative;
    z-index: 2;
    padding: 1em;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.03em;
}

#copyright a {
    text-decoration: underline;
}

/* ---------- document pages (privacy, support) ---------- */

/* These pages are long-form reading, and one of them is a legal document —
   drop the wordmark further back than the landing page needs it. */
div#hugeheading {
    opacity: 0.06;
}

/* A <main class="doc">, not a <section>: the section rule carries a 22vh
   bottom margin that only makes sense for the landing page's scroll rhythm. */
.doc {
    position: relative;
    z-index: 2;
    width: min(760px, calc(100% - 32px));
    margin: 0 auto 8vh;
    padding: 6vh 0 0;
}

.doc-back {
    display: inline-block;
    margin-bottom: 2.5em;
    font-size: 15px;
    font-weight: 600;
}

.doc-back:hover {
    text-decoration: underline;
}

.doc h1 {
    margin-bottom: 0.35em;
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 800;
    line-height: 1.3;
}

.doc-updated {
    margin-bottom: 2.5em;
    padding-bottom: 1em;
    border-bottom: 2px solid rgba(45, 42, 39, 0.25);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.doc h2 {
    margin: 2.4em 0 0.7em;
    font-size: clamp(19px, 2.4vw, 24px);
    font-weight: 700;
    line-height: 1.4;
}

.doc h2:first-of-type {
    margin-top: 0;
}

.doc p,
.doc li {
    margin-bottom: 1em;
    font-size: 16px;
    line-height: 2;
}

.doc ul {
    margin: 0 1.4em 1.5em 0;
    list-style: disc;
}

.doc li {
    margin-bottom: 0.5em;
}

.doc a {
    text-decoration: underline;
}

.doc strong {
    font-weight: 700;
}

/* Owner-action callout. Deliberately loud: these pages carry legal weight and
   must not ship with the bracketed placeholders still in them. */
.doc-note {
    margin: 2em 0;
    padding: 1.1em 1.3em;
    border: 3px dashed var(--primary-black);
    border-radius: 16px;
    background: rgba(45, 42, 39, 0.07);
    font-size: 15px;
    line-height: 1.9;
}

.doc-note strong {
    display: block;
    margin-bottom: 0.3em;
}

.doc-contact {
    margin: 1.5em 0 0;
    padding: 1.3em 1.5em;
    border-radius: 20px;
    background: var(--primary-black);
    color: var(--primary-yellow);
}

.doc-contact p {
    margin-bottom: 0.4em;
}

.doc-contact p:last-child {
    margin-bottom: 0;
}

/* ---------- responsive ---------- */

@media screen and (max-width: 900px) {
    section {
        margin-bottom: 10vh;
    }

    h1#hugeheading {
        font-size: 40vw;
    }

    #screenrecord {
        transform: scale(0.85);
    }

    h3.callout {
        font-size: 14px;
    }

    #c-free     { right: -18px; }
    #c-noads    { left: -18px; }
    #c-offline  { left: -22px; }
    #c-levels   { right: -22px; }

    #storelinks {
        padding-top: 0;
    }

    .howcard,
    #step2.howcard {
        flex-direction: column;
        max-width: 92vw;
        margin: 0 auto 10vw;
    }

    .columns,
    #step2 .columns {
        flex-direction: column;
        align-items: center;
    }

    p.progress,
    #step2 p.progress {
        margin: 0 0 -0.55em;
        font-size: 36vw;
    }

    .stepwrap {
        width: 100%;
        min-width: 0;
    }

    .step {
        padding: 26px;
    }

    .step .content {
        padding: 0;
    }

    .columns img {
        flex: 0 0 auto;
        width: 100%;
        max-width: 340px;
        margin-bottom: 32px;
        display: block;
    }

    #lastly {
        width: 86vw;
    }

    #lastly div {
        max-width: 100%;
    }

    #lastly h5 {
        font-size: 70px;
    }

    /* Horizontal padding is load-bearing, not decoration: the blob behind each
       item is inset -18px, so with `padding: 8vw 0` it hung past the viewport. */
    #lastly ul {
        padding: 8vw 22px;
    }

    #lastly li {
        font-size: calc(16px + 1vw);
    }

    /* Dark gradient so the yellow text keeps contrast where the panel is
       stacked and the artwork no longer sits behind every line. */
    #story-overlay {
        display: block;
        position: absolute;
        inset: auto 0 0 0;
        z-index: 1;
        height: 200px;
        background: linear-gradient(transparent 0%, #000000 100%);
    }

    #story-panel {
        flex-direction: column;
        gap: 8vw;
        width: 92vw;
        padding: 8vw;
        border-radius: 30px;
    }

    .story-art,
    .story-text {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100%;
    }

    .story-art {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* Everything on this page is decorative motion; honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    h3.callout {
        visibility: visible;
    }
}