feat(frontend): cinematic loading, page-load entrance, mobile polish

Within the existing amber/polaroid identity:
- loading cycles poetic phrases so the ~40s read feels like attention paid
- staggered rise of wordmark -> tagline -> rule -> dropzone on load
- stronger drag-over state (amber border + inner glow)
- mobile breakpoint for the polaroid stack and film cards
- prefers-reduced-motion guard

frontend/src/Chalchitra.jsx

@@ -13,6 +13,16 @@ const STACK = [
 
 const fanOffset = (i, n) => (i - (n - 1) / 2) * 36;
 
+// Shown one at a time while the oracle reads — turns a ~40s wait into something
+// that feels like attention being paid, not a spinner.
+const LOADING_PHRASES = [
+  "reading your moment",
+  "studying the quality of light",
+  "listening for the mood beneath",
+  "searching the reels",
+  "finding what belongs to you",
+];
+
 // Read file → resize via canvas → compressed JPEG data URL.
 // Keeps the payload to the model small; the backend accepts data URLs directly.
 const processImage = (file) => new Promise((res) => {
@@ -56,13 +66,16 @@ const CSS = `
 .chi{max-width:700px;margin:0 auto;padding:60px 24px 80px;position:relative;z-index:2}
 
 .ch-hd{text-align:center;margin-bottom:52px}
-.ch-wm{font-family:var(--fd);font-size:clamp(56px,11vw,92px);font-weight:300;font-style:italic;letter-spacing:.05em;color:var(--tx);line-height:1;text-shadow:0 0 80px rgba(201,146,62,.14);display:block}
-.ch-tg{font-family:var(--fd);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:rgba(201,146,62,.88);margin-top:14px}
-.ch-rl{width:28px;height:1px;background:var(--bd);margin:18px auto 0}
+.ch-wm{font-family:var(--fd);font-size:clamp(56px,11vw,92px);font-weight:300;font-style:italic;letter-spacing:.05em;color:var(--tx);line-height:1;text-shadow:0 0 80px rgba(201,146,62,.14);display:block;animation:chRise 1.2s cubic-bezier(.2,.7,.2,1) both}
+.ch-tg{font-family:var(--fd);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:rgba(201,146,62,.88);margin-top:14px;animation:chRise 1.2s .14s cubic-bezier(.2,.7,.2,1) both}
+.ch-rl{width:28px;height:1px;background:var(--bd);margin:18px auto 0;animation:chRise 1.2s .28s cubic-bezier(.2,.7,.2,1) both}
+@keyframes chRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
 
-.ch-dp{border:1px solid var(--bd);padding:56px 40px;text-align:center;cursor:pointer;transition:all .3s;background:var(--am3);position:relative;overflow:hidden}
+.ch-dp{border:1px solid var(--bd);padding:56px 40px;text-align:center;cursor:pointer;transition:border-color .3s,box-shadow .3s,background .3s;background:var(--am3);position:relative;overflow:hidden;animation:chRise 1.2s .42s cubic-bezier(.2,.7,.2,1) both}
 .ch-dp::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,rgba(201,146,62,.06) 0%,transparent 65%);pointer-events:none}
-.ch-dp:hover,.ch-dp-ov{border-color:var(--am2)}
+.ch-dp:hover{border-color:var(--am2)}
+.ch-dp-ov{border-color:var(--am);background:var(--am2);box-shadow:inset 0 0 70px rgba(201,146,62,.12)}
+.ch-dp-ov .ch-dp-ic{opacity:.85}
 .ch-dp-ic{display:block;font-size:24px;color:var(--am);opacity:.45;margin-bottom:18px}
 .ch-dp-mn{font-family:var(--fd);font-size:23px;font-style:italic;font-weight:300;color:var(--tx);opacity:.6}
 .ch-dp-hn{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);margin-top:8px}
@@ -108,7 +121,8 @@ const CSS = `
 .ch-ld{text-align:center;padding:72px 0}
 .ch-lic{display:block;font-size:30px;color:var(--am);animation:chP 2.2s ease-in-out infinite;margin-bottom:22px}
 @keyframes chP{0%,100%{opacity:.2;transform:scale(.95)}50%{opacity:.9;transform:scale(1.05)}}
-.ch-ltx{font-family:var(--fd);font-size:18px;font-style:italic;font-weight:300;color:var(--tx2);letter-spacing:.12em}
+.ch-ltx{font-family:var(--fd);font-size:18px;font-style:italic;font-weight:300;color:var(--tx2);letter-spacing:.12em;animation:chPhrase .9s ease both}
+@keyframes chPhrase{0%{opacity:0;transform:translateY(6px)}100%{opacity:.85;transform:none}}
 
 .ch-mini-stack{position:relative;height:116px;margin-bottom:40px}
 .ch-mini-photo{position:absolute;width:112px;background:#f0ebe1;padding:3px 3px 14px;box-shadow:0 5px 18px rgba(0,0,0,.6)}
@@ -137,6 +151,26 @@ const CSS = `
 .ch-ag button:hover{color:var(--am);border-bottom-color:var(--am2)}
 
 .ch-ft-cr{margin-top:64px;text-align:center;font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx2);opacity:.5}
+
+@media (max-width:600px){
+  .chi{padding:42px 18px 64px}
+  .ch-hd{margin-bottom:38px}
+  .ch-dp{padding:46px 26px}
+  .ch-stack{height:300px}
+  .ch-photo{width:74%;left:13%}
+  .ch-fi{font-size:18px}
+  .ch-ip{padding-left:18px;margin-bottom:34px}
+  .ch-ipt{font-size:19px;line-height:1.66}
+  .ch-fc{padding:22px 18px}
+  .ch-ft{font-size:23px}
+  .ch-fc:first-child .ch-ft{font-size:26px}
+  .ch-fw{font-size:16px}
+  .ch-bn{padding:13px 34px}
+  .ch-ag{gap:22px;margin-top:42px}
+}
+@media (prefers-reduced-motion:reduce){
+  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
+}
 `;
 
 export default function Chalchitra() {
@@ -149,6 +183,7 @@ export default function Chalchitra() {
   // Titles already offered this session — sent as `exclude` so refreshing or
   // re-rolling brings different films. Stateless server; the memory lives here.
   const [seen, setSeen] = useState([]);
+  const [phraseI, setPhraseI] = useState(0);
   const ref = useRef(null);
 
   useEffect(() => {
@@ -158,6 +193,17 @@ export default function Chalchitra() {
     document.head.appendChild(link);
   }, []);
 
+  // Cycle the loading phrases only while reading.
+  useEffect(() => {
+    if (phase !== "loading") return;
+    setPhraseI(0);
+    const id = setInterval(
+      () => setPhraseI(i => (i + 1) % LOADING_PHRASES.length),
+      2800
+    );
+    return () => clearInterval(id);
+  }, [phase]);
+
   const addFiles = async (fs) => {
     const fileArray = Array.from(fs)
       .filter(f => f.type.startsWith("image/"))
@@ -302,7 +348,7 @@ export default function Chalchitra() {
           {phase === "loading" && (
             <div className="ch-ld">
               <span className="ch-lic">✦</span>
-              <p className="ch-ltx">reading your moment</p>
+              <p className="ch-ltx" key={phraseI}>{LOADING_PHRASES[phraseI]}…</p>
             </div>
           )}