/* ============================================================ BRAINSOIL IX — effects.css Atmosphere (grain/scan), lasers, dandelion-seed particles, glitch, splash gate, scroll-reveal, esoteric sigil ============================================================ */ /* ---------- GRAIN + SCANLINES (CRT atmosphere) ---------- */ .grain{ position:fixed; inset:0; pointer-events:none; z-index:52; opacity:var(--grain-opacity); mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .scanlines{ position:fixed; inset:0; pointer-events:none; z-index:51; opacity:var(--scan-opacity); background:repeating-linear-gradient(0deg,#000 0,#000 1px,transparent 1px,transparent 3px); } /* ---------- LASER FIELD (fixed background canvas of sweeping beams) ---------- */ .laser-field{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; opacity:var(--laser-opacity); } .laser-field .beam{ position:absolute; top:-20%; left:var(--x,50%); width:1px; height:140%; background:linear-gradient(180deg, transparent, var(--c,var(--accent)), transparent); transform-origin:top center; transform:rotate(var(--r,8deg)); filter:drop-shadow(0 0 6px var(--c,var(--accent))); animation:laserSweep var(--d,9s) ease-in-out infinite alternate; animation-delay:var(--delay,0s); } @keyframes laserSweep{ 0%{ transform:rotate(calc(var(--r,8deg) - 6deg)); opacity:.25; } 50%{ opacity:1; } 100%{ transform:rotate(calc(var(--r,8deg) + 6deg)); opacity:.35; } } /* horizon grid — a subtle synth plane at the bottom */ .laser-grid{ position:fixed; left:-25%; right:-25%; bottom:-10%; height:44vh; z-index:-1; pointer-events:none; opacity:calc(var(--laser-opacity) * 1.1); background-image: linear-gradient(var(--accent) 1px, transparent 1px), linear-gradient(90deg, var(--accent) 1px, transparent 1px); background-size:44px 44px; transform:perspective(320px) rotateX(66deg); mask-image:linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image:linear-gradient(180deg, transparent, #000 70%); animation:gridflow 12s linear infinite; } @keyframes gridflow{ to{ background-position:0 44px, 44px 0; } } /* ---------- DANDELION SEED PARTICLES (JS injects .seed nodes) ---------- */ .seed-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .seed{ position:absolute; bottom:-40px; left:var(--sx,50%); width:var(--ss,8px); height:var(--ss,8px); color:var(--seed-color); opacity:0; will-change:transform,opacity; animation:seedrise var(--sd,16s) linear infinite; animation-delay:var(--sdelay,0s); } /* pappus glyph (the fluffy top) */ .seed::before{ content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, currentColor 0 22%, transparent 26%); box-shadow: 0 -6px 0 -3px currentColor, 0 6px 0 -3px currentColor, -6px 0 0 -3px currentColor, 6px 0 0 -3px currentColor, 4px -4px 0 -3.5px currentColor, -4px 4px 0 -3.5px currentColor, 4px 4px 0 -3.5px currentColor, -4px -4px 0 -3.5px currentColor; filter:drop-shadow(0 0 4px currentColor); } /* stem/filament trailing below the puff, down to the tiny seed capsule */ .seed::after{ content:''; position:absolute; left:50%; top:calc(100% + 3px); width:1px; height:calc(var(--ss,8px) * 1.3); transform:translateX(-50%); background:linear-gradient(to bottom, currentColor, currentColor 82%, transparent); border-radius:0 0 2px 2px; opacity:.7; box-shadow:0 calc(var(--ss,8px) * 1.3 - 1px) 0 -.5px currentColor; } @keyframes seedrise{ 0%{ transform:translateY(0) translateX(0) rotate(0); opacity:0; } 8%{ opacity:.9; } 92%{ opacity:.7; } 100%{ transform:translateY(-112vh) translateX(var(--sdrift,40px)) rotate(220deg); opacity:0; } } /* ---------- GLITCH TEXT ---------- Two chromatic-aberration layers (cyan + magenta) sit still, then tear apart in sharp bursts — slice jumps via clip-path, hard offsets via steps(). */ .glitch{ position:relative; display:inline-block; } .glitch::before,.glitch::after{ content:attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; pointer-events:none; mix-blend-mode:screen; } .glitch::before{ color:var(--uv-cyan); opacity:.85; animation:glitchTop 3.1s steps(1) infinite; clip-path:inset(0 0 60% 0); } .glitch::after{ color:var(--uv-magenta); opacity:.8; animation:glitchBot 2.7s steps(1) infinite; clip-path:inset(52% 0 0 0); } /* top slice — quiet, then three tearing bursts per cycle */ @keyframes glitchTop{ 0%,7%,100%{ transform:translate(0,0); clip-path:inset(0 0 60% 0); } 8% { transform:translate(-7px,-2px); clip-path:inset(0 0 78% 0); } 10% { transform:translate(6px,1px); clip-path:inset(12% 0 52% 0); } 12% { transform:translate(-9px,2px); clip-path:inset(0 0 66% 0); } 13% { transform:translate(0,0); clip-path:inset(0 0 60% 0); } 42% { transform:translate(8px,-2px); clip-path:inset(24% 0 40% 0); } 43% { transform:translate(-6px,1px); clip-path:inset(0 0 72% 0); } 44% { transform:translate(0,0); clip-path:inset(0 0 60% 0); } 73% { transform:translate(5px,2px); clip-path:inset(6% 0 68% 0); } 74% { transform:translate(-8px,-1px); clip-path:inset(0 0 60% 0); } 75% { transform:translate(0,0); clip-path:inset(0 0 60% 0); } } /* bottom slice — bursts offset in time so the two layers rarely align */ @keyframes glitchBot{ 0%,9%,100%{ transform:translate(0,0); clip-path:inset(52% 0 0 0); } 10% { transform:translate(8px,2px); clip-path:inset(58% 0 0 0); } 12% { transform:translate(-7px,-2px); clip-path:inset(44% 0 6% 0); } 14% { transform:translate(0,0); clip-path:inset(52% 0 0 0); } 57% { transform:translate(-9px,2px); clip-path:inset(66% 0 0 0); } 58% { transform:translate(6px,-1px); clip-path:inset(40% 0 12% 0); } 59% { transform:translate(0,0); clip-path:inset(52% 0 0 0); } 88% { transform:translate(-5px,1px); clip-path:inset(52% 0 0 0); } 89% { transform:translate(7px,2px); clip-path:inset(60% 0 0 0); } 90% { transform:translate(0,0); clip-path:inset(52% 0 0 0); } } /* ---------- SCROLL REVEAL ---------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; } .reveal.visible{ opacity:1; transform:translateY(0); } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } /* ---------- ESOTERIC SIGIL / STAR-CHART RING ---------- */ .sigil{ width:min(360px,72vw); margin:0 auto; } .sigil svg{ width:100%; height:auto; overflow:visible; } .sigil .ring{ transform-origin:center; animation:spin 90s linear infinite; } .sigil .ring.rev{ animation-duration:120s; animation-direction:reverse; } @keyframes spin{ to{ transform:rotate(360deg); } } .sigil .twinkle{ animation:tw 3.4s ease-in-out infinite; } @keyframes tw{ 0%,100%{opacity:.25;} 50%{opacity:1;} } /* ============================================================ SPLASH GATE ============================================================ */ .splash{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 45%, #100c06 0%, #0a0805 55%, #050403 100%); transition:opacity 1.1s ease, visibility 1.1s ease; overflow:hidden; } .splash.done{ opacity:0; visibility:hidden; pointer-events:none; } .splash .splash-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px; } .splash video{ width:min(560px,86vw); height:auto; mix-blend-mode:screen; /* drops the near-black bg -> logo floats */ filter:var(--logo-boost); } .splash .splash-word{ font-family:var(--sans); font-weight:700; letter-spacing:.14em; font-size:clamp(24px,6vw,44px); color:var(--white); margin-top:6px; opacity:0; animation:fadeUp 1.2s ease 1.1s forwards; } .splash .splash-word .ix{ font-family:var(--mono); color:var(--accent); letter-spacing:.3em; } .splash .splash-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-top:16px; opacity:0; animation:fadeUp 1.2s ease 1.5s forwards; } /* ---- word gate ---- */ .splash .gate{ margin-top:32px; opacity:0; animation:fadeUp 1s ease 1.8s forwards; display:flex; flex-direction:column; align-items:center; gap:12px; } .splash .gate-label{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); } .splash .gate-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; } .splash .gate-input{ font-family:var(--mono); font-size:16px; letter-spacing:.35em; text-align:center; color:var(--champagne); background:rgba(8,7,5,.6); border:1px solid var(--hairline); border-radius:3px; padding:13px 16px; width:190px; outline:none; transition:border-color .2s, box-shadow .2s; } .splash .gate-input:focus{ border-color:var(--accent); box-shadow:var(--glow); } .splash .gate-input::placeholder{ color:var(--mute-dk); letter-spacing:.4em; } .splash .gate-msg{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--uv-magenta); min-height:14px; } .splash.shake .splash-inner{ animation:gateShake .45s; } @keyframes gateShake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-9px);} 40%{transform:translateX(9px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(6px);} } .splash .loadbar{ position:absolute; bottom:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:var(--glow); transition:width .3s linear; } @keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} } /* if JS disabled, never trap the user behind the splash */ .no-js .splash{ display:none; } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; } .reveal{ opacity:1; transform:none; } .seed-field,.laser-field .beam,.laser-grid{ display:none; } .splash video{ display:none; } /* animations are off, so force the intro content (incl. the word gate) visible */ .splash .splash-word,.splash .splash-sub,.splash .gate{ opacity:1 !important; } .gallery-grid img,.gallery-grid .gph{ transform:none !important; opacity:1 !important; } /* frozen glitch layers would look like a rendering bug — hide them entirely */ .glitch::before,.glitch::after{ display:none !important; } }