@font-face{font-family:Anomalia;src:url('assets/anomalia-regular.otf');font-display:swap}@font-face{font-family:Anomalia;src:url('assets/anomalia-bold.otf');font-weight:700;font-display:swap}
:root{--white:#fbf9ff;--yellow:#fff502;--muted:#dfd0f4;--line:#ffffff2a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:#3b157b;color:var(--white);font-family:Anomalia,Arial,sans-serif;font-size:18px;line-height:1.5;isolation:isolate}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}img,svg{display:block;max-width:100%}.site-background{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:#3b157b}.site-background:before{content:'';position:absolute;inset:-15%;background:radial-gradient(ellipse at 16% 36%,#9546ff 0%,#9546ff00 46%),radial-gradient(ellipse at 90% 8%,#7f35f5 0%,#7f35f500 43%),radial-gradient(ellipse at 80% 95%,#55219f 0%,#55219f00 47%),linear-gradient(135deg,#45158c,#30115f 48%,#6324bd);animation:gradient-flow 38s ease-in-out infinite alternate;will-change:transform}.site-background:after{content:'';position:absolute;inset:0;background:url('assets/grain.png') repeat;opacity:.18;mix-blend-mode:soft-light}.skip{position:fixed;top:-80px;background:var(--yellow);color:#351168;padding:12px;z-index:100}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header{max-width:1500px;margin:auto;padding:25px 5.5%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4}.nav-logo{display:block;width:105px}.brand-logo{width:100%;height:auto;overflow:visible}.header nav{display:flex;align-items:center;gap:34px;font-size:16px}.nav-contact{border:1px solid var(--line);border-radius:99px;padding:10px 21px}.nav-contact span{margin-right:20px;color:var(--yellow)}.hero{position:relative;isolation:isolate;height:clamp(690px,84svh,900px);max-width:1700px;margin:0 auto;display:grid;place-items:center;overflow:hidden}.hero:after{content:'';position:absolute;inset:10% 16%;z-index:-1;background:radial-gradient(ellipse at center,#4c1c9299,transparent 72%);pointer-events:none}.hero-center{position:relative;text-align:center;z-index:2;width:min(590px,70%);padding:15px 0 45px}.hero-logo{width:min(440px,100%);margin:0 auto}.hero-service{font-size:17px;letter-spacing:1.3px;margin:30px 0 32px;font-weight:700;white-space:nowrap}.hero-service span{color:var(--yellow);padding:0 10px}.hero-actions{display:flex;gap:15px;justify-content:center;align-items:center}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:14px 25px;min-width:158px;border-radius:99px;font-weight:700;font-size:17px;transition:transform .25s,background .25s}.button:hover{transform:translateY(-3px)}.yellow{background:var(--yellow);color:#351168}.glass{background:#ffffff0d;border:1px solid #ffffff73}.glass:hover{background:#ffffff1c}.logo-wink{transform-box:fill-box;transform-origin:55% 50%;animation:brand-wink 9s ease-in-out infinite}.logo-pupil{transform-box:fill-box;transform-origin:50% 50%;animation:pupil-wink 9s ease-in-out infinite}.nav-logo .logo-wink,.nav-logo .logo-pupil{animation-delay:-2.5s}.contact-logo .logo-wink,.contact-logo .logo-pupil{animation-delay:-5s}.footer-logo .logo-wink,.footer-logo .logo-pupil{animation-delay:-7s}.section{max-width:1440px;margin:auto;padding:95px 5.5%;scroll-margin-top:15px}.section-head{margin-bottom:40px}.eyebrow{font-size:13px;letter-spacing:1px;color:var(--yellow);font-weight:700;margin:0 0 15px}h2{font-size:clamp(37px,4vw,54px);line-height:1.15;letter-spacing:-.5px;margin:0}h3,p{margin-top:0}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 25px}.work-card{background:none;border:none;color:white;padding:0;text-align:right;min-width:0}.thumb{aspect-ratio:16/10;position:relative;border-radius:12px;overflow:hidden;background:#512893;isolation:isolate}.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.thumb:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#35116855);pointer-events:none}.work-card:hover .thumb img{transform:scale(1.045)}.small-play{position:absolute;right:16px;bottom:16px;background:#fffffff2;color:#351168;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:14px;z-index:2;transition:background .2s}.work-card:hover .small-play{background:var(--yellow)}.work-meta{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-top:14px}.work-meta h3{font-size:18px;font-weight:700;line-height:1.4;margin:0}.work-meta>span{color:var(--yellow);font-size:20px}.thumb-fallback{height:100%;background:linear-gradient(140deg,#9451ef,#491682);display:grid;place-items:center;padding:40px;text-align:center;font-size:24px;font-weight:bold}.contact{padding-top:105px;padding-bottom:110px;border-top:1px solid var(--line);text-align:center}.contact-logo{width:220px;margin:0 auto 35px}.contact h2{font-size:clamp(35px,4vw,52px);margin-bottom:38px}.contact-links{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}.contact-links a{display:flex;align-items:center;gap:15px;border:1px solid #ffffff55;border-radius:99px;padding:17px 24px;font-size:20px;transition:background .25s,transform .25s}.contact-links a:hover{background:#ffffff12;transform:translateY(-3px)}.contact-links svg{width:23px;height:23px;fill:none;stroke:var(--yellow);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.link-arrow{color:var(--yellow);margin-right:12px}footer{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:35px 5.5%;gap:20px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}.footer-logo{display:block;width:90px}footer p{margin:0}dialog{color:white;background:#30115e;width:min(1100px,94vw);max-height:92vh;border:1px solid #ffffff60;border-radius:16px;padding:22px;box-shadow:0 20px 100px #2c105988}dialog::backdrop{background:#240e4ee8;backdrop-filter:blur(10px)}.player-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.player-head p{font-size:12px;color:var(--muted);margin:0 0 4px}.player-head h3{font-size:22px;margin:0}.player-head button{background:#ffffff14;border:none;color:white;border-radius:50%;width:42px;height:42px;font:30px Arial;flex-shrink:0}.video-frame{aspect-ratio:16/9;background:#000}.video-frame iframe{width:100%;height:100%;border:0}.player-foot{display:flex;justify-content:space-between;gap:15px;margin-top:16px;font-size:13px;color:var(--muted)}.player-foot a{color:var(--yellow)}.shortcut-note{padding:30px;color:var(--muted);text-align:center}.shortcut-note a{display:inline-block;margin-top:18px;color:var(--yellow)}.offscreen .mosaic-screen,.offscreen .logo-wink,.offscreen .logo-pupil,.page-hidden *{animation-play-state:paused!important}.page-hidden .site-background:before{animation-play-state:paused}

@media(min-width:1700px){.hero-logo{width:480px}}@media(max-width:1000px){.hero-logo{width:370px}.hero-center{width:60%}.hero-service{font-size:13px;letter-spacing:.5px}.hero{height:690px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-links a{font-size:18px}}
@media(max-width:650px){body{font-size:16px}.header{padding:20px 6%}.nav-logo{width:80px}.header nav{gap:22px;font-size:14px}.nav-contact{padding:8px 15px}.nav-contact span{margin-right:8px}.hero{height:650px;max-height:calc(100svh - 75px);min-height:560px}.hero-center{width:80%;padding-bottom:20px}.hero-logo{width:280px;max-width:100%}.hero-service{font-size:10px;letter-spacing:.35px;margin:25px -5% 28px}.hero-service span{padding:0 5px}.hero-actions{gap:10px}.button{min-width:128px;font-size:15px;padding:12px 17px;gap:18px}.section{padding:65px 6%}.section-head{margin-bottom:28px}h2{font-size:38px}.gallery{grid-template-columns:1fr;gap:30px}.work-meta h3{font-size:18px}.contact{padding-top:75px;padding-bottom:75px}.contact-logo{width:190px;margin-bottom:30px}.contact h2{font-size:34px;margin-bottom:30px}.contact-links{gap:14px;flex-direction:column}.contact-links a{font-size:16px;width:100%;max-width:330px;padding:15px 20px;gap:12px}.link-arrow{margin-right:auto}.contact-links svg{width:20px;height:20px;flex-shrink:0}footer{padding:28px 6%;font-size:11px;gap:15px}.footer-logo{width:74px}footer p{display:none}.player-head h3{font-size:18px}.player-foot{flex-direction:column}dialog{padding:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.site-background:before{will-change:auto}}


/* Color-field morphing: the glow centers move inside the gradient, not the page. */
@property --glow-x{syntax:'<percentage>';inherits:false;initial-value:18%}
@property --glow-y{syntax:'<percentage>';inherits:false;initial-value:66%}
@property --second-x{syntax:'<percentage>';inherits:false;initial-value:82%}
@property --second-y{syntax:'<percentage>';inherits:false;initial-value:16%}
@property --amber-x{syntax:'<percentage>';inherits:false;initial-value:96%}
body,.site-background{background:#160923}
.site-background:before{inset:0;transform:none;will-change:auto;background:radial-gradient(ellipse at var(--glow-x) var(--glow-y),#7825e5ab 0%,#7825e500 49%),radial-gradient(ellipse at var(--second-x) var(--second-y),#6e20d8c4 0%,#6e20d800 48%),radial-gradient(ellipse at 50% 46%,#47148288 0%,transparent 55%),radial-gradient(ellipse at var(--amber-x) 94%,#fff50225 0%,#fff50200 24%),linear-gradient(135deg,#13081f,#250c44 50%,#180927);animation:color-wave 25s ease-in-out infinite alternate}
.site-background:after{opacity:.145;mix-blend-mode:soft-light}
.header{position:absolute;top:0;left:0;right:0}
.hero{max-width:none;height:100svh;min-height:740px}
.hero:after{inset:0;z-index:1;background:radial-gradient(ellipse at 50% 48%,#18082d99 0%,#18082d35 38%,transparent 72%);pointer-events:none}
.hero-center{z-index:2;width:min(600px,76%);padding-top:65px;padding-bottom:30px}
.hero-logo{width:450px;max-width:100%}
.hero-service{color:#fff;font-size:16px;text-shadow:0 1px 15px #170827;margin-top:31px}
.hero-actions .glass{background:#26114266}
.mosaic-screen{position:absolute;inset:-1%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:calc((102vw - 21px)/8);align-content:start;gap:3px;z-index:0;opacity:.62;background:none;filter:none;transform:none;animation:none;pointer-events:none}
.mosaic-cell{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;background:none;opacity:var(--floor);animation:tile-breathe var(--pulse) ease-in-out infinite;animation-delay:var(--offset)}
.mosaic-cell:before{content:'';position:absolute;inset:-2px;background-image:var(--frame);background-position:center;background-size:cover;filter:grayscale(1) contrast(1.1) blur(1.6px)}
.mosaic-cell.warm:before{filter:grayscale(1) sepia(.8) saturate(1.4) hue-rotate(5deg) blur(1.6px)}
.mosaic-cell.warm:after{content:'';position:absolute;inset:0;background:#fff50228;mix-blend-mode:color}
.offscreen .mosaic-cell,.page-hidden .mosaic-cell,.page-hidden .site-background:before{animation-play-state:paused!important}
.logo-wink{animation:close-yellow-eye 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:55% 50%}
.logo-pupil{animation:close-white-eye 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.nav-logo .logo-wink,.nav-logo .logo-pupil{animation-delay:-.7s}.contact-logo .logo-wink,.contact-logo .logo-pupil{animation-delay:-1.4s}.footer-logo .logo-wink,.footer-logo .logo-pupil{animation-delay:-2s}
.showreel-title{font-size:clamp(48px,6.7vw,88px);font-weight:700;letter-spacing:-1.7px;line-height:1;text-align:right;margin:0;color:#fbf9ff}
.works .section-head{margin-bottom:45px}
.contact{position:relative;isolation:isolate;border-top-color:#ffffff20}
.contact:after{content:'';position:absolute;inset:35% 0 -110px;background:linear-gradient(to bottom,#13071f00 0%,#13071fa8 55%,#0e0619ed 100%);pointer-events:none;z-index:-1}
footer{position:relative;background:#10071bb8;max-width:none;padding-right:max(5.5%,calc((100vw - 1280px)/2));padding-left:max(5.5%,calc((100vw - 1280px)/2))}
@keyframes color-wave{0%{--glow-x:12%;--glow-y:72%;--second-x:88%;--second-y:10%;--amber-x:100%}45%{--glow-x:38%;--glow-y:42%;--second-x:72%;--second-y:65%;--amber-x:86%}100%{--glow-x:64%;--glow-y:84%;--second-x:28%;--second-y:20%;--amber-x:96%}}
@keyframes tile-breathe{0%,100%{opacity:var(--floor)}50%{opacity:var(--peak)}}


@media(max-width:650px){.hero{height:100svh;max-height:none;min-height:680px}.hero-center{padding-top:35px}.hero-logo{width:280px}.hero-service{font-size:10px;letter-spacing:.35px;margin-top:25px}.mosaic-screen{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:calc((102vw - 8px)/5);gap:2px;opacity:.60}.showreel-title{font-size:49px;letter-spacing:-1px}.works .section-head{margin-bottom:30px}.contact:after{bottom:-105px}footer{padding-left:6%;padding-right:6%}}
@media(prefers-reduced-motion:reduce){.mosaic-cell{animation:none!important;opacity:.29}.site-background:before{animation:none!important}.logo-wink,.logo-pupil{animation:none!important;opacity:1;transform:none}}

.header{justify-content:flex-end;min-height:88px}
.logo-wink,.logo-pupil{transform-origin:50% 50%;opacity:1}
@keyframes close-yellow-eye{0%,35%,49%,100%{transform:scaleY(1)}40%,43%{transform:scaleY(.045)}}
@keyframes close-white-eye{0%,35%,49%,100%{transform:scaleY(1)}40%,43%{transform:scaleY(.10)}}
/* A continuous full-width ending: no narrow gradient panel or side edges. */
.contact{width:100%;max-width:none;margin:0;padding-right:5.5%;padding-left:5.5%;overflow:visible}
.contact:after{inset:0;background:linear-gradient(to bottom,#13071f00 0%,#13071f50 42%,#10071be8 100%)}
footer{background:#10071be8;border-top-color:#ffffff16}
@media(max-width:650px){.header{min-height:78px}.contact{padding-right:6%;padding-left:6%}.contact:after{inset:0;bottom:0}}
@media(prefers-reduced-motion:reduce){.logo-wink,.logo-pupil{animation:none!important;transform:none;opacity:1}}

/* Floating video frames: mixed film ratios, independent depth and drift. */
.video-space{position:absolute;inset:-4%;perspective:1100px;perspective-origin:50% 45%;overflow:hidden;pointer-events:none;z-index:0;direction:ltr}
.video-rectangle{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:16/9;opacity:var(--low);transform:translate3d(0,0,var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));animation:frame-float var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay);border:1px solid #ffffff16;box-shadow:0 12px 35px #09021233}
.video-rectangle.portrait{aspect-ratio:9/16}
.video-rectangle:before{content:'';position:absolute;inset:0;background-image:var(--frame);background-size:cover;background-position:center;filter:grayscale(1) contrast(1.12) blur(var(--blur))}
@keyframes frame-float{0%{opacity:var(--low);transform:translate3d(0,0,var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}55%{opacity:var(--high)}100%{opacity:var(--low);transform:translate3d(var(--dx),var(--dy),calc(var(--z) + 65px)) rotateX(calc(var(--rx) * -1)) rotateY(calc(var(--ry) * -1)) rotateZ(calc(var(--rz) + 3deg))}}
.hero:after{background:radial-gradient(ellipse at 50% 49%,#18082dcc 0%,#18082d80 22%,#18082d20 47%,transparent 78%)}
.header nav{gap:14px}
.header nav a{border:1px solid #ffffff75;border-radius:999px;padding:10px 26px;min-width:110px;text-align:center;transition:background .25s,color .25s,border-color .25s}
.header nav a:hover{border-color:var(--yellow);background:#fff5020d}
.header nav a.active,.header nav a:active{background:var(--yellow);border-color:var(--yellow);color:#190a2c}
/* Begin with two closed eyes, reveal the pupil and open the yellow chevron. */
.logo-pupil{animation:white-eye-reveal 5.8s ease-in-out infinite;transform:scaleX(1.65) scaleY(.055)}
.logo-wink{animation:yellow-eye-reveal 5.8s ease-in-out infinite;transform:scaleY(.045)}
@keyframes white-eye-reveal{0%,12%,94%,100%{transform:scaleX(1.65) scaleY(.055)}24%,46%,57%,82%{transform:scaleX(1) scaleY(1)}50%,52%{transform:scaleX(1.65) scaleY(.055)}}
@keyframes yellow-eye-reveal{0%,12%,94%,100%{transform:scaleY(.045)}28%,82%{transform:scaleY(1)}}
.contact{background:radial-gradient(ellipse at 93% 90%,#fff50255 0%,#c4a70020 17%,transparent 36%),radial-gradient(ellipse at 16% 32%,#54208c 0%,transparent 54%),radial-gradient(ellipse at 65% 15%,#33134f 0%,transparent 53%),linear-gradient(125deg,#12091d,#0a0710 75%);overflow:hidden}
.contact:after{inset:0;background:url('assets/grain.png') repeat;opacity:.145;mix-blend-mode:soft-light}
.offscreen .video-rectangle,.page-hidden .video-rectangle{animation-play-state:paused!important}
@media(max-width:650px){.video-space{inset:-2% -35%}.video-rectangle{width:calc(var(--w) * 1.35)}.header nav a{min-width:94px;padding:9px 20px}.hero-service{margin-bottom:0}.hero-center{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.video-rectangle{animation:none!important;opacity:.23}.logo-wink,.logo-pupil{animation:none!important;transform:none}}

/* Opaque monochrome film planes continue naturally into the work section. */
body{overflow-x:clip}
.hero{overflow:visible}
.video-space{overflow:visible}
.video-rectangle{opacity:1;animation-name:frame-drift;animation-duration:calc(var(--duration) * .76)}
.video-rectangle:before{filter:grayscale(1) brightness(.48) contrast(1.12) blur(var(--blur))}
@keyframes frame-drift{0%{transform:translate3d(calc(var(--dx) * -.4),calc(var(--dy) * -.4),var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}100%{transform:translate3d(calc(var(--dx) * 1.7),calc(var(--dy) * 1.7),calc(var(--z) + 105px)) rotateX(calc(var(--rx) * -1)) rotateY(calc(var(--ry) * -1)) rotateZ(calc(var(--rz) + 5deg))}}
.works{position:relative;z-index:2;padding-top:clamp(250px,25vw,360px)}
.logo-wink{animation:none;transform:none;opacity:1}
.logo-pupil{animation:gentle-white-blink 5.2s ease-in-out infinite;transform:none}
@keyframes gentle-white-blink{0%,44%,49%,100%{transform:scaleY(1)}46%,47%{transform:scaleY(.07)}}
.site-background:before{animation-duration:16s}
.site-background:after{opacity:.40}
.contact{background:#000;border-top:none}
.contact:after{content:none}
footer{isolation:isolate;background:radial-gradient(ellipse at 94% 90%,#fff50283,transparent 34%),radial-gradient(ellipse at 20% 25%,#7825bd,transparent 65%),linear-gradient(115deg,#23103c,#10091d 67%);border-top:none}
footer:after{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/grain.png') repeat;opacity:.40;mix-blend-mode:soft-light;pointer-events:none}
@media(max-width:650px){.works{padding-top:210px}}
@media(prefers-reduced-motion:reduce){.video-rectangle{animation:none!important;opacity:1}.logo-pupil{animation:none!important;transform:none}}

main{overflow-x:clip}


/* Full-screen monochrome film, multiplied into the moving purple field. */
.hero{overflow:hidden}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at var(--glow-x) var(--glow-y),#7825e5ab 0%,#7825e500 49%),radial-gradient(ellipse at var(--second-x) var(--second-y),#6e20d8c4 0%,#6e20d800 48%),linear-gradient(135deg,#13081f,#250c44 50%,#180927);animation:color-wave 16s ease-in-out infinite alternate}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;z-index:0;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply;opacity:.45;mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 76%,transparent 100%)}
.hero:after{background:radial-gradient(ellipse at 50% 49%,#1407229c 0%,#14072238 36%,transparent 70%);z-index:1}
.hero-center{filter:drop-shadow(0 3px 20px #12082066)}
.works{padding-top:95px}
@media(max-width:650px){.works{padding-top:65px}.hero-film{opacity:.45}}
@media(prefers-reduced-motion:reduce){.hero:before{animation:none!important}}

.hero-grain{position:absolute;inset:0;z-index:1;pointer-events:none;background:url(assets/grain.png) repeat;opacity:.40;mix-blend-mode:soft-light}

.hero-service{color:var(--yellow)}
.logo-pupil{animation:charming-blink 5.2s cubic-bezier(.45,0,.35,1) infinite}
.logo-wink{animation:wink-spark 5.2s ease-out infinite;transform:none}
@keyframes charming-blink{0%,43%,51%,100%{transform:scale(1) rotate(0deg);fill:#fff;filter:none}46%{transform:scaleX(1.12) scaleY(.075) rotate(-7deg);fill:#fff502;filter:drop-shadow(0 0 4px #fff50299)}48%{transform:scaleX(.96) scaleY(1.04) rotate(0deg);fill:#fff502;filter:drop-shadow(0 0 2px #fff50255)}}
@keyframes wink-spark{0%,43%,51%,100%{filter:none}46%,47%{filter:brightness(1.35) drop-shadow(0 0 7px #fff502bb)}}
footer{min-height:132px;overflow:hidden;isolation:isolate}
.footer-art{position:absolute;inset:0;z-index:0;pointer-events:none;isolation:isolate;background:#403449;opacity:.62}
.footer-watermark{position:absolute;max-width:none;width:145%;height:auto;left:-23%;top:50%;transform:translateY(-44%) rotate(-7deg)}
.footer-watermark *{animation:none!important;transform:none!important;fill:#fff;filter:none!important}
.footer-art:after{content:'';position:absolute;inset:0;mix-blend-mode:multiply;background:radial-gradient(ellipse at 94% 90%,#fff502d0,transparent 34%),radial-gradient(ellipse at 20% 25%,#9c50f0,transparent 65%),linear-gradient(115deg,#542778,#29183f 67%)}
footer:after{z-index:1}
footer>p,footer>a{position:relative;z-index:2;text-shadow:0 1px 8px #000}
@media(max-width:650px){footer{min-height:110px}.footer-watermark{width:265%;left:-75%;transform:translateY(-44%) rotate(-7deg)}}
@media(prefers-reduced-motion:reduce){.logo-pupil,.logo-wink{animation:none!important;transform:none;filter:none;fill:revert-layer}}

/* Static brand eyes and a dark purple contact field. */
.logo-pupil,.logo-wink{animation:none!important;transform:none!important;filter:none!important;opacity:1}
.logo-pupil{fill:#fff}.logo-wink{fill:#fff502}
.showreel-title{color:var(--yellow)}
.contact{background:radial-gradient(ellipse at 14% 28%,#29133f 0%,#29133f00 62%),radial-gradient(ellipse at 88% 90%,#20102f 0%,transparent 56%),linear-gradient(125deg,#100a19,#08060c 65%,#160c23)}
.contact:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/grain.png') repeat;opacity:.40;mix-blend-mode:soft-light}

.showreel-title .show-word{color:var(--yellow)}.showreel-title .reel-word{color:var(--white)}

/* Visible grain on dark fields: normal compositing keeps the light specks visible. */
.site-background:after,.hero-grain,.contact:after,footer:after{background-image:url('assets/film-grain-v14.svg');background-size:180px 180px;background-repeat:repeat;mix-blend-mode:normal;opacity:.48}
.hero-grain{z-index:1}
.footer-watermark{transform-origin:50% 48%;animation:footer-logo-drift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes footer-logo-drift{from{transform:translate(-3%,-46%) rotate(-7deg) scale(1.01)}to{transform:translate(4%,-41%) rotate(-5deg) scale(1.13)}}
footer.offscreen .footer-watermark{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.footer-watermark{animation:none!important;will-change:auto}}

/* Keep the title's final dimensions while typing right to left. */
.contact-typewriter{position:relative;display:table;margin-left:auto;margin-right:auto;max-width:100%;direction:rtl}
.typewriter-sizer{visibility:hidden;white-space:pre}
.cursor-space{display:inline-block;width:.22em}
.typewriter-line{position:absolute;top:0;right:0;display:inline-flex;flex-direction:row;align-items:baseline;direction:rtl;white-space:pre}
.typewriter-cursor{display:inline-block;width:2px;height:.88em;flex:none;background:var(--yellow);margin-inline-start:.12em;transform:translateY(.08em);animation:typing-caret .85s step-end infinite}
@keyframes typing-caret{0%,48%{opacity:1}49%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typewriter-cursor{animation:none!important;opacity:1}}

.hero-logo-motion,.hero-logo-still{width:100%;height:auto}
.hero-logo-still{display:none}
@media(prefers-reduced-motion:reduce){.hero-logo-motion{display:none}.hero-logo-still{display:block}}

.hero-service{font-size:18px}
.hero-service>span{animation:typing-caret .85s step-end infinite}
.hero.offscreen .hero-service>span{animation-play-state:paused}
@media(max-width:650px){.hero-service{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.hero-service>span{animation:none!important;opacity:1}}

/* Inline vector is visible on the first paint; motion is revealed only after validation. */
.hero-logo{position:relative;isolation:isolate}
.hero-logo-fallback{display:block;width:100%;height:auto}
.hero-logo-motion{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
.hero-logo.has-motion .hero-logo-motion{opacity:1}
.hero-logo.has-motion .hero-logo-fallback{visibility:hidden}
@media(prefers-reduced-motion:reduce){.hero-logo.has-motion .hero-logo-fallback{visibility:visible}.hero-logo-motion{display:none!important}}

/* Each card has its own real preview embedded with gallery data, before full-size loading. */
.thumb-preview{position:absolute;inset:0;background-position:center;background-size:cover;z-index:0}
.thumb .thumb-full{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none}
.thumb.has-full .thumb-full{opacity:1}
.thumb:after{z-index:2}.thumb .small-play{z-index:3}

.thumb-backup{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 90% 100%,#fff50230,transparent 42%),radial-gradient(ellipse at 20% 30%,#6b2bc1,transparent 70%),#211034;z-index:0}
.thumb-backup svg{width:46%;height:auto;opacity:.72}
.thumb .thumb-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none}
.thumb.has-preview .thumb-preview{opacity:1}
.thumb .thumb-full{z-index:2}
.thumb:after{z-index:3}.thumb .small-play{z-index:4}

/* Portfolio categories use the same outlined oval controls as the main navigation. */
[hidden]{display:none!important}
.work-categories,.invitation-categories{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-start}
.work-categories{margin:0 0 26px}
.work-categories button,.invitation-categories button{font:inherit;font-weight:700;color:#fff;border:1px solid #ffffff75;border-radius:999px;background:transparent;cursor:pointer;padding:10px 26px;min-height:44px;transition:background .25s,color .25s,border-color .25s}
.work-categories button:hover,.invitation-categories button:hover{border-color:var(--yellow);background:#fff5020d}
.work-categories button[aria-pressed="true"],.invitation-categories button[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:#190a2c}
.work-categories button:focus-visible,.invitation-categories button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.invitation-categories{margin:0 0 26px;gap:10px}
.invitation-categories button{font-size:15px;padding:8px 22px}
.category-intro{margin-bottom:28px}
.category-intro h3{font-size:28px;margin:0 0 12px;line-height:1.3}
.institutions-note{color:#f4ecff;font-size:16px;line-height:1.8;margin:0;max-width:760px}
.video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#08050d}
.player-silent-note{font-size:14px;color:#ddd1eb;margin:16px 0 0}
.institution-video::-webkit-media-controls-mute-button,.institution-video::-webkit-media-controls-volume-slider{display:none}
.video-error{padding:30px;text-align:center;line-height:1.8}
@media(max-width:650px){.work-categories{gap:8px}.work-categories button{font-size:14px;padding:9px 17px}.invitation-categories{gap:8px}.invitation-categories button{font-size:13px;padding:8px 15px}.category-intro h3{font-size:24px}.institutions-note{font-size:14px}.category-intro{margin-bottom:24px}}

/* Portrait invitation artwork remains fully visible rather than cropped into a landscape frame. */
.gallery.is-invitations .thumb{aspect-ratio:9/13;background:#170b27}
.gallery.is-invitations .thumb img{object-fit:contain;background:#170b27}

/* The actual preview frame is embedded with the gallery data, before image requests. */
.video-frame{position:relative}
.video-loading{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);margin:0;border:1px solid #ffffff40;border-radius:999px;padding:10px 20px;background:#170b27e8;color:white;font-size:15px;white-space:nowrap}
.video-loading button{border:0;border-radius:999px;background:var(--yellow);color:#170b27;padding:4px 12px}

/* Institution playback has no native overflow/download menu or draggable media. */
.institution-video{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.institution-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:24px 14px 12px;background:linear-gradient(transparent,#08050def 40%);direction:ltr;color:#fff}
.institution-controls button{flex-shrink:0;display:grid;place-items:center;min-width:40px;min-height:40px;border:1px solid #ffffff50;border-radius:50%;background:#1d103b;color:#fff;font:20px Arial;cursor:pointer}
.institution-controls button:hover{background:var(--yellow);color:#170b27;border-color:var(--yellow)}
.institution-controls button:disabled,.institution-controls input:disabled{opacity:.45;cursor:wait}
.institution-controls input[type="range"]{flex:1;min-width:50px;accent-color:var(--yellow);cursor:pointer;height:32px;direction:ltr}
.institution-time{font:13px Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.video-frame:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;background:#08050d}
.video-frame:fullscreen .institution-controls{padding-bottom:max(12px,env(safe-area-inset-bottom))}
.video-frame:has(.institution-controls) .video-loading{bottom:76px}
@media(max-width:480px){.institution-controls{gap:7px;padding:20px 8px 8px}.institution-controls button{min-width:34px;min-height:34px;font-size:18px}.institution-time{font-size:11px}}