/** * AFIWAI Studio — Modern Design FX Library * Re-implementation of the visual families audited in AFIWAI Modern Design 12.9.0. * No dependency on the legacy plugin. */ .afi-effect{ --afi-fx-primary:#16c8ff; --afi-fx-secondary:#0064c0; --afi-fx-density:1; position:relative; isolation:isolate; overflow:hidden; } .afi-effect::before, .afi-effect::after{ pointer-events:none; } .afi-effect::before{ opacity:calc(var(--afi-effect-opacity,.72) * .72); } .afi-effect::after{ opacity:var(--afi-effect-opacity,.72); animation-duration:var(--afi-effect-speed,12s); } /* Utility layer for all Modern Design-derived effects. */ [class*="afi-effect--md-"]::before, [class*="afi-effect--md-"]::after, .afi-effect--digital-grid::before,.afi-effect--digital-grid::after, .afi-effect--data-corridor::before,.afi-effect--data-corridor::after, .afi-effect--circuit-board::before,.afi-effect--circuit-board::after, .afi-effect--code-residue::before,.afi-effect--code-residue::after, .afi-effect--data-trace::before,.afi-effect--data-trace::after, .afi-effect--waveform::before,.afi-effect--waveform::after, .afi-effect--terminal::before,.afi-effect--terminal::after, .afi-effect--monitoring::before,.afi-effect--monitoring::after, .afi-effect--performance::before,.afi-effect--performance::after, .afi-effect--network-trace::before,.afi-effect--network-trace::after, .afi-effect--tech-deck::before,.afi-effect--tech-deck::after, .afi-effect--oscilloscope::before,.afi-effect--oscilloscope::after, .afi-effect--telemetry::before,.afi-effect--telemetry::after, .afi-effect--hud-rail::before,.afi-effect--hud-rail::after, .afi-effect--hud-screens::before,.afi-effect--hud-screens::after, .afi-effect--data-transition::before,.afi-effect--data-transition::after, .afi-effect--atmospheric-halo::before,.afi-effect--atmospheric-halo::after, .afi-effect--hud-ruler::before,.afi-effect--hud-ruler::after, .afi-effect--orbit::before,.afi-effect--orbit::after, .afi-effect--core-glow::before,.afi-effect--core-glow::after, .afi-effect--hero-lines::before,.afi-effect--hero-lines::after, .afi-effect--perspective-grid::before,.afi-effect--perspective-grid::after, .afi-effect--data-rings::before,.afi-effect--data-rings::after, .afi-effect--light-beams::before,.afi-effect--light-beams::after, .afi-effect--central-flare::before,.afi-effect--central-flare::after, .afi-effect--network-sweep::before,.afi-effect--network-sweep::after, .afi-effect--fusion-core::before,.afi-effect--fusion-core::after, .afi-effect--black-fusion::before,.afi-effect--black-fusion::after, .afi-effect--digital-rain::before,.afi-effect--digital-rain::after, .afi-effect--data-space::before,.afi-effect--data-space::after, .afi-effect--live-code::before,.afi-effect--live-code::after, .afi-effect--data-packets::before,.afi-effect--data-packets::after, .afi-effect--spotlight::before,.afi-effect--spotlight::after, .afi-effect--cursor-glow::before,.afi-effect--cursor-glow::after{ content:""; position:absolute; inset:0; z-index:0; } /* Effects are backgrounds: actual block contents stay above them. */ .afi-effect > *{ position:relative; z-index:1; } .afi-effect::before, .afi-effect::after{ user-select:none; } /* 8.9 — electronic grid / luminous data corridor / circuit-board surfaces. */ .afi-effect--digital-grid::after{ background: linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 13%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 13%,transparent) 1px,transparent 1px), radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--afi-fx-secondary) 20%,transparent),transparent 58%); background-size:42px 42px,42px 42px,auto; mask-image:linear-gradient(to bottom,#000 10%,rgba(0,0,0,.92) 62%,transparent); animation:afiFxGridDrift var(--afi-effect-speed,18s) linear infinite; } .afi-effect--data-corridor::before{ inset:-35% -10%; background: linear-gradient(90deg,transparent 0 14%,color-mix(in srgb,var(--afi-fx-primary) 20%,transparent) 14.5% 15%,transparent 15.5% 84%,color-mix(in srgb,var(--afi-fx-primary) 16%,transparent) 84.5% 85%,transparent 85.5%), repeating-linear-gradient(0deg,transparent 0 24px,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 25px,transparent 26px 48px); transform:perspective(480px) rotateX(63deg) scale(1.22); transform-origin:50% 100%; } .afi-effect--data-corridor::after{ inset:auto 7% 8%; height:2px; background:linear-gradient(90deg,transparent,var(--afi-fx-primary),var(--afi-fx-secondary),transparent); box-shadow:0 0 18px color-mix(in srgb,var(--afi-fx-primary) 70%,transparent),0 -42px 36px color-mix(in srgb,var(--afi-fx-secondary) 18%,transparent); animation:afiFxPulse var(--afi-effect-speed,7s) ease-in-out infinite; } .afi-effect--circuit-board::before{ background: linear-gradient(90deg,transparent 18%,color-mix(in srgb,var(--afi-fx-primary) 14%,transparent) 18% 18.5%,transparent 18.5% 49%,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 49% 49.5%,transparent 49.5% 78%,color-mix(in srgb,var(--afi-fx-secondary) 13%,transparent) 78% 78.5%,transparent 78.5%), linear-gradient(0deg,transparent 20%,color-mix(in srgb,var(--afi-fx-primary) 11%,transparent) 20% 20.5%,transparent 20.5% 62%,color-mix(in srgb,var(--afi-fx-primary) 9%,transparent) 62% 62.5%,transparent 62.5%); background-size:210px 150px; } .afi-effect--circuit-board::after{ background: radial-gradient(circle at 18% 20%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 49% 62%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 78% 32%,var(--afi-fx-secondary) 0 2px,transparent 3px), radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--afi-fx-secondary) 12%,transparent),transparent 58%); background-size:210px 150px,210px 150px,210px 150px,auto; animation:afiFxCircuitShift var(--afi-effect-speed,18s) linear infinite; } /* 9.x — code residues, traces, waveform, terminal/monitoring graphs. */ .afi-effect--code-residue::after, .afi-effect--terminal::after, .afi-effect--live-code::after{ white-space:pre; font:500 clamp(7px,1vw,11px)/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.02em; color:var(--afi-fx-primary); text-shadow:0 0 10px color-mix(in srgb,var(--afi-fx-primary) 45%,transparent); } .afi-effect--code-residue::after{ content:"AFIWAI://NODE_01 LINK=ONLINE\A01 1010 011 /render.pipeline\ACPU 34% GPU 21% NET 1.8Gb/s\A> cache.edge=HIT\A> route PT -> FR -> EU"; inset:10% auto auto 5%; width:62%; opacity:calc(var(--afi-effect-opacity,.72) * .42); transform:rotate(-2deg); mask-image:linear-gradient(90deg,#000,transparent); } .afi-effect--data-trace::before{ background: linear-gradient(90deg,transparent 0 8%,color-mix(in srgb,var(--afi-fx-primary) 45%,transparent) 8% 8.25%,transparent 8.25% 38%,color-mix(in srgb,var(--afi-fx-secondary) 22%,transparent) 38% 38.25%,transparent 38.25%), linear-gradient(0deg,transparent 0 72%,color-mix(in srgb,var(--afi-fx-primary) 14%,transparent) 72% 72.5%,transparent 72.5%); background-size:180px 100px; animation:afiFxTrace var(--afi-effect-speed,12s) linear infinite; } .afi-effect--data-trace::after{ inset:50% 5% auto; height:1px; background:linear-gradient(90deg,transparent 0,var(--afi-fx-primary) 18%,transparent 34%,var(--afi-fx-secondary) 62%,transparent 100%); box-shadow:0 0 12px color-mix(in srgb,var(--afi-fx-primary) 42%,transparent); } .afi-effect--waveform::after{ inset:42% 4% auto; height:36px; background: linear-gradient(135deg,transparent 0 45%,var(--afi-fx-primary) 46% 48%,transparent 49% 100%) 0 50%/34px 24px repeat-x, linear-gradient(45deg,transparent 0 45%,color-mix(in srgb,var(--afi-fx-secondary) 70%,white) 46% 48%,transparent 49% 100%) 17px 50%/34px 24px repeat-x; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--afi-fx-primary) 45%,transparent)); animation:afiFxWave var(--afi-effect-speed,7s) linear infinite; } .afi-effect--terminal::before{ inset:12% 8% 14%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 20%,transparent); border-radius:10px; background:linear-gradient(180deg,color-mix(in srgb,#071522 92%,transparent),color-mix(in srgb,#020a12 82%,transparent)); box-shadow:inset 0 0 28px color-mix(in srgb,var(--afi-fx-secondary) 8%,transparent),0 0 30px color-mix(in srgb,var(--afi-fx-primary) 6%,transparent); } .afi-effect--terminal::after{ content:"$ afiwai system --boot\A> core.loaded\A> render.latency=8.4ms\A> tls=secure\A> status=ONLINE\A_"; inset:18% 14% auto; width:72%; } .afi-effect--monitoring::before{ inset:13% 7%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 18%,transparent); border-radius:12px; background: linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 7%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 7%,transparent) 1px,transparent 1px), color-mix(in srgb,#05111d 88%,transparent); background-size:28px 28px; } .afi-effect--monitoring::after{ inset:26% 10% auto; height:34%; background: linear-gradient(145deg,transparent 0 7%,var(--afi-fx-primary) 7.5% 8.5%,transparent 9% 20%,var(--afi-fx-secondary) 20.5% 21.5%,transparent 22% 39%,var(--afi-fx-primary) 39.5% 40.5%,transparent 41% 57%,var(--afi-fx-primary) 57.5% 58.5%,transparent 59%); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--afi-fx-primary) 35%,transparent)); } .afi-effect--performance::before{ inset:15% 6%; background: linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 1px,transparent 1px), linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 1px,transparent 1px); background-size:32px 24px; border-left:1px solid color-mix(in srgb,var(--afi-fx-primary) 28%,transparent); border-bottom:1px solid color-mix(in srgb,var(--afi-fx-primary) 28%,transparent); } .afi-effect--performance::after{ inset:20% 8% 18%; background: linear-gradient(108deg,transparent 0 14%,var(--afi-fx-primary) 15% 16%,transparent 17% 32%,var(--afi-fx-secondary) 33% 34%,transparent 35% 48%,var(--afi-fx-primary) 49% 50%,transparent 51% 67%,var(--afi-fx-primary) 68% 69%,transparent 70%); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--afi-fx-primary) 38%,transparent)); } .afi-effect--network-trace::before{ background: radial-gradient(circle at 12% 60%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 36% 28%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 67% 57%,var(--afi-fx-secondary) 0 2px,transparent 3px), radial-gradient(circle at 90% 22%,var(--afi-fx-primary) 0 2px,transparent 3px); } .afi-effect--network-trace::after{ background: linear-gradient(32deg,transparent 0 25%,color-mix(in srgb,var(--afi-fx-primary) 28%,transparent) 25.4% 25.8%,transparent 26.2%), linear-gradient(-22deg,transparent 0 53%,color-mix(in srgb,var(--afi-fx-secondary) 24%,transparent) 53.4% 53.8%,transparent 54.2%); background-size:240px 140px,280px 180px; animation:afiFxNetworkMove var(--afi-effect-speed,18s) linear infinite alternate; } /* 10.x — tech deck, oscilloscope, telemetry, HUD rails/screens, transitions. */ .afi-effect--tech-deck::before{ inset:8%; border-radius:14px; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 16%,transparent); background: linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 6%,transparent) 1px,transparent 1px), linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 6%,transparent) 1px,transparent 1px), linear-gradient(135deg,color-mix(in srgb,#061625 82%,transparent),color-mix(in srgb,#02070d 78%,transparent)); background-size:26px 26px,26px 26px,auto; } .afi-effect--tech-deck::after{ content:"WEB.CORE • ONLINE • AFIWAI.HUB"; inset:auto 10% 12%; height:20px; color:var(--afi-fx-primary); font:800 8px/20px ui-monospace,monospace; letter-spacing:.08em; border-top:1px solid color-mix(in srgb,var(--afi-fx-primary) 16%,transparent); } .afi-effect--oscilloscope::before{ inset:15% 7%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 18%,transparent); background: linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 7%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 7%,transparent) 1px,transparent 1px); background-size:18px 18px; } .afi-effect--oscilloscope::after{ inset:38% 7% auto; height:36px; background: linear-gradient(150deg,transparent 0 7%,var(--afi-fx-primary) 7.5% 9%,transparent 9.5% 18%,var(--afi-fx-primary) 18.5% 20%,transparent 20.5% 29%,color-mix(in srgb,var(--afi-fx-secondary) 80%,white) 29.5% 31%,transparent 31.5%); background-size:160px 36px; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--afi-fx-primary) 55%,transparent)); animation:afiFxScope var(--afi-effect-speed,7s) linear infinite; } .afi-effect--telemetry::before{ content:"CPU 23%\A NET 48%\A RTT 12ms\A LOSS 0%\A TLS 1.3"; white-space:pre; inset:12% auto auto 7%; width:32%; padding:9px 10px; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 15%,transparent); border-radius:8px; background:color-mix(in srgb,#061522 78%,transparent); color:var(--afi-fx-primary); font:700 8px/1.6 ui-monospace,monospace; } .afi-effect--telemetry::after{ inset:18% 7% 18% 46%; background: repeating-linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 20%,transparent) 0 5%,transparent 5% 14%); mask-image:linear-gradient(to top,#000,transparent); } .afi-effect--hud-rail::before{ inset:8% auto 8% 4%; width:2px; background:linear-gradient(to bottom,transparent,var(--afi-fx-primary),transparent); box-shadow:18px 0 0 -1px color-mix(in srgb,var(--afi-fx-primary) 28%,transparent),36px 0 0 -1px color-mix(in srgb,var(--afi-fx-primary) 16%,transparent); } .afi-effect--hud-rail::after{ inset:10% auto 10% 2%; width:58px; background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--afi-fx-primary) 45%,transparent) 0 1px,transparent 1px 12px); mask-image:linear-gradient(to bottom,transparent,#000 10% 90%,transparent); } .afi-effect--hud-screens::before{ inset:10% auto auto 7%; width:32%; height:28%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 18%,transparent); border-radius:8px; background: linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 1px,transparent 1px), color-mix(in srgb,#04111c 82%,transparent); background-size:16px 16px; box-shadow:0 0 22px color-mix(in srgb,var(--afi-fx-primary) 6%,transparent); } .afi-effect--hud-screens::after{ content:"SYS.MONITOR\A CPU 23% NET 48%\A STATUS ONLINE"; white-space:pre; inset:auto 7% 10% auto; width:36%; min-height:54px; padding:9px 10px; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 15%,transparent); border-radius:8px; background:color-mix(in srgb,#061522 78%,transparent); color:var(--afi-fx-primary); font:700 8px/1.5 ui-monospace,monospace; } .afi-effect--data-transition::before{ inset:50% 3% auto; height:1px; background:linear-gradient(90deg,transparent,var(--afi-fx-primary) 18%,transparent 34%,var(--afi-fx-secondary) 50%,transparent 66%,var(--afi-fx-primary) 82%,transparent); box-shadow:0 0 14px color-mix(in srgb,var(--afi-fx-primary) 30%,transparent); } .afi-effect--data-transition::after{ inset:calc(50% - 7px) 12% auto; height:15px; background: radial-gradient(circle,var(--afi-fx-primary) 0 2px,transparent 3px) 0 50%/72px 15px repeat-x; animation:afiFxPacket var(--afi-effect-speed,7s) linear infinite; } .afi-effect--atmospheric-halo::after{ inset:-25%; background: radial-gradient(circle at 26% 40%,color-mix(in srgb,var(--afi-fx-primary) 28%,transparent),transparent 28%), radial-gradient(circle at 68% 62%,color-mix(in srgb,var(--afi-fx-secondary) 24%,transparent),transparent 34%), radial-gradient(circle at 52% 10%,color-mix(in srgb,var(--afi-fx-primary) 15%,transparent),transparent 30%); filter:blur(24px); animation:afiFxHalo var(--afi-effect-speed,18s) ease-in-out infinite alternate; } .afi-effect--hud-ruler::before{ inset:7% auto 7% 2%; width:44px; border-left:1px solid color-mix(in srgb,var(--afi-fx-primary) 28%,transparent); background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--afi-fx-primary) 34%,transparent) 0 1px,transparent 1px 10px); mask-image:linear-gradient(to bottom,transparent,#000 8% 92%,transparent); } .afi-effect--hud-ruler::after{ content:"00\A10\A20\A30\A40\A50\A60\A70\A80\A90"; white-space:pre; inset:7% auto auto 12px; color:color-mix(in srgb,var(--afi-fx-primary) 54%,transparent); font:600 6px/2.15 ui-monospace,monospace; } /* 11.1+ — orbits, core glow, hero lines, immersive data core. */ .afi-effect--orbit::before, .afi-effect--orbit::after, .afi-effect--data-rings::before, .afi-effect--data-rings::after{ inset:12%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 24%,transparent); border-radius:50%; } .afi-effect--orbit::before{transform:rotate(18deg) scaleX(.72);animation:afiFxOrbit var(--afi-effect-speed,12s) linear infinite} .afi-effect--orbit::after{inset:25%;transform:rotate(-28deg) scaleX(.82);animation:afiFxOrbitReverse var(--afi-effect-speed,18s) linear infinite} .afi-effect--core-glow::after{ inset:-20%; background: radial-gradient(circle at 50% 50%,white 0 1%,var(--afi-fx-primary) 2% 4%,color-mix(in srgb,var(--afi-fx-primary) 48%,transparent) 5% 10%,color-mix(in srgb,var(--afi-fx-secondary) 20%,transparent) 11% 20%,transparent 44%); filter:blur(3px); animation:afiFxCorePulse var(--afi-effect-speed,7s) ease-in-out infinite; } .afi-effect--hero-lines::before, .afi-effect--hero-lines::after{ inset:14% 4%; background:repeating-linear-gradient(90deg,transparent 0 8%,color-mix(in srgb,var(--afi-fx-primary) 15%,transparent) 8.2% 8.5%,transparent 8.7% 16%); transform:skewX(-18deg); } .afi-effect--hero-lines::after{ transform:skewX(18deg); opacity:calc(var(--afi-effect-opacity,.72) * .42); } .afi-effect--perspective-grid::after{ inset:22% -10% -60%; background: linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 14%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 14%,transparent) 1px,transparent 1px); background-size:36px 24px; transform:perspective(420px) rotateX(62deg); transform-origin:50% 0; animation:afiFxPerspective var(--afi-effect-speed,12s) linear infinite; } .afi-effect--data-rings::before{inset:18%;border-width:2px;border-style:dashed} .afi-effect--data-rings::after{inset:32%;border-color:color-mix(in srgb,var(--afi-fx-secondary) 48%,transparent);border-style:dotted} .afi-effect--light-beams::before{ inset:-10%; background: linear-gradient(112deg,transparent 0 28%,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 29% 34%,transparent 35% 58%,color-mix(in srgb,var(--afi-fx-secondary) 10%,transparent) 59% 63%,transparent 64%), linear-gradient(72deg,transparent 0 42%,color-mix(in srgb,var(--afi-fx-primary) 9%,transparent) 43% 47%,transparent 48%); filter:blur(3px); animation:afiFxBeams var(--afi-effect-speed,12s) ease-in-out infinite alternate; } .afi-effect--central-flare::after{ inset:38% 20%; background:radial-gradient(ellipse at center,white 0 1%,var(--afi-fx-primary) 2% 6%,color-mix(in srgb,var(--afi-fx-primary) 35%,transparent) 7% 24%,transparent 62%); filter:blur(2px); animation:afiFxFlare var(--afi-effect-speed,7s) ease-in-out infinite; } .afi-effect--network-sweep::before{ inset:0; background:linear-gradient(100deg,transparent 0 44%,color-mix(in srgb,var(--afi-fx-primary) 20%,transparent) 48%,transparent 52% 100%); transform:translateX(-90%); animation:afiFxSweep var(--afi-effect-speed,7s) linear infinite; } .afi-effect--network-sweep::after{ background: radial-gradient(circle at 14% 28%,var(--afi-fx-primary) 0 1.5px,transparent 2.5px), radial-gradient(circle at 38% 68%,var(--afi-fx-primary) 0 1.5px,transparent 2.5px), radial-gradient(circle at 71% 24%,var(--afi-fx-secondary) 0 1.5px,transparent 2.5px), radial-gradient(circle at 88% 64%,var(--afi-fx-primary) 0 1.5px,transparent 2.5px); } /* 11.4 / 11.5 — packet field and immersive technical field. */ .afi-effect--data-packets::after{ background: linear-gradient(90deg,transparent 0 12%,var(--afi-fx-primary) 12% 13%,transparent 14% 34%,var(--afi-fx-secondary) 34% 35%,transparent 36% 58%,var(--afi-fx-primary) 58% 59%,transparent 60%); background-size:220px 2px; background-repeat:repeat-x; background-position:0 30%,60px 70%; animation:afiFxPacket var(--afi-effect-speed,7s) linear infinite; } .afi-effect--techfield::before{ background: radial-gradient(ellipse at 50% 52%,color-mix(in srgb,var(--afi-fx-primary) 20%,transparent),transparent 44%), linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 7%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 7%,transparent) 1px,transparent 1px); background-size:auto,38px 38px,38px 38px; } .afi-effect--techfield::after{ background: radial-gradient(circle at 16% 22%,var(--afi-fx-primary) 0 1.5px,transparent 2.5px), radial-gradient(circle at 44% 72%,var(--afi-fx-secondary) 0 1.5px,transparent 2.5px), radial-gradient(circle at 82% 30%,var(--afi-fx-primary) 0 1.5px,transparent 2.5px), linear-gradient(32deg,transparent 0 39%,color-mix(in srgb,var(--afi-fx-primary) 16%,transparent) 39.5% 40%,transparent 40.5%); animation:afiFxTechDrift var(--afi-effect-speed,12s) linear infinite alternate; } /* 11.6 — seamless Black Fusion Core. */ .afi-effect--fusion-core::before, .afi-effect--black-fusion::before{ inset:-20%; background: conic-gradient(from 0deg at 50% 50%,transparent 0 12%,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 13% 14%,transparent 15% 36%,color-mix(in srgb,var(--afi-fx-secondary) 14%,transparent) 37% 38%,transparent 39% 100%), radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--afi-fx-primary) 22%,transparent),transparent 26%); animation:afiFxSpin var(--afi-effect-speed,18s) linear infinite; } .afi-effect--fusion-core::after{ inset:27%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 42%,transparent); border-radius:22%; transform:rotate(45deg); box-shadow:0 0 22px color-mix(in srgb,var(--afi-fx-primary) 24%,transparent),inset 0 0 26px color-mix(in srgb,var(--afi-fx-secondary) 14%,transparent); animation:afiFxCorePulse var(--afi-effect-speed,7s) ease-in-out infinite; } .afi-effect--black-fusion::after{ inset:-10%; background: radial-gradient(circle at center,white 0 1%,var(--afi-fx-primary) 2% 3%,color-mix(in srgb,var(--afi-fx-primary) 32%,transparent) 4% 10%,transparent 24%), repeating-radial-gradient(circle at center,transparent 0 24px,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 25px,transparent 26px 50px); mix-blend-mode:screen; animation:afiFxFusionPulse var(--afi-effect-speed,12s) ease-in-out infinite; } /* 11.7 / 11.9 — Digital Rain, Data Space, Matrix and live code. */ .afi-effect--digital-rain{ background-color:var(--afi-digital-rain-bg,transparent); } .afi-effect--digital-rain::before{ content:"AFIWAI 01001101 10110100 SYSTEM 00101101 11001010 WEB 01010110 00110011 PT 01100101 11010010 FR 00110110 10101100 CORE 01011001 00101110 DATA 10100101 01101010 AFIWAI 00111001 11010100 BUILD 01100110 10101001 FUTURE 01010101 00110010"; inset:-62% -8% -35%; color:color-mix(in srgb,var(--afi-fx-primary) 48%,transparent); font:600 9px/2.05 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; letter-spacing:.28em; word-spacing:1.2em; writing-mode:vertical-rl; text-orientation:mixed; white-space:normal; overflow:hidden; text-shadow:0 0 9px color-mix(in srgb,var(--afi-fx-primary) 38%,transparent); opacity:calc(var(--afi-effect-opacity,.72) * .72); mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 72%,rgba(0,0,0,.72) 83%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 72%,rgba(0,0,0,.72) 83%,transparent 100%); animation:afiFxDigitalRainBack var(--afi-effect-speed,18s) linear infinite; } .afi-effect--digital-rain::after{ content:"1010 AFIWAI CORE 0011 WEB 0110 PT 1101 FR 0010 DATA 1011 NODE 0101 LINK 1110 BUILD 0011 FUTURE 1001 ONLINE 0110 MESH 1010 AFIWAI 0101"; inset:-78% 8% -48%; color:color-mix(in srgb,var(--afi-fx-secondary) 72%,#e8fbff 28%); font:700 7px/2.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; letter-spacing:.32em; word-spacing:1.45em; writing-mode:vertical-rl; text-orientation:mixed; white-space:normal; overflow:hidden; text-shadow:0 0 7px color-mix(in srgb,var(--afi-fx-primary) 28%,transparent); opacity:calc(var(--afi-effect-opacity,.72) * .46); filter:blur(.18px); mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 67%,rgba(0,0,0,.62) 82%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 67%,rgba(0,0,0,.62) 82%,transparent 100%); animation:afiFxDigitalRainFront calc(var(--afi-effect-speed,18s) * .62) linear infinite; } /* Matrix remains the denser abstract variant. */ .afi-effect--matrix::before{ inset:-25% 0; background: repeating-linear-gradient(90deg,transparent 0 17px,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 18px,transparent 19px 36px), repeating-linear-gradient(180deg,transparent 0 11px,color-mix(in srgb,var(--afi-fx-primary) 14%,transparent) 12px,transparent 14px 28px); animation:afiFxRain var(--afi-effect-speed,12s) linear infinite; } .afi-effect--matrix::after{ inset:-20% 0; background: repeating-linear-gradient(90deg,transparent 0 18px,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 19px,transparent 20px 38px), repeating-linear-gradient(180deg,transparent 0 12px,color-mix(in srgb,var(--afi-fx-secondary) 13%,transparent) 13px,transparent 15px 30px); filter:drop-shadow(0 0 7px color-mix(in srgb,var(--afi-fx-primary) 22%,transparent)); transform:skewY(-4deg); animation:afiFxRain var(--afi-effect-speed,12s) linear infinite; } .afi-effect--data-space::before{ background: linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 1px,transparent 1px); background-size:40px 40px; transform:perspective(500px) rotateX(58deg) scale(1.35); transform-origin:50% 88%; } .afi-effect--data-space::after{ background: radial-gradient(circle at 18% 42%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 47% 18%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 74% 58%,var(--afi-fx-secondary) 0 2px,transparent 3px), radial-gradient(circle at 88% 30%,var(--afi-fx-primary) 0 2px,transparent 3px), linear-gradient(100deg,transparent 0 48%,color-mix(in srgb,var(--afi-fx-primary) 16%,transparent) 49%,transparent 50%); animation:afiFxDataSpace var(--afi-effect-speed,18s) ease-in-out infinite alternate; } .afi-effect--live-code::before{ inset:8% 6%; background:linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 4%,transparent),transparent 55%); } .afi-effect--live-code::after{ content:"$ afiwai build --production\A> assets.optimized\A> security=OK\A> route PT -> FR -> EU\A> status=LIVE\A// build_the_future();"; inset:14% auto auto 8%; width:min(78%,520px); overflow:hidden; clip-path:inset(0 100% 0 0); animation:afiFxType var(--afi-effect-speed,12s) steps(28,end) infinite; } .afi-effect--spotlight::after, .afi-effect--cursor-glow::after{ background:radial-gradient(circle 240px at var(--afi-fx-pointer-x,50%) var(--afi-fx-pointer-y,50%),color-mix(in srgb,var(--afi-fx-primary) 20%,transparent),transparent 68%); transition:background-position .08s linear; } /* Existing generic families, recolored through AFIWAI FX variables. */ .afi-effect--particles::before{ background: radial-gradient(circle at 9% 28%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 18% 62%,color-mix(in srgb,var(--afi-fx-primary) 80%,white) 0 1.5px,transparent 2.5px), radial-gradient(circle at 27% 20%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 42% 31%,var(--afi-fx-secondary) 0 1.5px,transparent 2.5px), radial-gradient(circle at 58% 21%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 66% 68%,var(--afi-fx-secondary) 0 2px,transparent 3px), radial-gradient(circle at 83% 63%,var(--afi-fx-primary) 0 1.5px,transparent 2.5px), radial-gradient(circle at 94% 26%,var(--afi-fx-primary) 0 2px,transparent 3px); animation:afiFxFloat var(--afi-effect-speed,12s) ease-in-out infinite alternate; } .afi-effect--scanner::after{ inset:-40% 0; background:linear-gradient(180deg,transparent 0 43%,color-mix(in srgb,var(--afi-fx-primary) 5%,transparent) 46%,var(--afi-fx-primary) 49.5%,color-mix(in srgb,var(--afi-fx-secondary) 18%,transparent) 52%,transparent 57% 100%); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--afi-fx-primary) 36%,transparent)); animation:afiFxScanner var(--afi-effect-speed,7s) ease-in-out infinite; } .afi-effect--network::after{ background: radial-gradient(circle at 18% 30%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 50% 60%,var(--afi-fx-secondary) 0 2px,transparent 3px), radial-gradient(circle at 82% 24%,var(--afi-fx-primary) 0 2px,transparent 3px), linear-gradient(24deg,transparent 0 35%,color-mix(in srgb,var(--afi-fx-primary) 15%,transparent) 35.5% 36%,transparent 36.5%), linear-gradient(-28deg,transparent 0 56%,color-mix(in srgb,var(--afi-fx-primary) 13%,transparent) 56.5% 57%,transparent 57.5%); background-size:auto,auto,auto,180px 110px,220px 140px; animation:afiFxNetworkMove var(--afi-effect-speed,18s) linear infinite alternate; } /* Common animations. */ @keyframes afiFxGridDrift{to{background-position:42px 42px,42px 42px,center}} @keyframes afiFxCircuitShift{to{background-position:210px 0,0 150px,210px 150px,center}} @keyframes afiFxTrace{to{background-position:180px 0,0 100px}} @keyframes afiFxWave{to{background-position:34px 50%,51px 50%}} @keyframes afiFxNetworkMove{to{background-position:8px -4px,-7px 5px,4px 8px,25px 10px,-20px 15px}} @keyframes afiFxScope{to{background-position:160px 0}} @keyframes afiFxPacket{to{background-position:72px 50%}} @keyframes afiFxHalo{to{transform:translate3d(4%,-3%,0) scale(1.06)}} @keyframes afiFxOrbit{to{transform:rotate(378deg) scaleX(.72)}} @keyframes afiFxOrbitReverse{to{transform:rotate(-388deg) scaleX(.82)}} @keyframes afiFxPerspective{to{background-position:0 24px,36px 0}} @keyframes afiFxBeams{to{transform:translate3d(5%,-3%,0) scale(1.04)}} @keyframes afiFxFlare{0%,100%{transform:scale(.85);opacity:.45}50%{transform:scale(1.15);opacity:1}} @keyframes afiFxSweep{to{transform:translateX(90%)}} @keyframes afiFxSpin{to{transform:rotate(360deg)}} @keyframes afiFxCorePulse{0%,100%{transform:scale(.92)}50%{transform:scale(1.05)}} @keyframes afiFxFusionPulse{0%,100%{transform:scale(.94);filter:blur(0)}50%{transform:scale(1.08);filter:blur(1px)}} @keyframes afiFxDigitalRainBack{ 0%{transform:translate3d(0,-18%,0);opacity:.06} 12%{opacity:calc(var(--afi-effect-opacity,.72) * .60)} 72%{opacity:calc(var(--afi-effect-opacity,.72) * .72)} 91%{opacity:.12} 100%{transform:translate3d(0,36%,0);opacity:0} } @keyframes afiFxDigitalRainFront{ 0%{transform:translate3d(0,-24%,0);opacity:0} 14%{opacity:calc(var(--afi-effect-opacity,.72) * .34)} 68%{opacity:calc(var(--afi-effect-opacity,.72) * .46)} 90%{opacity:.08} 100%{transform:translate3d(0,42%,0);opacity:0} } @keyframes afiFxRain{from{background-position:0 -80px,0 -120px}to{background-position:0 160px,0 240px}} @keyframes afiFxRainText{from{transform:translateY(-18%)}to{transform:translateY(48%)}} @keyframes afiFxDataSpace{to{background-position:10px -4px,-8px 8px,8px 4px,-5px 6px,80px 0}} @keyframes afiFxType{0%,8%{clip-path:inset(0 100% 0 0)}55%,82%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}} @keyframes afiFxFloat{to{transform:translate3d(0,-10px,0) scale(1.025)}} @keyframes afiFxScanner{0%,100%{transform:translateY(-28%)}50%{transform:translateY(28%)}} @keyframes afiFxPulse{0%,100%{opacity:.35;transform:scaleX(.78)}50%{opacity:1;transform:scaleX(1)}} @keyframes afiFxTechDrift{to{background-position:8px -4px,-7px 5px,4px 8px,26px 10px}} /* Existing Aurora/Grid/Dots still remain available. */ .afi-effect--grid::after{ background-image: linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 1px,transparent 1px); } .afi-effect--dots::after{ background-image:radial-gradient(circle,color-mix(in srgb,var(--afi-fx-primary) 34%,transparent) 1px,transparent 1.3px); } .afi-effect--aurora::after{ background: radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--afi-fx-primary) 42%,transparent),transparent 32%), radial-gradient(circle at 80% 30%,color-mix(in srgb,var(--afi-fx-secondary) 36%,transparent),transparent 35%), radial-gradient(circle at 50% 90%,color-mix(in srgb,var(--afi-fx-primary) 28%,transparent),transparent 34%); } /* Mobile density reductions mirror the old plugin's performance strategy. */ @media(max-width:700px){ .afi-effect--hud-screens::after, .afi-effect--terminal::after, .afi-effect--code-residue::after, .afi-effect--live-code::after{font-size:6px} .afi-effect--hud-ruler::after{display:none} .afi-effect--telemetry::before{width:46%} } /* Accessibility: every continuous background motion obeys reduced-motion. */ @media(prefers-reduced-motion:reduce){ .afi-effect::before, .afi-effect::after{ animation:none!important; transition:none!important; } } /* AFIWAI Studio 1.24 — visual-theme compatibility */ body.afiwai-visual-theme-modern-tech .afi-effect::before, body.afiwai-visual-theme-modern-tech .afi-effect::after{ z-index:0!important; pointer-events:none!important; } body.afiwai-visual-theme-modern-tech .afi-effect > :not(.afi-digital-rain-runtime):not(.afi-textfx-runtime):not(.afi-keyword-runtime){ position:relative; z-index:1; } /* ================================================================ AFIWAI Studio 1.39 — two-layer effect stack One static/image decor below one animation. ================================================================ */ .afi-effect-stack-host{ position:relative; isolation:isolate; overflow:hidden; } .afi-effect-stack-host>.afi-effect-stack-layer{ position:absolute!important; inset:0!important; display:block!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; border-radius:inherit; background:transparent!important; box-shadow:none!important; pointer-events:none!important; overflow:hidden!important; isolation:isolate!important; transform:none; } .afi-effect-stack-host>.afi-effect-stack-layer--image{ z-index:0!important; } .afi-effect-stack-host>.afi-effect-stack-layer--animation{ z-index:1!important; } .afi-effect-stack-host>:not(.afi-effect-stack-layer){ z-index:2!important; } /* * The layer itself is only a transparent host. * Its selected effect remains generated by its ::before / ::after rules. */ .afi-effect-stack-layer::before, .afi-effect-stack-layer::after{ pointer-events:none!important; } /* Navigation keeps the historical effect padding on the host. */ .afi-nav.afi-effect-stack-host{ padding:10px 14px; border-radius:16px; } /* ========================================================= AFIWAI 1.41.0 — nouveaux effets e-tech / informatique ========================================================= */ .afi-effect--silicon-grid{ background: linear-gradient(180deg,rgba(2,10,20,.10),rgba(0,0,0,.02)), repeating-linear-gradient(90deg,transparent 0 28px,color-mix(in srgb,var(--afi-fx-primary) 11%,transparent) 28px 29px,transparent 29px 58px), repeating-linear-gradient(0deg,transparent 0 28px,color-mix(in srgb,var(--afi-fx-secondary) 10%,transparent) 28px 29px,transparent 29px 58px); background-size:100% 100%,100% 100%,100% 100%; } .afi-effect--silicon-grid::after{ content:""; inset:0; background: linear-gradient(90deg,transparent 0 14%,color-mix(in srgb,var(--afi-fx-primary) 68%,transparent) 14% 14.5%,transparent 14.5% 100%), linear-gradient(0deg,transparent 0 46%,color-mix(in srgb,var(--afi-fx-secondary) 58%,transparent) 46% 46.6%,transparent 46.6% 100%), radial-gradient(circle at 14% 46%,color-mix(in srgb,var(--afi-fx-primary) 70%,transparent) 0 2px,transparent 3px), radial-gradient(circle at 70% 46%,color-mix(in srgb,var(--afi-fx-primary) 54%,transparent) 0 2px,transparent 3px); opacity:.85; } .afi-effect--blueprint-hud{ background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(255,255,255,.01)), repeating-linear-gradient(90deg,transparent 0 42px,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 42px 43px,transparent 43px 84px), repeating-linear-gradient(0deg,transparent 0 42px,color-mix(in srgb,var(--afi-fx-primary) 6%,transparent) 42px 43px,transparent 43px 84px); } .afi-effect--blueprint-hud::before{ content:""; inset:14px; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 32%,transparent); border-radius:16px; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--afi-fx-secondary) 10%,transparent), 0 0 26px color-mix(in srgb,var(--afi-fx-primary) 8%,transparent); } .afi-effect--blueprint-hud::after{ content:""; inset:14px; background: linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 72%,transparent) 0 18px,transparent 18px calc(100% - 18px),color-mix(in srgb,var(--afi-fx-primary) 72%,transparent) calc(100% - 18px) 100%), linear-gradient(0deg,color-mix(in srgb,var(--afi-fx-primary) 72%,transparent) 0 18px,transparent 18px calc(100% - 18px),color-mix(in srgb,var(--afi-fx-primary) 72%,transparent) calc(100% - 18px) 100%); -webkit-mask: linear-gradient(#000 0 0) left top/26px 1px no-repeat, linear-gradient(#000 0 0) left top/1px 26px no-repeat, linear-gradient(#000 0 0) right top/26px 1px no-repeat, linear-gradient(#000 0 0) right top/1px 26px no-repeat, linear-gradient(#000 0 0) left bottom/26px 1px no-repeat, linear-gradient(#000 0 0) left bottom/1px 26px no-repeat, linear-gradient(#000 0 0) right bottom/26px 1px no-repeat, linear-gradient(#000 0 0) right bottom/1px 26px no-repeat; mask: linear-gradient(#000 0 0) left top/26px 1px no-repeat, linear-gradient(#000 0 0) left top/1px 26px no-repeat, linear-gradient(#000 0 0) right top/26px 1px no-repeat, linear-gradient(#000 0 0) right top/1px 26px no-repeat, linear-gradient(#000 0 0) left bottom/26px 1px no-repeat, linear-gradient(#000 0 0) left bottom/1px 26px no-repeat, linear-gradient(#000 0 0) right bottom/26px 1px no-repeat, linear-gradient(#000 0 0) right bottom/1px 26px no-repeat; opacity:.88; } .afi-effect--chip-layout{ background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(255,255,255,.01)), linear-gradient(90deg,transparent 0 26%,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 26% 26.4%,transparent 26.4% 74%,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 74% 74.4%,transparent 74.4%), linear-gradient(0deg,transparent 0 30%,color-mix(in srgb,var(--afi-fx-secondary) 12%,transparent) 30% 30.4%,transparent 30.4% 70%,color-mix(in srgb,var(--afi-fx-secondary) 12%,transparent) 70% 70.4%,transparent 70.4%); } .afi-effect--chip-layout::before{ content:""; inset:18% 24%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 44%,transparent); border-radius:10px; box-shadow:0 0 22px color-mix(in srgb,var(--afi-fx-primary) 10%,transparent); } .afi-effect--chip-layout::after{ content:""; inset:0; background: linear-gradient(90deg,transparent 0 10%,color-mix(in srgb,var(--afi-fx-primary) 70%,transparent) 10% 10.5%,transparent 10.5% 89.5%,color-mix(in srgb,var(--afi-fx-primary) 70%,transparent) 89.5% 90%,transparent 90% 100%), linear-gradient(0deg,transparent 0 18%,color-mix(in srgb,var(--afi-fx-secondary) 58%,transparent) 18% 18.5%,transparent 18.5% 81.5%,color-mix(in srgb,var(--afi-fx-secondary) 58%,transparent) 81.5% 82%,transparent 82% 100%); opacity:.78; } .afi-effect--server-panels{ background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(255,255,255,.01)), repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 72px,color-mix(in srgb,var(--afi-fx-primary) 6%,transparent) 72px 73px,rgba(255,255,255,.02) 73px 146px); } .afi-effect--server-panels::before{ content:""; inset:14px; background: repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 16px,transparent 16px 28px), linear-gradient(90deg,transparent 0 18%,color-mix(in srgb,var(--afi-fx-primary) 68%,transparent) 18% 18.6%,transparent 18.6% 50%,color-mix(in srgb,var(--afi-fx-secondary) 50%,transparent) 50% 50.6%,transparent 50.6% 82%,color-mix(in srgb,var(--afi-fx-primary) 68%,transparent) 82% 82.6%,transparent 82.6% 100%); border-radius:18px; opacity:.72; } .afi-effect--server-panels::after{ content:""; inset:22px; background: radial-gradient(circle at 18% 16%,color-mix(in srgb,var(--afi-fx-primary) 92%,transparent) 0 2px,transparent 3px), radial-gradient(circle at 50% 16%,color-mix(in srgb,var(--afi-fx-primary) 92%,transparent) 0 2px,transparent 3px), radial-gradient(circle at 82% 16%,color-mix(in srgb,var(--afi-fx-primary) 92%,transparent) 0 2px,transparent 3px); opacity:.72; } .afi-effect--control-mesh{ background: radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent),transparent 58%), repeating-linear-gradient(90deg,transparent 0 24px,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 24px 25px,transparent 25px 49px), repeating-linear-gradient(0deg,transparent 0 24px,color-mix(in srgb,var(--afi-fx-secondary) 8%,transparent) 24px 25px,transparent 25px 49px); } .afi-effect--control-mesh::before{ content:""; inset:10% 24%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 28%,transparent); border-radius:999px; } .afi-effect--control-mesh::after{ content:""; inset:22% 10%; background: linear-gradient(90deg,transparent 0 14%,color-mix(in srgb,var(--afi-fx-primary) 72%,transparent) 14% 14.4%,transparent 14.4% 85.6%,color-mix(in srgb,var(--afi-fx-primary) 72%,transparent) 85.6% 86%,transparent 86% 100%), linear-gradient(0deg,transparent 0 38%,color-mix(in srgb,var(--afi-fx-secondary) 52%,transparent) 38% 38.4%,transparent 38.4% 61.6%,color-mix(in srgb,var(--afi-fx-secondary) 52%,transparent) 61.6% 62%,transparent 62% 100%); opacity:.72; } .afi-effect--signal-flow::before{ content:""; inset:0; background: repeating-linear-gradient(0deg,transparent 0 18px,rgba(22,200,255,.06) 18px 19px,transparent 19px 38px), linear-gradient(90deg,transparent 0 4%,color-mix(in srgb,var(--afi-fx-primary) 82%,transparent) 18% 26%,transparent 36% 100%), linear-gradient(90deg,transparent 0 36%,color-mix(in srgb,var(--afi-fx-secondary) 74%,transparent) 50% 58%,transparent 68% 100%); background-size:100% 100%,240px 2px,280px 2px; background-repeat:repeat,no-repeat,no-repeat; background-position:0 0,-260px 34%,260px 64%; animation:afiFxSignalFlow calc(var(--afi-effect-speed,12s)*1.05) linear infinite; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--afi-fx-primary) 24%,transparent)); } .afi-effect--signal-flow::after{ content:""; inset:0; background: radial-gradient(circle at 0% 34%,color-mix(in srgb,var(--afi-fx-primary) 80%,transparent) 0 4px,transparent 6px), radial-gradient(circle at 100% 64%,color-mix(in srgb,var(--afi-fx-secondary) 80%,transparent) 0 4px,transparent 6px); animation:afiFxSignalNodes calc(var(--afi-effect-speed,12s)*1.05) linear infinite; opacity:.95; } .afi-effect--scan-sweep::before{ content:""; inset:-25% 0; background: linear-gradient(180deg, transparent 0 34%, color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 44%, color-mix(in srgb,var(--afi-fx-primary) 46%,transparent) 50%, color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 56%, transparent 66%); animation:afiFxScanSweep calc(var(--afi-effect-speed,12s)*1.1) linear infinite; mix-blend-mode:screen; } .afi-effect--scan-sweep::after{ content:""; inset:0; background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.03) 6px 7px,transparent 7px 14px); opacity:.55; } .afi-effect--node-pulse::before{ content:""; inset:0; background: radial-gradient(circle at 18% 26%,color-mix(in srgb,var(--afi-fx-primary) 82%,transparent) 0 2px,transparent 4px), radial-gradient(circle at 42% 68%,color-mix(in srgb,var(--afi-fx-primary) 82%,transparent) 0 2px,transparent 4px), radial-gradient(circle at 74% 34%,color-mix(in srgb,var(--afi-fx-primary) 82%,transparent) 0 2px,transparent 4px), radial-gradient(circle at 86% 74%,color-mix(in srgb,var(--afi-fx-primary) 82%,transparent) 0 2px,transparent 4px), linear-gradient(28deg,transparent 0 29%,rgba(22,200,255,.18) 30% 30.4%,transparent 31%), linear-gradient(160deg,transparent 0 42%,rgba(22,200,255,.16) 43% 43.4%,transparent 44%), linear-gradient(90deg,transparent 0 55%,rgba(22,200,255,.16) 56% 56.4%,transparent 57%); opacity:.82; } .afi-effect--node-pulse::after{ content:""; inset:0; background: radial-gradient(circle at 18% 26%,color-mix(in srgb,var(--afi-fx-primary) 96%,transparent) 0 6px,transparent 8px), radial-gradient(circle at 42% 68%,color-mix(in srgb,var(--afi-fx-primary) 96%,transparent) 0 6px,transparent 8px), radial-gradient(circle at 74% 34%,color-mix(in srgb,var(--afi-fx-primary) 96%,transparent) 0 6px,transparent 8px), radial-gradient(circle at 86% 74%,color-mix(in srgb,var(--afi-fx-primary) 96%,transparent) 0 6px,transparent 8px); animation:afiFxNodePulse calc(var(--afi-effect-speed,12s)*1.1) ease-in-out infinite; opacity:.75; } .afi-effect--pulse-lines::before{ content:""; inset:0; background: repeating-linear-gradient(0deg,transparent 0 26px,rgba(22,200,255,.10) 26px 27px,transparent 27px 52px), repeating-linear-gradient(90deg,transparent 0 160px,color-mix(in srgb,var(--afi-fx-primary) 82%,transparent) 160px 210px,transparent 210px 360px), repeating-linear-gradient(90deg,transparent 0 180px,color-mix(in srgb,var(--afi-fx-secondary) 68%,transparent) 180px 228px,transparent 228px 380px); background-size:100% 100%,380px 100%,420px 100%; animation:afiFxPulseLines calc(var(--afi-effect-speed,12s)*.95) linear infinite; opacity:.82; } .afi-effect--pulse-lines::after{ content:""; inset:0; background: linear-gradient(90deg,transparent 0 16%,color-mix(in srgb,var(--afi-fx-primary) 44%,transparent) 22% 26%,transparent 32% 100%), linear-gradient(90deg,transparent 0 44%,color-mix(in srgb,var(--afi-fx-secondary) 36%,transparent) 51% 55%,transparent 61% 100%); filter:blur(6px); animation:afiFxPulseLines calc(var(--afi-effect-speed,12s)*.95) linear infinite; opacity:.55; } @keyframes afiFxSignalFlow{ 0%{background-position:0 0,-260px 34%,260px 64%} 100%{background-position:0 0,calc(100% + 260px) 34%,calc(-100% - 260px) 64%} } @keyframes afiFxSignalNodes{ 0%{background-position:0% 34%,100% 64%} 100%{background-position:100% 34%,0% 64%} } @keyframes afiFxScanSweep{ 0%{transform:translateY(-42%)} 100%{transform:translateY(84%)} } @keyframes afiFxNodePulse{ 0%,100%{transform:scale(.82);opacity:.36} 50%{transform:scale(1.06);opacity:.95} } @keyframes afiFxPulseLines{ 0%{background-position:0 0,0 0,0 0} 100%{background-position:0 0,380px 0,420px 0} } /* ========================================================= AFIWAI Studio 1.42.0 — Computer / Technology FX Pack All new layers receive the same reliable pseudo-element geometry. ========================================================= */ .afi-effect[class*="afi-effect--"]::before, .afi-effect[class*="afi-effect--"]::after{ position:absolute; inset:0; z-index:0; pointer-events:none; box-sizing:border-box; } /* ---------- New static computer / tech backgrounds ---------- */ .afi-effect--binary-grid::before{ content:"0101 1100 0011 1010 0110 1001 0101 0011\A 1001 0110 1101 0010 1011 0100 1110 0001\A 0011 1010 0111 1000 0101 1110 0010 1001"; white-space:pre-wrap; font:600 11px/2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.18em; color:color-mix(in srgb,var(--afi-fx-primary) 18%,transparent); padding:7% 6%; } .afi-effect--binary-grid::after{ content:""; background: linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 92%); } .afi-effect--pcb-blueprint::before{ content:""; background: linear-gradient(90deg,transparent 0 14%,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent) 14% 14.4%,transparent 14.4% 52%,color-mix(in srgb,var(--afi-fx-primary) 16%,transparent) 52% 52.4%,transparent 52.4%), linear-gradient(0deg,transparent 0 26%,color-mix(in srgb,var(--afi-fx-secondary) 16%,transparent) 26% 26.4%,transparent 26.4% 72%,color-mix(in srgb,var(--afi-fx-secondary) 14%,transparent) 72% 72.4%,transparent 72.4%); } .afi-effect--pcb-blueprint::after{ content:""; inset:8%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 22%,transparent); background: radial-gradient(circle at 14% 26%,color-mix(in srgb,var(--afi-fx-primary) 40%,transparent) 0 3px,transparent 4px), radial-gradient(circle at 52% 72%,color-mix(in srgb,var(--afi-fx-primary) 40%,transparent) 0 3px,transparent 4px), radial-gradient(circle at 86% 34%,color-mix(in srgb,var(--afi-fx-primary) 40%,transparent) 0 3px,transparent 4px); border-radius:12px; } .afi-effect--chip-matrix::before{ content:""; inset:5%; background: repeating-linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 6%,transparent) 0 54px,transparent 54px 62px), repeating-linear-gradient(0deg,color-mix(in srgb,var(--afi-fx-secondary) 6%,transparent) 0 40px,transparent 40px 48px); border:1px solid color-mix(in srgb,var(--afi-fx-primary) 12%,transparent); } .afi-effect--chip-matrix::after{ content:""; inset:12%; background: linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 11%,transparent),transparent 1px), linear-gradient(0deg,color-mix(in srgb,var(--afi-fx-primary) 11%,transparent),transparent 1px); background-size:64px 48px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--afi-fx-primary) 8%,transparent); } .afi-effect--circuit-map::before{ content:""; background: linear-gradient(90deg,transparent 0 18%,color-mix(in srgb,var(--afi-fx-primary) 15%,transparent) 18% 18.3%,transparent 18.3% 46%,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 46% 46.3%,transparent 46.3% 78%,color-mix(in srgb,var(--afi-fx-primary) 14%,transparent) 78% 78.3%,transparent 78.3%), linear-gradient(0deg,transparent 0 22%,color-mix(in srgb,var(--afi-fx-secondary) 13%,transparent) 22% 22.3%,transparent 22.3% 58%,color-mix(in srgb,var(--afi-fx-secondary) 11%,transparent) 58% 58.3%,transparent 58.3% 82%,color-mix(in srgb,var(--afi-fx-secondary) 13%,transparent) 82% 82.3%,transparent 82.3%); } .afi-effect--circuit-map::after{ content:""; background: radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--afi-fx-primary) 55%,transparent) 0 2px,transparent 3px), radial-gradient(circle at 46% 58%,color-mix(in srgb,var(--afi-fx-primary) 45%,transparent) 0 2px,transparent 3px), radial-gradient(circle at 78% 82%,color-mix(in srgb,var(--afi-fx-primary) 55%,transparent) 0 2px,transparent 3px); } .afi-effect--server-rack-grid::before{ content:""; inset:7%; background: repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 82px,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 82px 83px,rgba(255,255,255,.025) 83px 166px), repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 15px,transparent 15px 23px); border:1px solid color-mix(in srgb,var(--afi-fx-primary) 10%,transparent); } .afi-effect--server-rack-grid::after{ content:""; inset:9%; background: radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--afi-fx-primary) 62%,transparent) 0 2px,transparent 3px), radial-gradient(circle at 42% 8%,color-mix(in srgb,var(--afi-fx-primary) 48%,transparent) 0 2px,transparent 3px), radial-gradient(circle at 76% 8%,color-mix(in srgb,var(--afi-fx-primary) 62%,transparent) 0 2px,transparent 3px); } .afi-effect--datacenter-floor::before{ content:""; inset:-10% -8%; background: repeating-linear-gradient(90deg,transparent 0 70px,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 70px 71px,transparent 71px 140px), repeating-linear-gradient(0deg,transparent 0 44px,color-mix(in srgb,var(--afi-fx-secondary) 8%,transparent) 44px 45px,transparent 45px 90px); transform:perspective(520px) rotateX(64deg) scale(1.35); transform-origin:50% 100%; } .afi-effect--datacenter-floor::after{ content:""; inset:10% 8%; border-left:1px solid color-mix(in srgb,var(--afi-fx-primary) 13%,transparent); border-right:1px solid color-mix(in srgb,var(--afi-fx-primary) 13%,transparent); } .afi-effect--network-topology::before{ content:""; background: linear-gradient(28deg,transparent 0 27%,color-mix(in srgb,var(--afi-fx-primary) 13%,transparent) 27.4% 27.7%,transparent 28.1%), linear-gradient(153deg,transparent 0 43%,color-mix(in srgb,var(--afi-fx-secondary) 12%,transparent) 43.4% 43.7%,transparent 44.1%), linear-gradient(90deg,transparent 0 56%,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 56.4% 56.7%,transparent 57.1%); } .afi-effect--network-topology::after{ content:""; background: radial-gradient(circle at 16% 26%,color-mix(in srgb,var(--afi-fx-primary) 50%,transparent) 0 3px,transparent 4px), radial-gradient(circle at 42% 68%,color-mix(in srgb,var(--afi-fx-primary) 45%,transparent) 0 3px,transparent 4px), radial-gradient(circle at 72% 34%,color-mix(in srgb,var(--afi-fx-primary) 50%,transparent) 0 3px,transparent 4px), radial-gradient(circle at 88% 72%,color-mix(in srgb,var(--afi-fx-primary) 40%,transparent) 0 3px,transparent 4px); } .afi-effect--fiber-map::before{ content:""; background: linear-gradient(20deg,transparent 0 24%,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent) 24.3% 24.6%,transparent 24.9%), linear-gradient(160deg,transparent 0 38%,color-mix(in srgb,var(--afi-fx-secondary) 18%,transparent) 38.3% 38.6%,transparent 38.9%), linear-gradient(90deg,transparent 0 62%,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 62.3% 62.6%,transparent 62.9%); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--afi-fx-primary) 10%,transparent)); } .afi-effect--fiber-map::after{ content:"FIBER · CORE · EDGE · LINK"; padding:9% 7%; color:color-mix(in srgb,var(--afi-fx-primary) 13%,transparent); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.24em; } .afi-effect--cloud-architecture::before{ content:"CLOUD\A ├─ API\A ├─ APP\A ├─ DB\A └─ CACHE"; white-space:pre; padding:8% 9%; color:color-mix(in srgb,var(--afi-fx-primary) 18%,transparent); font:700 12px/1.75 ui-monospace,monospace; letter-spacing:.08em; } .afi-effect--cloud-architecture::after{ content:""; inset:8%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 10%,transparent); border-radius:18px; background:linear-gradient(90deg,transparent 0 35%,color-mix(in srgb,var(--afi-fx-primary) 8%,transparent) 35.2% 35.5%,transparent 35.8%); } .afi-effect--api-map::before{ content:"CLIENT → API → SERVICE → DB"; display:flex; align-items:center; justify-content:center; color:color-mix(in srgb,var(--afi-fx-primary) 18%,transparent); font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.12em; } .afi-effect--api-map::after{ content:""; inset:28% 8%; border-top:1px solid color-mix(in srgb,var(--afi-fx-primary) 14%,transparent); border-bottom:1px solid color-mix(in srgb,var(--afi-fx-secondary) 10%,transparent); } .afi-effect--terminal-wall::before{ content:"$ status --all\A service:web ONLINE\A service:api ONLINE\A service:db ONLINE\A net:edge SECURE"; white-space:pre; padding:8% 6%; color:color-mix(in srgb,var(--afi-fx-primary) 16%,transparent); font:600 11px/1.8 ui-monospace,monospace; letter-spacing:.04em; } .afi-effect--terminal-wall::after{ content:""; inset:6%; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 8%,transparent); background:repeating-linear-gradient(0deg,transparent 0 22px,color-mix(in srgb,var(--afi-fx-primary) 3%,transparent) 22px 23px); } .afi-effect--code-blueprint::before{ content:"01 function init()\A 02 connect(network)\A 03 verify(token)\A 04 render(system)\A 05 return ONLINE"; white-space:pre; padding:7% 6%; color:color-mix(in srgb,var(--afi-fx-primary) 14%,transparent); font:600 11px/1.75 ui-monospace,monospace; letter-spacing:.04em; } .afi-effect--code-blueprint::after{ content:""; background: linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 6%,transparent) 1px,transparent 1px), linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 5%,transparent) 1px,transparent 1px); background-size:36px 36px; } /* ---------- New computer / technology animations ---------- */ .afi-effect--data-stream::before{ content:""; background: repeating-linear-gradient(0deg,transparent 0 24px,rgba(22,200,255,.07) 24px 25px,transparent 25px 50px), linear-gradient(90deg,transparent 0 5%,rgba(22,200,255,.85) 16% 24%,transparent 34% 100%); background-size:100% 100%,320px 2px; background-repeat:repeat,no-repeat; background-position:0 0,-320px 28%; animation:afiTechHorizontal 7s linear infinite; } .afi-effect--data-stream::after{ content:"DATA 128kb → 256kb → 512kb"; padding:7% 6%; color:rgba(178,232,255,.16); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.14em; } .afi-effect--packet-transfer::before{ content:""; background: linear-gradient(90deg,transparent 0 12%,rgba(22,200,255,.16) 12% 88%,transparent 88%); background-size:100% 1px; background-position:center; background-repeat:no-repeat; } .afi-effect--packet-transfer::after{ content:"PKT"; width:34px;height:18px;inset:calc(50% - 9px) auto auto -40px; display:grid;place-items:center; border:1px solid rgba(22,200,255,.72); border-radius:4px; color:#b8efff; background:rgba(0,100,192,.30); font:700 8px/1 ui-monospace,monospace; animation:afiTechPacket 5.5s linear infinite; } .afi-effect--terminal-scan::before{ content:"$ boot service\A > network online\A > tls verified\A > api ready\A > status: operational\A > _"; white-space:pre; padding:7% 6%; color:rgba(131,223,255,.36); font:600 11px/1.65 ui-monospace,monospace; animation:afiTechTerminal 8s steps(6,end) infinite; } .afi-effect--terminal-scan::after{ content:""; height:1px;top:auto;bottom:16%;left:5%;right:5%; background:linear-gradient(90deg,transparent,#16c8ff,transparent); animation:afiTechScanY 6s linear infinite; } .afi-effect--code-cursor::before{ content:"const system = connect();\Aif (system.secure) deploy();\Astatus = ONLINE;"; white-space:pre; padding:9% 7%; color:rgba(166,231,255,.30); font:600 11px/1.8 ui-monospace,monospace; } .afi-effect--code-cursor::after{ content:"▋"; inset:auto auto 23% 36%; color:#16c8ff; font:700 16px/1 ui-monospace,monospace; animation:afiTechBlink 1s steps(1,end) infinite; } .afi-effect--binary-bus::before, .afi-effect--binary-bus::after{ content:"01001101 10110010 00101101 11100010 01011010 10010110"; white-space:nowrap; color:rgba(151,232,255,.28); font:700 10px/1 ui-monospace,monospace; letter-spacing:.2em; top:30%;bottom:auto; width:max-content; animation:afiTechTextBus 10s linear infinite; } .afi-effect--binary-bus::after{top:66%;animation-duration:14s;animation-direction:reverse;opacity:.35} .afi-effect--hex-data::before{ content:"0x7A 0x1F 0xC4 0x09 0xE2 0x88 0x3D 0xA1\A0x14 0x6E 0xB3 0x5F 0x92 0xD7 0x20 0x4C"; white-space:pre; padding:7% 6%; color:rgba(142,226,255,.26); font:700 10px/2 ui-monospace,monospace; letter-spacing:.08em; animation:afiTechFloatY 8s ease-in-out infinite; } .afi-effect--hex-data::after{ content:"HEX / DATA"; top:auto;bottom:7%;left:auto;right:6%; color:rgba(22,200,255,.30); font:800 9px/1 ui-monospace,monospace; letter-spacing:.2em; } .afi-effect--log-stream::before{ content:"[20:14:01] INFO service.ready\A[20:14:03] NET edge.connected\A[20:14:04] TLS handshake.ok\A[20:14:06] API request 200\A[20:14:08] CACHE hit\A[20:14:09] DB query 12ms\A[20:14:11] INFO healthy"; white-space:pre; padding:6% 5%; color:rgba(159,227,255,.27); font:600 9px/1.85 ui-monospace,monospace; animation:afiTechLogs 9s linear infinite; } .afi-effect--log-stream::after{content:"";background:linear-gradient(180deg,transparent 0 80%,rgba(5,16,28,.75) 100%)} .afi-effect--command-queue::before{ content:"CMD 01 [READY]\A CMD 02 [WAIT]\A CMD 03 [WAIT]\A CMD 04 [WAIT]"; white-space:pre; padding:8% 7%; color:rgba(168,232,255,.26); font:700 10px/2 ui-monospace,monospace; animation:afiTechQueue 6s steps(4,end) infinite; } .afi-effect--command-queue::after{ content:"PROCESS"; inset:auto 7% 9% auto; color:#16c8ff; font:800 9px/1 ui-monospace,monospace; letter-spacing:.14em; animation:afiTechBlink 1.4s ease-in-out infinite; } .afi-effect--memory-blocks::before{ content:""; inset:8%; background: repeating-linear-gradient(90deg,rgba(22,200,255,.09) 0 42px,transparent 42px 48px), repeating-linear-gradient(0deg,rgba(0,100,192,.08) 0 30px,transparent 30px 36px); } .afi-effect--memory-blocks::after{ content:""; inset:8%; background: linear-gradient(90deg,transparent 0 22%,rgba(22,200,255,.42) 22% 30%,transparent 30% 62%,rgba(0,100,192,.32) 62% 70%,transparent 70%); background-size:180% 100%; animation:afiTechMemory 7s linear infinite; } .afi-effect--data-cache::before{ content:"CACHE HIT 8ms\A CACHE MISS 22ms\A CACHE HIT 6ms"; white-space:pre; padding:9% 7%; color:rgba(161,230,255,.27); font:700 10px/2 ui-monospace,monospace; } .afi-effect--data-cache::after{ content:"HIT"; inset:auto auto 12% 8%; padding:5px 8px; border:1px solid rgba(22,200,255,.34); border-radius:5px; color:#16c8ff; font:800 9px/1 ui-monospace,monospace; animation:afiTechCache 4s steps(2,end) infinite; } .afi-effect--digital-blueprint::before{ content:""; background: linear-gradient(rgba(22,200,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(22,200,255,.07) 1px,transparent 1px); background-size:42px 42px; animation:afiTechGridDrift 16s linear infinite; } .afi-effect--digital-blueprint::after{ content:"X: 2048 Y: 1024 GRID: ACTIVE"; inset:auto 5% 5% auto; color:rgba(164,230,255,.24); font:700 9px/1 ui-monospace,monospace; letter-spacing:.12em; } .afi-effect--matrix-code-rain::before, .afi-effect--matrix-code-rain::after{ content:"101001 0xAF 110010 001101 100101\A010110 101001 0x4C 111000 011010\A110101 001011 101110 0x7F 010001\A001010 111101 100010 011001 0x2A\A111000 010101 101011 000110 110100\A0x91 101010 001111 110001 010110\A101101 011000 0x5D 100111 001010"; white-space:pre; width:52%; height:180%; top:-80%; padding:0 2%; color:rgba(30,255,94,.48); text-shadow:0 0 7px rgba(30,255,94,.28); font:700 10px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; animation:afiTechMatrixRain 8s linear infinite; } .afi-effect--matrix-code-rain::after{ left:48%; top:-115%; animation-duration:10.5s; opacity:.42; filter:blur(.15px); } .afi-effect--network-nodes::before{ content:""; background: linear-gradient(27deg,transparent 0 28%,rgba(22,200,255,.16) 28.3% 28.6%,transparent 28.9%), linear-gradient(152deg,transparent 0 44%,rgba(22,200,255,.14) 44.3% 44.6%,transparent 44.9%); } .afi-effect--network-nodes::after{ content:""; background: radial-gradient(circle at 16% 26%,#16c8ff 0 2px,transparent 3px), radial-gradient(circle at 42% 68%,#16c8ff 0 2px,transparent 3px), radial-gradient(circle at 74% 32%,#16c8ff 0 2px,transparent 3px), radial-gradient(circle at 88% 72%,#16c8ff 0 2px,transparent 3px); animation:afiTechNode 4.8s ease-in-out infinite; } .afi-effect--ping-pulse::before, .afi-effect--ping-pulse::after{ content:""; width:18px;height:18px;inset:calc(50% - 9px); border:1px solid rgba(22,200,255,.66); border-radius:50%; animation:afiTechPing 4s ease-out infinite; } .afi-effect--ping-pulse::after{animation-delay:2s} .afi-effect--routing-path::before{ content:""; background: linear-gradient(90deg,transparent 0 12%,rgba(22,200,255,.15) 12% 48%,transparent 48%), linear-gradient(24deg,transparent 0 52%,rgba(22,200,255,.14) 52.3% 70%,transparent 70.3%); } .afi-effect--routing-path::after{ content:"●"; inset:42% auto auto 8%; color:#16c8ff; text-shadow:0 0 10px #16c8ff; animation:afiTechRoute 6s linear infinite; } .afi-effect--cloud-sync::before{ content:"CLOUD"; display:grid;place-items:center; width:90px;height:42px;inset:calc(50% - 21px) auto auto calc(50% - 45px); border:1px solid rgba(22,200,255,.26); border-radius:22px; color:rgba(181,233,255,.44); font:800 10px/1 ui-monospace,monospace; } .afi-effect--cloud-sync::after{ content:"↔ SYNC ↔"; display:grid;place-items:center; color:#16c8ff; font:800 10px/1 ui-monospace,monospace; animation:afiTechBlink 2.8s ease-in-out infinite; } .afi-effect--api-request::before{ content:"GET /api/v1/status →"; inset:36% auto auto 7%; color:rgba(169,231,255,.40); font:700 10px/1 ui-monospace,monospace; animation:afiTechApi 5s ease-in-out infinite; } .afi-effect--api-request::after{ content:"← 200 OK"; inset:auto 7% 36% auto; color:#16c8ff; font:800 10px/1 ui-monospace,monospace; animation:afiTechApi 5s ease-in-out infinite reverse; } .afi-effect--dns-resolve::before{ content:"CLIENT → DNS → 203.0.113.24 → SERVER"; display:flex;align-items:center;justify-content:center; color:rgba(174,232,255,.28); font:700 10px/1 ui-monospace,monospace; letter-spacing:.06em; } .afi-effect--dns-resolve::after{ content:"●"; inset:calc(50% - 7px) auto auto 9%; color:#16c8ff; text-shadow:0 0 10px #16c8ff; animation:afiTechRoute 6.4s linear infinite; } .afi-effect--load-balancer::before{ content:""; background: linear-gradient(26deg,transparent 0 42%,rgba(22,200,255,.16) 42.4% 42.7%,transparent 43.1%), linear-gradient(0deg,transparent 0 50%,rgba(22,200,255,.15) 50.4% 50.7%,transparent 51.1%), linear-gradient(154deg,transparent 0 42%,rgba(22,200,255,.16) 42.4% 42.7%,transparent 43.1%); } .afi-effect--load-balancer::after{ content:"LB"; width:38px;height:38px;inset:calc(50% - 19px); display:grid;place-items:center; border:1px solid rgba(22,200,255,.38); border-radius:50%; color:#16c8ff; font:800 10px/1 ui-monospace,monospace; animation:afiTechNode 3.8s ease-in-out infinite; } .afi-effect--cluster-sync::before{ content:"NODE A NODE B\A\A CLUSTER\A\A NODE C NODE D"; white-space:pre; display:grid;place-items:center; color:rgba(172,232,255,.24); font:700 10px/1.7 ui-monospace,monospace; } .afi-effect--cluster-sync::after{ content:""; width:20px;height:20px;inset:calc(50% - 10px); border:1px solid #16c8ff;border-radius:50%; box-shadow:0 0 16px rgba(22,200,255,.24); animation:afiTechCluster 4.6s ease-in-out infinite; } .afi-effect--fiber-link::before{ content:""; background: linear-gradient(10deg,transparent 0 32%,rgba(22,200,255,.18) 32.4% 32.7%,transparent 33.1%), linear-gradient(0deg,transparent 0 50%,rgba(22,200,255,.14) 50.4% 50.7%,transparent 51.1%), linear-gradient(-10deg,transparent 0 68%,rgba(22,200,255,.18) 68.4% 68.7%,transparent 69.1%); } .afi-effect--fiber-link::after{ content:""; width:90px;height:3px;inset:calc(50% - 1px) auto auto -90px; background:linear-gradient(90deg,transparent,#16c8ff,transparent); filter:drop-shadow(0 0 7px #16c8ff); animation:afiTechFiber 4.8s linear infinite; } .afi-effect--protocol-layers::before{ content:"HTTP\A TLS\A TCP\A IP"; white-space:pre; padding:8% 7%; color:rgba(168,231,255,.28); font:800 11px/2 ui-monospace,monospace; letter-spacing:.12em; } .afi-effect--protocol-layers::after{ content:""; inset:8% 7%; background:linear-gradient(180deg,rgba(22,200,255,.25),transparent 24%); background-size:100% 25%; animation:afiTechProtocol 5s steps(4,end) infinite; } .afi-effect--firewall-gate::before{ content:""; left:50%;right:auto;width:2px; background:repeating-linear-gradient(0deg,#16c8ff 0 10px,transparent 10px 18px); opacity:.35; } .afi-effect--firewall-gate::after{ content:"PKT → | FIREWALL | → PASS"; display:flex;align-items:center;justify-content:center; color:rgba(170,232,255,.28); font:700 9px/1 ui-monospace,monospace; letter-spacing:.08em; animation:afiTechFirewall 5s ease-in-out infinite; } .afi-effect--server-activity::before{ content:""; inset:8%; background: repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 14px,transparent 14px 22px), repeating-linear-gradient(90deg,transparent 0 86px,rgba(22,200,255,.08) 86px 87px,transparent 87px 174px); } .afi-effect--server-activity::after{ content:""; inset:10%; background: radial-gradient(circle at 8% 8%,#16c8ff 0 2px,transparent 3px), radial-gradient(circle at 36% 8%,#16c8ff 0 2px,transparent 3px), radial-gradient(circle at 64% 8%,#16c8ff 0 2px,transparent 3px), radial-gradient(circle at 92% 8%,#16c8ff 0 2px,transparent 3px); animation:afiTechServer 2.6s steps(4,end) infinite; } .afi-effect--system-monitor::before{ content:"CPU 34% RAM 62% NET 18Mb/s"; inset:7% auto auto 6%; color:rgba(171,232,255,.30); font:700 9px/1 ui-monospace,monospace; letter-spacing:.08em; } .afi-effect--system-monitor::after{ content:""; inset:28% 6% 12%; background: linear-gradient(140deg,transparent 0 13%,#16c8ff 13.4% 14%,transparent 14.5% 28%,#16c8ff 28.4% 29%,transparent 29.5% 45%,#16c8ff 45.4% 46%,transparent 46.5% 68%,#16c8ff 68.4% 69%,transparent 69.5%); background-size:220px 100%; animation:afiTechGraph 8s linear infinite; filter:drop-shadow(0 0 5px rgba(22,200,255,.28)); } .afi-effect--bandwidth-graph::before{ content:"IN ▲ 824 Mb/s\AOUT ▼ 412 Mb/s"; white-space:pre; inset:8% auto auto 6%; color:rgba(171,232,255,.30); font:700 9px/1.7 ui-monospace,monospace; } .afi-effect--bandwidth-graph::after{ content:""; inset:36% 6% 10%; background: linear-gradient(160deg,transparent 0 10%,rgba(22,200,255,.5) 10.5% 11%,transparent 11.5% 20%,rgba(22,200,255,.34) 20.5% 21%,transparent 21.5% 40%,rgba(22,200,255,.52) 40.5% 41%,transparent 41.5%); background-size:280px 100%; animation:afiTechGraph 9s linear infinite; } .afi-effect--latency-meter::before{ content:"RTT 18ms JITTER 2ms LOSS 0.0%"; inset:10% 6% auto; color:rgba(167,232,255,.31); font:700 9px/1 ui-monospace,monospace; letter-spacing:.08em; } .afi-effect--latency-meter::after{ content:"18ms"; width:72px;height:72px;inset:calc(50% - 36px); display:grid;place-items:center; border:1px solid rgba(22,200,255,.30); border-radius:50%; color:#16c8ff; font:800 12px/1 ui-monospace,monospace; animation:afiTechNode 3.4s ease-in-out infinite; } .afi-effect--heartbeat::before{ content:""; inset:35% 5%; background: linear-gradient(105deg,transparent 0 20%,#16c8ff 20.5% 21%,transparent 21.5% 35%,#16c8ff 35.5% 37%,transparent 37.5% 55%,#16c8ff 55.5% 56%,transparent 56.5%); background-size:220px 100%; animation:afiTechGraph 4.8s linear infinite; filter:drop-shadow(0 0 6px rgba(22,200,255,.28)); } .afi-effect--heartbeat::after{ content:"ONLINE"; inset:auto 6% 8% auto; color:rgba(22,200,255,.55); font:800 9px/1 ui-monospace,monospace; letter-spacing:.16em; animation:afiTechBlink 2s ease-in-out infinite; } .afi-effect--uptime-monitor::before{ content:"● WEB UP\A● API UP\A● DB UP\A● EDGE UP"; white-space:pre; padding:8% 7%; color:rgba(164,233,255,.32); font:700 10px/2 ui-monospace,monospace; } .afi-effect--uptime-monitor::after{ content:"99.99%"; inset:auto 7% 8% auto; color:#16c8ff; font:800 12px/1 ui-monospace,monospace; animation:afiTechBlink 3s ease-in-out infinite; } .afi-effect--rack-telemetry::before{ content:"RACK-01 CPU 42 NET 18\A RACK-02 CPU 37 NET 24\A RACK-03 CPU 55 NET 16"; white-space:pre; padding:8% 7%; color:rgba(165,232,255,.28); font:700 9px/2 ui-monospace,monospace; } .afi-effect--rack-telemetry::after{ content:""; inset:8%; background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(22,200,255,.08) 28px 29px,transparent 29px 56px); animation:afiTechTelemetry 6s linear infinite; } .afi-effect--hud-telemetry::before{ content:"CPU 42% MEM 62%\A NET 18Mb RTT 18ms\A TLS OK EDGE FR-1"; white-space:pre; padding:7% 6%; color:rgba(165,232,255,.28); font:700 9px/1.9 ui-monospace,monospace; letter-spacing:.06em; } .afi-effect--hud-telemetry::after{ content:""; inset:6%; border:1px solid rgba(22,200,255,.12); border-radius:14px; animation:afiTechHud 5s ease-in-out infinite; } .afi-effect--cpu-pipeline::before{ content:"INPUT → PROCESS → CACHE → OUTPUT"; display:flex;align-items:center;justify-content:center; color:rgba(174,232,255,.26); font:800 9px/1 ui-monospace,monospace; letter-spacing:.06em; } .afi-effect--cpu-pipeline::after{ content:"●"; inset:calc(50% - 7px) auto auto 8%; color:#16c8ff; text-shadow:0 0 9px #16c8ff; animation:afiTechRoute 5.8s linear infinite; } .afi-effect--security-scan::before{ content:"SECURITY SCAN"; inset:8% auto auto 6%; color:rgba(167,232,255,.28); font:800 9px/1 ui-monospace,monospace; letter-spacing:.16em; } .afi-effect--security-scan::after{ content:""; height:28%;top:-30%;bottom:auto; background:linear-gradient(180deg,transparent,rgba(22,200,255,.16),rgba(22,200,255,.55),rgba(22,200,255,.16),transparent); animation:afiTechScanY 5.8s linear infinite; } .afi-effect--encryption-flow::before{ content:"DATA → AES-256 → 7F3A:91C2:E804"; display:flex;align-items:center;justify-content:center; color:rgba(169,232,255,.28); font:700 9px/1 ui-monospace,monospace; letter-spacing:.06em; } .afi-effect--encryption-flow::after{ content:"LOCKED"; inset:auto 7% 9% auto; color:#16c8ff; font:800 9px/1 ui-monospace,monospace; letter-spacing:.16em; animation:afiTechEncrypt 4.4s steps(2,end) infinite; } .afi-effect--database-query::before{ content:"SELECT * FROM system\A WHERE status = 'ONLINE';"; white-space:pre; padding:9% 7%; color:rgba(164,230,255,.28); font:700 10px/1.8 ui-monospace,monospace; } .afi-effect--database-query::after{ content:"DB ↔ 12ms"; inset:auto 7% 9% auto; color:#16c8ff; font:800 10px/1 ui-monospace,monospace; animation:afiTechApi 4.8s ease-in-out infinite; } .afi-effect--data-center-grid::before{ content:""; inset:7%; background: repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 70px,rgba(22,200,255,.08) 70px 71px,rgba(255,255,255,.022) 71px 142px), repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 18px,transparent 18px 28px); } .afi-effect--data-center-grid::after{ content:""; inset:9%; background:linear-gradient(90deg,transparent 0 16%,rgba(22,200,255,.42) 16% 17%,transparent 17% 48%,rgba(22,200,255,.32) 48% 49%,transparent 49% 80%,rgba(22,200,255,.42) 80% 81%,transparent 81%); background-size:130% 100%; animation:afiTechRack 6s linear infinite; } .afi-effect--circuit-signal::before{ content:""; background: linear-gradient(90deg,transparent 0 12%,rgba(22,200,255,.13) 12% 78%,transparent 78%), linear-gradient(0deg,transparent 0 46%,rgba(22,200,255,.11) 46% 68%,transparent 68%); background-size:100% 1px,1px 100%; background-position:center,42% center; background-repeat:no-repeat; } .afi-effect--circuit-signal::after{ content:"●"; inset:calc(50% - 6px) auto auto 8%; color:#16c8ff; text-shadow:0 0 10px #16c8ff; animation:afiTechRoute 5.5s linear infinite; } .afi-effect--pcb-trace-flow::before{ content:""; background: linear-gradient(90deg,transparent 0 18%,rgba(22,200,255,.12) 18% 62%,transparent 62%), linear-gradient(0deg,transparent 0 32%,rgba(0,100,192,.12) 32% 76%,transparent 76%), linear-gradient(90deg,transparent 0 52%,rgba(22,200,255,.10) 52% 88%,transparent 88%); background-size:100% 1px,1px 100%,100% 1px; background-position:center,42% center,center 72%; background-repeat:no-repeat; } .afi-effect--pcb-trace-flow::after{ content:""; width:72px;height:3px;inset:calc(50% - 1px) auto auto -72px; background:linear-gradient(90deg,transparent,#16c8ff,transparent); animation:afiTechFiber 5.2s linear infinite; } .afi-effect--packet-grid::before{ content:""; background: linear-gradient(rgba(22,200,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(22,200,255,.07) 1px,transparent 1px); background-size:48px 48px; } .afi-effect--packet-grid::after{ content:"PKT"; width:28px;height:16px;inset:24px auto auto 0; display:grid;place-items:center; border:1px solid rgba(22,200,255,.45); border-radius:3px; color:#baf0ff; background:rgba(0,100,192,.22); font:700 7px/1 ui-monospace,monospace; animation:afiTechPacketGrid 8s linear infinite; } .afi-effect--tech-lines::before{ content:""; background: repeating-linear-gradient(0deg,transparent 0 30px,rgba(22,200,255,.10) 30px 31px,transparent 31px 62px); animation:afiTechLines 8s ease-in-out infinite; } .afi-effect--tech-lines::after{ content:""; background: linear-gradient(90deg,transparent 0 15%,rgba(22,200,255,.38) 22% 30%,transparent 38% 100%), linear-gradient(90deg,transparent 0 52%,rgba(0,100,192,.34) 60% 68%,transparent 76% 100%); background-size:420px 1px,480px 1px; background-position:-420px 34%,-480px 68%; background-repeat:no-repeat; animation:afiTechLinesMove 8s linear infinite; } .afi-effect--coordinate-scan::before{ content:""; background: linear-gradient(rgba(22,200,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(22,200,255,.06) 1px,transparent 1px); background-size:32px 32px; } .afi-effect--coordinate-scan::after{ content:"+"; width:26px;height:26px;inset:10% auto auto 10%; display:grid;place-items:center; border:1px solid rgba(22,200,255,.34); border-radius:50%; color:#16c8ff; font:700 16px/1 ui-monospace,monospace; animation:afiTechCoordinate 9s ease-in-out infinite; } .afi-effect--signal-trace::before{ content:""; inset:34% 5%; background: linear-gradient(160deg,transparent 0 12%,#16c8ff 12.4% 13%,transparent 13.4% 24%,#16c8ff 24.4% 25%,transparent 25.4% 46%,#16c8ff 46.4% 47%,transparent 47.4% 66%,#16c8ff 66.4% 67%,transparent 67.4%); background-size:240px 100%; animation:afiTechGraph 7s linear infinite; filter:drop-shadow(0 0 5px rgba(22,200,255,.25)); } .afi-effect--signal-trace::after{ content:"SIGNAL"; inset:auto 6% 7% auto; color:rgba(22,200,255,.30); font:800 8px/1 ui-monospace,monospace; letter-spacing:.16em; } /* ---------- Reusable keyframes for the technology pack ---------- */ @keyframes afiTechHorizontal{to{background-position:0 0,calc(100% + 320px) 28%}} @keyframes afiTechPacket{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(calc(100vw + 80px));opacity:0}} @keyframes afiTechTerminal{0%,12%{clip-path:inset(0 0 82% 0)}35%{clip-path:inset(0 0 58% 0)}58%{clip-path:inset(0 0 36% 0)}82%,100%{clip-path:inset(0)}} @keyframes afiTechBlink{0%,48%{opacity:.28}49%,100%{opacity:1}} @keyframes afiTechTextBus{from{transform:translateX(-15%)}to{transform:translateX(75%)}} @keyframes afiTechFloatY{0%,100%{transform:translateY(-5px);opacity:.46}50%{transform:translateY(8px);opacity:.82}} @keyframes afiTechLogs{from{transform:translateY(12%)}to{transform:translateY(-18%)}} @keyframes afiTechQueue{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-11px)}50%,70%{transform:translateY(-22px)}75%,100%{transform:translateY(-33px)}} @keyframes afiTechMemory{from{background-position:-50% 0}to{background-position:150% 0}} @keyframes afiTechCache{0%,49%{content:"HIT"}50%,100%{content:"MISS"}} @keyframes afiTechGridDrift{to{background-position:42px 42px,42px 42px}} @keyframes afiTechMatrixRain{from{transform:translateY(0)}to{transform:translateY(72%)}} @keyframes afiTechNode{0%,100%{opacity:.34;filter:drop-shadow(0 0 0 transparent)}50%{opacity:1;filter:drop-shadow(0 0 8px #16c8ff)}} @keyframes afiTechPing{0%{transform:scale(.5);opacity:.8}100%{transform:scale(11);opacity:0}} @keyframes afiTechRoute{0%{transform:translateX(0);opacity:.25}15%{opacity:1}85%{opacity:1}100%{transform:translateX(76vw);opacity:.2}} @keyframes afiTechApi{0%,100%{transform:translateX(-8px);opacity:.35}50%{transform:translateX(8px);opacity:1}} @keyframes afiTechCluster{0%,100%{transform:scale(.7);box-shadow:0 0 0 0 rgba(22,200,255,.1)}50%{transform:scale(1.2);box-shadow:0 0 0 80px rgba(22,200,255,0)}} @keyframes afiTechFiber{from{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateX(calc(100vw + 160px));opacity:0}} @keyframes afiTechProtocol{to{background-position:0 100%}} @keyframes afiTechFirewall{0%,100%{opacity:.3;letter-spacing:.04em}50%{opacity:1;letter-spacing:.12em}} @keyframes afiTechServer{0%,24%{opacity:.25}25%,49%{opacity:.6}50%,74%{opacity:1}75%,100%{opacity:.45}} @keyframes afiTechGraph{to{background-position:240px 0}} @keyframes afiTechTelemetry{to{transform:translateY(28px)}} @keyframes afiTechHud{0%,100%{box-shadow:inset 0 0 0 rgba(22,200,255,0)}50%{box-shadow:inset 0 0 26px rgba(22,200,255,.08)}} @keyframes afiTechScanY{from{transform:translateY(-20%)}to{transform:translateY(460%)}} @keyframes afiTechEncrypt{0%,49%{content:"DATA"}50%,100%{content:"ENCRYPTED"}} @keyframes afiTechRack{to{background-position:130% 0}} @keyframes afiTechPacketGrid{0%{transform:translate(0,0)}25%{transform:translate(48vw,0)}50%{transform:translate(48vw,144px)}75%{transform:translate(78vw,144px)}100%{transform:translate(78vw,240px)}} @keyframes afiTechLines{0%,100%{opacity:.3}50%{opacity:.85}} @keyframes afiTechLinesMove{to{background-position:calc(100% + 420px) 34%,calc(100% + 480px) 68%}} @keyframes afiTechCoordinate{0%{transform:translate(0,0)}25%{transform:translate(60vw,8vh)}50%{transform:translate(42vw,32vh)}75%{transform:translate(16vw,48vh)}100%{transform:translate(0,0)}} /* ========================================================= AFIWAI Studio 1.52 — colorful fixed technology backgrounds All fixed graphics remain transparent so they can sit on top of any solid color, gradient or image background. ========================================================= */ .afi-effect--neon-circuit::before,.afi-effect--neon-circuit::after, .afi-effect--spectrum-circuit::before,.afi-effect--spectrum-circuit::after, .afi-effect--holo-rings::before,.afi-effect--holo-rings::after, .afi-effect--quantum-rings::before,.afi-effect--quantum-rings::after, .afi-effect--hex-network::before,.afi-effect--hex-network::after, .afi-effect--prism-grid::before,.afi-effect--prism-grid::after, .afi-effect--polygon-mesh::before,.afi-effect--polygon-mesh::after, .afi-effect--neural-mesh::before,.afi-effect--neural-mesh::after, .afi-effect--data-constellation::before,.afi-effect--data-constellation::after, .afi-effect--tech-wave::before,.afi-effect--tech-wave::after, .afi-effect--signal-lanes::before,.afi-effect--signal-lanes::after, .afi-effect--orbital-hud-static::before,.afi-effect--orbital-hud-static::after, .afi-effect--microchip-core::before,.afi-effect--microchip-core::after, .afi-effect--circuit-corners::before,.afi-effect--circuit-corners::after, .afi-effect--circuit-frame::before,.afi-effect--circuit-frame::after, .afi-effect--isometric-blocks::before,.afi-effect--isometric-blocks::after, .afi-effect--data-lattice::before,.afi-effect--data-lattice::after, .afi-effect--coordinate-matrix::before,.afi-effect--coordinate-matrix::after, .afi-effect--fiber-spectrum::before,.afi-effect--fiber-spectrum::after, .afi-effect--digital-shards::before,.afi-effect--digital-shards::after, .afi-effect--blueprint-spectrum::before,.afi-effect--blueprint-spectrum::after, .afi-effect--radar-arc::before,.afi-effect--radar-arc::after, .afi-effect--api-flow-map::before,.afi-effect--api-flow-map::after, .afi-effect--holo-crosshair::before,.afi-effect--holo-crosshair::after, .afi-effect--code-stream::before,.afi-effect--code-stream::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; } .afi-effect--neon-circuit::before{ background: linear-gradient(90deg,transparent 0 7%,color-mix(in srgb,var(--afi-fx-primary) 78%,transparent) 7% 7.25%,transparent 7.25% 27%,color-mix(in srgb,var(--afi-fx-secondary) 66%,transparent) 27% 27.25%,transparent 27.25% 100%), linear-gradient(0deg,transparent 0 18%,color-mix(in srgb,var(--afi-fx-secondary) 60%,transparent) 18% 18.35%,transparent 18.35% 58%,color-mix(in srgb,var(--afi-fx-primary) 65%,transparent) 58% 58.35%,transparent 58.35% 100%); background-size:310px 210px,310px 210px; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--afi-fx-primary) 35%,transparent)); } .afi-effect--neon-circuit::after{ background: radial-gradient(circle at 7% 18%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 27% 58%,var(--afi-fx-secondary) 0 2px,transparent 3px), radial-gradient(circle at 74% 18%,var(--afi-fx-primary) 0 1.5px,transparent 3px); background-size:310px 210px,310px 210px,310px 210px; } .afi-effect--spectrum-circuit::before{ background: repeating-linear-gradient(90deg,transparent 0 52px,color-mix(in srgb,var(--afi-fx-primary) 24%,transparent) 52px 53px,transparent 53px 106px), repeating-linear-gradient(0deg,transparent 0 36px,color-mix(in srgb,var(--afi-fx-secondary) 20%,transparent) 36px 37px,transparent 37px 74px); transform:skewX(-8deg) scale(1.08); } .afi-effect--spectrum-circuit::after{ background: linear-gradient(115deg,transparent 0 12%,color-mix(in srgb,var(--afi-fx-primary) 65%,transparent) 12.2% 12.55%,transparent 12.8% 45%,color-mix(in srgb,var(--afi-fx-secondary) 58%,transparent) 45.2% 45.55%,transparent 45.8%), radial-gradient(circle at 12% 22%,var(--afi-fx-primary) 0 2px,transparent 3px), radial-gradient(circle at 72% 68%,var(--afi-fx-secondary) 0 2px,transparent 3px); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--afi-fx-secondary) 28%,transparent)); } .afi-effect--holo-rings::before{ background: repeating-radial-gradient(circle at 82% 22%,transparent 0 22px,color-mix(in srgb,var(--afi-fx-primary) 42%,transparent) 23px 24px,transparent 25px 39px), repeating-radial-gradient(circle at 16% 78%,transparent 0 28px,color-mix(in srgb,var(--afi-fx-secondary) 34%,transparent) 29px 30px,transparent 31px 48px); } .afi-effect--holo-rings::after{ background: conic-gradient(from 15deg at 82% 22%,transparent 0 8%,color-mix(in srgb,var(--afi-fx-secondary) 42%,transparent) 8% 9%,transparent 9% 21%,color-mix(in srgb,var(--afi-fx-primary) 52%,transparent) 21% 22%,transparent 22% 100%); mask-image:radial-gradient(circle at 82% 22%,#000 0 31%,transparent 32%); } .afi-effect--quantum-rings::before{ inset:8%; background: radial-gradient(circle at 50% 50%,transparent 0 11%,color-mix(in srgb,var(--afi-fx-primary) 55%,transparent) 11.3% 11.8%,transparent 12.1% 23%,color-mix(in srgb,var(--afi-fx-secondary) 45%,transparent) 23.3% 23.8%,transparent 24.1% 36%,color-mix(in srgb,var(--afi-fx-primary) 28%,transparent) 36.3% 36.8%,transparent 37.1%), linear-gradient(90deg,transparent 49.85%,color-mix(in srgb,var(--afi-fx-primary) 38%,transparent) 50%,transparent 50.15%), linear-gradient(0deg,transparent 49.85%,color-mix(in srgb,var(--afi-fx-secondary) 38%,transparent) 50%,transparent 50.15%); } .afi-effect--quantum-rings::after{ background:radial-gradient(circle at 50% 50%,var(--afi-fx-primary) 0 2px,transparent 3px),radial-gradient(circle at 64% 50%,var(--afi-fx-secondary) 0 2px,transparent 3px),radial-gradient(circle at 50% 28%,var(--afi-fx-primary) 0 2px,transparent 3px); } .afi-effect--hex-network::before{ background: linear-gradient(30deg,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent) 1px,transparent 1px), linear-gradient(150deg,color-mix(in srgb,var(--afi-fx-secondary) 16%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 1px,transparent 1px); background-size:52px 90px,52px 90px,52px 90px; } .afi-effect--hex-network::after{ background:radial-gradient(circle,var(--afi-fx-primary) 0 1.5px,transparent 2.5px);background-size:52px 45px;background-position:0 0,26px 22px; } .afi-effect--prism-grid::before{ background: repeating-linear-gradient(60deg,transparent 0 42px,color-mix(in srgb,var(--afi-fx-primary) 17%,transparent) 43px,transparent 44px 86px), repeating-linear-gradient(120deg,transparent 0 42px,color-mix(in srgb,var(--afi-fx-secondary) 16%,transparent) 43px,transparent 44px 86px); } .afi-effect--prism-grid::after{ background:linear-gradient(135deg,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent),transparent 35%,color-mix(in srgb,var(--afi-fx-secondary) 10%,transparent) 72%,transparent); } .afi-effect--polygon-mesh::before{ background: linear-gradient(25deg,transparent 0 29%,color-mix(in srgb,var(--afi-fx-primary) 24%,transparent) 29.2% 29.5%,transparent 29.7% 100%), linear-gradient(155deg,transparent 0 36%,color-mix(in srgb,var(--afi-fx-secondary) 20%,transparent) 36.2% 36.5%,transparent 36.7% 100%), linear-gradient(82deg,transparent 0 63%,color-mix(in srgb,var(--afi-fx-primary) 15%,transparent) 63.2% 63.5%,transparent 63.7% 100%); background-size:260px 190px; } .afi-effect--polygon-mesh::after{ background:radial-gradient(circle,var(--afi-fx-primary) 0 1.5px,transparent 2.5px),radial-gradient(circle,var(--afi-fx-secondary) 0 1.5px,transparent 2.5px);background-size:260px 190px;background-position:22px 34px,164px 112px; } .afi-effect--neural-mesh::before{ background: linear-gradient(35deg,transparent 0 48%,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent) 48.2% 48.6%,transparent 48.8%), linear-gradient(145deg,transparent 0 54%,color-mix(in srgb,var(--afi-fx-secondary) 18%,transparent) 54.2% 54.6%,transparent 54.8%); background-size:180px 130px,220px 160px; } .afi-effect--neural-mesh::after{ background: radial-gradient(circle at 15% 22%,var(--afi-fx-primary) 0 2px,transparent 3px),radial-gradient(circle at 68% 34%,var(--afi-fx-secondary) 0 2px,transparent 3px),radial-gradient(circle at 42% 76%,var(--afi-fx-primary) 0 1.5px,transparent 3px); background-size:220px 170px; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--afi-fx-primary) 30%,transparent)); } .afi-effect--data-constellation::before{ background: radial-gradient(circle,var(--afi-fx-primary) 0 1px,transparent 2px),radial-gradient(circle,var(--afi-fx-secondary) 0 1.5px,transparent 2.5px),radial-gradient(circle,var(--afi-fx-primary) 0 1px,transparent 2px); background-size:86px 86px,137px 137px,211px 211px;background-position:0 0,24px 42px,80px 18px; } .afi-effect--data-constellation::after{ background:linear-gradient(18deg,transparent 0 49.7%,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 49.9% 50.1%,transparent 50.3%),linear-gradient(142deg,transparent 0 49.7%,color-mix(in srgb,var(--afi-fx-secondary) 10%,transparent) 49.9% 50.1%,transparent 50.3%);background-size:190px 150px; } .afi-effect--tech-wave::before{ background: radial-gradient(ellipse at 0% 45%,transparent 0 42%,color-mix(in srgb,var(--afi-fx-primary) 32%,transparent) 42.5% 43%,transparent 43.5% 52%,color-mix(in srgb,var(--afi-fx-secondary) 24%,transparent) 52.5% 53%,transparent 53.5%); transform:scaleX(1.4); } .afi-effect--tech-wave::after{ background:repeating-linear-gradient(90deg,transparent 0 38px,color-mix(in srgb,var(--afi-fx-primary) 12%,transparent) 39px,transparent 40px 78px);mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent); } .afi-effect--signal-lanes::before{ background:repeating-linear-gradient(0deg,transparent 0 36px,color-mix(in srgb,var(--afi-fx-primary) 17%,transparent) 37px,transparent 38px 74px); } .afi-effect--signal-lanes::after{ background:linear-gradient(90deg,transparent 0 8%,color-mix(in srgb,var(--afi-fx-primary) 52%,transparent) 8% 26%,transparent 26% 42%,color-mix(in srgb,var(--afi-fx-secondary) 48%,transparent) 42% 66%,transparent 66%);background-size:380px 1px;background-repeat:repeat-y;background-position:0 18px; } .afi-effect--orbital-hud-static::before{ inset:5%;background:repeating-conic-gradient(from 8deg at 72% 36%,transparent 0 7deg,color-mix(in srgb,var(--afi-fx-primary) 32%,transparent) 7deg 8deg,transparent 8deg 18deg);mask-image:radial-gradient(circle at 72% 36%,transparent 0 18%,#000 18.5% 34%,transparent 34.5%); } .afi-effect--orbital-hud-static::after{ background:radial-gradient(circle at 72% 36%,transparent 0 6%,color-mix(in srgb,var(--afi-fx-secondary) 50%,transparent) 6.3% 6.8%,transparent 7.1% 15%,color-mix(in srgb,var(--afi-fx-primary) 28%,transparent) 15.3% 15.8%,transparent 16.1%); } .afi-effect--microchip-core::before{ inset:22% 30%;border:1px solid color-mix(in srgb,var(--afi-fx-primary) 55%,transparent);border-radius:8px;box-shadow:0 0 28px color-mix(in srgb,var(--afi-fx-primary) 16%,transparent),inset 0 0 22px color-mix(in srgb,var(--afi-fx-secondary) 12%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent),transparent 55%,color-mix(in srgb,var(--afi-fx-secondary) 8%,transparent)); } .afi-effect--microchip-core::after{ background: linear-gradient(90deg,transparent 0 29%,color-mix(in srgb,var(--afi-fx-primary) 35%,transparent) 29.2% 29.45%,transparent 29.65% 70%,color-mix(in srgb,var(--afi-fx-secondary) 35%,transparent) 70.2% 70.45%,transparent 70.65%), linear-gradient(0deg,transparent 0 21%,color-mix(in srgb,var(--afi-fx-primary) 30%,transparent) 21.2% 21.45%,transparent 21.65% 79%,color-mix(in srgb,var(--afi-fx-secondary) 30%,transparent) 79.2% 79.45%,transparent 79.65%); } .afi-effect--circuit-corners::before{ background: linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 55%,transparent),transparent 28%) top left/42% 1px no-repeat, linear-gradient(0deg,color-mix(in srgb,var(--afi-fx-primary) 55%,transparent),transparent 28%) top left/1px 42% no-repeat, linear-gradient(270deg,color-mix(in srgb,var(--afi-fx-secondary) 55%,transparent),transparent 28%) bottom right/42% 1px no-repeat, linear-gradient(180deg,color-mix(in srgb,var(--afi-fx-secondary) 55%,transparent),transparent 28%) bottom right/1px 42% no-repeat; inset:7%; } .afi-effect--circuit-corners::after{background:radial-gradient(circle at 7% 7%,var(--afi-fx-primary) 0 2px,transparent 3px),radial-gradient(circle at 93% 93%,var(--afi-fx-secondary) 0 2px,transparent 3px)} .afi-effect--circuit-frame::before{ inset:6%;border:1px solid color-mix(in srgb,var(--afi-fx-primary) 35%,transparent);border-radius:18px;clip-path:polygon(0 0,32% 0,36% 4%,64% 4%,68% 0,100% 0,100% 100%,70% 100%,66% 96%,34% 96%,30% 100%,0 100%); } .afi-effect--circuit-frame::after{ inset:6%;background:linear-gradient(90deg,var(--afi-fx-primary),transparent 18%,transparent 82%,var(--afi-fx-secondary)) top/100% 1px no-repeat,linear-gradient(90deg,var(--afi-fx-secondary),transparent 18%,transparent 82%,var(--afi-fx-primary)) bottom/100% 1px no-repeat;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--afi-fx-primary) 28%,transparent)); } .afi-effect--isometric-blocks::before{ background:linear-gradient(30deg,color-mix(in srgb,var(--afi-fx-primary) 13%,transparent) 12%,transparent 12.5% 87%,color-mix(in srgb,var(--afi-fx-primary) 13%,transparent) 87.5%),linear-gradient(150deg,color-mix(in srgb,var(--afi-fx-secondary) 13%,transparent) 12%,transparent 12.5% 87%,color-mix(in srgb,var(--afi-fx-secondary) 13%,transparent) 87.5%);background-size:70px 42px; } .afi-effect--isometric-blocks::after{background:linear-gradient(90deg,transparent 49.5%,color-mix(in srgb,var(--afi-fx-primary) 11%,transparent) 50%,transparent 50.5%);background-size:70px 42px} .afi-effect--data-lattice::before{ background:linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 11%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-secondary) 10%,transparent) 1px,transparent 1px);background-size:46px 46px; } .afi-effect--data-lattice::after{background:radial-gradient(circle,var(--afi-fx-primary) 0 1.5px,transparent 2.5px);background-size:92px 92px;background-position:23px 23px;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--afi-fx-primary) 34%,transparent))} .afi-effect--coordinate-matrix::before{background:linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 9%,transparent) 1px,transparent 1px);background-size:32px 32px} .afi-effect--coordinate-matrix::after{background:linear-gradient(90deg,transparent 49.85%,color-mix(in srgb,var(--afi-fx-secondary) 52%,transparent) 50%,transparent 50.15%),linear-gradient(0deg,transparent 49.85%,color-mix(in srgb,var(--afi-fx-primary) 52%,transparent) 50%,transparent 50.15%);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--afi-fx-primary) 24%,transparent))} .afi-effect--fiber-spectrum::before{ background:repeating-linear-gradient(118deg,transparent 0 24px,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent) 25px,transparent 26px 52px),repeating-linear-gradient(62deg,transparent 0 34px,color-mix(in srgb,var(--afi-fx-secondary) 14%,transparent) 35px,transparent 36px 70px);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent) } .afi-effect--fiber-spectrum::after{background:linear-gradient(90deg,transparent,var(--afi-fx-primary),transparent) 0 28%/100% 1px no-repeat,linear-gradient(90deg,transparent,var(--afi-fx-secondary),transparent) 0 72%/100% 1px no-repeat;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--afi-fx-primary) 30%,transparent))} .afi-effect--digital-shards::before{ background:conic-gradient(from 35deg at 18% 24%,transparent 0 12%,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent) 12% 18%,transparent 18% 100%),conic-gradient(from 210deg at 78% 70%,transparent 0 9%,color-mix(in srgb,var(--afi-fx-secondary) 18%,transparent) 9% 16%,transparent 16% 100%); } .afi-effect--digital-shards::after{background:linear-gradient(135deg,transparent 0 31%,color-mix(in srgb,var(--afi-fx-primary) 30%,transparent) 31.3% 31.7%,transparent 32%),linear-gradient(25deg,transparent 0 68%,color-mix(in srgb,var(--afi-fx-secondary) 28%,transparent) 68.3% 68.7%,transparent 69%)} .afi-effect--blueprint-spectrum::before{background:linear-gradient(color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--afi-fx-primary) 10%,transparent) 1px,transparent 1px);background-size:28px 28px} .afi-effect--blueprint-spectrum::after{inset:8%;border-left:2px solid color-mix(in srgb,var(--afi-fx-primary) 45%,transparent);border-bottom:2px solid color-mix(in srgb,var(--afi-fx-secondary) 45%,transparent);background:linear-gradient(90deg,transparent 18%,color-mix(in srgb,var(--afi-fx-primary) 24%,transparent) 18% 18.4%,transparent 18.4% 68%,color-mix(in srgb,var(--afi-fx-secondary) 24%,transparent) 68% 68.4%,transparent 68.4%)} .afi-effect--radar-arc::before{background:repeating-radial-gradient(circle at 18% 58%,transparent 0 32px,color-mix(in srgb,var(--afi-fx-primary) 24%,transparent) 33px 34px,transparent 35px 62px)} .afi-effect--radar-arc::after{background:conic-gradient(from -15deg at 18% 58%,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent),transparent 16%,transparent 100%);mask-image:radial-gradient(circle at 18% 58%,#000 0 42%,transparent 42.5%)} .afi-effect--api-flow-map::before{background:linear-gradient(90deg,transparent 0 12%,color-mix(in srgb,var(--afi-fx-primary) 36%,transparent) 12% 42%,transparent 42% 58%,color-mix(in srgb,var(--afi-fx-secondary) 36%,transparent) 58% 88%,transparent 88%) 0 35%/100% 1px no-repeat,linear-gradient(90deg,transparent 0 22%,color-mix(in srgb,var(--afi-fx-secondary) 26%,transparent) 22% 72%,transparent 72%) 0 68%/100% 1px no-repeat} .afi-effect--api-flow-map::after{background:radial-gradient(circle at 12% 35%,var(--afi-fx-primary) 0 3px,transparent 4px),radial-gradient(circle at 42% 35%,var(--afi-fx-secondary) 0 3px,transparent 4px),radial-gradient(circle at 58% 35%,var(--afi-fx-primary) 0 3px,transparent 4px),radial-gradient(circle at 88% 35%,var(--afi-fx-secondary) 0 3px,transparent 4px),radial-gradient(circle at 22% 68%,var(--afi-fx-secondary) 0 3px,transparent 4px),radial-gradient(circle at 72% 68%,var(--afi-fx-primary) 0 3px,transparent 4px);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--afi-fx-primary) 24%,transparent))} .afi-effect--holo-crosshair::before{background:radial-gradient(circle at 50% 50%,transparent 0 46px,color-mix(in srgb,var(--afi-fx-primary) 36%,transparent) 47px 48px,transparent 49px 86px,color-mix(in srgb,var(--afi-fx-secondary) 26%,transparent) 87px 88px,transparent 89px)} .afi-effect--holo-crosshair::after{background:linear-gradient(90deg,transparent 0 18%,color-mix(in srgb,var(--afi-fx-primary) 28%,transparent) 18% 42%,transparent 42% 58%,color-mix(in srgb,var(--afi-fx-secondary) 28%,transparent) 58% 82%,transparent 82%) center/100% 1px no-repeat,linear-gradient(0deg,transparent 0 18%,color-mix(in srgb,var(--afi-fx-primary) 28%,transparent) 18% 42%,transparent 42% 58%,color-mix(in srgb,var(--afi-fx-secondary) 28%,transparent) 58% 82%,transparent 82%) center/1px 100% no-repeat} /* CodeStream-inspired original AFIWAI implementation: code rain + data rails + scan line. */ .afi-effect--code-stream::before{ content:"01 10 0110 AFIWAI::BOOT 101001\Aconst api = connect(); 0101 DATA\Aif (status === 'ONLINE') deploy();\A101101 001011 route /api/v1 1100\Afunction build(){ return future; }\A0010 CACHE:HIT RTT:12ms TLS:OK\A stream.push(packet); \A110101 010010 WordPress API UI\Adeploy --production --secure 1001\A011010 DATA CODE NETWORK 0011\Aconst node = await sync(); 101010\AHTTP/2 200 OK 14ms 011001\A0101 1010 0011 1100 0101 1010\Aexport default AFIWAI; 110101"; white-space:pre;inset:-35% 0 -35% 0;padding:0 5%;color:color-mix(in srgb,var(--afi-fx-primary) 70%,white);font:700 clamp(8px,1vw,12px)/2.15 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.08em;word-spacing:.45em;text-shadow:0 0 8px color-mix(in srgb,var(--afi-fx-primary) 42%,transparent);opacity:calc(var(--afi-effect-opacity,.72) * .46);animation:afiCodeStreamRain var(--afi-effect-speed,12s) linear infinite; mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%); } .afi-effect--code-stream::after{ background: repeating-linear-gradient(90deg,transparent 0 63px,color-mix(in srgb,var(--afi-fx-primary) 11%,transparent) 64px,transparent 65px 128px), linear-gradient(90deg,transparent 0 8%,color-mix(in srgb,var(--afi-fx-primary) 55%,transparent) 16% 24%,transparent 34% 52%,color-mix(in srgb,var(--afi-fx-secondary) 48%,transparent) 60% 70%,transparent 80%) 0 24%/360px 1px repeat-x, linear-gradient(90deg,transparent 0 18%,color-mix(in srgb,var(--afi-fx-secondary) 45%,transparent) 30% 38%,transparent 46% 68%,color-mix(in srgb,var(--afi-fx-primary) 48%,transparent) 78% 86%,transparent 94%) 0 71%/430px 1px repeat-x, linear-gradient(180deg,transparent 0 46%,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent) 49%,color-mix(in srgb,var(--afi-fx-primary) 58%,transparent) 50%,color-mix(in srgb,var(--afi-fx-primary) 18%,transparent) 51%,transparent 54%); opacity:calc(var(--afi-effect-opacity,.72) * .78);animation:afiCodeStreamFlow var(--afi-effect-speed,12s) linear infinite; } @keyframes afiCodeStreamRain{from{transform:translateY(-12%)}to{transform:translateY(38%)}} @keyframes afiCodeStreamFlow{from{background-position:0 0,-360px 24%,-430px 71%,0 -120%}to{background-position:128px 0,360px 24%,430px 71%,0 220%}} /* ========================================================= AFIWAI Studio 1.53 — elaborate static technology artwork The 24 former gradient-only presets now use detailed SVG masks. The artwork remains transparent and therefore sits cleanly above any solid, gradient or image background. ========================================================= */ .afi-effect--neon-circuit{--afi-tech-art:url("../images/tech-backgrounds/neon-circuit.svg")} .afi-effect--spectrum-circuit{--afi-tech-art:url("../images/tech-backgrounds/spectrum-circuit.svg")} .afi-effect--holo-rings{--afi-tech-art:url("../images/tech-backgrounds/holo-rings.svg")} .afi-effect--quantum-rings{--afi-tech-art:url("../images/tech-backgrounds/quantum-rings.svg")} .afi-effect--hex-network{--afi-tech-art:url("../images/tech-backgrounds/hex-network.svg")} .afi-effect--prism-grid{--afi-tech-art:url("../images/tech-backgrounds/prism-grid.svg")} .afi-effect--polygon-mesh{--afi-tech-art:url("../images/tech-backgrounds/polygon-mesh.svg")} .afi-effect--neural-mesh{--afi-tech-art:url("../images/tech-backgrounds/neural-mesh.svg")} .afi-effect--data-constellation{--afi-tech-art:url("../images/tech-backgrounds/data-constellation.svg")} .afi-effect--tech-wave{--afi-tech-art:url("../images/tech-backgrounds/tech-wave.svg")} .afi-effect--signal-lanes{--afi-tech-art:url("../images/tech-backgrounds/signal-lanes.svg")} .afi-effect--orbital-hud-static{--afi-tech-art:url("../images/tech-backgrounds/orbital-hud-static.svg")} .afi-effect--microchip-core{--afi-tech-art:url("../images/tech-backgrounds/microchip-core.svg")} .afi-effect--circuit-corners{--afi-tech-art:url("../images/tech-backgrounds/circuit-corners.svg")} .afi-effect--circuit-frame{--afi-tech-art:url("../images/tech-backgrounds/circuit-frame.svg")} .afi-effect--isometric-blocks{--afi-tech-art:url("../images/tech-backgrounds/isometric-blocks.svg")} .afi-effect--data-lattice{--afi-tech-art:url("../images/tech-backgrounds/data-lattice.svg")} .afi-effect--coordinate-matrix{--afi-tech-art:url("../images/tech-backgrounds/coordinate-matrix.svg")} .afi-effect--fiber-spectrum{--afi-tech-art:url("../images/tech-backgrounds/fiber-spectrum.svg")} .afi-effect--digital-shards{--afi-tech-art:url("../images/tech-backgrounds/digital-shards.svg")} .afi-effect--blueprint-spectrum{--afi-tech-art:url("../images/tech-backgrounds/blueprint-spectrum.svg")} .afi-effect--radar-arc{--afi-tech-art:url("../images/tech-backgrounds/radar-arc.svg")} .afi-effect--api-flow-map{--afi-tech-art:url("../images/tech-backgrounds/api-flow-map.svg")} .afi-effect--holo-crosshair{--afi-tech-art:url("../images/tech-backgrounds/holo-crosshair.svg")} .afi-effect--fine-pcb-web{--afi-tech-art:url("../images/tech-backgrounds/fine-pcb-web.svg")} .afi-effect--code-columns-static{--afi-tech-art:url("../images/tech-backgrounds/code-columns-static.svg")} .afi-effect--source-pages-grid{--afi-tech-art:url("../images/tech-backgrounds/source-pages-grid.svg")} .afi-effect--imaginary-code-map{--afi-tech-art:url("../images/tech-backgrounds/imaginary-code-map.svg")} :is( .afi-effect--neon-circuit,.afi-effect--spectrum-circuit,.afi-effect--holo-rings,.afi-effect--quantum-rings, .afi-effect--hex-network,.afi-effect--prism-grid,.afi-effect--polygon-mesh,.afi-effect--neural-mesh, .afi-effect--data-constellation,.afi-effect--tech-wave,.afi-effect--signal-lanes,.afi-effect--orbital-hud-static, .afi-effect--microchip-core,.afi-effect--circuit-corners,.afi-effect--circuit-frame,.afi-effect--isometric-blocks, .afi-effect--data-lattice,.afi-effect--coordinate-matrix,.afi-effect--fiber-spectrum,.afi-effect--digital-shards, .afi-effect--blueprint-spectrum,.afi-effect--radar-arc,.afi-effect--api-flow-map,.afi-effect--holo-crosshair,.afi-effect--fine-pcb-web,.afi-effect--code-columns-static,.afi-effect--source-pages-grid,.afi-effect--imaginary-code-map )::before, :is( .afi-effect--neon-circuit,.afi-effect--spectrum-circuit,.afi-effect--holo-rings,.afi-effect--quantum-rings, .afi-effect--hex-network,.afi-effect--prism-grid,.afi-effect--polygon-mesh,.afi-effect--neural-mesh, .afi-effect--data-constellation,.afi-effect--tech-wave,.afi-effect--signal-lanes,.afi-effect--orbital-hud-static, .afi-effect--microchip-core,.afi-effect--circuit-corners,.afi-effect--circuit-frame,.afi-effect--isometric-blocks, .afi-effect--data-lattice,.afi-effect--coordinate-matrix,.afi-effect--fiber-spectrum,.afi-effect--digital-shards, .afi-effect--blueprint-spectrum,.afi-effect--radar-arc,.afi-effect--api-flow-map,.afi-effect--holo-crosshair,.afi-effect--fine-pcb-web,.afi-effect--code-columns-static,.afi-effect--source-pages-grid,.afi-effect--imaginary-code-map )::after{ content:""; position:absolute; inset:0; border:0; border-radius:0; box-shadow:none; clip-path:none; background:none; animation:none; transform:none; pointer-events:none; -webkit-mask-image:var(--afi-tech-art); mask-image:var(--afi-tech-art); -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; } :is( .afi-effect--neon-circuit,.afi-effect--spectrum-circuit,.afi-effect--holo-rings,.afi-effect--quantum-rings, .afi-effect--hex-network,.afi-effect--prism-grid,.afi-effect--polygon-mesh,.afi-effect--neural-mesh, .afi-effect--data-constellation,.afi-effect--tech-wave,.afi-effect--signal-lanes,.afi-effect--orbital-hud-static, .afi-effect--microchip-core,.afi-effect--circuit-corners,.afi-effect--circuit-frame,.afi-effect--isometric-blocks, .afi-effect--data-lattice,.afi-effect--coordinate-matrix,.afi-effect--fiber-spectrum,.afi-effect--digital-shards, .afi-effect--blueprint-spectrum,.afi-effect--radar-arc,.afi-effect--api-flow-map,.afi-effect--holo-crosshair,.afi-effect--fine-pcb-web,.afi-effect--code-columns-static,.afi-effect--source-pages-grid,.afi-effect--imaginary-code-map )::before{ background:linear-gradient(118deg,var(--afi-fx-primary) 0 28%,color-mix(in srgb,var(--afi-fx-primary) 58%,var(--afi-fx-secondary)) 48%,var(--afi-fx-secondary) 100%); opacity:calc(var(--afi-effect-opacity,.72) * .96); filter:drop-shadow(0 0 4px color-mix(in srgb,var(--afi-fx-primary) 28%,transparent)); } :is( .afi-effect--neon-circuit,.afi-effect--spectrum-circuit,.afi-effect--holo-rings,.afi-effect--quantum-rings, .afi-effect--hex-network,.afi-effect--prism-grid,.afi-effect--polygon-mesh,.afi-effect--neural-mesh, .afi-effect--data-constellation,.afi-effect--tech-wave,.afi-effect--signal-lanes,.afi-effect--orbital-hud-static, .afi-effect--microchip-core,.afi-effect--circuit-corners,.afi-effect--circuit-frame,.afi-effect--isometric-blocks, .afi-effect--data-lattice,.afi-effect--coordinate-matrix,.afi-effect--fiber-spectrum,.afi-effect--digital-shards, .afi-effect--blueprint-spectrum,.afi-effect--radar-arc,.afi-effect--api-flow-map,.afi-effect--holo-crosshair,.afi-effect--fine-pcb-web,.afi-effect--code-columns-static,.afi-effect--source-pages-grid,.afi-effect--imaginary-code-map )::after{ background:linear-gradient(118deg,var(--afi-fx-primary),var(--afi-fx-secondary)); opacity:calc(var(--afi-effect-opacity,.72) * .16); filter:blur(7px) drop-shadow(0 0 12px color-mix(in srgb,var(--afi-fx-secondary) 24%,transparent)); transform:scale(1.006); transform-origin:center; } @media (prefers-reduced-motion:reduce){ :is( .afi-effect--neon-circuit,.afi-effect--spectrum-circuit,.afi-effect--holo-rings,.afi-effect--quantum-rings, .afi-effect--hex-network,.afi-effect--prism-grid,.afi-effect--polygon-mesh,.afi-effect--neural-mesh, .afi-effect--data-constellation,.afi-effect--tech-wave,.afi-effect--signal-lanes,.afi-effect--orbital-hud-static, .afi-effect--microchip-core,.afi-effect--circuit-corners,.afi-effect--circuit-frame,.afi-effect--isometric-blocks, .afi-effect--data-lattice,.afi-effect--coordinate-matrix,.afi-effect--fiber-spectrum,.afi-effect--digital-shards, .afi-effect--blueprint-spectrum,.afi-effect--radar-arc,.afi-effect--api-flow-map,.afi-effect--holo-crosshair,.afi-effect--fine-pcb-web,.afi-effect--code-columns-static,.afi-effect--source-pages-grid,.afi-effect--imaginary-code-map )::before, :is( .afi-effect--neon-circuit,.afi-effect--spectrum-circuit,.afi-effect--holo-rings,.afi-effect--quantum-rings, .afi-effect--hex-network,.afi-effect--prism-grid,.afi-effect--polygon-mesh,.afi-effect--neural-mesh, .afi-effect--data-constellation,.afi-effect--tech-wave,.afi-effect--signal-lanes,.afi-effect--orbital-hud-static, .afi-effect--microchip-core,.afi-effect--circuit-corners,.afi-effect--circuit-frame,.afi-effect--isometric-blocks, .afi-effect--data-lattice,.afi-effect--coordinate-matrix,.afi-effect--fiber-spectrum,.afi-effect--digital-shards, .afi-effect--blueprint-spectrum,.afi-effect--radar-arc,.afi-effect--api-flow-map,.afi-effect--holo-crosshair,.afi-effect--fine-pcb-web,.afi-effect--code-columns-static,.afi-effect--source-pages-grid,.afi-effect--imaginary-code-map )::after{animation:none!important} } /* ================================================================ AFIWAI Studio 1.54.2 — Digital Rain variants + textual animations Decorative animation layer only: fixed background remains below it. ================================================================ */ .afi-effect--digital-rain, .afi-effect--digital-rain-left, .afi-effect--digital-rain-right, .afi-effect--digital-rain-random, .afi-effect--digital-rain-sparse, .afi-effect--digital-rain-dense, .afi-effect--digital-rain-branded, .afi-effect--msdos-typing, .afi-effect--msdos-green, .afi-effect--terminal-typing, .afi-effect--boot-sequence, .afi-effect--afiwai-code-stream, .afi-effect--afiwai-system-logs, .afi-effect--afiwai-command-console, .afi-effect--afiwai-keywords{ position:relative; isolation:isolate; overflow:hidden; } /* CSS fallback / Builder thumbnail preview before the JS runtime is attached. */ .afi-effect--digital-rain-left::before, .afi-effect--digital-rain-right::before, .afi-effect--digital-rain-random::before, .afi-effect--digital-rain-sparse::before, .afi-effect--digital-rain-dense::before, .afi-effect--digital-rain-branded::before{ content:"01 AFIWAI 10 GOODIES 01 PLUGINS 11 SITEWEB 00 HUB 10 SEO 01 WEB 11"; position:absolute; inset:-55% 0 -30%; z-index:0; color:color-mix(in srgb,var(--afi-fx-primary) 68%,transparent); font:700 8px/2.25 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; letter-spacing:.24em; word-spacing:.9em; writing-mode:vertical-rl; text-orientation:upright; white-space:normal; text-shadow:0 0 9px color-mix(in srgb,var(--afi-fx-primary) 34%,transparent); opacity:calc(var(--afi-effect-opacity,.72) * .62); animation:afiFxDigitalRainFront var(--afi-effect-speed,18s) linear infinite; pointer-events:none; } .afi-effect--digital-rain-left::before{right:62%} .afi-effect--digital-rain-right::before{left:62%} .afi-effect--digital-rain-sparse::before{letter-spacing:.52em;opacity:calc(var(--afi-effect-opacity,.72) * .40)} .afi-effect--digital-rain-dense::before{font-size:7px;line-height:1.55;letter-spacing:.12em;opacity:calc(var(--afi-effect-opacity,.72) * .78)} .afi-effect--digital-rain-branded::before{ content:"AFIWAI 0101 GOODIES AFIWAI 1010 PLUGINS AFIWAI 0110 SITEWEB AFIWAI 1101 AFIWAI.COM 0011 GOODIES.AFIWAI.COM 0100 HUB.AFIWAI.COM 1110"; } /* Runtime rain is made of independent columns so full-width random distribution is genuinely irregular instead of a repeated CSS texture. */ .afi-digital-rain-runtime{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:var(--afi-effect-opacity,.72); mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 78%,rgba(0,0,0,.75) 88%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 78%,rgba(0,0,0,.75) 88%,transparent 100%); } .afi-digital-rain-column{ position:absolute; top:0; display:block; width:max-content; max-width:190px; color:var(--afi-rain-color,var(--afi-fx-primary)); opacity:0; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:var(--afi-rain-size,9px); font-weight:650; line-height:1.34; letter-spacing:.06em; white-space:pre; text-align:left; text-shadow:0 0 8px color-mix(in srgb,var(--afi-rain-color,var(--afi-fx-primary)) 38%,transparent); filter:blur(var(--afi-rain-blur,0)); transform:translate3d(0,var(--afi-rain-start,-420px),0); animation-name:afiRainRuntimeFall; animation-duration:var(--afi-rain-duration,12s); animation-delay:var(--afi-rain-delay,0s); animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform,opacity; } @keyframes afiRainRuntimeFall{ 0%{transform:translate3d(0,var(--afi-rain-start,-420px),0);opacity:0} 7%{opacity:var(--afi-rain-alpha,.62)} 82%{opacity:var(--afi-rain-alpha,.62)} 100%{transform:translate3d(0,var(--afi-rain-end,900px),0);opacity:0} } /* Once JS provides the richer version, remove CSS fallback pseudo layers. */ .afi-effect.afi-runtime-generated::before, .afi-effect.afi-runtime-generated::after{ opacity:0!important; animation:none!important; } /* Digital Rain safety fallback: faint native CSS layer below the JS columns. */ :is(.afi-effect--digital-rain,.afi-effect--digital-rain-left,.afi-effect--digital-rain-right,.afi-effect--digital-rain-random,.afi-effect--digital-rain-sparse,.afi-effect--digital-rain-dense,.afi-effect--digital-rain-branded).afi-runtime-generated::before{ opacity:.16!important; animation:afiFxDigitalRainBack var(--afi-effect-speed,18s) linear infinite!important; } .afi-effect--digital-rain.afi-runtime-generated::after{ opacity:.08!important; animation:afiFxDigitalRainFront var(--afi-effect-speed,18s) linear infinite!important; } /* Typewriter / terminal runtime. */ .afi-textfx-runtime{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:var(--afi-effect-opacity,.72); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; } .afi-textfx-panel{ position:absolute; top:10%; left:6%; width:min(88%,760px); max-height:80%; padding:18px 20px; overflow:hidden; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 20%,transparent); border-radius:8px; background:color-mix(in srgb,#02070d 78%,transparent); box-shadow:inset 0 0 32px rgba(0,0,0,.28),0 0 24px color-mix(in srgb,var(--afi-fx-primary) 7%,transparent); color:var(--afi-textfx-color,var(--afi-fx-primary)); font-size:clamp(8px,1vw,12px); font-weight:600; line-height:1.62; letter-spacing:.02em; text-shadow:0 0 9px color-mix(in srgb,var(--afi-textfx-color,var(--afi-fx-primary)) 34%,transparent); white-space:pre-wrap; } .afi-textfx-title{ display:block; margin:0 0 10px; padding:0 0 8px; border-bottom:1px solid color-mix(in srgb,var(--afi-textfx-color,var(--afi-fx-primary)) 15%,transparent); font-size:.82em; letter-spacing:.16em; opacity:.72; text-transform:uppercase; } .afi-textfx-text{ white-space:pre-wrap; word-break:break-word; } .afi-textfx-cursor{ display:inline-block; width:.64em; height:1.08em; margin-left:.10em; vertical-align:-.15em; background:#fff; box-shadow:0 0 7px rgba(255,255,255,.55); animation:afiTextFxCursor .72s steps(1,end) infinite; } @keyframes afiTextFxCursor{0%,44%{opacity:1}45%,100%{opacity:0}} .afi-effect--msdos-typing .afi-textfx-panel, .afi-effect--msdos-green .afi-textfx-panel{ top:8%; left:5%; width:min(90%,820px); border-radius:0; border-color:rgba(255,255,255,.14); background:rgba(0,0,0,.82); box-shadow:none; } .afi-effect--msdos-typing .afi-textfx-runtime{--afi-textfx-color:#e8e8e8} .afi-effect--msdos-green .afi-textfx-runtime{--afi-textfx-color:#39ff66} .afi-effect--msdos-green .afi-textfx-panel{ border-color:rgba(57,255,102,.22); background:rgba(0,10,2,.82); } .afi-effect--terminal-typing .afi-textfx-panel, .afi-effect--afiwai-code-stream .afi-textfx-panel, .afi-effect--afiwai-command-console .afi-textfx-panel{ background:linear-gradient(180deg,rgba(3,12,21,.82),rgba(0,4,9,.72)); } .afi-effect--boot-sequence .afi-textfx-panel{ top:7%; left:7%; width:min(86%,680px); background:rgba(0,0,0,.74); } .afi-effect--afiwai-system-logs .afi-textfx-panel{ top:auto; bottom:8%; left:5%; width:min(92%,980px); max-height:68%; background:rgba(1,8,13,.62); } .afi-effect--afiwai-code-stream .afi-textfx-panel{ left:auto; right:5%; width:min(70%,720px); } .afi-effect--afiwai-command-console .afi-textfx-panel{ top:auto; bottom:8%; } /* Fallback for text effects when JS is unavailable and for small picker previews. */ .afi-effect--msdos-typing::before, .afi-effect--msdos-green::before, .afi-effect--terminal-typing::before, .afi-effect--boot-sequence::before, .afi-effect--afiwai-code-stream::before, .afi-effect--afiwai-system-logs::before, .afi-effect--afiwai-command-console::before{ content:""; position:absolute; inset:10% 7%; z-index:0; border:1px solid color-mix(in srgb,var(--afi-fx-primary) 18%,transparent); background:rgba(0,5,10,.64); pointer-events:none; } .afi-effect--msdos-typing::after, .afi-effect--msdos-green::after, .afi-effect--terminal-typing::after, .afi-effect--boot-sequence::after, .afi-effect--afiwai-code-stream::after, .afi-effect--afiwai-system-logs::after, .afi-effect--afiwai-command-console::after{ position:absolute; inset:16% 12% auto; z-index:0; white-space:pre; font:700 clamp(7px,1vw,11px)/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; color:var(--afi-fx-primary); text-shadow:0 0 8px color-mix(in srgb,var(--afi-fx-primary) 34%,transparent); pointer-events:none; } .afi-effect--msdos-typing::after{content:"C:\\AFIWAI> SITEWEB AFIWAI\AInitializing...\A█";color:#e8e8e8} .afi-effect--msdos-green::after{content:"C:\\AFIWAI> PLUGINS AFIWAI\AStatus: ONLINE\A█";color:#39ff66} .afi-effect--terminal-typing::after{content:"$ afiwai deploy\A> goodies.afiwai.com\A> status=LIVE ▋"} .afi-effect--boot-sequence::after{content:"AFIWAI BIOS 1.54\A[ OK ] CORE\A[ OK ] PLUGINS\A[ OK ] SITEWEB"} .afi-effect--afiwai-code-stream::after{content:"AFIWAI::build('siteweb');\APlugins::load();\AGoodies::connect();"} .afi-effect--afiwai-system-logs::after{content:"[AFIWAI] SEO READY\A[GOODIES] SYNC OK\A[PLUGINS] ACTIVE"} .afi-effect--afiwai-command-console::after{content:"> afiwai --deploy\A> siteweb=READY\A> hub=ONLINE\A█"} /* Moving brand keyword field. */ .afi-keyword-runtime{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:var(--afi-effect-opacity,.72); } .afi-keyword-runtime span{ position:absolute; left:-38%; top:var(--afi-keyword-top,50%); color:color-mix(in srgb,var(--afi-keyword-color,var(--afi-fx-primary)) var(--afi-keyword-alpha,48%),transparent); font:700 var(--afi-keyword-size,10px)/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.14em; white-space:nowrap; text-transform:uppercase; text-shadow:0 0 10px color-mix(in srgb,var(--afi-keyword-color,var(--afi-fx-primary)) 30%,transparent); animation:afiKeywordTravel calc(var(--afi-effect-speed,18s) * var(--afi-keyword-factor,1)) linear infinite; animation-delay:var(--afi-keyword-delay,0s); } @keyframes afiKeywordTravel{ from{transform:translate3d(0,0,0);opacity:0} 8%{opacity:.85} 88%{opacity:.62} to{transform:translate3d(178vw,0,0);opacity:0} } .afi-effect--afiwai-keywords::before{ content:"AFIWAI • GOODIES AFIWAI • PLUGINS AFIWAI • SITEWEB AFIWAI • DIGITAL • WORDPRESS • SEO"; position:absolute; left:-20%; top:45%; white-space:nowrap; color:var(--afi-fx-primary); font:700 10px/1 ui-monospace,monospace; letter-spacing:.18em; opacity:calc(var(--afi-effect-opacity,.72) * .46); animation:afiKeywordTravel var(--afi-effect-speed,18s) linear infinite; } @media(max-width:700px){ .afi-textfx-panel{top:8%;left:5%;width:90%;padding:12px 13px;font-size:8px} .afi-effect--afiwai-code-stream .afi-textfx-panel{right:5%;width:90%} .afi-digital-rain-column{font-size:6px!important} } @media(prefers-reduced-motion:reduce){ .afi-digital-rain-column, .afi-textfx-cursor, .afi-keyword-runtime span, .afi-effect--afiwai-keywords::before{ animation:none!important; } .afi-digital-rain-column{top:-20%;opacity:.42} } /* Effect layers inherit the colours/density chosen on their host. */ .afi-effect-stack-host>.afi-effect-stack-layer, #afiwai-global-background-effect>.afi-global-effect-layer{--afi-fx-primary:inherit;--afi-fx-secondary:inherit;--afi-fx-density:inherit}