/* ==========================================================================
   Landing page — محمد أنور عمران
   A minimal welcome screen with two paths: the CV site (/home) and the
   admin dashboard (/admin). The admin entry is intentionally discreet.
   Reuses the design tokens from style.css.
   ========================================================================== */

* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Tajawal", "Cairo", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  transition: background .4s var(--ease), color .4s var(--ease);
}
html[lang="en"] body { font-family: "Outfit", "Cairo", system-ui, sans-serif; }

#particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* soft brand glow behind the card */
body::before {
  content: "";
  position: fixed; inset: -20%;
  background:
    radial-gradient(46% 46% at 50% 34%, rgba(56, 189, 248, 0.20), transparent 70%),
    radial-gradient(38% 38% at 78% 82%, rgba(47, 124, 246, 0.16), transparent 70%);
  z-index: 0; pointer-events: none;
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(46% 46% at 50% 34%, rgba(47, 124, 246, 0.16), transparent 70%),
    radial-gradient(38% 38% at 78% 82%, rgba(34, 211, 238, 0.14), transparent 70%);
}

/* ---------- top controls ---------- */
.land-top {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 2.2rem);
  z-index: 3;
}
.land-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 800; letter-spacing: .2px; color: var(--text);
}
.land-brand .mono {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 13px;
  background: var(--brand-grad); color: #fff; font-size: 1.25rem;
  box-shadow: var(--glow);
}
.land-brand small { display: block; font-weight: 600; color: var(--text-dim); font-size: .72rem; }

.land-actions { display: inline-flex; gap: .55rem; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: .95rem; font-weight: 700;
  backdrop-filter: blur(10px);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.icon-btn:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--surface-2); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- card ---------- */
.land-wrap {
  position: relative; z-index: 2;
  min-height: 100%; display: grid; place-items: center;
  padding: clamp(5rem, 12vh, 8rem) clamp(1.1rem, 4vw, 2rem);
}
.land-card {
  width: min(560px, 100%);
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(2rem, 6vw, 3.2rem) clamp(1.4rem, 5vw, 2.6rem);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  animation: rise .7s var(--ease) both;
}
html[data-theme="light"] .land-card {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
}
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }

.land-photo {
  width: 118px; height: 118px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 1.1rem;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    var(--brand-grad) border-box;
  box-shadow: 0 16px 40px rgba(2, 10, 30, .45);
}
.land-greet { color: var(--brand-2); font-weight: 700; letter-spacing: .5px; margin: 0 0 .2rem; }
.land-name {
  font-size: clamp(1.5rem, 5.4vw, 2.3rem); font-weight: 800; margin: 0 0 .3rem;
  line-height: 1.25;
}
.land-name span {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.land-role { color: var(--text-soft); margin: 0 auto 1.8rem; max-width: 44ch; line-height: 1.8; font-size: .98rem; }

.land-cta { display: grid; gap: .8rem; }

.btn-land {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.4rem; border-radius: 15px;
  font-weight: 700; font-size: 1.02rem; border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn-land svg { width: 21px; height: 21px; }
.btn-land--primary {
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 14px 34px rgba(47, 124, 246, .38);
}
.btn-land--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(47, 124, 246, .5); }

.btn-land--admin {
  background: transparent; color: var(--text-dim);
  border-color: var(--border); font-weight: 600; font-size: .92rem;
  opacity: .55;
}
.btn-land--admin:hover { opacity: 1; color: var(--text); border-color: var(--border-strong); background: var(--surface); }

.land-foot {
  position: fixed; inset-block-end: 0; inset-inline: 0;
  text-align: center; padding: 1.1rem; color: var(--text-dim);
  font-size: .8rem; z-index: 3;
}

/* tiny “unlock” affordance: a very low-opacity dot in the corner */
.land-lock {
  position: fixed; inset-block-end: 14px; inset-inline-start: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-dim); opacity: .18; background: transparent; border: 0;
  transition: opacity .3s var(--ease);
  z-index: 4;
}
.land-lock:hover { opacity: .85; }
.land-lock svg { width: 18px; height: 18px; }

@media (max-width: 420px) {
  .land-brand small { display: none; }
}