/* =========================================================================
   CODEIQ BOOT SEQUENCE  (embed on the IQ Books stage)
   =========================================================================
   The user clicks a crimson tile carrying the CodeIQ logomark, and this is
   what that tile becomes: it arrives at the centre of a dark stage, throws
   circuit traces out into the dark, and the organisation's own records travel
   back down them into the mark while the session actually initialises.

   Everything here is the logomark's own language — crimson, whitescale mark,
   1.5px rounded traces, lit nodes — so the modal reads as the button growing
   into an application rather than as a generic loading screen.
   ========================================================================= */

#ciq-boot {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #140a0d;
    opacity: 0;
    transition: opacity 0.35s ease;
    font-family: var(--font-sans, "Inter", system-ui, -apple-system, sans-serif);
}

#ciq-boot.is-in { opacity: 1; }

#ciq-boot.is-out {
    opacity: 0;
    transition: opacity 0.55s ease;
}

/* Crimson bloom behind the mark, breathing slowly. */
#ciq-boot .ciqb-bloom {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1200px;
    height: 1200px;
    margin: -600px 0 0 -600px;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(196, 87, 106, 0.30) 0%, rgba(196, 87, 106, 0.10) 32%, transparent 62%);
    animation: ciqbBreathe 4.5s ease-in-out infinite;
}

@keyframes ciqbBreathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* Faint grid, so the traces have something to sit on. */
#ciq-boot .ciqb-grid {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 45%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 45%, transparent 78%);
}

#ciq-boot .ciqb-stage {
    position: relative;
    width: min(1180px, 94vw);
    height: min(700px, 88vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- circuit traces --------------------------------------------------- */

#ciq-boot .ciqb-traces {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

#ciq-boot .ciqb-trace {
    fill: none;
    stroke: rgba(196, 87, 106, 0.6);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: ciqbDraw 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--delay);
}

@keyframes ciqbDraw { to { stroke-dashoffset: 0; } }

#ciq-boot .ciqb-node {
    fill: #140a0d;
    stroke: rgba(196, 87, 106, 0.85);
    stroke-width: 1.5;
    opacity: 0;
    animation: ciqbNode 0.5s ease forwards;
    animation-delay: calc(var(--delay) + 0.66s);
}

@keyframes ciqbNode {
    0%   { opacity: 0; r: 1; }
    60%  { opacity: 1; r: 5.5; stroke: #ffffff; }
    100% { opacity: 1; r: 3.5; }
}

/* ---- the mark --------------------------------------------------------- */

#ciq-boot .ciqb-tile {
    position: relative;
    width: 152px;
    height: 152px;
    border-radius: 34px;
    background: linear-gradient(150deg, #c4576a 0%, #a8384f 55%, #8d2b40 100%);
    display: grid;
    place-items: center;
    box-shadow:
        0 18px 50px rgba(168, 56, 79, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.07) inset;
    transform: scale(0.4);
    opacity: 0;
    animation: ciqbTileIn 0.62s cubic-bezier(0.22, 1.4, 0.36, 1) 0.12s forwards;
}

@keyframes ciqbTileIn {
    0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* The brand logomark, rendered whitescale — the same mark on the same crimson
   tile the user just clicked in IQ Books. */
#ciq-boot .ciqb-tile img {
    width: 94px;
    height: 94px;
    filter: brightness(0) invert(1);
    opacity: 0.97;
}

/* Halo ring that pulses each time a record lands. */
#ciq-boot .ciqb-ring {
    position: absolute;
    inset: -18px;
    border-radius: 44px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    pointer-events: none;
}

#ciq-boot .ciqb-tile.is-hit .ciqb-ring {
    animation: ciqbHit 0.5s ease-out;
}

@keyframes ciqbHit {
    0%   { opacity: 0.9; transform: scale(0.94); border-color: rgba(255, 255, 255, 0.5); }
    100% { opacity: 0; transform: scale(1.22); border-color: rgba(196, 87, 106, 0); }
}

#ciq-boot .ciqb-tile.is-ready {
    animation: ciqbReady 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ciqbReady {
    0%   { transform: scale(1); box-shadow: 0 18px 50px rgba(168, 56, 79, 0.42), 0 0 0 1px rgba(255,255,255,0.07) inset; }
    45%  { transform: scale(1.09); box-shadow: 0 22px 70px rgba(196, 87, 106, 0.75), 0 0 0 1px rgba(255,255,255,0.28) inset; }
    100% { transform: scale(1.04); box-shadow: 0 20px 60px rgba(196, 87, 106, 0.55), 0 0 0 1px rgba(255,255,255,0.16) inset; }
}

/* ---- records travelling in ------------------------------------------- */

#ciq-boot .ciqb-packet {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(196, 87, 106, 0.55);
    box-shadow: 0 6px 20px rgba(10, 4, 6, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) scale(0.9);
    opacity: 0;
    animation: ciqbFly 1.15s cubic-bezier(0.34, 0.02, 0.28, 1) forwards;
    animation-delay: var(--delay);
    pointer-events: none;
}

#ciq-boot .ciqb-packet .ciqb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e88fa0;
    flex: none;
}

#ciq-boot .ciqb-packet .ciqb-kind {
    color: rgba(232, 143, 160, 0.75);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* Scale is held at full size for most of the run — interpolating it across the
   whole flight left the record unreadable for two thirds of its travel, which
   defeats the point of naming a real supplier on it. */
@keyframes ciqbFly {
    0%   { transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) scale(0.88); opacity: 0; }
    14%  { opacity: 1; }
    78%  { transform: translate(-50%, -50%) translate(calc(var(--fx) * 0.17), calc(var(--fy) * 0.17)) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(0, 0) scale(0.55); opacity: 0; }
}

/* ---- caption + counters ---------------------------------------------- */

#ciq-boot .ciqb-caption {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 124px);
    text-align: center;
    opacity: 0;
    animation: ciqbFade 0.6s ease 0.7s forwards;
}

@keyframes ciqbFade { to { opacity: 1; } }

#ciq-boot .ciqb-org {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
}

#ciq-boot .ciqb-phase {
    margin-top: 9px;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    min-height: 1.3em;
    transition: opacity 0.25s ease;
}

#ciq-boot .ciqb-stats {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(50% + 208px);
    display: flex;
    gap: 46px;
    opacity: 0;
    animation: ciqbFade 0.7s ease 1.5s forwards;
}

#ciq-boot .ciqb-stat {
    text-align: center;
    min-width: 96px;
}

#ciq-boot .ciqb-stat b {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 27px;
    font-weight: 600;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

#ciq-boot .ciqb-stat span {
    display: block;
    margin-top: 5px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.36);
}

@media (max-width: 720px) {
    #ciq-boot .ciqb-stats { gap: 18px; }
    #ciq-boot .ciqb-stat { min-width: 58px; }
    #ciq-boot .ciqb-packet { font-size: 10.5px; }
}

/* Motion is the whole point here, so reduced-motion gets the same information
   as a still frame rather than a stripped-out screen. */
@media (prefers-reduced-motion: reduce) {
    #ciq-boot .ciqb-bloom { animation: none; }
    #ciq-boot .ciqb-trace { animation: none; stroke-dashoffset: 0; }
    #ciq-boot .ciqb-node { animation: none; opacity: 1; }
    #ciq-boot .ciqb-tile { animation: none; transform: none; opacity: 1; }
    #ciq-boot .ciqb-packet { display: none; }
    #ciq-boot .ciqb-caption,
    #ciq-boot .ciqb-stats { animation: none; opacity: 1; }
}