:root{
--bg:#0b0e14;
--fg:#e9eef7;
--muted:#a8b3c7;
--accent:#7dd3fc; /* soft cyan */
--accent-2:#c084fc; /* soft purple */
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;font-family:"Inter",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);}


/* ===== Filmstrip background ===== */
.filmstrip{position:fixed;inset:0;overflow:hidden;z-index:-3}
.strip{display:flex;gap:16px;position:absolute;left:0;top:50%;height:60vh;transform:translateY(-50%);animation:scroll 80s linear infinite;will-change:transform}
.strip img{flex:0 0 60vw;width:60vw;height:100%;object-fit:cover;border-radius:24px;filter:saturate(1.1) contrast(1.05);opacity:.5;transition:opacity .6s ease, transform .6s ease}
.strip img:hover{opacity:.85;transform:scale(1.02)}
@keyframes scroll{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(-50%,-50%,0)}}

/* Overlays */
.vignette{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(80% 60% at 50% 40%, transparent 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.7) 100%)}
.glow{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(125,211,252,.12), rgba(192,132,252,.1));backdrop-filter:blur(2px)}


/* ===== Layout ===== */
.container{max-width:980px;margin:8vh auto 10vh;padding:0 20px 160px}
.hero{text-align:center;margin-bottom:28px}
.hero h1{font-weight:800;letter-spacing:.5px;font-size:clamp(28px,6vw,56px);margin:0 0 12px;background:linear-gradient(90deg,var(--fg),var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:var(--muted)}


.search{margin-top:28px}
.input-wrap{display:flex;gap:10px;align-items:center;justify-content:center}
.input-wrap input{flex:1;max-width:520px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(9,12,20,.65);color:var(--fg);padding:0 16px;outline:none;backdrop-filter:blur(4px);transition:border-color .2s ease, box-shadow .2s ease}
.input-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(125,211,252,.12)}
.input-wrap button{height:48px;border-radius:14px;border:0;padding:0 18px;font-weight:700;cursor:pointer;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#081018;box-shadow:0 10px 30px rgba(125,211,252,.25);transition:transform .15s ease, filter .2s ease}
.input-wrap button:hover{transform:translateY(-1px);filter:saturate(1.1)}
.hint{text-align:center;color:var(--muted);margin-top:10px;font-size:14px}


/* ===== Results grid ===== */
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:28px}
.card{position:relative;padding:16px;border-radius:18px;background:rgba(255,255,255,.05);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);animation:fadeUp .5s forwards}
.card h3{margin:0 0 8px;font-size:16px;color:var(--fg)}
.card .meta{color:var(--muted);font-size:13px}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}


.footer{position:fixed;inset:auto 0 10px;display:flex;justify-content:center;text-align:center}
.footer span{background:rgba(0,0,0,.5);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--muted);backdrop-filter:blur(4px);line-height:1.4;display:inline-block}


/* Responsive tweaks */
@media (max-width:640px){
.strip img{height:44vh;min-width:85vw}
.container{margin-top:6vh}
}