/* Shared "under construction" stage for berkahpos.com and kioswarga.id.
   Per-brand values come in as custom properties set on :root by each page. */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
:root{
  --bg:#05070a; --fg:#eef2f6; --muted:#8a97a6; --line:rgba(255,255,255,.07);
}

/* ---------- backdrop layers ---------- */
.stage{position:fixed;inset:0;overflow:hidden}

.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:0;
  animation:auroraIn 2.6s cubic-bezier(.16,1,.3,1) .15s forwards, drift 26s ease-in-out infinite alternate}
.aurora.a{width:60vw;height:60vw;left:-14vw;top:-22vw;background:var(--glow1)}
.aurora.b{width:52vw;height:52vw;right:-16vw;bottom:-24vw;background:var(--glow2);animation-delay:.35s,0s;animation-duration:2.6s,32s}
.aurora.c{width:38vw;height:38vw;left:42vw;top:34vw;background:var(--glow3);animation-delay:.5s,0s;animation-duration:2.6s,38s}
@keyframes auroraIn{to{opacity:.5}}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3vw,-2vw,0) scale(1.12)}
  100%{transform:translate3d(-2vw,3vw,0) scale(.95)}
}

/* blueprint grid, slowly panning — reads as "plans being drawn" */
.grid{position:absolute;inset:-50%;opacity:0;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(600px) rotateX(58deg);
  animation:gridIn 2.2s ease .5s forwards, pan 22s linear infinite;
}
@keyframes gridIn{to{opacity:1}}
@keyframes pan{to{background-position:0 -64px,64px 0}}

.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.88) 100%)}

/* particles rise like dust in a light beam */
.dust{position:absolute;inset:0;pointer-events:none}
.dust i{position:absolute;bottom:-10px;width:2px;height:2px;border-radius:50%;
  background:var(--accent);opacity:0;animation:rise linear infinite}
@keyframes rise{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:.7}
  85%{opacity:.5}
  100%{opacity:0;transform:translateY(-102vh) scale(1.3)}
}

/* ---------- cinematic letterbox ---------- */
.bar{position:fixed;left:0;right:0;height:0;background:#000;z-index:20;
  animation:bar 1.5s cubic-bezier(.16,1,.3,1) forwards}
.bar.top{top:0}
.bar.bottom{bottom:0}
@keyframes bar{from{height:14vh}to{height:0}}

/* ---------- content ---------- */
.wrap{position:relative;z-index:10;height:100%;display:grid;place-items:center;padding:6vh 24px}
.card{width:min(760px,100%);text-align:center}

.mark{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:34px;
  opacity:0;animation:up .9s cubic-bezier(.16,1,.3,1) .8s forwards}
.mark svg{width:46px;height:46px;filter:drop-shadow(0 0 16px var(--accentGlow))}
.mark .name{font-size:24px;font-weight:800;letter-spacing:-.5px}
.mark .name span{color:var(--accent)}

h1{margin:0;font-weight:800;letter-spacing:-2.5px;line-height:1.04;
  font-size:clamp(38px,7.2vw,76px)}
/* each word masked, rises into place */
h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
h1 .w>span{display:inline-block;transform:translateY(110%);
  animation:reveal 1.1s cubic-bezier(.16,1,.3,1) forwards}
h1 .accent{color:var(--accent)}
@keyframes reveal{to{transform:translateY(0)}}

.sub{margin:24px auto 0;max-width:530px;font-size:clamp(15px,1.9vw,18px);
  line-height:1.65;color:var(--muted);opacity:0;
  animation:up .9s cubic-bezier(.16,1,.3,1) 1.5s forwards}

/* progress: indeterminate, reads as "work in motion" not a fake ETA */
.progress{margin:40px auto 0;width:min(420px,86%);opacity:0;
  animation:up .9s cubic-bezier(.16,1,.3,1) 1.75s forwards}
.track{height:3px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;position:relative}
.track::after{content:"";position:absolute;inset:0;width:38%;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:sweep 2.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

.status{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accentGlow);animation:pulse 2s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--accentGlow)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
#msg{transition:opacity .45s ease}

.foot{margin-top:52px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:up .9s cubic-bezier(.16,1,.3,1) 2s forwards}
.chip{display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  padding:9px 16px;border-radius:99px;font-size:13px;color:var(--muted);
  text-decoration:none;transition:border-color .25s,color .25s,background .25s}
a.chip:hover{border-color:var(--accent);color:var(--fg);background:var(--accentDim)}

@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  h1 .w>span{transform:none}
  .mark,.sub,.progress,.foot{opacity:1}
  .aurora{opacity:.5}.grid{opacity:1}
}

/* ---------- neutral brand glyph ---------- */
/* Abstract on purpose: the old product-specific icons implied a product that
   is no longer the plan. The inner square turns slowly so the mark still
   belongs on a page where everything else is in motion. */
.mark .glyph{width:46px;height:46px;filter:drop-shadow(0 0 16px var(--accentGlow))}
.mark .glyph .spin{transform-origin:24px 24px;animation:turn 14s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mark .glyph .spin{animation:none}}