/* ATOM · magic.css — styles for the three signature interactions.
   1 · hold-to-rewind: the knot, the room blur, the progress thread, the dissolve
   2 · ask-first memory butterflies: flight, perch, composer morph
   3 · little quests sheet: paper cards, butterfly stamps
   Consumes room.css tokens (--paper --ink --muted --lavender --violet-paper
   --line --serif --display --shadow) and the body[data-rewinding] +
   --rewind-blur hook. Ivory/lavender throughout, no white flashes, safe-area
   aware, 375×812 is the reference device, and everything settles instantly
   under prefers-reduced-motion. */

/* --- 1 · hold-to-rewind ---------------------------------------------------------- */

body[data-rewinding]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body[data-rewinding] #messages{touch-action:none;cursor:grabbing}
/* The library blurs a shade less than the conversation — depth, not noise. */
body[data-rewinding] .library{filter:blur(calc(var(--rewind-blur,0px)*.55));transition:filter .3s ease}

#rewind-layer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;transition:opacity .3s ease}
#rewind-layer.rewind-unraveling{opacity:0;transition:opacity .34s ease .36s}

/* The knot: drawn on by stroke-dashoffset per tick (rewind.js measures the
   path and drives the offset); --wound (0→1) winds it tighter and larger. */
.rewind-knot{width:min(236px,56vw);height:auto;overflow:visible;rotate:calc(var(--wound,0)*80deg);scale:calc(.78 + var(--wound,0)*.34);transition:rotate .27s ease,scale .27s ease}
.rewind-knot-path{stroke:var(--lavender);stroke-width:6.5;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #493c311a);transition:stroke-dashoffset .27s ease,opacity .3s ease .22s}
.rewind-unthread{stroke:#4a434d;stroke-width:1.5;opacity:.5;fill:none;stroke-linecap:round;transition:stroke-dashoffset .32s ease .2s}
@keyframes rewind-pulse{0%{scale:1}35%{scale:1.05}100%{scale:1}}
.rewind-knot.rewind-pulse{animation:rewind-pulse .3s ease}

/* Thin thread progress + the quiet hint line beneath it. */
.rewind-progress{display:flex;align-items:center;gap:12px}
.rewind-progress-line{position:relative;display:block;width:128px;height:2px;border-radius:2px;background:#f5f0e826;overflow:hidden}
.rewind-progress-fill{position:absolute;inset:0;display:block;background:#d9d2ee;transform-origin:left center;transform:scaleX(0);transition:transform .27s ease}
.rewind-progress-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#f5f0e8;opacity:.75;white-space:nowrap}
.rewind-hint{margin:0;font-size:11px;font-style:italic;color:#f5f0e8;opacity:0;transition:opacity .4s ease;text-align:center;padding:0 24px}
#rewind-layer.rewind-live .rewind-hint{opacity:.72}
#rewind-layer.rewind-capped .rewind-hint{opacity:.95}

/* Per-message dissolve: winds down and away as the knot takes it. */
.message.rewinding-out{transition:opacity .25s ease,transform .25s ease;opacity:0;transform:translateY(14px) scale(.985);pointer-events:none}

/* --- 2 · memory butterflies --------------------------------------------------------- */

.bfly-fly{position:fixed;left:0;top:0;pointer-events:none;will-change:transform,opacity}
/* Two-layer flight: the outer wrapper glides across, the inner one arcs up
   and settles, so the path reads as a curve, not a slide. */
.bfly-move{animation:bfly-x var(--fly-ms,1400ms) linear forwards}
.bfly-arc{animation:bfly-y var(--fly-ms,1400ms) cubic-bezier(.36,.06,.3,1) forwards}
@keyframes bfly-x{from{transform:translateX(0)}to{transform:translateX(var(--fly-x,0px))}}
@keyframes bfly-y{from{transform:translateY(0)}45%{transform:translateY(calc(var(--fly-y,0px)*.3 - 86px))}75%{transform:translateY(calc(var(--fly-y,0px)*.92))}to{transform:translateY(var(--fly-y,0px))}}
.bfly-svg{display:block;width:28px;height:28px;overflow:visible}
.bfly-wing{transform-box:fill-box;animation:bfly-flap 260ms ease-in-out infinite alternate}
.bfly-wing-l{transform-origin:right center}
.bfly-wing-r{transform-origin:left center}
@keyframes bfly-flap{from{transform:scaleX(1)}to{transform:scaleX(.42)}}
.bfly-wing-shape{fill:var(--lavender);opacity:.92}
.bfly-wing-shade{fill:#575380;opacity:.9}
.bfly-body{fill:var(--ink);opacity:.85}
.bfly-perched{animation:bfly-bob 2.8s ease-in-out infinite}
.bfly-perched .bfly-wing{animation-duration:1100ms}
@keyframes bfly-bob{0%,100%{transform:none}50%{transform:translateY(-3px) rotate(-4deg)}}
.bfly-away{opacity:0;transform:translate(30px,-92px) rotate(14deg);transition:transform .9s ease-in,opacity .85s ease-in}

/* --- 3 · composer morph (the ask) ------------------------------------------------------ */

.composer.magic-morphed{border-color:#a69bbe;background:#f1ecf6}
.composer.magic-morphed>textarea,.composer.magic-morphed .composer-actions{display:none}
.magic-ask{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;animation:magic-ask-in .28s ease both}
@keyframes magic-ask-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.magic-ask-line{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.magic-ask-q{font-family:var(--display);font-style:italic;color:var(--lavender);font-size:16px}
.magic-ask-text{color:var(--muted)}
.magic-ask-buttons{display:flex;gap:8px;flex-wrap:wrap}
.magic-ask-buttons button{border-radius:6px;padding:9px 13px;font-size:11px;white-space:nowrap;transition:background .2s,border-color .2s}
.magic-yes{background:#55517f;color:#fff;border:1px solid #55517f}
.magic-yes:hover{background:#6662a6}
.magic-no{background:#efe8de;color:var(--ink);border:1px solid #d9ccc0}
.magic-no:hover{border-color:#a69bbe}
.magic-ask-privacy{margin:0;font-size:9px;font-style:italic;color:var(--muted)}

/* --- 4 · little quests sheet ------------------------------------------------------------ */

#quests-root.open{display:flex;align-items:center;justify-content:center;padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))}
.quests-sheet{position:relative;width:min(430px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid #d2c2b2;border-radius:13px;box-shadow:var(--shadow);padding:26px 22px calc(22px + env(safe-area-inset-bottom));scrollbar-width:thin}
.quests-sheet:focus{outline:none}
.quests-head{margin-bottom:6px}
.quests-close{position:absolute;right:12px;top:9px;font-size:23px;color:var(--muted);padding:4px}
.quests-sheet .eyebrow{font-size:9px;font-weight:500;letter-spacing:2px;color:var(--muted);margin-bottom:6px}
.quests-sheet h2{font-size:28px;letter-spacing:-.4px;margin:6px 34px 10px 0}
.quests-note{font-size:11.5px;color:var(--muted);margin:0 0 14px}
.quests-section{margin:16px 0 4px}
.quests-section h3{font-family:var(--display);font-weight:400;font-size:16px;color:var(--lavender);margin:0 0 8px}
.quest-card{background:#fff6;border:1px solid var(--line);border-left:3px solid #c9c2dd;border-radius:8px;padding:13px 14px;margin:0 0 9px}
.quest-card.quest-offered{background:var(--violet-paper);border-left-color:var(--lavender)}
.quest-card.quest-active{border-left-color:#8f89bf}
.quest-card.quest-done{opacity:.88;border-left-color:#b9b3d6}
.quest-title{font-family:var(--display);font-weight:400;font-size:17px;margin:0 0 4px;color:var(--ink)}
.quest-brief{margin:0;font-size:12px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.quest-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.quest-actions button{border:1px solid var(--line);border-radius:5px;padding:8px 12px;font-size:11px;background:#fff4;transition:background .2s,border-color .2s}
.quest-actions button:hover{background:var(--violet-paper);border-color:#a69bbe}
.quest-actions .quest-accept{background:#55517f;color:#fff;border-color:#55517f}
.quest-actions .quest-accept:hover{background:#6662a6}
.quest-done-note{display:flex;align-items:center;gap:7px;margin:9px 0 0;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--lavender)}
.quest-stamp{width:17px;height:17px;transform:rotate(-11deg);flex-shrink:0}
.quest-stamp .quest-stamp-wing{fill:var(--lavender)}
.quest-stamp .quest-stamp-body{fill:#3d374b;opacity:.75}
.quest-empty{font-style:italic;color:var(--muted);font-size:12px;margin:14px 0 0}

/* --- 5 · quest notes in the pinned room -------------------------------------------------- */

.message.system{color:var(--muted);font-style:italic;font-size:12px;max-width:97%}

/* --- 6 · small screens (375×812 is the reference) ------------------------------------------ */

@media(max-width:700px){
  .quests-sheet{width:100%;padding:22px 16px calc(18px + env(safe-area-inset-bottom))}
  .quests-sheet h2{font-size:24px}
  .magic-ask-buttons button{flex:1 1 auto;padding:10px;font-size:11px}
  .rewind-knot{width:min(210px,62vw)}
  .rewind-progress-line{width:110px}
}

/* --- 7 · prefers-reduced-motion: everything instant, nothing lost ---------------------------- */

@media(prefers-reduced-motion:reduce){
  #rewind-layer,.rewind-knot,.rewind-knot.rewind-pulse,.rewind-knot-path,.rewind-unthread,
  .rewind-progress-fill,.message.rewinding-out,.bfly-fly,.bfly-move,.bfly-arc,.bfly-wing,
  .bfly-perched,.bfly-away,.magic-ask,.magic-ask-buttons button,.quest-actions button{
    animation:none!important;transition:none!important;
  }
}

/* ── The real blue butterfly (akraya.club) on memory-save duty ── */
.bfly-wing-shape{fill:#87d0ef;stroke:#2d3748}
.bfly-body{fill:#2d3748}