<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Under Maintenance – lasaventurasdeperle.com</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet"/>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#050010;font-family:'Share Tech Mono',monospace;}
#cv{position:fixed;inset:0;z-index:0;}
.ui{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;}
.domain{font-size:12px;letter-spacing:4px;color:rgba(180,80,255,.5);margin-bottom:14px;text-transform:uppercase;}
.title{font-family:'Orbitron',monospace;font-size:clamp(28px,6vw,64px);font-weight:900;color:#fff;letter-spacing:5px;text-shadow:0 0 30px rgba(160,60,255,.4);}
.sub{font-size:11px;letter-spacing:6px;color:rgba(180,80,255,.4);margin-top:10px;text-transform:uppercase;}
.line{width:300px;height:1px;background:linear-gradient(90deg,transparent,#b050ff,transparent);margin:20px auto;}
.clock{font-family:'Orbitron',monospace;font-size:clamp(32px,6vw,56px);font-weight:700;color:#b050ff;letter-spacing:6px;text-shadow:0 0 20px rgba(160,60,255,.6);}
.date{font-size:11px;letter-spacing:3px;color:rgba(255,255,255,.2);margin-top:8px;}
.prog{width:280px;height:2px;background:rgba(160,60,255,.08);margin:20px auto;}
.pfill{height:100%;background:linear-gradient(90deg,#200040,#b050ff,#e0aaff);animation:pf 3s ease-in-out infinite;}
@keyframes pf{0%,100%{width:15%;}50%{width:85%;}}
.msg{font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.2);margin-top:20px;}
.foot{position:fixed;bottom:20px;font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.1);text-transform:uppercase;}
.scan{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px);}
</style>
</head>
<body>
<canvas id="cv"></canvas>
<div class="scan"></div>
<div class="ui">
  <div class="domain">lasaventurasdeperle.com</div>
  <div class="title">UNDER MAINTENANCE</div>
  <div class="sub">We'll be back soon</div>
  <div class="line"></div>
  <div class="clock" id="ck">00:00:00</div>
  <div class="date" id="dt">--- -- ----</div>
  <div class="prog"><div class="pfill"></div></div>
  <div class="msg" id="st">SYSTEM UPDATING...</div>
  <div class="foot">© 2026 lasaventurasdeperle.com · All Rights Reserved</div>
</div>
<script>
const cv=document.getElementById('cv'),c=cv.getContext('2d');
let W,H,t=0;
function rs(){W=cv.width=window.innerWidth;H=cv.height=window.innerHeight;}
rs();window.addEventListener('resize',rs);
const D=['SUN','MON','TUE','WED','THU','FRI','SAT'],M=['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
function clk(){const n=new Date();document.getElementById('ck').textContent=String(n.getHours()).padStart(2,'0')+':'+String(n.getMinutes()).padStart(2,'0')+':'+String(n.getSeconds()).padStart(2,'0');document.getElementById('dt').textContent=D[n.getDay()]+' '+String(n.getDate()).padStart(2,'0')+' '+M[n.getMonth()]+' '+n.getFullYear();}
setInterval(clk,1000);clk();
const ST=['SYSTEM UPDATING...','LOADING ASSETS...','SYNCING NODES...','ALMOST READY...'];
let si=0;setInterval(()=>{si=(si+1)%ST.length;document.getElementById('st').textContent=ST[si];},2500);
// galaxy particles
const pts=Array.from({length:220},()=>{
  const a=Math.random()*Math.PI*2,r=20+Math.random()*Math.min(window.innerWidth,window.innerHeight)*.45;
  return{ox:Math.cos(a)*r,oy:Math.sin(a)*r*.5,phase:Math.random()*Math.PI*2,sp:.005+Math.random()*.01,sz:.5+Math.random()*1.8,col:Math.random()<.6?'180,80,255':'100,120,255'};
});
// floating cubes
const cubes=Array.from({length:10},()=>({x:(Math.random()-.5)*W,y:(Math.random()-.5)*H,z:100+Math.random()*300,rx:Math.random()*Math.PI*2,ry:Math.random()*Math.PI*2,drx:.004+Math.random()*.006,dry:.006+Math.random()*.008,s:14+Math.random()*24}));
function rotY(p,a){const c2=Math.cos(a),s2=Math.sin(a);return[p[0]*c2+p[2]*s2,p[1],-p[0]*s2+p[2]*c2];}
function rotX(p,a){const c2=Math.cos(a),s2=Math.sin(a);return[p[0],p[1]*c2-p[2]*s2,p[1]*s2+p[2]*c2];}
function drawCube(cx2,cy2,cu){
  cu.rx+=cu.drx;cu.ry+=cu.dry;
  const h=cu.s*.6;
  const v=[[-h,-h,-h],[h,-h,-h],[h,h,-h],[-h,h,-h],[-h,-h,h],[h,-h,h],[h,h,h],[-h,h,h]];
  const e=[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]];
  const p2=v.map(p=>{let q=rotX(p,cu.rx);q=rotY(q,cu.ry);const f=600/(600+q[2]+cu.z);return{x:cx2+q[0]*f,y:cy2+q[1]*f,f};});
  e.forEach(([a,b])=>{
    c.beginPath();c.moveTo(p2[a].x,p2[a].y);c.lineTo(p2[b].x,p2[b].y);
    c.strokeStyle=`rgba(160,80,255,${.06+(p2[a].f+p2[b].f)*.12})`;c.lineWidth=.7;c.stroke();
  });
}
function draw(){
  t+=.012;
  c.fillStyle='rgba(5,0,16,.14)';c.fillRect(0,0,W,H);
  pts.forEach(p=>{
    p.phase+=p.sp;
    let q=[p.ox+Math.sin(p.phase)*15,p.oy+Math.cos(p.phase*.7)*10,0];
    q=rotY(q,t*.04);q=rotX(q,t*.025);
    const f=600/(600+q[2]+200);
    const sx=W/2+q[0]*f,sy=H/2+q[1]*f;
    if(sx<0||sx>W||sy<0||sy>H) return;
    const al=Math.min(.6,f*.6);
    c.beginPath();c.arc(sx,sy,p.sz*f,0,Math.PI*2);
    c.fillStyle=`rgba(${p.col},${al})`;
    if(al>.4){c.shadowColor=`rgba(${p.col},.5)`;c.shadowBlur=5;}
    c.fill();c.shadowBlur=0;
  });
  cubes.forEach(cu=>drawCube(W/2+cu.x*.003*W,H/2+cu.y*.003*H,cu));
  requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>