/* ============================================================ * Wareed — Premium Visual Effects * Aurora backgrounds, glow cards, shimmer buttons, animated borders. * Respects prefers-reduced-motion. * ============================================================ */ /* ============================================================ * GLOBAL AMBIENT BACKGROUND (all pages) * A living, layered backdrop injected by effects.js as a single * fixed full-viewport layer behind everything. GPU-cheap: only * transform/opacity animate. Sits at z-index:-1 so it never * intercepts pointer events or causes layout shift. * ============================================================ */ /* The ambient layer lives at z-index:-1, so the page background must be * transparent for it to show through. Keep the near-black base on * as a fallback (and for the brief moment before JS injects the layer). */ html { background-color: #0A0A0F; } body { background-color: transparent !important; } .wareed-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; /* Deep base wash — gives the near-black void a touch of warmth/depth */ background: radial-gradient(120% 80% at 50% -10%, rgba(232, 185, 118, 0.05) 0%, transparent 55%), radial-gradient(100% 60% at 100% 110%, rgba(201, 153, 97, 0.04) 0%, transparent 60%), #0A0A0F; contain: strict; } /* Each blob is its own GPU layer; we animate only transform + opacity. */ .wareed-ambient .amb-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; mix-blend-mode: screen; } .amb-blob.amb-1 { width: 56vw; height: 56vw; max-width: 820px; max-height: 820px; top: -16vh; left: 50%; background: radial-gradient(circle, rgba(240, 200, 135, 0.42) 0%, rgba(232, 185, 118, 0) 62%); animation: amb-drift-1 26s ease-in-out infinite alternate; } .amb-blob.amb-2 { width: 48vw; height: 48vw; max-width: 700px; max-height: 700px; bottom: -20vh; left: -6vw; background: radial-gradient(circle, rgba(201, 153, 97, 0.34) 0%, rgba(201, 153, 97, 0) 65%); animation: amb-drift-2 32s ease-in-out infinite alternate; } .amb-blob.amb-3 { width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; top: 28vh; right: -10vw; background: radial-gradient(circle, rgba(232, 185, 118, 0.26) 0%, rgba(232, 185, 118, 0) 66%); animation: amb-drift-3 22s ease-in-out infinite alternate; } @keyframes amb-drift-1 { 0% { transform: translate(-52%, 2vh) scale(1); opacity: 0.4; } 100% { transform: translate(-48%, 7vh) scale(1.12); opacity: 0.55; } } @keyframes amb-drift-2 { 0% { transform: translate(0, 0) scale(1); opacity: 0.4; } 100% { transform: translate(6vw, -4vh) scale(1.15); opacity: 0.55; } } @keyframes amb-drift-3 { 0% { transform: translate(0, 0) scale(1.05); opacity: 0.3; } 100% { transform: translate(-5vw, 6vh) scale(0.92); opacity: 0.5; } } /* Soft radial vignette + film grain layered on top of the blobs for depth. * Grain is a tiny tiled SVG noise; vignette darkens the edges. */ .wareed-ambient .amb-vignette { position: absolute; inset: 0; background: radial-gradient(125% 95% at 50% 35%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); } .wareed-ambient .amb-grain { position: absolute; inset: -50%; width: 200%; height: 200%; opacity: 0.05; 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"); will-change: transform; animation: amb-grain-shift 8s steps(6) infinite; } @keyframes amb-grain-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } } /* ============================================================ * PREMIUM PAGE-OPEN / ENTRY SEQUENCE (fires once on load) * Hero elements tagged with [data-entry] start hidden (blurred, * pushed down) and reveal in a refined stagger once the body * gets .wareed-loaded (set by effects.js after first paint). * Distinct from the scroll-reveal used below the fold. * ============================================================ */ /* Initial hidden state — only applied while JS-capable & motion allowed. * The .wareed-entry-ready class is added to by effects.js *before* * paint, so there is no flash of fully-styled content. Without JS the * content simply stays visible (progressive enhancement). */ .wareed-entry-ready [data-entry] { opacity: 0; transform: translateY(22px); filter: blur(10px); will-change: transform, opacity, filter; /* Some pages kept the legacy .animate-in/fadeInUp classes alongside data-entry. A running CSS animation overrides the reveal declaration and locks the element at opacity:0. Neutralize it so the data-entry reveal is the sole controller. */ animation: none !important; } .wareed-entry-ready.wareed-loaded [data-entry] { opacity: 1; transform: translateY(0); filter: blur(0); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--entry-delay, 0s); } /* Staggered delays — eyebrow → headline → subline → CTAs → trust badges */ [data-entry="1"] { --entry-delay: 0.10s; } [data-entry="2"] { --entry-delay: 0.22s; } [data-entry="3"] { --entry-delay: 0.40s; } [data-entry="4"] { --entry-delay: 0.56s; } [data-entry="5"] { --entry-delay: 0.70s; } /* One-time gold gleam sweep across the headline on load. * A bright diagonal band masked to the text, swept once. * LTR sweeps left→right; RTL flips direction (see [dir=rtl] below). */ .wareed-entry-ready .hero-gleam { position: relative; } .wareed-entry-ready.wareed-loaded .hero-gleam::after { content: ''; position: absolute; inset: -0.1em -0.4em; pointer-events: none; background: linear-gradient( 100deg, transparent 38%, rgba(255, 244, 224, 0.55) 50%, transparent 62% ); mix-blend-mode: screen; /* sweep distance covers the element + padding */ transform: translateX(-130%); animation: hero-gleam-sweep 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.62s 1 both; } @keyframes hero-gleam-sweep { 0% { transform: translateX(-130%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } } /* RTL: sweep right→left so it reads correctly on the Arabic page */ [dir="rtl"] .wareed-entry-ready.wareed-loaded .hero-gleam::after, .wareed-entry-ready.wareed-loaded [dir="rtl"] .hero-gleam::after { background: linear-gradient( -100deg, transparent 38%, rgba(255, 244, 224, 0.55) 50%, transparent 62% ); animation-name: hero-gleam-sweep-rtl; } @keyframes hero-gleam-sweep-rtl { 0% { transform: translateX(130%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(-130%); opacity: 0; } } /* Brief intro veil — a solid #0A0A0F sheet that lifts to reveal the page. * Injected & removed by effects.js. Fast (~0.55s) so it never reads as a * loader. Never shown under reduced-motion. */ .wareed-veil { position: fixed; inset: 0; z-index: 9999; background: #0A0A0F; pointer-events: none; opacity: 1; transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .wareed-veil.wareed-veil-lift { opacity: 0; } /* ---------- Aurora background (replaces flat glow) ---------- */ .section-aurora { position: relative; isolation: isolate; } .section-aurora::before, .section-aurora::after { content: ''; position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(90px); will-change: transform; } .section-aurora::before { width: 720px; height: 720px; top: -120px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(232, 185, 118, 0.55) 0%, rgba(232, 185, 118, 0) 60%); animation: aurora-drift-a 14s ease-in-out infinite alternate; } .section-aurora::after { width: 560px; height: 560px; bottom: -160px; right: -80px; background: radial-gradient(circle, rgba(201, 153, 97, 0.40) 0%, rgba(201, 153, 97, 0) 65%); animation: aurora-drift-b 18s ease-in-out infinite alternate; } .section-aurora > * { position: relative; z-index: 1; } @keyframes aurora-drift-a { 0% { transform: translateX(-55%) translateY(-10px) scale(1); } 100% { transform: translateX(-45%) translateY(20px) scale(1.08); } } @keyframes aurora-drift-b { 0% { transform: translateX(0) translateY(0) scale(1); } 100% { transform: translateX(-30px) translateY(-15px) scale(1.12); } } /* ---------- Premium glow card ---------- */ .glow-card { position: relative; background: radial-gradient(circle at 50% 0%, rgba(232, 185, 118, 0.10) 0%, transparent 55%), radial-gradient(circle at 100% 100%, rgba(232, 185, 118, 0.06) 0%, transparent 60%), linear-gradient(180deg, rgba(19, 19, 27, 0.92) 0%, rgba(15, 15, 22, 0.94) 100%); border: 1px solid rgba(232, 185, 118, 0.18); border-radius: 24px; padding: 48px 32px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 -1px 0 rgba(232, 185, 118, 0.10) inset, 0 0 60px -10px rgba(232, 185, 118, 0.20), 0 0 120px -30px rgba(232, 185, 118, 0.30); overflow: hidden; } /* Subtle moving sheen at the top */ .glow-card::before { content: ''; position: absolute; top: 0; left: -50%; right: -50%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(232, 185, 118, 0) 20%, rgba(232, 185, 118, 0.8) 50%, rgba(232, 185, 118, 0) 80%, transparent 100% ); animation: card-sheen 8s linear infinite; pointer-events: none; } @keyframes card-sheen { 0% { transform: translateX(-30%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } /* ---------- Premium primary button ---------- */ .btn-premium { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; border-radius: 12px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; background: linear-gradient(180deg, #F0C887 0%, #E8B976 50%, #C99961 100%); color: #0A0A0F; overflow: hidden; cursor: pointer; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; box-shadow: 0 0 0 1px rgba(232, 185, 118, 0.5), 0 10px 30px -10px rgba(232, 185, 118, 0.5), 0 0 60px -10px rgba(232, 185, 118, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); isolation: isolate; } .btn-premium::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.4) 50%, transparent 75%); background-size: 200% 100%; background-position: 200% 0; transition: background-position 0.7s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 1; } .btn-premium > * { position: relative; z-index: 2; } .btn-premium:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 0 0 1px rgba(232, 185, 118, 0.7), 0 18px 40px -10px rgba(232, 185, 118, 0.6), 0 0 80px -10px rgba(232, 185, 118, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-premium:hover::before { background-position: -200% 0; } .btn-premium:active { transform: translateY(0) scale(0.99); } /* ---------- Premium secondary button (glass) ---------- */ .btn-glass { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; border-radius: 12px; font-weight: 500; font-size: 16px; background: rgba(255, 255, 255, 0.04); color: #FAFAFA; border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -8px rgba(0, 0, 0, 0.4); } .btn-glass:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(232, 185, 118, 0.4); color: #F0C887; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 40px -10px rgba(232, 185, 118, 0.2); } /* ---------- Headline shimmer ---------- */ .text-shine { background: linear-gradient(110deg, #E8B976 25%, #FFF1D6 45%, #E8B976 65%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine 6s linear infinite; text-shadow: 0 0 60px rgba(232, 185, 118, 0.25); } @keyframes shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Subtle floating ---------- */ .float-soft { animation: float-soft 6s ease-in-out infinite; } @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ---------- Trust badges row ---------- */ .trust-row { display: inline-flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; margin-top: 28px; padding: 12px 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); font-family: 'Geist Mono', monospace; font-size: 12px; color: #A1A1A8; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .trust-row .check { color: #E8B976; margin-right: 4px; } /* ---------- Section divider with gold gleam ---------- */ .section-divider { position: relative; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(232, 185, 118, 0.2) 30%, rgba(232, 185, 118, 0.6) 50%, rgba(232, 185, 118, 0.2) 70%, transparent 100% ); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .section-aurora::before, .section-aurora::after, .glow-card::before, .text-shine, .float-soft, .wareed-ambient .amb-blob, .wareed-ambient .amb-grain { animation: none !important; } /* Entry sequence: content appears instantly, no veil, no gleam. */ .wareed-entry-ready [data-entry], .wareed-entry-ready.wareed-loaded [data-entry] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .wareed-entry-ready.wareed-loaded .hero-gleam::after { display: none !important; } .wareed-veil { display: none !important; } } /* ---------- Mobile tweaks ---------- */ @media (max-width: 640px) { .glow-card { padding: 36px 22px; border-radius: 20px; } .section-aurora::before, .section-aurora::after { filter: blur(60px); } .section-aurora::before { width: 400px; height: 400px; } .btn-premium, .btn-glass { padding: 14px 24px; font-size: 15px; width: 100%; } /* Lighter ambient on phones: fewer/cheaper blurs, drop grain layer. */ .wareed-ambient .amb-blob { filter: blur(56px); opacity: 0.42; } .wareed-ambient .amb-blob.amb-3 { display: none; } .wareed-ambient .amb-grain { display: none; } /* Slightly gentler entry travel on small screens */ .wareed-entry-ready [data-entry] { transform: translateY(16px); } }