/* Site-specific styles on top of theme.css (brand tokens) and output.css (Tailwind). */

.boot-splash {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-canvas);
}

html {
    scroll-behavior: smooth;
}

/* Faithful copies of Giki.Web's status animations (app.css there): the done-pop
   when a checkmark lands, and the pulse on active chat/poke dots. */
@keyframes giki-done-pop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.animate-done-pop {
    animation: giki-done-pop 400ms cubic-bezier(.34, 1.56, .64, 1) 1;
}
@keyframes giki-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.25); }
}
.animate-dot-pulse {
    animation: giki-dot-pulse 1.6s ease-in-out infinite;
}

/* Coach pulse: the next required click glows with a DOUBLE expanding ring —
   same discipline as Giki10's focus rules (pulse = choose here, stops on choice),
   made markedly more prominent (Christian: the focus must be unmissable). */
@keyframes demo-pulse {
    0% { box-shadow: 0 0 0 0 rgba(131, 28, 239, 0.75), 0 0 0 0 rgba(131, 28, 239, 0.35); }
    60% { box-shadow: 0 0 0 6px rgba(131, 28, 239, 0.25), 0 0 0 14px rgba(131, 28, 239, 0); }
    100% { box-shadow: 0 0 0 0 rgba(131, 28, 239, 0.75), 0 0 0 0 rgba(131, 28, 239, 0); }
}
.animate-demo-pulse {
    animation: demo-pulse 1.4s ease-in-out infinite;
}

/* Focus zoom: the card (or pearl strip) holding the next required click grows,
   so tiny controls — the 9px follow-up dot, the pearls — are easy to see and
   hit. Applied by the same NextActionKey resolver that drives pulse + robot. */
.demo-zoom {
    position: relative;
    z-index: 40;
    transform: scale(1.45);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
/* Narrower viewports leave the columns at the screen edge — scale less so the
   zoomed card never clips outside the viewport. */
@media (max-width: 1100px) {
    .demo-zoom { transform: scale(1.22); }
}
/* On mobile the cards are already full-width (controls proportionally large),
   and any scale would push the card past the viewport edge — pulse alone there. */
@media (max-width: 640px) {
    .demo-zoom { transform: none; box-shadow: none; }
}

/* Document reading: the § passage lights up while Giki reads it (sweep), and
   stays marked once it became a task proposal — like a highlighter pen. */
@keyframes doc-sweep {
    from { background-size: 0% 100%; }
    to { background-size: 100% 100%; }
}
.doc-mark {
    background-image: linear-gradient(rgba(131, 28, 239, 0.22), rgba(131, 28, 239, 0.22));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 2px;
}
.doc-marking {
    background-image: linear-gradient(rgba(131, 28, 239, 0.32), rgba(131, 28, 239, 0.32));
    background-repeat: no-repeat;
    border-radius: 2px;
    animation: doc-sweep 0.5s linear forwards;
}

/* Roadmap stones light up one by one while the narrator names them. */
@keyframes stone-blink {
    0%, 100% { border-color: var(--color-border); box-shadow: none; }
    50% { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(131, 28, 239, 0.18); }
}
.stone-blink {
    animation: stone-blink 1.3s ease-in-out 2;
}

/* Camera flash when an asset is photographed on the first round of the house. */
@keyframes asset-flash {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}
.asset-flash {
    background: #ffffff;
    animation: asset-flash 0.5s ease-out forwards;
}

/* ---- Step 2 "here is how you start": SHOW it, don't just say it ------------
   The phone's viewfinder cycles through the equipment being photographed on the
   first round of the house (5 assets, 2s each), with a shutter flash on each
   capture and thumbnails filling in below. Christian: mentioned = shown. */
@keyframes cap-show {
    0%   { opacity: 0; transform: scale(0.8); }
    5%   { opacity: 1; transform: scale(1); }
    16%  { opacity: 1; transform: scale(1.06); }
    20%  { opacity: 0; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(0.8); }
}
.cap-show { animation: cap-show 10s infinite; opacity: 0; }

@keyframes cap-flash {
    0%   { opacity: 0; }
    3%   { opacity: 0.85; }
    12%  { opacity: 0; }
    100% { opacity: 0; }
}
.cap-flash { animation: cap-flash 2s infinite; }

@keyframes cap-thumb {
    0%, 8%  { opacity: 0.15; transform: scale(0.85); }
    14%     { opacity: 1; transform: scale(1); }
    97%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 0.15; transform: scale(0.85); }
}
.cap-thumb { animation: cap-thumb 10s infinite; }

@keyframes cap-ring {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    8%       { transform: scale(0.88); opacity: 1; }
}
.cap-ring { animation: cap-ring 2s infinite; }

/* Documents pulled from a folder on the computer and collected into Giki, one
   after another, each becoming a recurring task. */
@keyframes doc-fly {
    0%       { opacity: 0; transform: translateX(0) scale(0.9); }
    8%       { opacity: 1; transform: translateX(0) scale(1); }
    48%      { opacity: 1; transform: translateX(118px) scale(0.96); }
    58%,100% { opacity: 0; transform: translateX(140px) scale(0.82); }
}
.doc-fly { animation: doc-fly 5s infinite; opacity: 0; }

@keyframes doc-land {
    0%, 46% { opacity: 0; transform: translateY(6px); }
    56%     { opacity: 1; transform: translateY(0); }
    97%     { opacity: 1; transform: translateY(0); }
    100%    { opacity: 0; transform: translateY(6px); }
}
.doc-land { animation: doc-land 5s infinite; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .cap-show, .cap-flash, .cap-thumb, .cap-ring, .doc-fly, .doc-land { animation: none; opacity: 1; }
}

/* The demo robot's on-screen cursor. */
#demo-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease;
}
#demo-cursor svg {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
#demo-cursor::after {
    content: '';
    position: absolute;
    left: -17px;
    top: -17px;
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    border: 3px solid var(--color-primary);
    opacity: 0;
    transform: scale(0.4);
}
#demo-cursor.demo-cursor-click::after {
    animation: demo-click-ripple 0.4s ease-out;
}
@keyframes demo-click-ripple {
    0% { opacity: 0.9; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1.1); }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    background: #fff3cd;
    color: #664d03;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}