/* ===================================================================== MIHANI CIRCLE — Homa font + 3D depth + animation library Shared across every page. Tuned "tasteful & performant": heavy effects are disabled on touch devices and under prefers-reduced-motion. ===================================================================== */ /* ---------- HOMA FONT ---------- Drop Homa.woff2 / .woff / .ttf into assets/fonts/ (see README there). Falls back to Vazirmatn until the files exist. */ @font-face{ font-family:"Homa"; src:url("../assets/fonts/Homa.woff2") format("woff2"), url("../assets/fonts/Homa.woff") format("woff"), url("../assets/fonts/Homa.ttf") format("truetype"); font-weight:100 900; font-display:swap; } /* ---------- 3D STAGE ---------- Give big layout regions perspective so children can have real depth. */ .hero, .grid, .values, .shots, .timeline, .apps, .partners-grid, .detail-hero{ perspective:1400px; } /* generic 3D-tilt card base (used by app/partner cards). The JS in app.js (wireTilt) drives the live mouse rotation; this just sets the stage + a resting depth + smooth return. */ .tilt-3d{ transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; will-change:transform; } /* lift content off the card face for parallax depth */ .card-top, .card-foot{ transform:translateZ(18px); } .feature .ic{ transform:translateZ(26px); } .feature h3{ transform:translateZ(16px); } /* layered depth shadow on hover for any card */ .card:hover, .feature:hover, .partner-card:hover{ box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 40px 80px color-mix(in srgb,var(--primary) 22%,transparent); } /* ---------- ENTRANCE ANIMATIONS ---------- Reuses the existing .reveal/.in system but adds variety + 3D. */ .reveal{opacity:0;transform:translateY(28px)} .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .reveal-3d{opacity:0;transform:perspective(1200px) rotateX(12deg) translateY(40px)} .reveal-3d.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.9,.25,1)} .reveal-left{opacity:0;transform:translateX(-40px)} .reveal-left.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} [dir="rtl"] .reveal-left{transform:translateX(40px)} .reveal-right{opacity:0;transform:translateX(40px)} .reveal-right.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} [dir="rtl"] .reveal-right{transform:translateX(-40px)} /* stagger helper: set --i on children for cascading delays */ .stagger > *{transition-delay:calc(var(--i,0) * .07s)} /* pop-in for cards on first paint */ @keyframes cardPop{ 0%{opacity:0;transform:translateY(26px) scale(.96) rotateX(8deg)} 100%{opacity:1;transform:none} } .card-pop{animation:cardPop .6s cubic-bezier(.2,.9,.25,1) both} /* ---------- PAGE TRANSITION ---------- Whole page fades/slides up on load; fades out before navigating away. */ /* opacity-only on so it never creates a containing block that would break position:fixed for the loader / robot widget. */ @keyframes pageIn{from{opacity:0}to{opacity:1}} body.page-anim{animation:pageIn .5s ease both} body.page-leaving{opacity:0;transition:opacity .28s ease} /* ---------- BUTTON / LINK DEPTH ---------- */ .btn{transform-style:preserve-3d} .btn:active{transform:translateY(1px) scale(.97)} .nav-links a{transition:color .2s,background .2s,transform .2s} .nav-links a:hover{transform:translateY(-2px)} /* floating animation utility */ @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .float{animation:floatY 5s ease-in-out infinite} /* gentle pulse */ @keyframes softPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .pulse{animation:softPulse 3s ease-in-out infinite} /* shimmering gradient text (brand headings) */ @keyframes gradShift{0%{background-position:0% 50%}100%{background-position:200% 50%}} .grad{ background:linear-gradient(120deg,var(--primary-2),var(--primary),var(--primary-2)); background-size:200% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:gradShift 6s linear infinite alternate; } /* section titles get a subtle 3D underline sweep on reveal */ .section-title.reveal.in::after{ content:"";display:block;height:3px;width:64px;margin-top:10px;border-radius:3px; background:linear-gradient(90deg,var(--primary),transparent); animation:lineGrow .8s .2s both; } [dir="rtl"] .section-title.reveal.in::after{background:linear-gradient(270deg,var(--primary),transparent)} @keyframes lineGrow{from{width:0;opacity:0}to{width:64px;opacity:1}} /* ---------- PERFORMANCE / ACCESSIBILITY GUARDS ---------- */ /* disable mouse-driven 3D tilt on touch devices (handled in JS too) */ @media (hover:none),(pointer:coarse){ .tilt-3d{transform:none !important} .card-top,.card-foot,.feature .ic,.feature h3{transform:none} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal,.reveal-3d,.reveal-left,.reveal-right{opacity:1 !important;transform:none !important} .float,.pulse,.grad{animation:none !important} }