/**
 * CozyOS — Shared Launch Sequence Styling (Stages 1-6)
 * File Reference: core/shell/launch-sequence.css
 * Milestone: 364.3 — Startup/Login Sequencing Correction
 *
 * Extracted verbatim from dashboard.html's own <style> block (same
 * milestones as core/shell/launch-sequence.js) so both dashboard.html
 * and index.html render the identical, single approved launch screen —
 * never two different or duplicated versions of it.
 *
 * BACKGROUND VISIBILITY CORRECTION — real bug found live: this file
 * previously also set `html, body { background: #011c15 !important; }`.
 * That declaration was redundant for its own stated purpose —
 * #cozy-launch-screen below already covers the entire viewport with its
 * own opaque background at position:fixed;inset:0;z-index:999999, so
 * body/html's own background is never visible underneath it during
 * boot regardless of what it is — and, because of !important, it
 * permanently pinned every CozyOS page's background to this one flat
 * boot-splash color forever, even long after the launch screen itself
 * faded out (.cozy-launch-hidden only fades #cozy-launch-screen's own
 * opacity; it never touched this separate html/body rule). That
 * permanently hid the real, intended --cozy-bg-gradient theme
 * background (core/ui/cozy-tokens.css) the Living Background canvas
 * (core/ui/cozy-background.js) is designed to render its animation on
 * top of — see that file's own "Let cozy-theme.css radial gradient
 * shine through" comment. Removed entirely; margin:0 (the only other
 * real effect) is preserved.
 */
        html, body { margin: 0; }
        #cozy-launch-screen {
            position: fixed; inset: 0; z-index: 999999;
            background: #011c15;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            font-family: system-ui, sans-serif; color: #F9A825;
            transition: opacity 0.6s ease;
            /* M366.2 UX audit: safety net for very short landscape
               viewports (small phones) so content can never be clipped
               with no way to reach it - no visual change on any normal
               viewport, since content already fits within 100vh there. */
            overflow-y: auto;
            /* M366.2 UX audit: hints the compositor this element will
               animate opacity, same GPU-friendly practice as the rest of
               this file - no behavior change. */
            will-change: opacity;
        }
        /* Milestone M252 — logo + slogan reveal delayed to the 1.5s
           mark (Stage 1's minimum stated duration: 1.5-3s of pure
           green before the logo appears), not the earlier 1.0s used
           before this spec revision. */
        #cozy-launch-logo {
            width: min(320px, 70vw); height: auto;
            /* M366.2 — dual-tone glow matching the official CozyOS mark:
               a tight emerald glow close to the artwork, plus a softer,
               wider gold glow further out. Same var(--living-glow)
               override point as before, just layered instead of single. */
            filter: drop-shadow(0 0 14px rgba(46,125,50,0.55)) drop-shadow(var(--living-glow, 0 0 36px rgba(249,168,37,0.30)));
            opacity: 0;
            /* M366.2 UX audit item 1 - "logo slightly rises upward
               during startup": added a gentle 10px upward drift to the
               existing scale-up, both driven by the same single
               transform property/transition (never two competing
               transform declarations), so it reads as one smooth
               gesture rather than a bounce or jitter. */
            transform: scale(0.85) translateY(10px);
            transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }
        /* Living Logo Lighting (Phase 2, section 7): brightness breathes
           every 5s exactly, per spec - real fix from the prior 4s. */
        #cozy-launch-logo.cozy-reveal { opacity: 1; transform: scale(1) translateY(0); animation: cozyLaunchBreathe calc(5s / var(--living-speed, 1)) ease-in-out infinite; animation-delay: 1.2s; }
        /* M351: "Logo animates to top center and scales down." Kept as a
           separate class (added after the wordmark/tagline finish typing)
           rather than folded into .cozy-reveal, so the existing verified
           breathing-glow reveal above is completely unchanged. */
        #cozy-launch-logo.cozy-launch-shrink {
            position: fixed; top: 18px; left: 50%;
            width: 56px; height: auto; animation: none;
            transform: translateX(-50%) scale(1);
            transition: top 0.9s cubic-bezier(0.16,1,0.3,1), width 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
            /* M366.2 UX audit item 10 (performance): this one-time,
               ~0.9s shrink still animates layout-triggering properties
               (top/width) rather than pure transform - flagged in the
               audit report as a WARNING rather than rewritten here,
               since removing them requires recomputing the shrink as a
               transform-only translate/scale and re-verifying pixel
               position, which is real layout work beyond a safe
               same-behavior CSS tweak. will-change at least gives the
               browser advance notice so it can promote the layer ahead
               of the transition rather than mid-frame. */
            will-change: top, left, width, transform;
        }
        /* M351: admin-selectable wordmark reveal styles (typing uses the
           real per-letter typeSplitColorText() above in JS; these four
           are pure-CSS variants for when the administrator selects
           fade/rise/fall/draw instead). */
        #cozy-launch-title.cozy-launch-anim-fade { opacity: 0; transition: opacity 1s ease; }
        #cozy-launch-title.cozy-launch-anim-fade.cozy-launch-anim-play { opacity: 1; }
        #cozy-launch-title.cozy-launch-anim-rise { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1); }
        #cozy-launch-title.cozy-launch-anim-rise.cozy-launch-anim-play { opacity: 1; transform: translateY(0); }
        #cozy-launch-title.cozy-launch-anim-fall { opacity: 0; transform: translateY(-24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1); }
        #cozy-launch-title.cozy-launch-anim-fall.cozy-launch-anim-play { opacity: 1; transform: translateY(0); }
        #cozy-launch-title.cozy-launch-anim-draw { opacity: 0; letter-spacing: 6px; filter: blur(3px); transition: opacity 1s ease, letter-spacing 1s ease, filter 1s ease; }
        #cozy-launch-title.cozy-launch-anim-draw.cozy-launch-anim-play { opacity: 1; letter-spacing: 0.08em; filter: blur(0); }
        @keyframes cozyLaunchBreathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.015); filter: brightness(1.12); } }
        #cozy-launch-title {
            font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
            font-size: 52px; letter-spacing: 0.06em; margin: 24px 0 0 0;
            min-height: 1.2em;
        }
        /* M364.3: responsive sizing per the approved spec (mobile
           48-72px, tablet 56-64px, desktop 64-72px) - font-family/weight
           and the existing typing engine/cursor/split-color classes
           below are all unchanged, only size and spacing increased. */
        @media (min-width: 600px) {
            #cozy-launch-title { font-size: 60px; }
        }
        @media (min-width: 1024px) {
            #cozy-launch-title { font-size: 68px; }
        }
        #cozy-launch-title .cozy-title-cozy { color: #2E7D32; }
        #cozy-launch-title .cozy-title-os { color: #F9A825; }
        #cozy-launch-screen p { font-size: 14px; color: #81C784; margin: 16px 0 0 0; letter-spacing: 0.03em; min-height: 1.2em; }
        /* AUTHORIZED FIX (motto color defect, MOTTO TRACE): fallBounceText()
           (core/ui/live-animation-engine.js) assigns the SAME
           cozy-title-cozy/cozy-title-os classes to #cozy-launch-slogan's
           per-letter spans (see launch-sequence.js:799) that the rules
           above already apply to #cozy-launch-title — but those rules were
           scoped only to #cozy-launch-title, so every slogan letter fell
           through to #cozy-launch-screen p's single flat green above and
           the phrase never actually turned gold. Reuses the exact same
           #2E7D32/#F9A825 tokens already declared above — no new color
           introduced — just extends the existing selector to also cover
           the slogan's own id. No JS/engine change needed. */
        #cozy-launch-slogan .cozy-title-cozy { color: #2E7D32; }
        #cozy-launch-slogan .cozy-title-os { color: #F9A825; }
        #cozy-launch-screen.cozy-launch-hidden { opacity: 0; pointer-events: none; }
        /* M355: approved Stage 6 (6.00-6.30s) - motto letters settle like
           polished metal, not a bounce. Pure CSS, applied once by JS after
           typeSplitColorText()'s own real completion callback fires. */
        @keyframes cozyMottoSettle {
            0%   { transform: translateY(-3px); filter: brightness(1.35); }
            100% { transform: translateY(0); filter: brightness(1); }
        }
        #cozy-launch-slogan.cozy-motto-settle { animation: cozyMottoSettle 0.3s cubic-bezier(0.16,1,0.3,1); }
        .cozy-typing-cursor {
            display: inline-block; width: 2px; margin-left: 2px;
            animation: cozyLaunchCursorBlink 0.9s step-end infinite;
        }
        @keyframes cozyLaunchCursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
        @keyframes cozyLetterPulse { 0% { filter: brightness(1.4); } 100% { filter: brightness(1); } }
        .cozy-letter-pulse { animation: cozyLetterPulse 0.2s ease-out; }
        @media (prefers-reduced-motion: reduce) {
            #cozy-launch-logo.cozy-reveal { animation: none; }
            .cozy-typing-cursor { animation: none; }
            .cozy-letter-pulse { animation: none; }
        }
        /* M370 Phase 2 — Engine Initialization checklist. Fades in with
           the Living Background, fades out before the login card. Real
           status only (see launch-sequence.js) - dots start dim/amber
           and turn genuinely green once their composed check passes. */
        #cozy-launch-engine-checklist {
            position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%) translateY(8px);
            display: flex; flex-direction: column; gap: 4px; opacity: 0;
            transition: opacity 400ms ease, transform 400ms ease;
            font-size: 0.8rem; color: rgba(232,245,233,0.85); z-index: 5;
        }
        #cozy-launch-engine-checklist.cozy-reveal { opacity: 1; transform: translateX(-50%) translateY(0); }
        #cozy-launch-engine-checklist.cozy-launch-check-fadeout { opacity: 0; transition: opacity 400ms ease; }
        .cozy-launch-check-row { display: flex; align-items: center; gap: 8px; }
        .cozy-launch-check-dot {
            width: 8px; height: 8px; border-radius: 50%; background: #FFCA28;
            transition: background 300ms ease, box-shadow 300ms ease;
        }
        .cozy-launch-check-row.cozy-check-ready .cozy-launch-check-dot { background: #4CAF50; box-shadow: 0 0 6px rgba(76,175,80,0.6); }
        @media (prefers-reduced-motion: reduce) {
            #cozy-launch-engine-checklist, #cozy-launch-engine-checklist.cozy-reveal { transition: none; }
            .cozy-launch-check-dot { transition: none; }
        }

        /* ================================================================
           M373 — "ABOVE ONLY" inserted stage.
           Layered on top of the existing #cozy-launch-screen (same host,
           same living background canvas behind it - never a second
           background/overlay system). Reuses the existing wordmark's
           serif font-family/weight (Georgia, 'Times New Roman', serif;
           700) so it reads as part of the same CozyOS launch-gate
           typography rather than an unrelated style. One new color token
           (--cozy-above-only-gold, a golden-brown) is added alongside -
           not in place of - the existing #F9A825/#2E7D32/#81C784 tokens
           already defined above; nothing existing is recolored.
           ================================================================ */
        :root { --cozy-above-only-gold: #C9832E; --cozy-above-only-gold-deep: #8C5A1E; }
        #cozy-launch-above-only {
            position: absolute; left: 50%; top: 50%; z-index: 6;
            transform: translate(-50%, -50%) scale(0.05);
            /* REAL FIX (reported: trailing letter, e.g. the "Y" in
               "ONLY", getting visually clipped): translate(-50%, -50%)
               centers using THIS element's OWN declared width. The
               previous width:min(75vw,900px) declared a box narrower
               than the text's real rendered width (white-space:nowrap
               + letter-spacing never shrink to fit a declared width),
               which skewed the centering math enough that the trailing
               character landed past the viewport edge, where
               login.html's real html,body{overflow-x:hidden} (line 85)
               clips it. width:max-content makes the box always exactly
               match the real text width for pixel-correct centering;
               max-width below still caps growth on large screens per
               the "~75% of usable width" spec, without ever declaring a
               width smaller than the actual content. */
            /* SECOND REAL FIX (the first fix above only closed this gap
               below the 480px breakpoint — the exact same root cause it
               already diagnosed can still occur on WIDE desktop
               viewports too: font-size clamps at its 168px maximum
               while max-width independently clamps at its 900px
               maximum — the two caps do not track each other, so once
               font-size hits 168px, 10 real characters at that size can
               exceed the 900px width ceiling. Per CSS spec, when
               min-width and max-width conflict, min-width wins — so
               min-width: max-content makes it IMPOSSIBLE for max-width
               to ever shrink this box below its own real content width,
               at any viewport, closing the gap for good without
               touching overflow, animation, or timing. max-width keeps
               doing its real job — capping growth once the box would
               otherwise exceed the target ~75%-of-width/900px sizing —
               exactly as already intended, for every case where content
               genuinely is narrower than that cap. */
            width: max-content;
            min-width: max-content;
            max-width: min(75vw, 900px);
            font-size: clamp(28px, 12vw, 168px);
            text-align: center;
            font-family: Georgia, 'Times New Roman', serif;
            font-weight: 700;
            letter-spacing: 0.05em;
            white-space: nowrap;
            overflow: visible;
            pointer-events: none;
            color: var(--cozy-above-only-gold);
            background: linear-gradient(180deg, var(--cozy-above-only-gold) 0%, var(--cozy-above-only-gold-deep) 100%);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 18px rgba(201,131,46,0.45));
            opacity: 0;
            /* Cinematic expansion, not a plain font-size jump: scale
               animates from tiny (0.05) up past its resting size (1) with
               a slight overshoot/settle, matching the same
               cubic-bezier "premium" easing already used elsewhere in
               this file (e.g. #cozy-launch-logo.cozy-launch-shrink).
               CP7 Login Gate resync: the SAME transform transition now
               also carries a translateY rise (added in the
               .cozy-above-only-expand rule below) — one unified
               transition, not a second competing animation, so the
               grow and rise read as a single continuous movement.
               AUTHORIZED FIX (Above Only sync defect): was 4.6s, which
               reached full size roughly halfway through the real,
               measured above-only.m4a duration (10,280ms) while the
               Owner recording kept speaking for several more seconds —
               exactly the mismatch the spec forbids. Retimed to 9.1s so
               growth continues across nearly the full real recording,
               settling just before the existing audio-driven fade
               begins (computeAboveOnlyPlan() puts fadeStartMs at
               ~9,180ms when driven by this real duration), rather than
               stopping early. This is a static CSS constant, not a new
               timer/engine — the existing JS-computed, audio-duration-
               driven fade/remove timers in launch-sequence.js are
               unchanged and still own exit timing. */
            transition: transform 9.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
            will-change: transform, opacity;
        }
        #cozy-launch-above-only.cozy-above-only-expand {
            opacity: 1;
            /* CP7 Login Gate resync: rises toward approximately the
               upper 3/4 region of the screen (25vh above true center)
               while growing to full size — grow and rise as one
               movement, not two separate animations. */
            transform: translate(-50%, -50%) translateY(-25vh) scale(1);
        }
        /* Disappearance: begins shortly before the stage's real (audio-
           duration-driven where available, otherwise the fixed 9s
           fallback) cutoff — see computeAboveOnlyPlan() in
           launch-sequence.js — so the transition genuinely finishes,
           rather than being clipped, by the point the existing motto is
           allowed to begin. Stays at the risen position while fading,
           so it doesn't visually "fall back down" on its way out. */
        #cozy-launch-above-only.cozy-above-only-fade {
            opacity: 0;
            transform: translate(-50%, -50%) translateY(-25vh) scale(1.12);
            transition: transform 1.1s cubic-bezier(0.4, 0, 1, 1), opacity 1.1s ease;
        }
        @media (max-width: 480px) {
            /* REAL FIX (still clipping on real narrow devices after the
               first fix): the base rule's max-width:min(75vw,900px) can
               itself be SMALLER than the text's real rendered width at
               small viewports — e.g. at ~400px wide, 75vw=300px, while
               "ABOVE ONLY" at this breakpoint's own font-size needs
               ~370px. That mismatch is exactly the class of bug the
               first fix (width:max-content) was meant to eliminate, but
               max-width can still force the box narrower than
               max-content resolved to, undoing it right back. On small
               screens, drop the max-width constraint entirely and let
               width:max-content (plus this breakpoint's own smaller,
               already-vw-proportional font-size below) be the ONLY
               thing sizing this box — guaranteeing the box always
               exactly equals the real content width, with zero
               clipping risk on any real device, at this breakpoint.
               Desktop/tablet still get the 75vw/900px cap from the
               base rule; only this breakpoint is exempted. */
            #cozy-launch-above-only { font-size: clamp(26px, 15vw, 64px); letter-spacing: 0.02em; max-width: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            /* Same specificity as the non-reduced-motion rules above
               (element#id[.class]) so this genuinely overrides them
               rather than losing on cascade order - no scale/rise
               animation at all when reduced motion is requested, only a
               plain opacity fade, matching the same pattern already used
               by #cozy-launch-logo.cozy-reveal and .cozy-typing-cursor
               above for reduced motion. */
            #cozy-launch-above-only,
            #cozy-launch-above-only.cozy-above-only-expand,
            #cozy-launch-above-only.cozy-above-only-fade {
                transform: translate(-50%, -50%) scale(1);
                transition: opacity 0.4s ease;
            }
        }