/* Layoff-Exercise — the participant entrance (LO-003, shared rules FL-030).
   Loaded ONLY by templates/index.html, via its extra_head block.

   The page is one object: a personnel folder that opens once and holds eight
   files with nothing written on them. The detail lives in the educator's
   briefing document, and the lede says so.

   Three things here are deliberate and easy to undo by accident:

   1. THE OPEN STATE IS THE DEFAULT. The animation only exists inside
      `prefers-reduced-motion: no-preference` and only describes the way IN.
      A reader who asks for less motion therefore gets the composed page with
      nothing to undo, and a stylesheet that fails to load leaves a static
      folder rather than a closed one.
   2. NO JAVASCRIPT. The whole sequence is CSS animation on load. The CSP is
      script-src 'self' plus a nonce, so an inline handler would be dead on
      arrival anyway (README §12) — but the real reason is that a folder which
      can be reopened on demand turns the entrance into a toy.
   3. EVERY HORIZONTAL OFFSET IS LOGICAL (inset-inline-start, not left).
      Layoff has ten locales and Arabic is one of them; the tab stagger has to
      mirror with the page. */

.welcome {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    /* clears the fixed language switcher, which sits at the top of every page
       and lands on the brand line once the layout is a single column */
    padding: 3.2rem 0 3rem;
    row-gap: 2rem;
}

.welcome__brand {
    grid-column: 1 / -1;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
/* The tool names itself at the same size it makes its proposition (owner,
   17 August 2026). It read as a caption above a headline before; the name of
   the thing and the sentence it opens with are the same order of statement, so
   they take the same type. Both use the headline's clamp, so they scale
   together and the pair never breaks apart at one width and not another. */
.welcome__brand-name {
    font-size: clamp(2rem, 5.2vw, 3.3rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.022em;
    color: #1b2026;
}
.welcome__brand-sub {
    font-size: 1.06rem;
    line-height: 1.62;
    color: #5e6873;
    max-width: 52ch;
}
/* ONE COLUMN, and the folder sits between the credit line and the headline
   (owner, 18 August 2026). It used to stand in a second column beside the text,
   which read as an illustration next to a page; in the flow it reads as what
   the page is about — you meet the folder, then you are told what to do with
   it. The two-column rule is gone rather than overridden, so there is one
   layout to reason about at every width. */
@media (min-width: 900px) {
    .welcome {
        padding-top: 1.4rem;
        row-gap: 1.6rem;
    }
    .welcome__text { max-width: 46rem; }
}

.welcome__title {
    font-size: clamp(2rem, 5.2vw, 3.3rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.022em;
    color: #1b2026;
    margin: 0;
    text-wrap: balance;
    max-width: 22ch;
}
.welcome__lede {
    font-size: 1.06rem;
    line-height: 1.62;
    color: #3d464e;
    margin: 1.15rem 0 0;
    max-width: 46ch;
}
.welcome__when {
    font-size: .92rem;
    color: #5e6873;
    margin: 1.5rem 0 0;
}
.welcome__actions {
    display: flex;
    align-items: center;
    gap: 1.7rem;
    flex-wrap: wrap;
    margin-top: 1.15rem;
}
/* Flat graphite, not the fleet-era blue gradient: LO-003 asks for no cheerful
   corporate gradient, and this is the only page where that button appears. */
.welcome .button {
    background: #1e2226;
    background-image: none;
    box-shadow: none;
    padding: .85rem 2.7rem;
    font-weight: 600;
    border-radius: 6px;
}
.welcome .button:hover {
    background: #2c333a;
    transform: none;
    box-shadow: 0 4px 14px rgba(30, 34, 38, .26);
}
.welcome__educator {
    color: #5e6873;
    font-size: .95rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.welcome__educator:hover { color: #1e2226; }

/* ── the folder ────────────────────────────────────────────────────────────
   Sized entirely in em against one clamped font-size, so the whole object
   scales as a unit and never needs a second set of rules for mobile. */
.welcome__stage {
    font-size: clamp(7px, 2.1vw, 13px);
    perspective: 1500px;
    perspective-origin: 50% 38%;
    display: flex;
    /* Centred INSIDE THE TEXT MEASURE, not in the window. Flush left clips it:
       the opened cover is skewed in 3D and projects several em to the left of
       the box, so it ran off the page edge. Sharing the column's measure keeps
       the object over the text it belongs to at any width.
       (Stated HERE and not in the 900px block — that block is earlier in the
       file, so at equal specificity this rule wins whatever it says, which is
       how the first attempt at this quietly did nothing.) */
    justify-content: center;
    /* min(): a bare 46rem is a MINIMUM track width in a grid, so on a 390px
       phone it made the whole page 736px wide and everything overflowed. */
    max-width: min(46rem, 100%);
    align-items: flex-end;
    /* The folder is drawn with 3D transforms, so what you see is taller than the
       box it lives in: the lifted cover projects below and the tabs above. In
       the old two-column layout the neighbouring column absorbed that; in the
       flow it has to be stated, or the headline underneath is overlapped by a
       folder (18 August 2026). 4.4em of it is the cover, the rest is the lift. */
    padding-bottom: 4.4em;
    min-height: 27em;
}
.folder {
    position: relative;
    width: 26em;
    height: 19em;
    transform-style: preserve-3d;
    transform: rotateX(6deg);
}
.folder__back {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(#b49c74, #a78e66);
    border-radius: .28em;
    box-shadow: 0 1.4em 2.4em -1em rgba(40, 32, 18, .45);
}
.folder__back::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: .5em;
    background: rgba(255, 255, 255, .16);
    border-radius: .28em .28em 0 0;
}

/* The eight files. Identical size, identical spacing, alphabetical order: the
   stack implies the alphabet and nothing else. Uneven thicknesses would hint at
   salary or seniority, and that would be a hint about the ranking (LO-003). */
.folder__file {
    position: absolute;
    inset-inline: 1.5em;
    bottom: 1.05em;
    height: 11.4em;
    background: linear-gradient(#f8f8f5, #efefeb);
    border: .06em solid #dbdad3;
    border-radius: .12em;
    transform-origin: bottom center;
    transform: translateY(calc(var(--i) * -.6em));
    box-shadow: 0 -.1em .16em rgba(60, 50, 30, .09);
    /* A is nearest the viewer whatever the source order */
    z-index: calc(10 - var(--i));
}
.folder__file[data-file="A"] { --i: 0 }
.folder__file[data-file="B"] { --i: 1 }
.folder__file[data-file="C"] { --i: 2 }
.folder__file[data-file="D"] { --i: 3 }
.folder__file[data-file="E"] { --i: 4 }
.folder__file[data-file="F"] { --i: 5 }
.folder__file[data-file="G"] { --i: 6 }
.folder__file[data-file="H"] { --i: 7 }

.folder__tab {
    position: absolute;
    top: -1.02em;
    inset-inline-start: calc(.45em + var(--i) * 2.7em);
    width: 2.4em;
    height: 1.08em;
    background: linear-gradient(#f8f8f5, #ecece7);
    border: .06em solid #dbdad3;
    border-bottom: 0;
    border-radius: .18em .18em 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .62em;
    line-height: 1;
    letter-spacing: .06em;
    color: #3a3e42;
}

/* Ruled lines on the front sheet only: a file that plainly has contents, with
   no contents shown. Nothing here is text, in any locale. */
.folder__lines {
    position: absolute;
    inset: 1.5em 1.5em auto;
    display: grid;
    gap: .62em;
}
.folder__lines i { display: block; height: .16em; background: #e2e1da; border-radius: .08em }
.folder__lines i:nth-child(1) { width: 38% }
.folder__lines i:nth-child(2) { width: 76% }
.folder__lines i:nth-child(3) { width: 64% }
.folder__lines i:nth-child(4) { width: 71% }
.folder__lines i:nth-child(5) { width: 44% }

/* The cover. Closed it hides everything; it tips forward to open. Always in
   front of the sheets — giving the files a z-index once took that away. */
.folder__cover {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 16.6em;
    z-index: 20;
    transform-origin: bottom center;
    transform: rotateX(-74deg);
    background: linear-gradient(165deg, #c6ae85, #b99f74 60%, #ad9268);
    border-radius: .3em;
    box-shadow: 0 -.2em .8em rgba(40, 32, 18, .18);
}
.folder__cover::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: .28em;
    background: rgba(255, 255, 255, .22);
}
.folder__stamp {
    position: absolute;
    inset-inline-start: 1.6em;
    top: 1.5em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #6b5a3b;
    text-align: start;
}
/* The only word on the cover is the fictional company's name, so the object
   needs no translation in any of the ten locales. */
.folder__stamp b {
    display: block;
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #503f24;
}
.folder__index {
    display: block;
    margin-top: .55em;
    font-size: .68em;
    letter-spacing: .46em;
    color: #6d5b38;
}

/* ── the way in ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .folder__cover {
        animation: lo-cover-open 900ms cubic-bezier(.22, .72, .2, 1) 140ms both;
    }
    .folder__file {
        animation: lo-file-rise 560ms cubic-bezier(.2, .7, .25, 1) both;
        animation-delay: calc(380ms + var(--i) * 55ms);
    }
    @keyframes lo-cover-open {
        from { transform: rotateX(0) }
        to   { transform: rotateX(-74deg) }
    }
    @keyframes lo-file-rise {
        from { transform: translateY(calc(var(--i) * -.6em + 1.6em)); opacity: .5 }
        to   { transform: translateY(calc(var(--i) * -.6em)); opacity: 1 }
    }

    /* ── the loop, and it is user-initiated on purpose ──────────────────────
       Pointing at the folder cycles it closed and open again; leaving settles
       it back open. Nothing moves on its own beyond the single opening above.

       WHY IT IS NOT AUTOMATIC: WCAG 2.2.2 (Pause, Stop, Hide) requires a
       pause mechanism for anything that animates automatically for more than
       five seconds beside other content. An ambient loop would therefore have
       needed a Pause button on a page whose whole argument is restraint — or it
       would have cost the fleet its 0-error WCAG 2.2 AA baseline and added a
       known-gap entry at /accessibility. Owner's decision, 17 August 2026.

       WHY THERE IS NO :focus VARIANT: the folder is aria-hidden and has no
       focusable element in it, by design. Wiring focus would mean making a
       decorative graphic a tab stop, which costs a keyboard user a real stop to
       gain them a decoration. The single opening is what they get, and it is
       enough, because the picture says nothing the headline does not. */
    .welcome__stage:hover .folder__cover {
        animation: lo-cover-cycle 4.2s ease-in-out 0s infinite;
    }
    .welcome__stage:hover .folder__file {
        animation: lo-file-cycle 4.2s ease-in-out infinite;
        animation-delay: calc(var(--i) * 35ms);
    }
    @keyframes lo-cover-cycle {
        0%,  10% { transform: rotateX(-74deg) }
        40%, 60% { transform: rotateX(0) }
        90%, 100% { transform: rotateX(-74deg) }
    }
    @keyframes lo-file-cycle {
        0%,  10% { transform: translateY(calc(var(--i) * -.6em)) }
        40%, 60% { transform: translateY(calc(var(--i) * -.6em + 1.6em)) }
        90%, 100% { transform: translateY(calc(var(--i) * -.6em)) }
    }
}