/*
Theme Name: Alfiostudio Noir
Theme URI: https://alfiostudio.com
Author: alfiostudio
Description: Cyberpunk-noir animation studio theme: 3D parallax hero, project data room with gated investor decks, lead capture, quote calculator, guided assistant and EN/ES/PT/JA interface.
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: alfiostudio-noir
*/
:root{--bg:#050505;--fg:#f4f4f4;--mut:#9a9a9a;--a1:#ff0000;--a2:#1e9bff;--a3:#f2c300;--line:#f4f4f42e;--card:#0d0d0d;--f1:Syne,'Noto Sans JP',system-ui,sans-serif;--f2:'Red Hat Mono','Noto Sans JP','Courier New',monospace}
[data-theme=light]{--bg:#f5f5f5;--fg:#000;--mut:#555;--line:#00000033;--card:#e9e9e9;--a2:#0a6fd0}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.06;background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:70px}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--fg);font:400 15px/1.6 var(--f2);overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit}img{max-width:100%;height:auto;display:block}
h1,h2,h3,.logo b,.st b{font-family:var(--f1);font-weight:800}
.w{max-width:1180px;margin:auto;padding:0 20px}
.sr{position:absolute;left:-9999px}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:55;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 20px 10px;background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;letter-spacing:.14em;font-size:13px}.logo img{height:34px;width:auto}.logo i{color:var(--a1);font-style:normal}
.lk{display:flex;gap:18px;align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.lk a{text-decoration:none}.lk a:hover{color:var(--a1)}
.lng{display:inline-flex;gap:4px}.lng button,.tg{background:none;border:1px solid var(--line);color:var(--mut);font:inherit;font-size:11px;padding:4px 8px;cursor:pointer}
.lng button.on{background:var(--a1);border-color:var(--a1);color:#fff}.tg{color:var(--fg);border-color:var(--fg)}
#mb{display:none}
@media(max-width:860px){#mb{display:block}.lk{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 54px) 0 auto;flex-direction:column;align-items:flex-start;background:var(--bg);padding:20px;transform:translateY(-130%);transition:transform .3s;border-bottom:1px solid var(--line);font-size:15px}.lk.on{transform:none}}
.pg{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--a1);transform:scaleX(0);transform-origin:0 50%;z-index:60}
#cur{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid var(--a2);border-radius:50%;pointer-events:none;z-index:70;display:none;will-change:transform;transition:width .2s,height .2s,margin .2s}
@media(hover:hover) and (pointer:fine){#cur{display:block}#cur.h{width:64px;height:64px;margin:-32px 0 0 -32px;background:#1e9bff22}}
/* hero 3D */
.hero{min-height:100svh;position:relative;overflow:hidden;perspective:1100px;display:grid;place-items:center;padding:90px 16px 50px}
.scene{position:relative;width:100%;max-width:1100px;height:min(80vh,680px);transform-style:preserve-3d;will-change:transform}
.ly{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.ly a,.ly button{pointer-events:auto}
.floor{position:absolute;left:-60%;right:-60%;bottom:-8%;height:150%;background:linear-gradient(var(--a2) 1px,transparent 1px) 0 0/100% 60px,linear-gradient(90deg,var(--a2) 1px,transparent 1px) 0 0/90px 100%;opacity:.32;transform:rotateX(76deg);transform-origin:50% 100%;animation:fl 1.6s linear infinite}
@keyframes fl{to{transform:rotateX(76deg) translateY(60px)}}

.kick{color:var(--a3);letter-spacing:.25em;font-size:12px;text-transform:uppercase}
h1{font-size:clamp(2rem,6.4vw,4.8rem);line-height:.96;letter-spacing:-.035em;text-transform:uppercase;margin:12px 0 16px;position:relative;text-shadow:2px 0 var(--a1),-2px 0 var(--a2)}
h1.gl:before,h1.gl:after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;opacity:0;overflow:hidden}
h1.gl:before{color:var(--a2);text-shadow:none;transform:translate(4px,0)}h1.gl:after{color:var(--a1);text-shadow:none;transform:translate(-4px,0)}
h1.gl.fx:before{opacity:1;animation:g3 .35s steps(1)}h1.gl.fx:after{opacity:1;animation:g4 .35s steps(1)}
@keyframes g3{0%{clip-path:inset(20% 0 50% 0)}33%{clip-path:inset(60% 0 10% 0)}66%{clip-path:inset(5% 0 70% 0)}100%{clip-path:inset(40% 0 30% 0)}}
@keyframes g4{0%{clip-path:inset(55% 0 20% 0)}33%{clip-path:inset(10% 0 60% 0)}66%{clip-path:inset(70% 0 5% 0)}100%{clip-path:inset(30% 0 40% 0)}}
.sub{max-width:560px;margin:0 auto 22px;color:var(--mut)}
.btn{display:inline-block;border:2px solid var(--fg);padding:12px 20px;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font:700 12px var(--f2);background:var(--bg);color:var(--fg);cursor:pointer;margin:5px 6px 5px 0;transition:background .2s,color .2s,box-shadow .2s}
.btn.r{background:var(--a1);border-color:var(--a1);color:#fff;box-shadow:0 0 0 var(--a2)}.btn:hover{background:var(--fg);color:var(--bg);box-shadow:4px 4px 0 var(--a2)}
.mq{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:12px 0;background:var(--a3);color:#0a0a0a;font-weight:700;letter-spacing:.2em;font-size:13px}
.mq span{display:inline-block;animation:mq 34s linear infinite;will-change:transform}@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
section{padding:84px 0}
h2{font-size:clamp(1.6rem,5vw,3rem);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:6px}
h2 small{display:block;font:400 12px var(--f2);color:var(--a1);letter-spacing:.3em;margin-bottom:8px}
.lead{color:var(--mut);max-width:640px;margin-bottom:34px}
.st{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line)}.st div{padding:24px;border-right:1px solid var(--line)}.st b{display:block;font-size:2.6rem;color:var(--a1);line-height:1}
.fl{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}.fl .big{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cs{position:relative;border:1px solid var(--line);background:var(--card);overflow:hidden}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s;transform-style:preserve-3d}
.tilt:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#ffffff2e,transparent 55%);opacity:0;transition:opacity .2s}.tilt:hover:after{opacity:1}
.tilt .lift{transform:translateZ(46px)}
.cs .in{padding:22px}
.cs h3{font-size:1.6rem;text-transform:uppercase;line-height:1.05;margin-bottom:8px}.cs p{color:var(--mut);font-size:14px}
.ps{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--c,#111111);border-bottom:1px solid var(--line)}
.big .ps{aspect-ratio:auto;min-height:300px;border:0;border-right:1px solid var(--line)}
.ps img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ps video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}.cs:hover .ps video{opacity:1}
.ps.nf:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,var(--a1) 0 24%,transparent 25%),radial-gradient(#0009 1.2px,transparent 1.6px) 0 0/6px 6px}
.ps.nf span{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(1.3rem,4vw,2.4rem) var(--f1);text-shadow:3px 3px 0 #000;color:#f5f5f5;text-align:center;padding:10px}
.rw{display:grid;grid-template-columns:70px 1fr auto;gap:14px;padding:18px 4px;border-top:1px solid var(--line);align-items:baseline;text-decoration:none;transition:padding .25s,background .25s}
.rw:last-child{border-bottom:1px solid var(--line)}.rw:hover{padding-left:20px;background:var(--card)}.rw:hover b{color:var(--a1)}.rw em{font-style:normal;color:var(--a3)}.rw small{color:var(--mut)}
@media(max-width:600px){.rw{grid-template-columns:50px 1fr}.rw small{grid-column:2}}
.sv{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:1px solid var(--line)}.sv div{padding:28px;border-right:1px solid var(--line)}.sv h3{text-transform:uppercase;margin:8px 0}.sv i{color:var(--a1);font-style:normal;font-size:12px;letter-spacing:.2em}
.aw{list-style:none;padding:0;border-top:1px solid var(--line)}.aw li{display:grid;grid-template-columns:60px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.aw em{font-style:normal;color:var(--a3)}.aw small{color:var(--mut)}
.fm{border:1px solid var(--fg);padding:24px;max-width:680px;background:var(--card)}
.fm label{display:block;font-size:12px;color:var(--a3);letter-spacing:.2em;text-transform:uppercase}
.fm input:not([type=checkbox]):not([type=range]),.fm select,.fm textarea,.sq{width:100%;background:transparent;border:0;border-bottom:1px solid var(--fg);color:var(--fg);font:inherit;padding:10px 0;margin-bottom:14px;outline:0}
.fm input:focus,.fm textarea:focus{border-color:var(--a1)}.fm option{color:#000}.fm input[type=range]{width:100%;accent-color:var(--a1);margin:8px 0 14px}
.fm .hp{position:absolute;left:-9999px}.out{font:800 1.5rem var(--f1);color:var(--a2)}.msg{margin-top:10px;color:var(--a3);min-height:1.4em}
.flt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.flt button{background:none;border:1px solid var(--line);color:var(--fg);font:inherit;font-size:12px;letter-spacing:.1em;padding:6px 12px;cursor:pointer;text-transform:uppercase}.flt button.on{background:var(--a1);border-color:var(--a1);color:#fff}
.gi.hide{display:none}
.sp{padding-top:110px;padding-bottom:60px}.vid{position:relative;aspect-ratio:16/9;border:1px solid var(--line);margin:20px 0}.vid iframe{position:absolute;inset:0;width:100%;height:100%}
.cols{display:grid;gap:30px;grid-template-columns:2fr 1fr}@media(max-width:800px){.cols{grid-template-columns:1fr}}
.meta{border:1px solid var(--line);padding:18px;background:var(--card)}.meta dt{font-size:11px;letter-spacing:.2em;color:var(--a3);text-transform:uppercase;margin-top:10px}
.modal{position:fixed;inset:0;z-index:80;background:#000b;display:none;place-items:center;padding:20px}.modal.on{display:grid}.modal .fm{width:100%;max-width:460px;position:relative}.modal .x{position:absolute;right:10px;top:6px;background:none;border:0;color:var(--fg);font-size:22px;cursor:pointer}
#op-b{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);z-index:75;background:var(--a1);color:#fff;border:2px solid var(--fg);padding:10px 14px;font:700 12px var(--f2);letter-spacing:.12em;cursor:pointer;box-shadow:4px 4px 0 var(--a2)}
#op{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);z-index:76;width:min(360px,calc(100vw - 32px));max-height:70vh;display:none;flex-direction:column;background:var(--card);border:1px solid var(--fg);box-shadow:6px 6px 0 var(--a1)}#op.on{display:flex}
#op header{padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.2em;color:var(--a2);display:flex;justify-content:space-between}#op header button{background:none;border:0;color:var(--fg);cursor:pointer}
#op .log{padding:14px;overflow:auto;flex:1;font-size:13px}.log p{margin:0 0 10px}.log p.u{color:var(--a3);text-align:right}.log .ch{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.log .ch button{background:none;border:1px solid var(--a2);color:var(--fg);font:inherit;font-size:12px;padding:5px 9px;cursor:pointer}.log .ch button:hover{background:var(--a2);color:#000}
#op form{display:flex;border-top:1px solid var(--line)}#op input{flex:1;background:transparent;border:0;color:var(--fg);font:inherit;padding:10px 12px;outline:0}#op form button{background:var(--a1);color:#fff;border:0;padding:0 14px;cursor:pointer}
footer.ft{border-top:1px solid var(--line);padding:36px 20px 70px;color:var(--mut);font-size:13px;text-align:center}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
.adm-note{background:var(--a3);color:#000;padding:8px;text-align:center;font-size:12px}
@media (prefers-reduced-motion:reduce){*,:before,:after{animation:none!important;transition:none!important}}

/* hero: 3D logo (WebGL canvas) over the parallax floor. The inline SVG logo is the instant fallback until WebGL is ready. */
.ly.tx{place-items:end center;padding:0 0 2%;text-align:center}
.ly.tx .sub{color:var(--fg)}
.ly.tx .btn.r{background:var(--a3);border-color:var(--a3);color:#0a0a0a}
.ly.tx .btn.r:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
@media(max-width:700px){.ly.tx>div{max-width:80vw}.ly.tx .kick{letter-spacing:.12em;font-size:11px}.ly.tx{padding-bottom:12%}}
.hero>.scene{grid-area:1/1}
.lo{position:absolute;inset:0;pointer-events:none}
.lw{position:absolute;inset:0}
.lw canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s}
.lw.gl canvas{opacity:1}
.fbk{display:none}
.lw.nogl .fbk{display:grid;place-items:center;position:absolute;inset:0}
.fbk svg{width:calc(min(76.8vw,94svh,752px)/.823);max-width:none;height:auto;transform:translate(-6.33%,calc(-.33% - 14svh))}
@media(orientation:portrait){.fbk svg{transform:translate(-6.33%,calc(-.33% - 20svh))}}
/* headline, scroll-away savings and shake safety */
.ly.tx h1{font-size:clamp(2rem,8.4vw,7rem)}
html{overflow-x:hidden}
main>section{content-visibility:auto;contain-intrinsic-size:auto 700px}
.hero-off .floor,.mq.off span{animation-play-state:paused}