/* Fate tokens and the Thread Kit, shared by fatemmo.com and FateMMO: Awaken (frontend/world/styles/world.css imports
   this file). One gold thread is the motif; motion keeps two tempos. Drift: ambient sine loops of 1.8 to 8 s. Strike:
   a 120 to 160 ms wind-up, the blow in 90 ms or less, a 70 ms hit-stop and a 240 to 360 ms settle.
   frontend/world/render/motion-tokens.js mirrors these numbers for JS and motion-tokens.test.js keeps the two in step. */

:root {
    /* Core colours: the game's gold, ivory and ink */
    --fate-gold: #d7ae58;
    --fate-gold-bright: #f4d991;
    --fate-ivory: #f4eedf;
    --fate-ink: #071019;

    /* The thread itself, matched to the gold thread in the star-chart sky (public/js/fate-sky.js) */
    --fate-thread: #f2d08a;
    --fate-thread-head: #fff3cf;

    /* Rarity (frontend/world/state/rarity.js) */
    --fate-rarity-common: #829299;
    --fate-rarity-uncommon: #69b995;
    --fate-rarity-rare: #71b9ed;
    --fate-rarity-epic: #ba8cde;
    --fate-rarity-legendary: #f3c864;

    /* Factions */
    --fate-faction-xyros: #ff3b2f;
    --fate-faction-fenor: #5fb6ff;
    --fate-faction-zethos: #4fd47a;
    --fate-faction-solis: #ffcf5a;

    /* Elements: the battle cast washes (frontend/world/styles/battle.css), opaque */
    --fate-element-fire: #ff823c;
    --fate-element-ice: #78c8ff;
    --fate-element-water: #78c8ff;
    --fate-element-lightning: #fff078;
    --fate-element-nature: #8cf078;
    --fate-element-poison: #8cf078;
    --fate-element-light: #fff5c8;
    --fate-element-shadow: #965adc;
    --fate-element-impact: #ffdcaa;

    /* Easing */
    --fate-ease-thread: cubic-bezier(0.2, 0.8, 0.2, 1);
    --fate-ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.25);
    --fate-ease-strike: cubic-bezier(0.55, 0, 1, 0.45);
    --fate-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
    --fate-ease-drift: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --fate-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Durations (press is the 80 ms button press, between stop and tap) */
    --fate-dur-stop: 70ms;
    --fate-dur-press: 80ms;
    --fate-dur-tap: 120ms;
    --fate-dur-wind: 160ms;
    --fate-dur-ui: 240ms;
    --fate-dur-pop: 360ms;
    --fate-dur-reveal: 600ms;
    --fate-dur-scene: 900ms;
    --fate-dur-beat: 1600ms;
    --fate-dur-title: 2800ms;

    /* Strike tempo */
    --fate-strike-wind-min: 120ms;
    --fate-strike-wind-max: 160ms;
    --fate-strike-blow-max: 90ms;
    --fate-strike-stop: 70ms;
    --fate-strike-settle-min: 240ms;
    --fate-strike-settle-max: 360ms;

    /* Drift tempo */
    --fate-drift-min: 1800ms;
    --fate-drift-max: 8000ms;

    /* The RPG command window */
    --fate-window-navy: #070b1c;
    --fate-window-rule: #f3ecdc;
    --fate-window-ring: #0b1020;

    /* Thread Kit: a thread that brightens toward its head, tied off with a four-point knot */
    --fate-thread-length: clamp(4.5rem, 12vw, 7.5rem);
    --fate-thread-weight: 2px;
    --fate-knot-size: 14px;
    --fate-thread-line: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fate-thread) 70%, transparent) 35%, var(--fate-thread) 85%, var(--fate-thread-head));
    --fate-knot-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.7 6.3 16 8 9.7 9.7 8 16 6.3 9.7 0 8 6.3 6.3Z' fill='%23fff3cf'/%3E%3C/svg%3E");
    --fate-thread-glow: drop-shadow(0 0 4px color-mix(in srgb, var(--fate-thread) 55%, transparent));

    /* fatemmo.com's older gold tokens follow the game's gold */
    --accent: var(--fate-gold);
    --accent-glow: var(--fate-gold-bright);
    --primary: var(--fate-gold);
    --primary-glow: var(--fate-gold-bright);
}

/* A classic RPG command window: ivory rule on deep navy with a dark outer ring. */
.fate-window {
    border: 2px solid var(--fate-window-rule);
    border-radius: 10px;
    background: var(--fate-window-navy);
    box-shadow: 0 0 0 2px var(--fate-window-ring);
    color: var(--fate-ivory);
}

/* Thread Kit: <span class="fate-thread" aria-hidden="true"></span> is a thread with its knot. With scripts on it waits
   undrawn until .is-thread-drawn arrives (public/js/site-motion.js adds it on scroll; game code adds it itself), then
   draws left to right and the knot pops. Without scripts it simply shows; reduced motion shows it without the draw. */
.fate-thread {
    position: relative;
    display: block;
    width: var(--fate-thread-length);
    height: var(--fate-knot-size);
    filter: var(--fate-thread-glow);
    pointer-events: none;
}

.fate-thread::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--fate-knot-size) / 2);
    bottom: 0;
    left: 0;
    background: var(--fate-thread-line) 0 50% / 100% var(--fate-thread-weight) no-repeat;
    transform-origin: 0 50%;
    transition: transform var(--fate-dur-reveal) var(--fate-ease-thread);
}

.fate-thread::after,
.fate-knot {
    content: "";
    width: var(--fate-knot-size);
    height: var(--fate-knot-size);
    background: var(--fate-knot-image) center / contain no-repeat;
}

.fate-thread::after {
    position: absolute;
    top: 0;
    right: 0;
    /* The knot pops as the thread arrives: the thread ease is 97% drawn by the pop mark. */
    transition: transform var(--fate-dur-pop) var(--fate-ease-snap) var(--fate-dur-pop);
}

.fate-knot {
    display: inline-block;
    filter: var(--fate-thread-glow);
}

@media (scripting: enabled) {
    .fate-thread:not(.is-thread-drawn)::before {
        transform: scaleX(0);
    }

    .fate-thread:not(.is-thread-drawn)::after {
        transform: scale(0) rotate(-45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fate-thread::before,
    .fate-thread::after {
        transition: none;
    }
}