/* Style intent — «چاپِ اعتراض»: زمینهٔ کاغذی گرم، ذغالیِ خوانا، سفالینِ خاموش و حرکت‌های کوتاه. */
:root { --paper: #f8f1e4; --ink: #2e2925; --terracotta: #b85a3d; --muted: #6d625a; }
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { min-height: 100%; margin: 0; background: var(--paper); color: var(--ink); font-family: "Vazirmatn", Tahoma, sans-serif; }
button { cursor: pointer; font: inherit; }
.site-shell { position: relative; isolation: isolate; display: flex; min-height: 100svh; overflow: hidden; align-items: center; padding: clamp(5.5rem, 10vw, 9rem) clamp(1.5rem, 10vw, 10rem); background: var(--paper); }
.site-shell::before { position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(var(--ink) .75px, transparent .75px); background-size: 11px 11px; opacity: .055; content: ""; }
.site-texture { position: absolute; z-index: -2; inset: 0; background: url("assets/not-ready-hero-texture.jpg") center / cover; opacity: .23; transform: scale(1.04); }
.reaction-pattern { position: absolute; z-index: -1; top: -1.5rem; left: -10rem; width: min(72rem, 80vw); opacity: .43; mix-blend-mode: multiply; transform: rotate(-4deg); }
.brand-corner { position: absolute; top: clamp(1.25rem, 3vw, 2.75rem); right: clamp(1.25rem, 4vw, 5rem); display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border: .2rem solid var(--ink); background: var(--paper); box-shadow: .25rem .25rem 0 var(--terracotta); transform: rotate(4deg); }
.brand-logo { width: 3.65rem; height: 3.65rem; object-fit: contain; transform: rotate(-4deg); }
.message-panel { position: relative; max-width: 50rem; animation: lift-in 580ms cubic-bezier(.23,1,.32,1) both; }
.message-panel.is-protesting { animation: protest-wobble 540ms cubic-bezier(.23,1,.32,1) both; }
.message-panel h1 { margin: 0; color: var(--ink); font-size: clamp(2.8rem, 5.7vw, 6.35rem); font-weight: 900; letter-spacing: -.065em; line-height: 1.12; }
.protest-button { min-height: 3.7rem; margin-top: 2.35rem; padding: .7rem 1.75rem; border: 1px solid var(--ink); border-radius: 0; background: var(--terracotta); box-shadow: .33rem .33rem 0 var(--ink); color: #fffaf0; font-size: 1.05rem; font-weight: 800; transition: transform 160ms cubic-bezier(.23,1,.32,1), box-shadow 160ms cubic-bezier(.23,1,.32,1), background 160ms ease; }
.protest-button:hover { background: #9d442e; transform: translate(-.14rem,-.14rem); box-shadow: .47rem .47rem 0 var(--ink); }
.protest-button:active { transform: translate(.13rem,.13rem) scale(.97); box-shadow: .15rem .15rem 0 var(--ink); }
.protest-button:focus-visible, .close-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.protest-button.is-protesting { animation: stamp-pop 450ms cubic-bezier(.23,1,.32,1) both; }
.protest-counter { min-height: 1.8em; margin: 1.2rem 0 0; color: var(--muted); font-size: clamp(.9rem, 1.15vw, 1rem); font-weight: 500; }
.side-note { position: absolute; bottom: clamp(1.5rem, 5vw, 4rem); left: clamp(1rem, 7vw, 8rem); transform: rotate(-8deg); }
.side-note img { width: 4rem; height: 4rem; object-fit: contain; filter: contrast(1.2) saturate(.9); }
.reaction-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 1.25rem; background: rgb(46 41 37 / .74); backdrop-filter: blur(5px); animation: fade-in 200ms ease-out both; }
.reaction-backdrop[hidden] { display: none; }
.reaction-dialog { width: min(100%, 43rem); overflow: hidden; border: 1px solid var(--ink); background: #fffaf0; box-shadow: .65rem .65rem 0 var(--terracotta); animation: dialog-in 250ms cubic-bezier(.23,1,.32,1) both; }
.dialog-heading { display: flex; align-items: center; justify-content: flex-start; padding: .35rem .55rem; }
.close-button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; background: transparent; color: var(--muted); font-size: 1.75rem; font-weight: 500; line-height: 1; }
.close-button:hover { color: var(--terracotta); }
.reaction-dialog img { display: block; width: 100%; height: auto; border-top: 1px solid var(--ink); }
@keyframes lift-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(.75rem) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes protest-wobble { 0%,100% { transform: translateX(0) rotate(0); } 18% { transform: translateX(-.55rem) rotate(-1deg); } 39% { transform: translateX(.42rem) rotate(.75deg); } 61% { transform: translateX(-.25rem) rotate(-.4deg); } }
@keyframes stamp-pop { 0% { transform: translate(0,0) scale(1); } 35% { transform: translate(-.3rem,-.3rem) rotate(-3deg) scale(1.08); } 70% { transform: translate(.15rem,.15rem) rotate(1deg) scale(.97); } 100% { transform: translate(0,0) scale(1); } }
@media (max-width: 640px) { .site-shell { align-items: flex-start; padding-top: 9rem; } .message-panel h1 { font-size: clamp(2.45rem, 12vw, 4.4rem); } .reaction-pattern { top: 35%; left: -16rem; width: 46rem; } .side-note { bottom: 1rem; left: 1rem; } .brand-corner { width: 3.8rem; height: 3.8rem; } .brand-logo { width: 3.05rem; height: 3.05rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }