html{scroll-behavior:smooth}html,body,#root{min-height:100%}body{margin:0;background:#3b0a45;font-family:IBM Plex Sans Arabic,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.font-display{font-family:Lalezar,IBM Plex Sans Arabic,sans-serif}.font-poem{font-family:Amiri,serif}.font-hand{font-family:Aref Ruqaa,serif}.font-kufi{font-family:Reem Kufi,sans-serif}.label{font-family:Reem Kufi,sans-serif;font-size:.75rem;letter-spacing:.08em;opacity:.7}.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .85rem;border-radius:999px;font-size:.85rem;background:#0000001f;border:1px solid rgba(255,255,255,.15);transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s}.chip:hover{background:#00000038;transform:translateY(-2px) rotate(-2deg)}.chip:active{transform:scale(.94)}.chip.on{background:#ffd60a;color:#3b0a45;border-color:transparent}.cta{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:999px;font-weight:700;font-size:1.05rem;box-shadow:0 6px #3b0a4573;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}.cta:nth-child(1){rotate:-3deg}.cta:nth-child(2){rotate:2deg}.cta:nth-child(3){rotate:-1deg}.cta:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 10px #3b0a4573}.cta:active{transform:translateY(3px);box-shadow:0 2px #3b0a4573}:focus-visible{outline:3px solid #ffd60a;outline-offset:3px}.float-card{background:#ffffff0f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:1rem;box-shadow:0 20px 40px #00000040,0 1px #ffffff0f inset}.reveal{opacity:0;transform:translate(var(--shift, 0px),60px) rotate(calc(var(--tilt, 0deg) * 5)) scale(.88);transition:opacity .5s ease,transform .8s cubic-bezier(.34,1.56,.64,1);will-change:transform}.reveal.in{opacity:1;transform:translate(var(--shift, 0px)) rotate(var(--tilt, 0deg))}.reveal.in:hover{transform:translate(var(--shift, 0px)) translateY(-6px) rotate(0) scale(1.02);transition-duration:.5s,.35s;position:relative;z-index:5}@media (max-width: 640px){.reveal{--shift: 0px !important}}.word{display:inline-block;opacity:0}.in .word{animation:wordIn .7s cubic-bezier(.34,1.56,.64,1) var(--d, 0ms) both}@keyframes wordIn{0%{opacity:0;transform:translateY(.7em) rotate(-8deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}.scanline{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,rgba(110,231,183,.18) 50%,transparent 100%);background-size:100% 30%;background-repeat:no-repeat;animation:scan 3.5s linear infinite}@keyframes scan{0%{background-position:0 -40%}to{background-position:0 140%}}.draw{stroke-dasharray:1;stroke-dashoffset:1}.in .draw{animation:draw 1.2s ease-out both}@keyframes draw{to{stroke-dashoffset:0}}.node{transform-box:fill-box;transform-origin:center;animation:breathe 2.6s ease-in-out infinite;transition:fill .2s}.node:hover{fill:#ffd60a}@keyframes breathe{50%{transform:scale(1.25)}}.glitch{animation:glitch 5s steps(1) infinite}.glitch-card:hover .glitch{animation-duration:.4s}@keyframes glitch{0%,88%,to{transform:none;text-shadow:none}90%{transform:translate(-3px,1px) skew(-6deg);text-shadow:3px 0 #ff006e,-3px 0 #00f5d4}93%{transform:translate(3px,-1px);text-shadow:-2px 0 #ff006e,2px 0 #00f5d4}96%{transform:translateY(2px) skew(4deg);text-shadow:1px 0 #ffd60a}}.note{border-radius:4px 4px 18px;animation:sway 6s ease-in-out infinite;transform-origin:top center}@keyframes sway{50%{transform:rotate(2.5deg)}}.spin-slow{animation:spin360 22s linear infinite}@keyframes spin360{to{transform:rotate(360deg)}}.pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes pop{0%{transform:scale(0) rotate(-40deg)}}.banana-spin{animation:bananaSpin 6s linear infinite}.banana-spin.fast{animation-duration:.6s}@keyframes bananaSpin{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.hero{background:linear-gradient(160deg,#f2b95b,#e76f51 30%,#9b2d20 60%,#3b0a45);background-size:220% 220%;animation:skyShift 16s ease-in-out infinite alternate}@keyframes skyShift{0%{background-position:0% 0%}to{background-position:100% 100%}}.sun{position:absolute;top:10%;left:50%;width:min(70vw,520px);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,#ffe08a 0%,#f2b95b 40%,transparent 70%);filter:blur(6px);opacity:.75;animation:sunrise 2.4s cubic-bezier(.16,1,.3,1) both,glow 7s ease-in-out 2.4s infinite}@keyframes sunrise{0%{transform:translateY(40%) scale(.6);opacity:0}}@keyframes glow{50%{transform:scale(1.08);opacity:.9}}.dunes{animation:dunes 9s ease-in-out infinite alternate}@keyframes dunes{to{transform:translate(-4%)}}.title-word{display:inline-block;rotate:var(--r, 0deg);text-shadow:0 5px 0 rgba(59,10,69,.45);animation:dropIn .9s cubic-bezier(.34,1.56,.64,1) var(--d, 0s) both;transition:transform .3s cubic-bezier(.34,1.56,.64,1);cursor:default}.title-word:hover{transform:translateY(-8px) scale(1.08) rotate(-4deg)}@keyframes dropIn{0%{opacity:0;transform:translateY(-140%) rotate(-25deg) scale(1.4)}to{opacity:1;transform:none}}.fade-up{animation:fadeUp .8s cubic-bezier(.16,1,.3,1) var(--d, 0s) both}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}}.greeting{animation:flipIn .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes flipIn{0%{opacity:0;transform:rotateX(90deg) translateY(-10px)}}.bounce{animation:bounce 1.6s ease-in-out infinite}@keyframes bounce{50%{transform:translateY(10px)}}.sticker{animation:popIn .7s cubic-bezier(.34,1.56,.64,1) var(--delay, 0s) both;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.sticker-inner{rotate:var(--r, 0deg);animation:wobble 4s ease-in-out var(--wd, 0s) infinite;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25));transition:scale .2s cubic-bezier(.34,1.56,.64,1),filter .2s}.sticker:hover .sticker-inner{scale:1.12}.sticker.dragging{cursor:grabbing;z-index:30}.sticker.dragging .sticker-inner{scale:1.25;filter:drop-shadow(0 18px 14px rgba(0,0,0,.35))}@keyframes popIn{0%{opacity:0;transform:scale(0) rotate(180deg)}}@keyframes wobble{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-8px) rotate(5deg)}66%{transform:translateY(4px) rotate(-4deg)}}.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}.marquee-track.rev{animation-direction:reverse}.marquee-track>span{white-space:nowrap;padding-inline:1rem}@keyframes marquee{to{transform:translate(-50%)}}.trail{position:absolute;font-family:Lalezar,sans-serif;font-size:22px;translate:-50% -50%;animation:trail 1s ease-out forwards}@keyframes trail{0%{transform:scale(1.3)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.3)}}.wall-hint{animation:hint 2.2s ease-in-out infinite}@keyframes hint{50%{opacity:.4;transform:scale(.96) rotate(-2deg)}}.sky,.sky:after{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}.sky{background:linear-gradient(to bottom,#f2b95b,#e76f51 45%,#9b2d20)}.sky:after{content:"";background:radial-gradient(circle at 80% 15%,rgba(255,214,10,.18),transparent 25%),linear-gradient(to bottom,#9b2d20,#3b0a45 55%,#12021a);opacity:var(--night, 0)}.grain{position:fixed;top:-50%;right:-50%;bottom:-50%;left:-50%;pointer-events:none;z-index:60;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(4) infinite}@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}html.calm{scroll-behavior:auto}html.calm *,html.calm *:before,html.calm *:after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
