/* monomyfilm — صفحهٔ ورود سینمایی */
:root{
  --void:#050507;--plate:rgba(14,14,19,.78);--line:#26262f;--ink:#f4f4f7;--dim:#8f8f9c;
  --accent:#ffe100;--accent-deep:#c7ae00;--bad:#ff5468;
  --font:"Vazirmatn","IRANSansX","IRANSans","Segoe UI",Tahoma,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--void);color:var(--ink);font:15px/1.8 var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* --- صحنه ------------------------------------------------------------ */
.stage{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.beam{position:absolute;top:-30vh;left:50%;width:140vmax;height:140vmax;transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(255,225,0,.10) 176deg,rgba(255,225,0,.22) 180deg,rgba(255,225,0,.10) 184deg,transparent 200deg);
  filter:blur(18px);animation:flicker 7s infinite steps(1)}
@keyframes flicker{0%,100%{opacity:1}42%{opacity:.86}43%{opacity:1}71%{opacity:.9}72%{opacity:1}}
.grain{position:absolute;inset:-50%;opacity:.07;
  background-image:repeating-radial-gradient(circle at 17% 32%,#fff 0 1px,transparent 1px 3px),repeating-radial-gradient(circle at 73% 61%,#fff 0 1px,transparent 1px 4px);
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.bars{position:absolute;inset-inline:0;height:9vh;background:#000;z-index:2;animation:bars 1.1s var(--ease) both}
.bars.top{top:0;transform-origin:top}
.bars.bottom{bottom:0;transform-origin:bottom}
@keyframes bars{from{transform:scaleY(5.6)}}
.strip{position:absolute;top:0;bottom:0;width:34px;opacity:.35;
  background:#000 repeating-linear-gradient(to bottom,transparent 0 10px,#1c1c22 10px 26px,transparent 26px 36px);
  background-size:14px 36px;background-position:center;background-repeat:repeat-y;border-inline:1px solid #17171d}
.strip.left{left:0}.strip.right{right:0}

/* --- دروازه ---------------------------------------------------------- */
.gate{position:relative;z-index:3;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:12vh 20px 12vh}
.marquee{text-align:center;animation:rise 1s .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.frame-logo{display:inline-block;width:96px;height:70px;overflow:hidden;position:relative;background:#000;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);box-shadow:0 0 0 1px var(--line)}
.frame-logo img{position:absolute;width:148px;height:148px;left:50%;top:50%;transform:translate(-50%,-47%)}
.title{margin:14px 0 2px;font:800 clamp(34px,8vw,64px)/1 var(--font);letter-spacing:.14em;text-transform:lowercase;color:#fff}
.title span{display:inline-block;animation:letter .8s calc(.8s + var(--i) * 55ms) var(--ease) both;
  text-shadow:0 0 22px rgba(255,225,0,.35)}
.title span:nth-child(-n+6){color:var(--accent)}
@keyframes letter{from{opacity:0;transform:translateY(22px) scaleY(1.4);filter:blur(6px)}}
.tagline{margin:8px 0 0;color:var(--dim);font-size:13px}
.slate{display:flex;justify-content:center;gap:0;margin-top:14px;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#6d6d78}
.slate span{padding:6px 10px;border:1px solid #23232b}
.slate span+span{border-inline-start:0}

/* --- کارت ------------------------------------------------------------ */
.card{width:min(380px,100%);padding:24px;background:var(--plate);backdrop-filter:blur(14px);border:1px solid var(--line);
  clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px);position:relative;animation:rise .9s 1.1s var(--ease) both}
.card::after{content:"";position:absolute;top:0;inset-inline-end:0;width:54px;height:3px;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.alert{margin:0 0 14px;padding:9px 12px;border:1px solid rgba(255,84,104,.45);background:rgba(255,84,104,.08);color:#ffb3bd;font-size:12.5px}
.field{display:block;margin-bottom:14px}
.field span{display:block;margin-bottom:6px;font-size:11.5px;color:var(--dim)}
.field input{width:100%;padding:12px 14px;background:#07070a;border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,225,0,.12)}
.remember{display:flex;align-items:center;gap:8px;margin:2px 0 16px;font-size:12px;color:var(--dim)}
.remember input{accent-color:var(--accent)}
.go{position:relative;width:100%;min-height:48px;border:0;background:var(--accent);color:#0a0a0c;font:800 15px var(--font);cursor:pointer;overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px);box-shadow:0 10px 34px -10px var(--accent);transition:transform .15s}
.go:hover{background:var(--accent-deep)}
.go:active{transform:translateY(1px)}
.go i{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 3.4s 2s infinite}
@keyframes sheen{to{transform:translateX(120%)}}
.go span{position:relative}
.lost{display:block;margin-top:14px;text-align:center;font-size:11.5px;color:var(--dim);text-decoration:none}
.lost:hover{color:var(--accent)}
.credit{font-size:10.5px;color:#4f4f59;letter-spacing:.08em}

@media(max-width:520px){.strip{display:none}.bars{height:6vh}.gate{padding:9vh 16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}