/* Source: final-fluo-progress-fix */ /* Final authoritative fix: the scrolling progress line is 100% fluorescent yellow. */ .ic-progress, .ic-premium-progress{ background:#ccff00 !important; background-image:none !important; background-color:#ccff00 !important; box-shadow: 0 0 8px rgba(204,255,0,.90), 0 0 18px rgba(204,255,0,.45) !important; border:0 !important; } /* Remove any static line under the navigation so only the scrolling line remains visible. */ .nav::after{ display:none !important; content:none !important; } /* ========================================================= POINT 2 — HERO TEXT, SUBTLE STAGGERED ENTRANCE Title → quotation → signature, 100 ms apart ========================================================= */ .about-hero-premium h1, .about-hero-premium .about-hero-statement, .about-hero-premium .about-hero-signature{ opacity:0; will-change:opacity,transform,filter; animation-name:aboutHeroTextEntrance; animation-duration:1100ms; animation-timing-function:cubic-bezier(.16,1,.3,1); animation-fill-mode:forwards; } .about-hero-premium h1{ animation-delay:220ms; } .about-hero-premium .about-hero-statement{ animation-delay:320ms; } .about-hero-premium .about-hero-signature{ animation-delay:420ms; } @keyframes aboutHeroTextEntrance{ 0%{ opacity:0; transform:translate3d(0,14px,0); filter:blur(3px); } 55%{ opacity:.72; } 100%{ opacity:1; transform:translate3d(0,0,0); filter:blur(0); } } @media (prefers-reduced-motion:reduce){ .about-hero-premium h1, .about-hero-premium .about-hero-statement, .about-hero-premium .about-hero-signature{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; } } /* POINT 3 — ULTRA-SUBTLE PREMIUM BACKGROUND TEXTURE */ .ic-premium-noise{ position:fixed; inset:-50%; width:200%; height:200%; z-index:74; pointer-events:none; opacity:.015; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); background-repeat:repeat; background-size:180px 180px; mix-blend-mode:multiply; transform:translate3d(0,0,0); animation:icPremiumNoiseShift 18s steps(2,end) infinite; } @keyframes icPremiumNoiseShift{ 0%,100%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-1.2%,.8%,0)} 50%{transform:translate3d(.7%,-1%,0)} 75%{transform:translate3d(-.6%,-.4%,0)} } @media (prefers-reduced-motion:reduce){ .ic-premium-noise{animation:none;} } /* ========================================================= FINAL VERIFIED LOCK — POINTS 1, 2 & 3 These rules intentionally come last to prevent old effects from overriding the verified premium refinements. ========================================================= */ /* POINT 1 — PHOTO DEPTH: soft shadow, inner relief, 14 s sheen, and a maximum 3 px micro-float after the entrance reveal. */ .about-hero-premium .about-hero-visual{ position:relative !important; isolation:isolate !important; overflow:hidden !important; border-radius:22px !important; border:1px solid rgba(17,17,17,.085) !important; background:#f2f2f2 !important; box-shadow: 0 30px 78px rgba(17,17,17,.13), 0 9px 24px rgba(17,17,17,.065), inset 0 1px 0 rgba(255,255,255,.76), inset 0 -1px 0 rgba(17,17,17,.025) !important; } .about-hero-premium .about-hero-visual::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:3 !important; pointer-events:none !important; border-radius:inherit !important; border:1px solid rgba(255,255,255,.36) !important; box-shadow:inset 0 0 0 1px rgba(17,17,17,.02) !important; background:linear-gradient( 108deg, transparent 0%, transparent 40%, rgba(255,255,255,0) 44%, rgba(255,255,255,.19) 49%, rgba(255,255,255,.055) 53%, transparent 59%, transparent 100% ) !important; background-size:250% 100% !important; background-position:155% 0 !important; mix-blend-mode:soft-light !important; animation:icVerifiedPhotoSheen 14s cubic-bezier(.16,1,.3,1) 2.2s infinite !important; } @keyframes icVerifiedPhotoSheen{ 0%,72%{background-position:155% 0;opacity:.58} 88%,100%{background-position:-58% 0;opacity:.58} } body.ic-ready .about-hero-premium .about-hero-portrait{ animation:icVerifiedPhotoFloat 12s ease-in-out 1.5s infinite !important; transform-origin:center center !important; } @keyframes icVerifiedPhotoFloat{ 0%,100%{transform:translate3d(var(--px,0px),calc(var(--py,0px) + 0px),0) scale(1.024)} 50%{transform:translate3d(var(--px,0px),calc(var(--py,0px) - 3px),0) scale(1.024)} } body.ic-ready .about-hero-premium .about-hero-visual:hover .about-hero-portrait{ animation-play-state:paused !important; transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.045) !important; } /* POINT 2 — HERO: title, quote and name/signature exactly 100 ms apart. The body.ic-ready selector outranks the earlier cinematic declarations. */ body.ic-ready .about-hero-premium h1, body.ic-ready .about-hero-premium .about-hero-statement, body.ic-ready .about-hero-premium .about-hero-signature{ opacity:0; animation-name:icVerifiedHeroTextEntrance !important; animation-duration:1100ms !important; animation-timing-function:cubic-bezier(.16,1,.3,1) !important; animation-fill-mode:forwards !important; will-change:opacity,transform,filter; } body.ic-ready .about-hero-premium h1{ animation-delay:220ms !important; } body.ic-ready .about-hero-premium .about-hero-statement{ animation-delay:320ms !important; } body.ic-ready .about-hero-premium .about-hero-signature{ animation-delay:420ms !important; } @keyframes icVerifiedHeroTextEntrance{ 0%{opacity:0;transform:translate3d(0,14px,0);filter:blur(3px)} 55%{opacity:.72} 100%{opacity:1;transform:translate3d(0,0,0);filter:blur(0)} } /* POINT 3 — TRUE 1.5% NOISE LAYER: visible over white sections, non-interactive, and below navigation/buttons. */ .ic-premium-noise{ display:block !important; visibility:visible !important; position:fixed !important; inset:-50% !important; width:200% !important; height:200% !important; z-index:74 !important; pointer-events:none !important; opacity:.015 !important; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E") !important; background-repeat:repeat !important; background-size:180px 180px !important; mix-blend-mode:multiply !important; animation:icVerifiedNoiseShift 18s steps(2,end) infinite !important; } @keyframes icVerifiedNoiseShift{ 0%,100%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-1.2%,.8%,0)} 50%{transform:translate3d(.7%,-1%,0)} 75%{transform:translate3d(-.6%,-.4%,0)} } @media (prefers-reduced-motion:reduce){ .about-hero-premium .about-hero-visual::before, body.ic-ready .about-hero-premium .about-hero-portrait, .ic-premium-noise{ animation:none !important; } body.ic-ready .about-hero-premium h1, body.ic-ready .about-hero-premium .about-hero-statement, body.ic-ready .about-hero-premium .about-hero-signature{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; } }