/* 888devouv.com v3: gaya bersama (beranda, galeri, 404). Spesifikasi: design doc v3 + "Spesifikasi visual v3 yang disetujui". */
@font-face{
  font-family:"Nohemi";
  src:url("/assets/nohemi-vf.499da68f55.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@property --angle{ syntax:"<angle>"; inherits:false; initial-value:0deg; }

:root{
  --red:#d7192f; --red-deep:#6e0a18; --ink:#030203;
  --h:min(78vh, 860px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink); color:#f6f4f2; overflow:hidden;
  font-family:"Nohemi",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
#bg{position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; display:block; z-index:0}

/* ---------- mode ringan (tanpa WebGL / HP lemah / hemat data / reduced-motion) ---------- */
.wall-lite{display:none}
html.lite #bg{display:none}
html.lite body{
  background:
    radial-gradient(ellipse 70% 55% at 30% 20%, rgba(90,6,14,.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 85%, rgba(70,4,12,.12), transparent 70%),
    var(--ink);
}
html.lite .wall-lite{
  display:flex; flex-direction:column; justify-content:space-between;
  position:fixed; inset:0; z-index:0; padding:.7vh 0; overflow:hidden;
  opacity:0; transition:opacity .8s ease;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.25), #000 22%, #000 78%, rgba(0,0,0,.25));
  mask-image:linear-gradient(90deg, rgba(0,0,0,.25), #000 22%, #000 78%, rgba(0,0,0,.25));
}
html.lite.photos-in .wall-lite{opacity:.9}
html.lite .wall-lite::after{       /* pengganti DOF: gelap & kemerahan di sekitar kartu, vignette di tepi */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 34% 52% at 50% 50%, rgba(18,2,5,.82), rgba(18,2,5,.45) 55%, transparent 100%),
    radial-gradient(ellipse 85% 85% at 50% 50%, transparent 55%, rgba(3,2,3,.55) 100%);
}
.wl-row{display:flex; gap:1.4vh; width:max-content; will-change:transform}
.wl-tile{
  flex:0 0 auto; height:23.6vh; aspect-ratio:4 / 5; border-radius:1.4vh;
  background-repeat:no-repeat; background-size:800% 400%; background-color:#141415;
}
.wl-row.go-left{animation:wlLeft var(--dur,120s) linear infinite}
.wl-row.go-right{animation:wlRight var(--dur,120s) linear infinite}
@keyframes wlLeft{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
@keyframes wlRight{from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)}}

/* ---------- kartu ---------- */
.stage{
  position:relative; z-index:2; height:100vh; height:100dvh;
  display:grid; place-items:center; perspective:1400px;
}
.frame{
  --rx:0deg; --ry:0deg;
  position:relative; isolation:isolate; container-type:size;
  width:min(calc(var(--h) * 0.609), 92vw); aspect-ratio:480 / 788;
  border-radius:40px; padding:8px;
  /* semi-glassmorphism: SATU lapisan backdrop-filter (kaca bersarang di Chromium jadi hitam) */
  background:
    linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 40%,rgba(255,255,255,.08)),
    rgba(12,9,12,.26);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:opacity .5s ease, scale .6s cubic-bezier(.2,.7,.2,1);
}
html.lite .frame{background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 40%,rgba(255,255,255,.08)), rgba(12,9,12,.42)}
/* sebelum intro: tersembunyi. Pengaman: tetap muncul setelah 3 detik walau JS gagal */
html.js:not(.card-in) .frame{opacity:0; scale:.94; animation:failsafe .4s 3s forwards}
html.js:not(.card-in) .logo, html.js:not(.card-in) .notice, html.js:not(.card-in) .btn, html.js:not(.card-in) .soc{opacity:0; animation:failsafe .4s 3.1s forwards}
@keyframes failsafe{to{opacity:1; scale:1}}
html.seen .frame{transition-duration:.2s,.2s}

.frame::before{       /* stroke conic merah-putih berputar 5 detik */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; z-index:2; pointer-events:none;
  background:conic-gradient(from var(--angle),
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 200deg,
    rgba(255,60,80,.85) 290deg, #ffffff 338deg, rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinStroke 5s linear infinite;
}
@keyframes spinStroke{ to{ --angle:360deg; } }
.frame::after{        /* aura merah SANGAT tipis, menempel di kartu, bernapas 5 detik */
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  box-shadow:0 0 10px 0 rgba(215,25,47,.30), 0 0 26px 0 rgba(215,25,47,.10);
  animation:auraBreath 5s ease-in-out infinite;
}
@keyframes auraBreath{ 50%{ opacity:.6; } }

.glass{
  position:relative; overflow:hidden; width:100%; height:100%; border-radius:32px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7cqh;
  padding:6cqh 4cqw;
  background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,0) 35%), rgba(8,6,8,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -40px 60px -40px rgba(0,0,0,.5);
}
.glass > *{position:relative; z-index:1}
.glass > .bokeh888{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; border-radius:inherit}
.b888{position:absolute; left:0; top:0; display:block; will-change:transform, opacity}
.logo{width:40cqw; height:22cqh}
.logo img{width:100%; height:100%; object-fit:contain; display:block}

/* halaman galeri / 404 */
.glass.calm{gap:6cqh}
.notice{text-align:center; display:flex; flex-direction:column; gap:1.6cqh; padding:0 4cqw}
.notice .title{font-weight:800; font-size:clamp(18px, 6.4cqw, 30px); line-height:1.15; letter-spacing:.01em}
.notice .sub{font-weight:500; font-size:clamp(13px, 4cqw, 18px); color:rgba(246,244,242,.7)}
.calm .menu{width:64cqw}
.calm .btn{justify-content:center}
.calm .btn .label{flex:0 1 auto}

/* ---------- tombol merah 3D ---------- */
.menu{width:92cqw; display:flex; flex-direction:column; gap:2.8cqh}
.btn{
  --lift:0px;
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:2.4cqw;
  height:9cqh; min-height:48px; padding:0 2.6cqw 0 4.6cqw; border-radius:2.4cqh;
  color:#fff; text-decoration:none; font-weight:700; font-size:clamp(11px, 3.8cqw, 17px); line-height:1.2;
  background:linear-gradient(180deg,#f0293f 0%,var(--red) 60%,#bd1429 100%);
  box-shadow:0 5px 0 var(--red-deep), 0 14px 22px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.35);
  transform:translateY(var(--lift));
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent; outline:none;
}
.calm .btn{padding:0 4.6cqw 0 2.6cqw}
.btn .label{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.btn .arrow{
  position:relative; overflow:hidden; flex:0 0 auto;
  width:4.4cqh; height:4.4cqh; min-width:28px; min-height:28px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.16);
  transition:background-color .28s ease, color .28s ease;
}
.btn .arrow svg{width:46%; height:46%}
.btn:hover{--lift:-1px; box-shadow:0 6px 0 var(--red-deep), 0 18px 26px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.35)}
.btn:hover .arrow, .btn:focus-visible .arrow{background:#fff; color:var(--red)}
.btn:hover .arrow svg, .btn:focus-visible .arrow svg{animation:arrowLoop .5s cubic-bezier(.5,0,.2,1)}
.btn:hover .arrow.back svg, .btn:focus-visible .arrow.back svg{animation-name:arrowLoopBack}
@keyframes arrowLoop{0%{transform:translateX(0)} 45%{transform:translateX(160%)} 46%{transform:translateX(-160%)} 100%{transform:translateX(0)}}
@keyframes arrowLoopBack{0%{transform:translateX(0)} 45%{transform:translateX(-160%)} 46%{transform:translateX(160%)} 100%{transform:translateX(0)}}
.btn:active{--lift:4px; box-shadow:0 1px 0 var(--red-deep), 0 6px 10px -6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25); transition-duration:.08s}
.btn:focus-visible{box-shadow:0 5px 0 var(--red-deep), 0 0 0 2px rgba(9,7,9,.9), 0 0 0 4px #fff}

/* ---------- ikon sosial ---------- */
.socials{display:flex; justify-content:center; gap:2.4cqw}
.soc{
  position:relative; display:grid; place-items:center; border-radius:50%; color:#fff;
  width:8cqh; height:8cqh; min-width:44px; min-height:44px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1); -webkit-tap-highlight-color:transparent; outline:none;
}
.soc::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--red);
  transform:scale(.3); opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.soc svg{position:relative; width:42%; height:42%; opacity:.7; transition:opacity .25s ease}
.soc:hover::before, .soc:focus-visible::before{transform:scale(1); opacity:1}
.soc:hover svg, .soc:focus-visible svg{opacity:1}
.soc:active{transform:scale(.9)}
.soc:focus-visible{box-shadow:0 0 0 2px #fff}

/* ---------- intro: isi muncul berurutan (logo, tombol, ikon) ---------- */
html.card-in:not(.seen) .logo, html.card-in:not(.seen) .notice, html.card-in:not(.seen) .btn, html.card-in:not(.seen) .soc{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
html.card-in .logo{animation-delay:.1s}
html.card-in .notice{animation-delay:.16s}
html.card-in .btn:nth-child(1){animation-delay:.2s}
html.card-in .btn:nth-child(2){animation-delay:.27s}
html.card-in .btn:nth-child(3){animation-delay:.34s}
html.card-in .soc:nth-child(1){animation-delay:.42s}
html.card-in .soc:nth-child(2){animation-delay:.46s}
html.card-in .soc:nth-child(3){animation-delay:.5s}
html.card-in .soc:nth-child(4){animation-delay:.54s}
@keyframes rise{from{opacity:0; translate:0 10px} to{opacity:1; translate:0 0}}

@media (prefers-reduced-motion:reduce){
  .frame::before, .frame::after, .wl-row{animation:none !important}
  .btn:hover .arrow svg, .btn:focus-visible .arrow svg{animation:none}
  html.card-in .logo, html.card-in .notice, html.card-in .btn, html.card-in .soc{animation:none; opacity:1}
  .frame{transition:none}
}

@media (max-width:760px){
  :root{ --h:64svh; }
  .frame{width:min(calc(var(--h) * 0.609), 82vw); border-radius:32px; padding:7px}
  .glass{border-radius:25px}
}