/* ========================================================================== animations.css · Keyframes, entrance animations, glow & hover effects All motion lives here — if animations ever need to be switched off, removing this file alone leaves the layout intact. -------------------------------------------------------------------------- 01. Keyframes 02. Page-load entrance (data-anim) 03. Scroll reveal (data-reveal) 04. Glow & hover effects 05. Text effects 06. Reduced motion ========================================================================== */ /* ========================================================================== 01. KEYFRAMES ========================================================================== */ @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} } @keyframes fadeUp{ from{opacity:0;transform:translateY(32px);} to{opacity:1;transform:translateY(0);} } @keyframes fadeLeft{ from{opacity:0;transform:translateX(44px);} to{opacity:1;transform:translateX(0);} } @keyframes fadeRight{ from{opacity:0;transform:translateX(-44px);} to{opacity:1;transform:translateX(0);} } @keyframes maskUp{ from{opacity:0;transform:translateY(105%) rotate(2deg);} to{opacity:1;transform:translateY(0) rotate(0);} } @keyframes zoomIn{ from{opacity:0;transform:scale(.92);} to{opacity:1;transform:scale(1);} } @keyframes mmIn{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} } @keyframes drawShape{ to{stroke-dashoffset:0;} } @keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(212,175,55,.65);} 70%{box-shadow:0 0 0 9px rgba(212,175,55,0);} 100%{box-shadow:0 0 0 0 rgba(212,175,55,0);} } @keyframes waPulse{ 0%{transform:scale(1);opacity:.9;} 70%{transform:scale(1.45);opacity:0;} 100%{transform:scale(1.45);opacity:0;} } @keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} } @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @keyframes scrollDot{ 0%{transform:translateY(0);opacity:1;} 70%{transform:translateY(12px);opacity:0;} 100%{transform:translateY(0);opacity:0;} } @keyframes goldSweep{ 0%{background-position:-200% center;} 100%{background-position:200% center;} } @keyframes glowPulse{ 0%,100%{box-shadow:0 0 18px rgba(212,175,55,.20);} 50%{box-shadow:0 0 40px rgba(212,175,55,.42);} } @keyframes borderTravel{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} } @keyframes spinSlow{ to{transform:rotate(360deg);} } /* Idle 3D float for the hero code window — a slow figure-of-eight rotation on two axes so the card always feels alive, even before the user's cursor arrives to drive the reactive tilt. */ @keyframes codeFloat3D{ 0%,100%{transform:perspective(1600px) rotateY(-14deg) rotateX(6deg) translateY(0);} 25%{transform:perspective(1600px) rotateY(-8deg) rotateX(10deg) translateY(-8px);} 50%{transform:perspective(1600px) rotateY(-16deg) rotateX(3deg) translateY(2px);} 75%{transform:perspective(1600px) rotateY(-10deg) rotateX(8deg) translateY(-6px);} } @keyframes chipPop{ 0%{transform:scale(.85);} 55%{transform:scale(1.08);} 100%{transform:scale(1);} } /* ========================================================================== 02. PAGE-LOAD ENTRANCE (data-anim) -------------------------------------------------------------------------- Use:

--d = delay. The animation runs on page load (no JS required). ========================================================================== */ [data-anim]{opacity:0;animation-duration:.9s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards;animation-delay:var(--d,0s);} [data-anim="fade"]{animation-name:fadeIn;} [data-anim="fade-up"]{animation-name:fadeUp;} [data-anim="fade-left"]{animation-name:fadeLeft;} [data-anim="fade-right"]{animation-name:fadeRight;} [data-anim="zoom"]{animation-name:zoomIn;} /* Mask = text line neeche se upar aati hai (hero headings) */ [data-anim="mask"]{animation-name:maskUp;animation-duration:1s;} /* Pause entrances while the preloader is running; play once the page is ready */ body.is-loading [data-anim]{animation-play-state:paused;} /* ========================================================================== 03. SCROLL REVEAL (data-reveal) -------------------------------------------------------------------------- The JS IntersectionObserver (in main.js) adds the `is-revealed` class. Grid children get an automatic stagger. ========================================================================== */ [data-reveal]{ opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); will-change:opacity,transform; } [data-reveal].is-revealed{opacity:1;transform:translateY(0);} /* Stagger — grid / list children */ .svc-grid > [data-reveal], .deliv-grid > [data-reveal], .proj-grid > [data-reveal], .edu-grid > [data-reveal], .value-grid > [data-reveal], .why-grid > [data-reveal], .pkg-grid > [data-reveal], .now-grid > [data-reveal], .cinfo-grid > [data-reveal], .gallery-grid > [data-reveal], .skill-cat-grid > [data-reveal], .related-grid > [data-reveal], .srv-rows > [data-reveal], .process-line > [data-reveal]{transition-delay:calc(var(--stagger,0) * 90ms);} /* ========================================================================== 04. GLOW & HOVER EFFECTS ========================================================================== */ /* Gold glow ring that traces around cards on hover */ /* ========================================================================== CODE CARD — personal image background + glass + 3D float + hover tilt -------------------------------------------------------------------------- Idle: codeFloat3D animation (Section 01) Hover: animation pause + JS-driven cursor-side inward tilt ========================================================================== */ .code-card{ position:relative; isolation:isolate; border-radius:18px; overflow:hidden; transform-style:preserve-3d; perspective:1600px; /* Personal image + dark gradient overlay so code stays readable */ background: linear-gradient(135deg, rgba(6,6,10,.62) 0%, rgba(15,12,8,.48) 45%, rgba(6,6,10,.68) 100%), url('/images/obaid-about.jpg') center / cover no-repeat; /* Glass effect */ backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(212,175,55,.30); /* Idle 3D rotation — hamesha chalti rahegi */ animation:codeFloat3D 18s ease-in-out infinite; transition: box-shadow .5s var(--ease-out, ease), border-color .5s ease; } /* Code header + body always above the background */ .code-card .code-head, .code-card .code-body{position:relative;z-index:2;} /* Internal glow (existing .code-glow element) — controlled */ .code-card .code-glow{ position:absolute;inset:-30%;z-index:1;pointer-events:none; background:radial-gradient(circle at 50% 50%, rgba(212,175,55,.22), transparent 65%); opacity:.6; transition:opacity .5s ease; } /* ───────────── HOVER ───────────── */ .code-card:hover{ animation-play-state:paused; /* idle rotation ruk jati hai */ border-color:rgba(212,175,55,.85); /* border glow zyada */ box-shadow: 0 32px 90px rgba(0,0,0,.65), 0 0 60px rgba(212,175,55,.55), /* pehle se ~2x bara */ 0 0 150px rgba(212,175,55,.28); /* bahar tak spread */ } .code-card:hover .code-glow{opacity:1;} .code-body{ text-shadow:0 0 6px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.95); } .svc-card::before, .proj-card::before, .pkg-card::before, .deliv-card::before{ content:'';position:absolute;inset:-1px;border-radius:inherit; padding:1px;pointer-events:none; background:linear-gradient(135deg,rgba(212,175,55,.55),transparent 40%,transparent 60%,rgba(212,175,55,.35)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .45s ease; } .svc-card:hover::before, .proj-card:hover::before, .pkg-card:hover::before, .deliv-card:hover::before{opacity:1;} /* Icon glow */ .svc-card:hover .svc-icon, .srv-row:hover .srv-row-icon{box-shadow:0 0 26px rgba(212,175,55,.45);} /* Continuous soft glow on every gold button */ .btn-gold{animation:glowPulse 4s ease-in-out infinite;} .btn-gold:hover{animation-play-state:paused;} /* Filter buttons, chips and the active nav pill also breathe gently */ .filter-btn.is-active, .f-chip input:checked + span{animation:glowPulse 4s ease-in-out infinite;} /* Back-to-top ring fill */ .back-to-top.is-visible .btt-ring circle{ transition:stroke-dashoffset .2s linear; } /* Nav link underline travel */ .nav-link{position:relative;overflow:hidden;} .nav-link::before{ content:'';position:absolute;left:0;bottom:0;width:100%;height:1px; background:var(--grad-line);transform:translateX(-100%); } .nav-link:hover::before{animation:borderTravel .7s ease;} /* Image hover lift */ .gal-item,.work-media,.photo-frame{transition:box-shadow .5s var(--ease);} .gal-item:hover,.work-media:hover{box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 26px rgba(212,175,55,.16);} /* Tech chip shimmer on hover */ .tech-chip{position:relative;overflow:hidden;} .tech-chip::after{ content:'';position:absolute;top:0;left:-100%;width:50%;height:100%; background:linear-gradient(110deg,transparent,rgba(212,175,55,.22),transparent); transform:skewX(-20deg);transition:left .7s var(--ease); } .tech-chip:hover::after{left:160%;} /* Stat numbers glow when revealed */ .stats-band .stat-box b{transition:text-shadow .6s ease;} .stats-band [data-reveal].is-revealed .stat-box b, .stats-band.is-revealed .stat-box b{text-shadow:0 0 30px rgba(212,175,55,.35);} /* ========================================================================== 05. TEXT EFFECTS ========================================================================== */ /* Gold gradient text with a moving shine sweep */ .hero-title .gold-text{ background:linear-gradient(90deg,var(--gold-600),var(--gold-100),var(--gold-400),var(--gold-600)); background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; animation:goldSweep 7s linear infinite; } /* Give counter numbers a monospaced feel (so digits don't jump) */ .counter{font-variant-numeric:tabular-nums;} /* Section title underline that grows on reveal */ .sec-title{position:relative;} /* ========================================================================== 06. REDUCED MOTION -------------------------------------------------------------------------- Anyone with "reduce motion" enabled at the OS level gets the static version. ========================================================================== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } [data-anim],[data-reveal]{opacity:1 !important;transform:none !important;} .marquee-track{animation:none !important;} .float-chip{animation:none !important;} .cursor-dot,.cursor-ring{display:none !important;} .code-card{animation:none !important;} .btn-gold,.filter-btn.is-active,.f-chip input:checked + span{animation:none !important;} }