/* =====================================================================
   Araf Cloud — index7492.css
   Splash screen + Google sign-in. Dark grey, iOS liquid-glass aesthetic.
   ===================================================================== */

:root{
  --bg-0:#0a0b0d;
  --bg-1:#131418;
  --bg-2:#1b1d22;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);
  --glass:rgba(255,255,255,.055);
  --glass-hi:rgba(255,255,255,.12);
  --ink:#eef0f3;
  --ink-dim:#9aa0aa;
  --ink-faint:#5c616b;
  --blue-1:#6fc3ff;
  --blue-2:#2f6bff;
  --grad-blue:linear-gradient(135deg,var(--blue-1),var(--blue-2));
  --danger:#ff6767;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Syne',system-ui,sans-serif;
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(47,107,255,.16), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(111,195,255,.10), transparent 55%),
    var(--bg-0);
  color:var(--ink);
  min-height:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ---------- Splash ---------- */
.splash{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-0);
  z-index:100;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none;}
.splash-mark{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  animation:splashIn 1s var(--ease) both;
}
.splash-mark img{
  width:96px;height:96px;
  filter:drop-shadow(0 10px 40px rgba(47,107,255,.35));
  animation:breathe 2.4s ease-in-out infinite;
}
.splash-word{font-size:15px;letter-spacing:.4px;color:var(--ink-dim);}
.splash-word b{color:var(--ink);font-weight:700;}
@keyframes splashIn{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}

/* ---------- Page shell ---------- */
.shell{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:28px;
  opacity:0;
  transform:translateY(10px);
}
.shell.reveal{
  animation:riseIn .7s var(--ease) forwards;
}
@keyframes riseIn{to{opacity:1;transform:none;}}

/* orbs */
.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0;pointer-events:none;}
.orb-a{width:420px;height:420px;background:var(--blue-2);top:-120px;left:-120px;}
.orb-b{width:360px;height:360px;background:var(--blue-1);bottom:-140px;right:-100px;opacity:.28;}

/* ---------- Glass card ---------- */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -20px rgba(0,0,0,.6);
}

.auth-card{
  width:100%;max-width:400px;
  padding:44px 36px 36px;
  text-align:center;
  z-index:1;
}
.auth-logo{width:64px;height:64px;margin:0 auto 18px;display:block;}
.auth-title{font-size:26px;font-weight:800;letter-spacing:-.2px;margin:0 0 6px;}
.auth-title span{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent;}
.auth-tag{font-size:13.5px;color:var(--ink-dim);margin:0 0 34px;font-weight:500;}

.btn-google{
  --lg-mx:50%;--lg-my:0%;
  position:relative;overflow:hidden;
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 18px;
  border-radius:999px;
  border:1px solid var(--glass-hi);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  font-size:15px;font-weight:700;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn-google::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120px 90px at var(--lg-mx) var(--lg-my), rgba(255,255,255,.16), transparent 70%);
  opacity:0;transition:opacity .3s var(--ease);
}
.btn-google:hover::before{opacity:1;}
.btn-google:hover{background:rgba(255,255,255,.09);transform:translateY(-1px);}
.btn-google:active{transform:translateY(0);}
.btn-google svg{flex:none;}
.btn-google.busy{pointer-events:none;opacity:.6;}

.auth-foot{margin-top:28px;font-size:12px;color:var(--ink-faint);line-height:1.6;}
.auth-error{
  margin-top:16px;font-size:12.5px;color:var(--danger);
  min-height:16px;
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;z-index:1;
  margin-top:26px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--ink-faint);font-size:12px;text-align:center;
}
.site-footer .soc{display:flex;gap:14px;}
.site-footer .soc a{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink-dim);transition:color .2s, border-color .2s, transform .2s;
}
.site-footer .soc a:hover{color:var(--ink);border-color:var(--glass-hi);transform:translateY(-2px);}
.site-footer .copy strong{color:var(--ink-dim);font-weight:700;}

@media (max-width:480px){
  .auth-card{padding:38px 24px 28px;}
}