/* Opening motion: a steel float spreads granolite across the top of the wall while a putty knife
   drags graffiato across the bottom; the logo then settles on the finished wall and the sheet fades away.
   intro.js drives the canvases. The safety animation below clears the overlay even if JS never runs. */

.intro { display: none; }

html.intro-pending .intro {
    position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden;
    animation: intro-safety 8s linear forwards;
    transition: opacity .95s cubic-bezier(.4, 0, .2, 1), transform .95s cubic-bezier(.4, 0, .2, 1);
}
html.intro-pending .intro.is-exiting { opacity: 0; transform: scale(1.015); pointer-events: none; }
html.intro-pending.intro-skip .intro { transition-duration: .4s; opacity: 0; pointer-events: none; }

.intro__paper { position: absolute; inset: 0; background: #e8e2d6; }
.intro__paper::after {
    content: ""; position: absolute; inset: 0; opacity: .55;
    background-image: radial-gradient(rgb(0 0 0 / .05) 1px, transparent 1.5px);
    background-size: 5px 5px;
}
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__canvas[data-intro-wet] { opacity: .2; mix-blend-mode: multiply; }

.intro__brand { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; text-align: center; }
.intro__logo {
    width: min(300px, 62vw); height: auto;
    filter: drop-shadow(0 16px 26px rgb(40 30 15 / .35)) drop-shadow(0 2px 3px rgb(40 30 15 / .3));
    opacity: 0; transform: scale(1.14) translateY(-8px);
    transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .95s cubic-bezier(.25, 1.35, .4, 1), filter .95s ease;
}
.intro__line {
    display: flex; gap: .35em; font-family: var(--font-display, sans-serif); font-weight: 700;
    font-size: clamp(1.1rem, .95rem + 1.1vw, 1.7rem); color: #f6f2ea;
    background: #17211c; padding: .32em 1em .4em; border-radius: 999px;
    box-shadow: 0 14px 30px -14px rgb(0 0 0 / .55);
    opacity: 0; transform: translateY(10px);
    transition: opacity .8s ease .25s, transform .9s cubic-bezier(.2, .8, .2, 1) .25s;
}
.intro__line span { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.intro__line span:nth-child(1) { transition-delay: .45s; }
.intro__line span:nth-child(2) { transition-delay: .62s; }
.intro__line span:nth-child(3) { transition-delay: .79s; }
.intro.show-brand .intro__logo, .intro.show-brand .intro__line, .intro.show-brand .intro__line span { opacity: 1; transform: none; }

.intro__skip {
    position: absolute; z-index: 3; bottom: calc(22px + env(safe-area-inset-bottom)); inset-inline-end: 22px;
    padding: 8px 18px; border-radius: 999px; border: 1px solid rgb(23 33 28 / .25);
    background: rgb(246 242 234 / .8); color: #17211c; backdrop-filter: blur(6px);
    font-family: var(--font-display, sans-serif); font-size: .88rem;
}

@keyframes intro-safety {
    0%, 98% { visibility: visible; opacity: 1; }
    100% { visibility: hidden; opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
    html.intro-pending .intro { display: none; }
}