/* ============================================================ UAE PETROLEUM AND LOGISTICS — ANIMATION LIBRARY v2 Keyframes + ambient/floating/cinematic motion utilities ============================================================ */ /* —— Floating particles rising —— */ @keyframes floatUp { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } 10% { opacity: .7; } 90% { opacity: .5; } 100% { transform: translateY(-110vh) translateX(40px) scale(.4); opacity: 0; } } /* —— Scroll wheel —— */ @keyframes wheel { 0%{ transform: translate(-50%,0); opacity:1;} 70%{ transform: translate(-50%,14px); opacity:0;} 100%{opacity:0;} } /* —— WhatsApp ring pulse —— */ @keyframes ring { 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} } /* —— Map dash flow —— */ @keyframes dash { to { stroke-dashoffset: -28; } } /* —— Map pin pulse —— */ @keyframes pulse { 0% { transform: scale(1); opacity:.55; } 70% { transform: scale(3.4); opacity:0; } 100% { transform: scale(3.4); opacity:0; } } /* —— Map hub radar ring —— */ @keyframes ringSpin { to { transform: rotate(360deg); } } /* —— Marquee —— */ @keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} } /* —— Reveal helpers —— */ @keyframes fadeUp { from{ opacity:0; transform: translateY(20px);} to{ opacity:1; transform:none;} } /* opacity-only: must NOT animate transform on , or it becomes the containing block for position:fixed children (breaks the floating buttons). */ @keyframes pageIn { from{ opacity:0;} to{ opacity:1;} } /* —— Gradient shift (animated red gradients) —— */ @keyframes gradShift { 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} } .animated-grad { background-size: 220% 220%; animation: gradShift 9s ease infinite; } /* —— Floating ambient elements —— */ @keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} } .floaty { animation: floaty 6s ease-in-out infinite; } .floaty-slow { animation: floaty 9s ease-in-out infinite; } /* —— Soft pulsing glow —— */ @keyframes glowPulse { 0%,100%{ opacity:.4; transform: scale(1);} 50%{ opacity:.7; transform: scale(1.08);} } .glow-pulse { animation: glowPulse 5s ease-in-out infinite; } /* —— Shine sweep (used by .shine) —— */ @keyframes shine { 0%{ transform: translateX(-130%) skewX(-18deg);} 60%,100%{ transform: translateX(160%) skewX(-18deg);} } .shine { position:relative; overflow:hidden; } .shine::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-130%) skewX(-18deg); animation: shine 4.5s ease-in-out infinite; } /* —— Animated heading word reveal —— */ .reveal-words .word { display:inline-block; opacity:0; transform: translateY(46%) rotate(2deg); filter: blur(6px); animation: wordIn 1s var(--ease-out) forwards; } @keyframes wordIn { to { opacity:1; transform:none; filter: blur(0); } } /* —— Character shimmer for display text —— */ @keyframes textShimmer { 0%{ background-position: 200% center; } 100%{ background-position: -200% center; } } .text-shimmer { background: linear-gradient(110deg, #fff 42%, #ffb3ad 50%, #fff 58%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: textShimmer 5.5s linear infinite; } /* —— Count shimmer underline —— */ @keyframes underlineGrow { from { transform: scaleX(0);} to { transform: scaleX(1);} } /* —— Slow ken-burns pan for hero media —— */ @keyframes kenburns { 0% { transform: scale(1.12) translate3d(1.6%, 1%, 0); } 100% { transform: scale(1.02) translate3d(0, 0, 0); } } /* —— Aurora ambient drift (soft glow blobs) —— */ @keyframes aurora { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(4%, -6%, 0) scale(1.12); } 66% { transform: translate3d(-5%, 4%, 0) scale(.94); } } .aurora { animation: aurora 16s ease-in-out infinite; will-change: transform; } /* ============================================================ LOADER — cinematic brand intro with logo ============================================================ */ .loader { position:fixed; inset:0; z-index:3000; display:grid; place-items:center; overflow:hidden; background: var(--grad-cinematic); transition: opacity .7s var(--ease), visibility .7s; } .loader::before { /* ambient red aurora */ content:""; position:absolute; width:70vmax; height:70vmax; border-radius:50%; background: radial-gradient(circle, rgba(225,6,0,.28), transparent 60%); top:-25vmax; right:-20vmax; filter: blur(50px); animation: aurora 9s ease-in-out infinite; } .loader::after { /* film grain */ content:""; position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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"); background-size:150px 150px; } .loader.done { opacity:0; visibility:hidden; } .loader__inner { position:relative; z-index:2; text-align:center; transition: transform .7s var(--ease); } .loader.done .loader__inner { transform: scale(1.06); } /* logo emblem with orbiting rings */ .loader__logo { position:relative; width: clamp(96px, 16vw, 132px); height: clamp(96px, 16vw, 132px); margin: 0 auto 26px; } .loader__logo img { position:absolute; inset:18%; width:64%; height:64%; object-fit:contain; filter: drop-shadow(0 8px 26px rgba(225,6,0,.45)); animation: logoPop 1s var(--ease-out) both .15s; } .loader__ring { position:absolute; inset:0; border-radius:50%; background: conic-gradient(from 0deg, transparent 0 68%, rgba(255,90,77,.15) 78%, var(--red-bright) 92%, #fff 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); animation: ringSpin 1.6s linear infinite; } .loader__ring.r2 { inset:-11%; opacity:.5; background: conic-gradient(from 180deg, transparent 0 82%, rgba(255,255,255,.6) 96%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: ringSpin 2.6s linear infinite reverse; } .loader__logo::after { /* soft pulse behind the logo */ content:""; position:absolute; inset:8%; border-radius:50%; background: radial-gradient(circle, rgba(225,6,0,.3), transparent 65%); animation: glowPulse 2.4s ease-in-out infinite; } @keyframes logoPop { 0% { opacity:0; transform: scale(.72); filter: blur(8px) drop-shadow(0 8px 26px rgba(225,6,0,0)); } 100% { opacity:1; transform: scale(1); filter: blur(0) drop-shadow(0 8px 26px rgba(225,6,0,.45)); } } .loader__mark { font-family: var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:#fff; font-size: clamp(1.1rem,3vw,1.65rem); line-height:1.35; } .loader__mark span, .loader__mark em { display:inline-block; font-style:normal; } .loader__mark .l1 { animation: fadeUp .8s var(--ease-out) both .35s; } .loader__mark .l2 { display:block; font-size:.58em; letter-spacing:.4em; color:rgba(255,255,255,.72); animation: fadeUp .8s var(--ease-out) both .5s; } .loader__mark .text-grad-red { background: linear-gradient(135deg,#ff6a5e,#e10600); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .loader__bar { width: min(240px,56vw); height:3px; background: rgba(255,255,255,.14); border-radius:99px; margin: 22px auto 0; overflow:hidden; animation: fadeUp .8s var(--ease-out) both .62s; } .loader__bar i { display:block; height:100%; width:40%; background: linear-gradient(90deg, var(--red-bright), #fff); border-radius:99px; animation: loadbar 1.1s var(--ease) infinite; } @keyframes loadbar { 0%{ transform: translateX(-100%);} 100%{ transform: translateX(320%);} } .loader__sub { color: rgba(255,255,255,.55); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; margin-top:15px; animation: fadeUp .8s var(--ease-out) both .74s; } /* —— Tilt hover (JS-assisted) —— */ .tilt { transition: transform .25s var(--ease); transform-style: preserve-3d; will-change: transform; } /* —— Route draw (SVG) —— */ .draw-line { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); } .draw-line.in { animation: drawLine 2.2s var(--ease) forwards; } @keyframes drawLine { to { stroke-dashoffset: 0; } } /* —— Number ticking subtle bounce —— */ @keyframes pop { 0%{ transform: scale(.6); opacity:0;} 60%{ transform: scale(1.05);} 100%{ transform: scale(1); opacity:1;} } /* —— Hover glow utility —— */ .hover-glow { transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); } .hover-glow:hover { box-shadow: var(--shadow-red); transform: translateY(-4px); } /* —— Spin —— */ @keyframes spin { to { transform: rotate(360deg);} } .spin-slow { animation: spin 26s linear infinite; } /* —— Breathing glow on the primary hero CTA —— */ @keyframes ctaGlow { 0%,100% { box-shadow: 0 10px 28px rgba(225,6,0,.30); } 50% { box-shadow: 0 16px 44px rgba(225,6,0,.52), 0 0 0 4px rgba(225,6,0,.10); } } .hero__cta .btn:first-child { animation: ctaGlow 3.6s ease-in-out infinite; } .hero__cta .btn:first-child:hover { animation: none; } /* let hover shadow take over */ /* —— Big display marquee strip (giant scrolling words) —— */ .strip { overflow:hidden; padding-block: clamp(18px,2.6vw,30px); user-select:none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .strip__track { display:flex; gap: clamp(28px,4vw,56px); width:max-content; animation: marquee 26s linear infinite; align-items:center; } .strip--slow .strip__track { animation-duration: 38s; } .strip span { font-family: var(--font-display); text-transform:uppercase; font-weight:800; white-space:nowrap; font-size: clamp(1.7rem, 4.6vw, 3.6rem); letter-spacing:.04em; line-height:1; color: transparent; -webkit-text-stroke: 1.5px rgba(225,6,0,.34); } .strip span.fill { color: var(--red); -webkit-text-stroke: 0; } .strip .sep { width: clamp(9px,1.2vw,13px); height: clamp(9px,1.2vw,13px); border-radius:50%; background: var(--grad-red); flex:0 0 auto; box-shadow: 0 0 14px var(--red-glow); } .section--dark .strip span, .strip--light span { -webkit-text-stroke-color: rgba(255,255,255,.3); } .section--dark .strip span.fill, .strip--light span.fill { color:#fff; } /* —— Scroll-driven media reveal (clip wipe) —— */ [data-reveal="clip"] { clip-path: inset(12% 12% 12% 12% round 26px); opacity:0; transform:none; transition: clip-path 1.1s var(--ease-out), opacity .8s var(--ease-out); } [data-reveal="clip"].in { clip-path: inset(0 0 0 0 round 26px); opacity:1; } /* —— Reduced motion: gentle global kill-switch —— */ @media (prefers-reduced-motion: reduce) { .strip__track { animation: none !important; } .loader__ring, .loader__ring.r2, .loader__logo::after { animation: none !important; } .loader__logo img { animation: none !important; opacity:1; } .text-shimmer { animation: none !important; } .aurora { animation: none !important; } }