/* =====================================================================
 * RAZ MUSIC LABS — intro (js/core/brand.js)
 *
 * Replaces the old splash. The mark assembles as the LABORATORI RAZZULLIX
 * tiling, then its four facets travel - vertex by vertex - to the RAZ MUSIC
 * LABS logo, where the name arrives under it. The first thing anyone sees is
 * therefore where the product comes from and what it is called.
 * ===================================================================== */
#rml-intro {
    position: fixed; inset: 0; z-index: 6000;
    /* White, not the app's dark field. The logo's own plate is white all over,
       so the ceremony sits on the same white the mark carries - a white square
       floating on black was the thing it replaced. */
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Share Tech Mono', monospace; cursor: default;
    opacity: 1; transition: opacity .8s ease;
}
#rml-intro.skippable { cursor: pointer; }
#rml-intro.done { opacity: 0; pointer-events: none; }
#rml-intro::after {   /* the CRT texture, at its strength on paper */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(180deg,
        rgba(0,0,0,0.028) 0 1px, transparent 1px 3px);
}

.rml-intro-lockup { display: flex; flex-direction: column; align-items: center; }
/* The logo with the company typed out beside it, as on the workshop's dashboard:
   the mark, then LABORATORI RAZZULLIX to its right. This is the first thing read
   and the first thing to go - the typed line leaves as the morph begins, and RAZ
   MUSIC LABS arrives underneath. */
/* The mark and the name are centred as ONE block.
 *
 * Centring the mark alone looked lopsided - all the weight on the right and an
 * empty half on the left - and centring them as a plain flex row made the logo
 * slide left with every character typed. So the name's FINISHED width is held in
 * the layout from the first frame by an invisible copy of it, and the typing is
 * painted over that copy: the pair is balanced and nothing moves while it types.
 */
.rml-intro-markline { display: flex; align-items: center; justify-content: center;
    /* `--shift` is set by the intro from the name's own width: half of it is
       what the mark has to move once the name has gone. A transform, so the
       layout never reflows and the move can be animated. */
    transition: transform .6s cubic-bezier(.2,.7,.2,1); }
#rml-intro.centred .rml-intro-markline { transform: translateX(var(--shift, 0px)); }
.rml-intro-company {
    position: relative; margin-left: clamp(12px, 2.6vmin, 28px);
    font-weight: 800; font-size: clamp(1.6rem, 6.8vmin, 3.2rem);
    letter-spacing: .06em; line-height: 1.25; color: #0b1a12;
    white-space: pre; text-align: left;
    transition: opacity .45s ease;
}
.rml-intro-company-sizer { visibility: hidden; }
.rml-intro-company-live { position: absolute; inset: 0; }
/* The space the name held stays in the layout for the whole intro: the mark is
   moved to the centre by transform instead (see .rml-intro-markline above), so
   nothing reflows and the move is a slide rather than a snap. */
/* The typewriter's caret: a blinking block, which stops when the line is done. */
.rml-intro-caret {
    display: inline-block; width: .5em; height: 1em; margin-left: .14em;
    background: #1d8f45; vertical-align: -.16em;
    animation: rml-blink 1s steps(1, end) infinite;
}
#rml-intro.typed .rml-intro-company { opacity: 0; }
#rml-intro.typed .rml-intro-caret { animation: none; opacity: 0; }

.rml-intro-mark { margin-bottom: 4px; line-height: 0;
    /* A cast shadow, not a green glow: on white the glow washed the facets out,
       and the mark should sit ON the page rather than behind it. */
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.18)); }
/* The mark is drawn on the workshop's 1400 board, so it is sized here rather
   than in the markup: the same SVG has to fit a phone in landscape and a
   desktop, and the logo inside it is not the full board. */
.rml-intro-mark svg.rml-logo { width: min(52vmin, 340px); height: auto; display: block;
    transform-origin: 50% 50%; }
/* The name, arriving after the logo has landed. The spacing starts open and
   closes up, which is what makes it read as settling into position rather than
   simply fading in; the text-indent cancels the trailing letter-space so the
   line stays optically centred. */
.rml-intro-word {
    margin-top: 26px; font-size: clamp(1.4rem, 4.4vmin, 2rem);
    letter-spacing: .46em; text-indent: .46em; text-transform: uppercase;
    color: #0b1a12; white-space: nowrap;
    opacity: 0; transform: translateY(8px);
    transition: opacity .8s ease, transform .8s ease, letter-spacing 1s cubic-bezier(.2,.7,.2,1);
}
/* The mark's own green, which is legible on white where the app's phosphor
   green is not. */
.rml-intro-word b { color: #1d8f45; font-weight: inherit; }
#rml-intro.landed .rml-intro-word { opacity: 1; transform: none; letter-spacing: .3em; text-indent: .3em; }
/* One pulse on landing, then back to the mark's resting glow. */
#rml-intro.landed .rml-intro-mark { animation: rml-land 1.1s ease-out 1; }
@keyframes rml-land {
    0% { filter: drop-shadow(0 10px 24px rgba(0,0,0,0.18)); }
    22% { filter: drop-shadow(0 14px 34px rgba(0,0,0,0.42)); }
    100% { filter: drop-shadow(0 10px 24px rgba(0,0,0,0.18)); }
}

@keyframes rml-blink { to { opacity: 0; } }

/* ---- language bar: the site's ◀ flag LABEL ▶ stepper ---- */
.rml-lang { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rml-lang-label { font-size: .55rem; letter-spacing: .22em; color: var(--dim); text-transform: uppercase; }
.rml-lang-row {
    display: flex; align-items: center; gap: 6px;
    background: rgba(var(--grn-rgb),0.04); border: 1px solid var(--line2);
    padding: 3px 7px; border-radius: 3px;
}
.rml-lang-btn {
    background: transparent; border: none; color: var(--grn);
    font-size: .7rem; cursor: pointer; padding: 1px 3px; line-height: 1;
    font-family: inherit; transition: .15s;
}
.rml-lang-btn:hover { color: var(--cyn); text-shadow: 0 0 8px rgba(var(--cyn-rgb),0.8); }
.rml-lang-flag { font-size: .95rem; line-height: 1; }
.rml-lang-name {
    font-size: .62rem; color: var(--txt); letter-spacing: .08em;
    min-width: 46px; text-align: center;
}
/* in the intro: bottom-right, out of the way of the ceremony */

/* ---- site footer: the LABORATORI RAZZULLIX credit, as in KAISEN ----
 * Same construction as the KAISEN dashboard footer (mark, brand, separator,
 * copyright), minus the GitHub/LinkedIn links. */
.app-footer {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 14px 26px; color: var(--dim);
    font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
    border-top: 1px solid var(--line); margin: 0 auto; max-width: 1180px;
}
.footer-mark { display: inline-flex; line-height: 0; }
.footer-mark svg, .footer-mark img { width: 15px; height: 15px; display: block; }
.footer-brand { color: var(--txt); text-decoration: none; }
.footer-brand:hover { color: var(--grn); }
.footer-sep { width: 1px; height: 13px; background: var(--line2); margin: 0 12px; }
.footer-copy, .footer-vat { color: var(--dim); }

@media (max-width: 720px) {
    .app-footer { flex-wrap: wrap; gap: 6px; letter-spacing: .14em; text-align: center; }
    .footer-sep { display: none; }
}

/* ---- title row: mark + wordmark + language + About, all in the h1 ---- */
.title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.title-mark { display: inline-flex; line-height: 0; flex: none; }
.title-mark svg { width: 30px; height: 30px; border-radius: 4px; display: block;
    box-shadow: 0 0 12px rgba(0,255,156,0.3); }
/* The wordmark is the whole title now; no tagline to lay out. */
.title-text { flex: none; }
.title-spacer { flex: 1; min-width: 12px; }
/* the language stepper reads as part of the masthead, not a floating panel */
.title-row .rml-lang { flex-direction: row; align-items: center; gap: 8px; }
.title-row .rml-lang-label { display: none; }
.bs-about {
    background: transparent; border: 1px solid var(--line2); color: var(--dim);
    border-radius: 3px; padding: 4px 10px; font-size: .62rem; letter-spacing: .12em;
    cursor: pointer; font-family: inherit; transition: .14s; text-transform: uppercase;
}
.bs-about:hover { color: var(--grn); border-color: var(--grn); }

/* ---- about / credits panel ---- */
.rml-about-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.rml-about-row svg { width: 34px; height: 34px; border-radius: 4px; flex: none;
    box-shadow: 0 0 12px rgba(0,255,156,0.3); }
.rml-about-brand { font-size: .95rem; letter-spacing: .16em; color: var(--txt); }
.rml-about-brand b { color: var(--grn); font-weight: 400; }
.rml-about-sub { font-size: .72rem; color: var(--dim); letter-spacing: .1em; }
.rml-about-spacer { flex: 1; }
.rml-about-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rml-about-langs span {
    border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px;
    font-size: .62rem; color: var(--dim); letter-spacing: .08em; transition: .15s;
}
.rml-about-langs span i { font-style: normal; margin-right: 5px; }
.rml-about-langs span.on { color: var(--grn); border-color: var(--grn); background: rgba(var(--grn-rgb),0.1); }