/*
 * The home page (marketing/home.html.twig): three example sites under the photo
 * hero, the stats, the "grow" slider (marketing/home.js), the platform cards,
 * the AI/templates duo, the domain search, the wall of sites, the FAQ and the
 * closing call.
 */
@layer marketing {
    .mk {
        /* three example sites under the hero; core.js lifts them on scroll (data-lift → --ty) */
        & .sq-sites {
            position: relative;
            width: min(1320px, 100%);
            height: clamp(220px, 26vw, 400px);
            margin-top: clamp(48px, 8vh, 96px);
            perspective: 1800px;
        }
        & .sq-sites .frame {
            position: absolute;
            width: 36%;
            box-shadow: rgb(0 0 0 / 0.8) 0 50px 100px -40px;
            border: 0;
            transition: transform 1.2s var(--out);
        }
        & .sq-sites .frame img {
            aspect-ratio: 16 / 10;
            object-fit: cover;
            object-position: center top;
        }
        & .sq-sites .s1 {
            left: 1%;
            top: 18%;
            transform: rotateY(24deg) rotateZ(-1deg) translateY(var(--ty, 0px));
            transform-origin: right center;
        }
        & .sq-sites .s2 {
            left: 32%;
            top: 0;
            z-index: 2;
            transform: translateY(var(--ty, 0px));
        }
        & .sq-sites .s3 {
            right: 1%;
            top: 18%;
            transform: rotateY(-24deg) rotateZ(1deg) translateY(var(--ty, 0px));
            transform-origin: left center;
        }

        /* stats */
        & .sq-stats {
            padding-block: clamp(140px, 16vw, 220px) clamp(72px, 9vw, 120px);
            text-align: center;
        }
        & .sq-stats p.intro {
            font-size: 15px;
        }
        & .sq-stats .nums {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 24px;
            max-width: 900px;
            margin: 40px auto 0;
        }
        & .sq-stats b {
            display: block;
            font-size: clamp(48px, 6vw, 84px);
            font-weight: 400;
            letter-spacing: -0.05em;
            line-height: 1;
            color: #fff;
        }
        & .sq-stats span {
            display: block;
            margin-top: 12px;
            font-size: 14px;
            color: rgb(243 237 230 / 0.6);
        }

        /* the "grow" slider: tabs, a track of slides, dots and a pause button */
        & .sq-grow {
            background: #fff;
            color: var(--text);
            padding-block: clamp(80px, 10vw, 130px);
            overflow: hidden;
        }
        & .sq-grow .head {
            margin-bottom: 28px;
        }
        & .sq-grow .h2 {
            font-weight: 600;
            letter-spacing: -0.045em;
        }
        & .sq-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            margin-bottom: clamp(32px, 4vw, 48px);
        }
        & .sq-tabs button {
            height: 38px;
            padding: 0 16px;
            border-radius: 999px;
            border: 0;
            background: none;
            font-size: 14px;
            color: var(--muted);
            cursor: pointer;
            transition:
                background 0.25s,
                color 0.25s;
        }
        & .sq-tabs button.on {
            background: var(--bg-2);
            color: var(--text);
        }
        & .sq-view {
            position: relative;
            touch-action: pan-y;
        }
        & .sq-track {
            display: flex;
            gap: 28px;
            transition: transform 1s var(--out);
            will-change: transform;
        }
        & .sq-slide {
            position: relative;
            flex: 0 0 auto;
            width: min(1100px, 84vw);
            aspect-ratio: 16 / 9;
            border-radius: 22px;
            overflow: hidden;
            background: #2a221c;
            color: #fff;
            opacity: 0.45;
            transition: opacity 0.6s;
            cursor: pointer;
        }
        & .sq-slide.on {
            opacity: 1;
            cursor: default;
        }
        & .sq-slide > img.bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* a dark overlay above the photo (z-index 1), so the text and the site in front read on any photo */
        & .sq-slide::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                linear-gradient(160deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0.45) 45%, rgb(0 0 0 / 0.55) 100%),
                rgb(0 0 0 / 0.18);
        }
        & .sq-slide .txt {
            position: absolute;
            z-index: 3;
            left: clamp(20px, 3vw, 40px);
            top: clamp(20px, 3vw, 36px);
            max-width: 360px;
            display: grid;
            gap: 8px;
        }
        & .sq-slide .txt b {
            font-size: clamp(24px, 2.6vw, 34px);
            font-weight: 500;
            letter-spacing: -0.035em;
        }
        & .sq-slide .txt span {
            font-size: 14px;
            color: rgb(255 255 255 / 0.82);
            line-height: 1.5;
        }
        & .sq-slide .site {
            position: absolute;
            z-index: 2;
            left: 50%;
            bottom: -10%;
            width: 54%;
            transform: translate(-50%, 24px);
            transition: transform 1.1s var(--out);
            box-shadow: rgb(0 0 0 / 0.7) 0 40px 80px -30px;
            border: 0;
        }
        & .sq-slide.on .site {
            transform: translate(-50%, 0);
        }
        & .sq-slide .site img {
            aspect-ratio: 16 / 10;
            object-fit: cover;
            object-position: center top;
        }

        /* a notification on a slide, in after the slide becomes active */
        & .chip-ui {
            position: absolute;
            z-index: 4;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px 12px 12px;
            border-radius: 14px;
            background: #fff;
            color: var(--text);
            box-shadow: rgb(0 0 0 / 0.55) 0 24px 50px -20px;
            font-size: 13px;
            line-height: 1.35;
            opacity: 0;
            transform: translateY(14px);
            transition:
                opacity 0.6s,
                transform 0.8s var(--out);
        }
        & .chip-ui b {
            display: block;
            font-size: 14px;
            font-weight: 600;
        }
        & .chip-ui small {
            color: var(--muted);
        }
        & .chip-ui .ic {
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: #f2f2f2;
            color: #0a0a0a;
        }
        & .chip-ui .ic img {
            width: 34px;
            height: 34px;
            object-fit: cover;
            border-radius: 10px;
        }
        & .sq-slide.on .chip-ui {
            opacity: 1;
            transform: none;
            transition-delay: 0.5s;
        }
        & .sq-slide.on .chip-ui + .chip-ui {
            transition-delay: 0.75s;
        }
        & .sq-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            margin-top: 28px;
        }
        & .sq-dots {
            display: flex;
            gap: 6px;
        }
        & .sq-dots i {
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background: #d4d6dd;
            transition:
                width 0.4s var(--out),
                background 0.3s;
        }
        & .sq-dots i.on {
            width: 22px;
            background: var(--text);
        }
        & .sq-pause {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid var(--line);
            background: #fff;
            color: var(--text);
            cursor: pointer;
            font-size: 11px;
        }

        /* the platform: four photo cards with a small white label each */
        & .sq-plat .top {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 32px 64px;
            align-items: end;
            margin-bottom: clamp(36px, 5vw, 56px);
        }
        & .sq-plat .h2 {
            font-size: clamp(36px, 4.6vw, 58px);
            max-width: 14ch;
        }
        & .sq-cards {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }
        & .sq-card {
            position: relative;
            aspect-ratio: 3 / 4;
            border-radius: 18px;
            overflow: hidden;
            text-decoration: none;
            color: #f3ede6;
            display: grid;
            align-content: start;
            padding: 22px;
            gap: 8px;
            isolation: isolate;
            background: #111;
            border: 1px solid #1f1f1f;
        }
        & .sq-card b {
            font-size: 20px;
            font-weight: 500;
            letter-spacing: -0.03em;
        }
        & .sq-card span {
            font-size: 14px;
            color: rgb(243 237 230 / 0.65);
            line-height: 1.45;
        }
        & .sq-card .vis {
            position: absolute;
            z-index: -1;
            inset: 0;
            overflow: hidden;
            box-shadow: rgb(0 0 0 / 0.8) 0 30px 60px -30px;
            transition: transform 0.9s var(--out);
        }
        & .sq-card:hover .vis {
            transform: translateY(-8px);
        }
        & .sq-card .vis img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 70%;
        }
        /* the domains card's photo is a wide one */
        & .sq-card:last-child .vis img {
            object-position: 70% center;
        }
        & .sq-card.photo::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.35) 55%, rgb(0 0 0 / 0.1)), rgb(0 0 0 / 0.08);
        }
        & .sq-card .dom {
            position: absolute;
            left: 22px;
            bottom: 22px;
            padding: 8px 12px;
            border-radius: 10px;
            background: rgb(255 255 255 / 0.92);
            color: var(--text);
            font: 500 14px / 1 var(--f-mono);
        }

        /* beginning: AI or a template */
        & .sq-start {
            padding-top: 0;
            text-align: center;
        }
        & .sq-start .h2 {
            max-width: 16ch;
            margin: 0 auto;
        }
        & .sq-start .lead {
            margin: 16px auto 0;
        }
        & .sq-duo {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
            margin-top: clamp(40px, 5vw, 64px);
            text-align: center;
        }
        & .sq-big {
            position: relative;
            aspect-ratio: 1 / 1;
            max-height: 560px;
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
            display: grid;
            grid-template-rows: 1fr auto;
            text-decoration: none;
            color: #f3ede6;
            background: #0a0a0a;
            border: 1px solid #1f1f1f;
        }
        & .sq-big .vis {
            position: relative;
            overflow: hidden;
        }
        & .sq-big .meta {
            padding: 24px 24px 30px;
            display: grid;
            gap: 6px;
        }
        & .sq-big .meta small {
            font-size: 13px;
            color: rgb(243 237 230 / 0.6);
        }
        & .sq-big .meta span {
            font-size: 14px;
            color: rgb(243 237 230 / 0.72);
        }
        & .sq-big .meta b {
            font-size: 22px;
            font-weight: 500;
            letter-spacing: -0.02em;
            margin-top: 6px;
        }
        & .ask-field {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 78%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 20px;
            border-radius: 999px;
            background: rgb(255 255 255 / 0.08);
            border: 1px solid rgb(255 255 255 / 0.14);
            font-size: clamp(16px, 1.8vw, 22px);
            color: #fff;
            text-align: left;
        }
        & .ask-field .caret {
            width: 2px;
            height: 1.1em;
            background: #fff;
            animation: mk-home-blink 1s steps(1) infinite;
        }
        & .collage {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
            transform: rotate(-4deg) scale(1.15);
        }
        & .collage img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            border-radius: 8px;
        }

        /* the domain search (a GET form into the app, nothing is looked up here) */
        & .sq-domain {
            text-align: center;
        }
        & .sq-domain .h2 {
            max-width: 15ch;
            margin: 0 auto;
        }
        & .sq-domain .dom-search {
            max-width: 720px;
            margin: 36px auto 0;
            display: flex;
            align-items: center;
            gap: 12px;
            height: 60px;
            padding: 0 10px 0 22px;
            border-radius: 14px;
            background: rgb(255 255 255 / 0.08);
            border: 1px solid rgb(255 255 255 / 0.14);
        }
        & .sq-domain .dom-search input {
            flex: 1 1 0%;
            min-width: 0;
            height: 100%;
            border: 0;
            outline: 0;
            background: none;
            color: #fff;
            font-size: 17px;
        }
        & .sq-domain .dom-search input::placeholder {
            color: rgb(255 255 255 / 0.45);
        }
        & .sq-domain .dom-search:focus-within {
            border-color: rgb(255 255 255 / 0.4);
        }
        & .sq-domain .dom-search button {
            height: 42px;
            padding: 0 18px;
            border-radius: 10px;
            border: 0;
            background: #f3ede6;
            color: #100d0b;
            font-weight: 500;
            cursor: pointer;
        }
        & .sq-domain .dom-result {
            min-height: 28px;
            margin-top: 16px;
            font-size: 15px;
            color: rgb(243 237 230 / 0.8);
        }

        /* the wall of example sites (core.js doubles the track: data-loop) */
        & .sq-made {
            text-align: center;
            padding-bottom: 0;
        }
        & .wall {
            position: relative;
            height: clamp(360px, 42vw, 580px);
            margin-top: 24px;
            overflow: hidden;
            perspective: 1600px;
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        }
        & .wall-track {
            position: absolute;
            top: 30%;
            left: 0;
            display: flex;
            gap: 28px;
            width: max-content;
            transform: rotateX(28deg) rotateZ(-7deg);
            /* tilted around the middle of the screen, so the slanted line runs through the middle of the wall */
            transform-origin: 50vw 50%;
            animation: mk-home-wall 70s linear infinite;
        }
        & .wall-track img {
            width: clamp(300px, 30vw, 440px);
            aspect-ratio: 16 / 10;
            object-fit: cover;
            object-position: center top;
            border-radius: 12px;
            border: 1px solid rgb(255 255 255 / 0.08);
            box-shadow: rgb(0 0 0 / 0.9) 0 40px 70px -30px;
        }

        /* FAQ on black (base.css .dk .q does the rest) */
        & .sq-faq .q {
            background: none;
        }
        & .sq-faq .q button {
            font-weight: 500;
        }

        /* closing call with a breathing glow */
        & .sq-end {
            position: relative;
            text-align: center;
            padding-block: clamp(120px, 16vw, 200px);
            overflow: hidden;
        }
        & .sq-end::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: min(760px, 90vw);
            aspect-ratio: 1 / 1;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0) 65%);
            animation: mk-home-breathe 8s ease-in-out infinite alternate;
        }
        & .sq-end .h2 {
            position: relative;
            font-size: clamp(40px, 6vw, 84px);
            font-weight: 600;
            letter-spacing: -0.045em;
            max-width: 13ch;
            margin: 0 auto;
            color: #fff;
        }
        & .sq-end p {
            position: relative;
            margin-top: 18px;
        }
        & .sq-end .btn {
            position: relative;
            margin-top: 32px;
            height: 52px;
            padding: 0 28px;
            border-radius: 12px;
            text-transform: none;
            letter-spacing: 0;
            font-size: 16px;
            font-weight: 500;
        }
    }

    /* the wall moves along its own slant: the shift sits after the tilt in one transform */
    @keyframes mk-home-wall {
        from {
            transform: rotateX(28deg) rotateZ(-7deg) translateX(0);
        }
        to {
            transform: rotateX(28deg) rotateZ(-7deg) translateX(-50%);
        }
    }

    /* on a phone the wall is flat (see the media query below) */
    @keyframes mk-home-wall-flat {
        from {
            transform: translate(0, -50%);
        }
        to {
            transform: translate(-50%, -50%);
        }
    }
    @keyframes mk-home-breathe {
        100% {
            transform: translate(-50%, -50%) scale(1.12);
            opacity: 0.7;
        }
    }
    @keyframes mk-home-blink {
        50% {
            opacity: 0;
        }
    }

    @media (max-width: 900px) {
        .mk .sq-plat .top {
            grid-template-columns: minmax(0, 1fr);
        }
        .mk .sq-cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* small phones: the platform cards one under the other, wide enough for their text */
    @media (max-width: 560px) {
        .mk .sq-cards {
            grid-template-columns: minmax(0, 1fr);
        }
        .mk .sq-card {
            aspect-ratio: 4 / 3;
        }
    }

    @media (max-width: 760px) {
        .mk .sq-sites {
            height: 240px;
        }
        .mk .sq-sites .s1,
        .mk .sq-sites .s3 {
            display: none;
        }
        .mk .sq-sites .s2 {
            left: 6%;
            width: 88%;
        }
        .mk .sq-slide {
            aspect-ratio: 4 / 5;
        }
        .mk .sq-slide .site {
            width: 86%;
            bottom: -6%;
        }
        /* the wall of examples: flat and centred, smaller sites in a lower band */
        .mk .wall {
            height: 230px;
            perspective: none;
        }
        .mk .wall-track {
            top: 50%;
            gap: 16px;
            transform: translateY(-50%);
            animation-name: mk-home-wall-flat;
        }
        .mk .wall-track img {
            width: 250px;
        }
        /* no notifications on a phone: they'd cover half the photo */
        .mk .chip-ui {
            display: none;
        }
        /* nor the tabs: swiping and the dots below the slider are enough */
        .mk .sq-tabs {
            display: none;
        }
        .mk .sq-duo {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}