Rakan Dajani
:root{–bg:#0a0a0a;–fg:#e8e4df;–dim:#5a5550;–accent:#ff5e3a;–accent2:#3aff8e;–accent3:#3a8eff;–yellow:#ffd53a;–mono:’Space Mono’,monospace;–display:’Syne’,sans-serif;–serif:’Instrument Serif’,Georgia,serif}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(–bg);color:var(–fg);font-family:var(–mono);overflow-x:hidden;cursor:crosshair;-webkit-font-smoothing:antialiased}
::selection{background:var(–accent);color:var(–bg)}
/* GRAIN */
body::before{content:”;position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.04;background-image:url(“data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’n’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23n)’/%3E%3C/svg%3E”);background-size:128px;animation:grain .5s steps(4) infinite}
body::after{content:”;position:fixed;inset:0;pointer-events:none;z-index:9997;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.008) 2px,rgba(255,255,255,.008) 4px)}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,2px)}100%{transform:translate(0,0)}}
/* CURSOR */
.cursor-dot{position:fixed;width:8px;height:8px;background:var(–accent);border-radius:50%;pointer-events:none;z-index:10000;mix-blend-mode:difference;transition:transform .15s}
.cursor-ring{position:fixed;width:40px;height:40px;border:1px solid var(–fg);border-radius:50%;pointer-events:none;z-index:10000;mix-blend-mode:difference;transition:all .2s;opacity:.5}
/* SIDE NAV */
.side-nav{position:fixed;left:0;top:0;bottom:0;width:48px;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;border-right:1px solid rgba(255,255,255,.06)}
.side-nav a{writing-mode:vertical-rl;text-orientation:mixed;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(–dim);text-decoration:none;transition:all .3s;padding:.5rem 0}
.side-nav a:hover{color:var(–accent);text-shadow:0 0 20px var(–accent)}
/* HERO */
.hero{height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding-left:48px;overflow:hidden}
.hero-scatter{position:absolute;font-family:var(–mono);font-size:.55rem;color:var(–dim);letter-spacing:.15em;text-transform:uppercase;opacity:.4;pointer-events:none}
.hero-name{position:relative;text-align:center}
.hero-name .line1{font-family:var(–display);font-size:clamp(4rem,12vw,11rem);font-weight:800;line-height:.85;letter-spacing:-.04em;color:var(–fg);display:block;opacity:0;animation:glitchIn .8s .2s forwards}
.hero-name .line2{font-family:var(–serif);font-size:clamp(3rem,9vw,8rem);font-weight:400;font-style:italic;line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(–fg);display:block;margin-top:-.1em;margin-left:15%;opacity:0;animation:slideRight 1s .5s forwards}
.hero-tag{position:absolute;bottom:15%;right:8%;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(–accent);max-width:200px;line-height:1.8;text-align:right;opacity:0;animation:fadeIn .6s 1.2s forwards}
.hero-tag span{display:block;color:var(–dim)}
.hero-year{position:absolute;bottom:5%;left:calc(48px + 2rem);font-family:var(–display);font-size:clamp(6rem,15vw,14rem);font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.04);line-height:1;pointer-events:none;opacity:0;animation:fadeIn 1s .8s forwards}
.hero-arrow{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);opacity:0;animation:fadeIn .6s 1.5s forwards,bounce 2s 2s infinite}
.hero-arrow svg{width:20px;height:20px;stroke:var(–dim);stroke-width:1.5;fill:none}
@keyframes glitchIn{0%{opacity:0;transform:translateX(-30px) skewX(-5deg);clip-path:inset(40% 0 40% 0)}30%{opacity:1;clip-path:inset(20% 0 60% 0)}60%{clip-path:inset(60% 0 10% 0);transform:translateX(5px) skewX(1deg)}100%{opacity:1;transform:translateX(0) skewX(0);clip-path:inset(0 0 0 0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
/* MARQUEE */
.marquee-strip{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:.8rem 0;margin-left:48px}
.marquee-inner{display:inline-block;animation:marquee 25s linear infinite}
.marquee-inner span{font-family:var(–mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(–dim);padding:0 3rem}
.marquee-inner .dot{color:var(–accent);padding:0 1rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* SECTIONS */
.section{padding:8rem 3rem 8rem calc(48px + 3rem);position:relative}
.section-label{display:inline-flex;align-items:center;gap:1rem;font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(–accent);margin-bottom:3rem}
.section-label::before{content:”;width:40px;height:1px;background:var(–accent)}
.section-label .num{font-family:var(–display);font-size:2.5rem;font-weight:800;color:transparent;-webkit-text-stroke:1px var(–accent);margin-right:.5rem;line-height:1}
/* ═══════════════════════════════
FILM CARDS — KINETIC TYPOGRAPHY
═══════════════════════════════ */
.film-scattered{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(60px,auto);gap:1rem;max-width:1400px;min-height:700px;position:relative}
.film-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);cursor:pointer;transition:all .5s cubic-bezier(.25,.46,.45,.94)}
.film-card:hover{border-color:var(–accent);z-index:10;box-shadow:0 0 40px rgba(255,94,58,.08)}
.film-card.fc1{grid-column:1/8;grid-row:1/6}
.film-card.fc2{grid-column:8/13;grid-row:1/4}
.film-card.fc3{grid-column:8/11;grid-row:4/8}
.film-card.fc4{grid-column:11/13;grid-row:4/6}
.film-card.fc5{grid-column:1/5;grid-row:6/9}
.film-card.fc6{grid-column:5/8;grid-row:6/9}
.film-card.fc7{grid-column:11/13;grid-row:6/9}
/* Giant title filling card */
.fc-bg-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(–display);font-weight:800;color:rgba(255,255,255,.03);text-transform:uppercase;line-height:.85;padding:1rem;overflow:hidden;transition:color .6s,letter-spacing .6s,transform .6s;letter-spacing:-.02em;text-align:center;word-break:break-word}
.fc1 .fc-bg-title{font-size:5rem}
.fc2 .fc-bg-title{font-size:3rem}
.fc3 .fc-bg-title{font-size:2.5rem}
.fc4 .fc-bg-title{font-size:1.5rem}
.fc5 .fc-bg-title{font-size:2.2rem}
.fc6 .fc-bg-title{font-size:2rem}
.fc7 .fc-bg-title{font-size:1.4rem}
.film-card:hover .fc-bg-title{color:rgba(255,255,255,.06);letter-spacing:.05em;transform:scale(1.05)}
/* Scramble text overlay — shows on hover */
.fc-scramble{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(–mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(–accent);opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.film-card:hover .fc-scramble{opacity:.6}
.fc-inner{position:absolute;bottom:0;left:0;right:0;padding:2rem 1.2rem 1.2rem;background:linear-gradient(0deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.4) 60%,transparent 100%);z-index:2}
.fc-type{font-size:.5rem;letter-spacing:.25em;text-transform:uppercase;margin-bottom:.3rem}
.fc-type.t-short{color:var(–accent)}.fc-type.t-doc{color:var(–accent2)}.fc-type.t-exp{color:var(–accent3)}.fc-type.t-music{color:var(–yellow)}
.fc-title{font-family:var(–serif);font-size:1.2rem;font-style:italic;color:var(–fg);line-height:1.2}
.fc-year{font-size:.6rem;color:var(–dim);margin-top:.2rem}
.fc-role{font-size:.5rem;letter-spacing:.1em;color:var(–dim);margin-top:.15rem}
/* ═══════════════════════════════
PHOTOGRAPHY — WAVY TEXT STRIP
═══════════════════════════════ */
.photo-strip-wrapper{overflow:hidden;padding:4rem 0;margin-left:48px}
.photo-strip{display:flex;gap:1.5rem;transform:rotate(-2deg);margin-left:-3rem;padding:2rem 0}
.photo-frame{flex:0 0 auto;position:relative;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.photo-frame:hover{transform:rotate(2deg) scale(1.05) translateY(-10px);z-index:10}
.photo-frame:nth-child(odd):hover{transform:rotate(-1deg) scale(1.05) translateY(-10px)}
.photo-inner{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:.75rem .75rem 2.5rem;position:relative;transition:border-color .4s}
.photo-frame:hover .photo-inner{border-color:rgba(255,255,255,.15)}
/* Text-only photo cards */
.photo-text-fill{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.photo-frame.pf-wide .photo-text-fill{width:420px;height:280px}
.photo-frame.pf-tall .photo-text-fill{width:280px;height:400px}
.photo-frame.pf-square .photo-text-fill{width:320px;height:320px}
.photo-frame.pf-pano .photo-text-fill{width:550px;height:220px}
.photo-text-fill .wavy-word{font-family:var(–display);font-weight:800;color:rgba(255,255,255,.04);text-transform:uppercase;position:absolute;white-space:nowrap;transition:all .6s cubic-bezier(.25,.46,.45,.94)}
.photo-frame:hover .wavy-word{color:rgba(255,255,255,.08)}
/* Stacked repeating word effect */
.photo-text-fill .wavy-word:nth-child(1){font-size:3rem;top:10%;left:-5%;transform:rotate(-5deg)}
.photo-text-fill .wavy-word:nth-child(2){font-size:2rem;top:35%;right:-10%;transform:rotate(3deg);opacity:.6}
.photo-text-fill .wavy-word:nth-child(3){font-size:4rem;bottom:10%;left:5%;transform:rotate(-2deg);opacity:.4}
.photo-frame:hover .wavy-word:nth-child(1){transform:rotate(-3deg) translateX(5px)}
.photo-frame:hover .wavy-word:nth-child(2){transform:rotate(1deg) translateX(-5px)}
.photo-frame:hover .wavy-word:nth-child(3){transform:rotate(0deg) translateY(-5px)}
.photo-label{position:absolute;bottom:.5rem;left:.75rem;right:.75rem;display:flex;justify-content:space-between;font-size:.5rem;letter-spacing:.1em;color:var(–dim)}
/* ═══════════════════════════════
MIXED MEDIA — STRETCHING TEXT
═══════════════════════════════ */
.mixed-scatter{display:flex;flex-wrap:wrap;gap:2rem;max-width:1200px;justify-content:center;padding:2rem 0}
.mixed-card{width:260px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:1rem;transition:all .5s cubic-bezier(.25,.46,.45,.94);position:relative;cursor:pointer;overflow:hidden}
.mixed-card:nth-child(1){transform:rotate(-3deg)}
.mixed-card:nth-child(2){transform:rotate(2deg) translateY(30px)}
.mixed-card:nth-child(3){transform:rotate(-1deg) translateY(-15px)}
.mixed-card:nth-child(4){transform:rotate(4deg) translateY(20px)}
.mixed-card:nth-child(5){transform:rotate(-2deg)}
.mixed-card:nth-child(6){transform:rotate(1deg) translateY(10px)}
.mixed-card:hover{transform:rotate(0deg) translateY(-10px) scale(1.05)!important;border-color:var(–accent2);box-shadow:0 20px 60px rgba(0,0,0,.4);z-index:10}
/* Text art replacing image */
.mixed-text-art{width:100%;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;position:relative;overflow:hidden}
.mixed-text-art .art-word{font-family:var(–display);font-weight:800;text-transform:uppercase;position:absolute;transition:all .5s cubic-bezier(.25,.46,.45,.94)}
.mixed-card:hover .art-word{letter-spacing:.1em}
/* Each card gets unique text art treatment */
.mixed-card:nth-child(1) .art-word{font-size:3.5rem;color:rgba(255,94,58,.08);transform:scaleY(2.5)}
.mixed-card:nth-child(1):hover .art-word{color:rgba(255,94,58,.15);transform:scaleY(1.5)}
.mixed-card:nth-child(2) .art-word{font-size:1.2rem;color:rgba(58,255,142,.06);writing-mode:vertical-rl;transform:rotate(0deg)}
.mixed-card:nth-child(2):hover .art-word{color:rgba(58,255,142,.12);transform:rotate(5deg)}
.mixed-card:nth-child(3) .art-word{font-size:5rem;color:rgba(58,142,255,.05);transform:scaleX(0.3)}
.mixed-card:nth-child(3):hover .art-word{color:rgba(58,142,255,.1);transform:scaleX(0.6)}
.mixed-card:nth-child(4) .art-word{font-size:2rem;color:rgba(255,213,58,.06);transform:skewX(-15deg)}
.mixed-card:nth-child(4):hover .art-word{color:rgba(255,213,58,.12);transform:skewX(-5deg)}
.mixed-card:nth-child(5) .art-word{font-size:4rem;color:rgba(255,94,58,.05);transform:rotate(-90deg)}
.mixed-card:nth-child(5):hover .art-word{color:rgba(255,94,58,.1);transform:rotate(-85deg)}
.mixed-card:nth-child(6) .art-word{font-size:1.5rem;color:rgba(58,255,142,.05);transform:scaleY(3) scaleX(.5)}
.mixed-card:nth-child(6):hover .art-word{color:rgba(58,255,142,.1);transform:scaleY(2) scaleX(.7)}
.mixed-type{font-size:.48rem;letter-spacing:.25em;text-transform:uppercase;margin-bottom:.2rem}
.mixed-card:nth-child(1) .mixed-type{color:var(–accent)}
.mixed-card:nth-child(2) .mixed-type{color:var(–accent2)}
.mixed-card:nth-child(3) .mixed-type{color:var(–accent3)}
.mixed-card:nth-child(4) .mixed-type{color:var(–yellow)}
.mixed-card:nth-child(5) .mixed-type{color:var(–accent)}
.mixed-card:nth-child(6) .mixed-type{color:var(–accent2)}
/* WRITING */
.writing-stack{max-width:800px;display:flex;flex-direction:column}
.writing-entry{padding:2.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.04);position:relative;cursor:pointer;transition:all .4s;display:grid;grid-template-columns:60px 1fr auto;gap:2rem;align-items:start}
.writing-entry:hover{background:rgba(255,255,255,.015);padding-left:2.5rem}
.writing-entry:hover .we-num{color:var(–accent)}
.writing-entry:hover .we-arrow{opacity:1;transform:translateX(0)}
.we-num{font-family:var(–display);font-size:1.5rem;font-weight:700;color:rgba(255,255,255,.08);transition:color .4s}
.we-type{font-size:.48rem;letter-spacing:.25em;text-transform:uppercase;color:var(–accent);margin-bottom:.5rem}
.we-title{font-family:var(–serif);font-size:1.6rem;font-style:italic;color:var(–fg);line-height:1.3;margin-bottom:.5rem}
.we-excerpt{font-size:.78rem;color:var(–dim);line-height:1.7;max-width:500px}
.we-arrow{font-size:1.2rem;color:var(–accent);opacity:0;transform:translateX(-10px);transition:all .4s;margin-top:.5rem}
/* ABOUT */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1100px;align-items:center}
.about-portrait-wrap{position:relative}
.about-portrait-box{aspect-ratio:3/4;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Giant initials as portrait */
.about-portrait-box .initials{font-family:var(–display);font-size:12rem;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.04);line-height:1;transition:all .6s;user-select:none}
.about-portrait-box:hover .initials{-webkit-text-stroke:1px rgba(255,255,255,.08);transform:scale(1.05)}
.about-decor{position:absolute;top:-15px;right:-15px;width:80px;height:80px;border:1px solid var(–accent);opacity:.3}
.about-text h3{font-family:var(–display);font-size:2.5rem;font-weight:700;color:var(–fg);line-height:1.15;margin-bottom:1.5rem}
.about-text h3 .ital{font-family:var(–serif);font-style:italic;font-weight:400;color:var(–accent)}
.about-text p{font-size:.82rem;line-height:1.8;color:var(–dim);margin-bottom:1rem}
.about-links{margin-top:2.5rem;display:flex;gap:2rem}
.about-links a{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(–dim);text-decoration:none;position:relative;transition:color .3s;padding-bottom:4px}
.about-links a::after{content:”;position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(–accent);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.about-links a:hover{color:var(–accent)}.about-links a:hover::after{transform:scaleX(1);transform-origin:left}
/* CREDITS */
.credits-wall{max-width:1200px;columns:3;column-gap:2rem}
.credit-item{break-inside:avoid;margin-bottom:.6rem;font-size:.65rem;line-height:1.6;color:var(–dim);padding:.3rem 0;transition:color .3s;cursor:default}
.credit-item:hover{color:var(–fg)}
.credit-item .cr-title{font-family:var(–serif);font-style:italic;font-size:.85rem;color:var(–fg);opacity:.7}
.credit-item .cr-role{color:var(–accent)}
/* FOOTER */
.footer{padding:6rem 3rem 3rem calc(48px + 3rem);border-top:1px solid rgba(255,255,255,.04);position:relative;overflow:hidden}
.footer-big{font-family:var(–display);font-size:clamp(4rem,10vw,9rem);font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);line-height:.9;margin-bottom:3rem}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.footer-bottom p{font-size:.6rem;color:var(–dim);letter-spacing:.1em}
.footer-email{font-family:var(–serif);font-style:italic;font-size:1.2rem;color:var(–fg);text-decoration:none;transition:color .3s}
.footer-email:hover{color:var(–accent)}
/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:all 1s cubic-bezier(.25,.46,.45,.94)}
.reveal.vis{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}
/* ═══════ LETTER-BY-LETTER STAGGER (for section titles) ═══════ */
.stagger-letter{display:inline-block;opacity:0;transform:translateY(20px) rotate(5deg);transition:all .4s cubic-bezier(.25,.46,.45,.94)}
.stagger-letter.vis{opacity:1;transform:translateY(0) rotate(0)}
/* RESPONSIVE */
@media(max-width:900px){.side-nav{display:none}.section{padding:5rem 1.5rem}.hero{padding-left:0}.hero-year{left:1.5rem}.marquee-strip{margin-left:0}.photo-strip-wrapper{margin-left:0}.film-scattered{display:flex;flex-direction:column;gap:1rem}.film-card{min-height:180px}.fc-bg-title{font-size:2.5rem!important}.mixed-scatter{gap:1rem}.mixed-card{width:45%}.about-split{grid-template-columns:1fr;gap:2rem}.credits-wall{columns:2}.writing-entry{grid-template-columns:40px 1fr;gap:1rem}.we-arrow{display:none}.footer{padding-left:1.5rem}}
@media(max-width:600px){.mixed-card{width:100%;transform:none!important}.credits-wall{columns:1}.photo-frame.pf-wide .photo-text-fill{width:300px;height:200px}.photo-frame.pf-tall .photo-text-fill{width:200px;height:300px}.photo-frame.pf-square .photo-text-fill{width:260px;height:260px}.photo-frame.pf-pano .photo-text-fill{width:340px;height:140px}}
Dajani
Mixed Media · Writing
Est. Amsterdam
Blackwater Fever●Kung Fu●Yellow Grass●Guilt●Guinea Pig Doctor●Citizen’s Anxiety●Trace of Light●The Madman●Mish Wahta●Hands Up●
WATER
FEVER
FU
ILT
LOW
WAHTA
MAN
ACE
Tape Art
Tadelakt
Custom Frame
Installation
Design
Experiment
Filmmaker,
photographer,
restless maker
Amsterdam-based visual artist working across film, macro-landscape photography, tape art, tadelakt, custom framing, and written storytelling. Involved in the production of 23+ films ranging from narrative shorts and documentaries to visual installations and experimental work.
Cinematographer for Kung Fu (2017), nominated for the Calcutta International Cult Film Festival. Co-founder of Dromedair, an independent production house. Previously worked with Forward Film Production in Lebanon as video journalist, editor, and researcher.
// ═══ CURSOR ═══
const dot=document.getElementById(‘cursorDot’),ring=document.getElementById(‘cursorRing’);
let mx=0,my=0,dx=0,dy=0;
document.addEventListener(‘mousemove’,e=>{mx=e.clientX;my=e.clientY;dot.style.left=mx-4+’px’;dot.style.top=my-4+’px’});
function animCursor(){dx+=(mx-dx)*.12;dy+=(my-dy)*.12;ring.style.left=dx-20+’px’;ring.style.top=dy-20+’px’;requestAnimationFrame(animCursor)}animCursor();
document.querySelectorAll(‘a,.film-card,.mixed-card,.writing-entry,.photo-frame’).forEach(el=>{
el.addEventListener(‘mouseenter’,()=>{ring.style.width=’60px’;ring.style.height=’60px’;ring.style.left=dx-30+’px’;ring.style.top=dy-30+’px’;ring.style.borderColor=’var(–accent)’;ring.style.opacity=’.8′});
el.addEventListener(‘mouseleave’,()=>{ring.style.width=’40px’;ring.style.height=’40px’;ring.style.borderColor=’var(–fg)’;ring.style.opacity=’.5′})
});
// ═══ PARALLAX SCATTER ═══
const scatters=document.querySelectorAll(‘.hero-scatter’);
window.addEventListener(‘mousemove’,e=>{const cx=e.clientX/window.innerWidth-.5,cy=e.clientY/window.innerHeight-.5;scatters.forEach(s=>{const sp=parseFloat(s.dataset.speed)||.01;s.style.transform=`translate(${cx*sp*1000}px,${cy*sp*800}px)`})});
// ═══ SCROLL REVEAL ═══
const obs=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add(‘vis’)})},{threshold:.06,rootMargin:’0px 0px -30px 0px’});
document.querySelectorAll(‘.reveal’).forEach(el=>obs.observe(el));
// ═══ SMOOTH NAV ═══
document.querySelectorAll(‘.side-nav a’).forEach(a=>{a.addEventListener(‘click’,e=>{e.preventDefault();const t=document.querySelector(a.getAttribute(‘href’));if(t)t.scrollIntoView({behavior:’smooth’,block:’start’})})});
// ═══════════════════════════════
// TEXT SCRAMBLE EFFECT ON HOVER
// ═══════════════════════════════
const chars=’ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%&*!?/\\|{}[]~^’;
document.querySelectorAll(‘.film-card[data-scramble]’).forEach(card=>{
const target=card.querySelector(‘.fc-scramble’);
const finalText=card.dataset.scramble;
let interval=null;
let iteration=0;
card.addEventListener(‘mouseenter’,()=>{
iteration=0;
clearInterval(interval);
interval=setInterval(()=>{
target.textContent=finalText.split(”).map((c,i)=>{
if(i=finalText.length)clearInterval(interval);
iteration+=1/2;
},30);
});
card.addEventListener(‘mouseleave’,()=>{
clearInterval(interval);
target.textContent=”;
});
});
// ═══════════════════════════════
// LETTER STAGGER ON SECTION LABELS
// ═══════════════════════════════
document.querySelectorAll(‘.section-label’).forEach(label=>{
const text=label.childNodes;
const textContent=label.textContent.trim();
// Only stagger the text part (not the num span)
});
// ═══════════════════════════════
// CREDITS — HOVER RIPPLE
// ═══════════════════════════════
const creditItems=document.querySelectorAll(‘.credit-item’);
creditItems.forEach((item,i)=>{
item.addEventListener(‘mouseenter’,()=>{
// Highlight neighbours
const prev=creditItems[i-1];
const next=creditItems[i+1];
if(prev)prev.style.color=’rgba(232,228,223,0.4)’;
if(next)next.style.color=’rgba(232,228,223,0.4)’;
});
item.addEventListener(‘mouseleave’,()=>{
const prev=creditItems[i-1];
const next=creditItems[i+1];
if(prev)prev.style.color=”;
if(next)next.style.color=”;
});
});
Rakan Dajani 