/* ============================================================
   PORTAL.CSS — Lobby / Entry Point Utama
   Portal Ekonomi Map — Desa Polobogo
   ============================================================ */

/* ── PAGE BODY ────────────────────────────────────────────── */
.portal-body {
  background-color: #1A1008;
  min-height: 100svh;
  overflow-x: hidden;
}

/* ── GRAIN OVERLAY (seluruh halaman) ─────────────────────── */
.portal-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ── HEADER PORTAL ────────────────────────────────────────── */
.portal-header {
  position: relative;
  z-index: 10;
  padding: var(--sp-8) var(--px-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (min-width: 768px)  { .portal-header { padding: var(--sp-8) var(--px-tablet); } }
@media (min-width: 1280px) { .portal-header { padding: var(--sp-10) var(--px-desktop); } }

.portal-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.portal-header__emblem {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--sienna) 0%, var(--amber) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(140,74,47,0.35);
}

.portal-header__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-on-dark);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.portal-header__sub {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: rgba(240,230,207,0.40);
  text-transform: uppercase;
}

.portal-header__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: rgba(240,230,207,0.30);
  text-transform: uppercase;
  display: none;
}
@media (min-width: 640px) { .portal-header__meta { display: block; } }

/* ── HERO PORTAL ──────────────────────────────────────────── */
.portal-hero {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: var(--sp-12) var(--px-mobile) var(--sp-16);
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (min-width: 768px)  { .portal-hero { padding: var(--sp-16) var(--px-tablet); } }

.portal-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  opacity: 0;
  animation: fadeUp 700ms var(--ease-out) 200ms forwards;
}
.portal-hero__eyebrow::before,
.portal-hero__eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background-color: var(--amber);
  opacity: 0.5;
}

.portal-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 8vw, var(--text-7xl));
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-5);
  opacity: 0;
  animation: fadeUp 800ms var(--ease-out) 380ms forwards;
}

.portal-hero__tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(var(--text-base), 2.5vw, var(--text-2xl));
  color: rgba(240,230,207,0.50);
  max-width: 500px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
  opacity: 0;
  animation: fadeUp 700ms var(--ease-out) 550ms forwards;
}

/* ── PORTAL CARDS GRID ────────────────────────────────────── */
.portal-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: rgba(240,230,207,0.06);
  border-top: 1px solid rgba(240,230,207,0.06);
}

@media (min-width: 640px) {
  .portal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .portal-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── PORTAL CARD ──────────────────────────────────────────── */
.pcard {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  background-color: #231810;
  transition: flex 400ms var(--ease-out);
}

@media (min-width: 640px) { .pcard { aspect-ratio: 2 / 3; } }
@media (min-width: 1024px) {
  .pcard { aspect-ratio: unset; height: 560px; }
  .pcard:hover { flex: 1.25; }
}

/* Background image */
.pcard__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pcard__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.65) brightness(0.55) contrast(1.1);
  transition: transform 600ms var(--ease-out), filter 400ms var(--ease-out);
}
.pcard:hover .pcard__bg img {
  transform: scale(1.06);
  filter: saturate(0.80) brightness(0.60) contrast(1.05);
}

/* Gradient overlay */
.pcard__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(20,10,4,0.96) 0%,
    rgba(20,10,4,0.55) 50%,
    rgba(20,10,4,0.15) 100%
  );
  transition: opacity 400ms var(--ease-out);
}
.pcard:hover .pcard__overlay { opacity: 0.85; }

/* Color accent line at top */
.pcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-out);
}
.pcard:hover::before { transform: scaleX(1); }

.pcard--map::before    { background: linear-gradient(to right, var(--sage), var(--sage-light)); }
.pcard--desa::before   { background: linear-gradient(to right, var(--amber), var(--amber-light)); }
.pcard--dir::before    { background: linear-gradient(to right, var(--sienna), var(--clay)); }
.pcard--admin::before  { background: linear-gradient(to right, #5a6473, #8A9BB0); }

/* Content */
.pcard__content {
  position: relative;
  z-index: 2;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 1024px) { .pcard__content { padding: var(--sp-8); } }

/* Number / index */
.pcard__index {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  color: rgba(240,230,207,0.25);
  margin-bottom: var(--sp-1);
}

/* Icon area */
.pcard__icon {
  font-size: var(--text-3xl);
  line-height: 1;
  margin-bottom: var(--sp-2);
  transition: transform 300ms var(--ease-spring);
}
.pcard:hover .pcard__icon { transform: scale(1.12); }

/* Label */
.pcard__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.pcard--map   .pcard__label { color: var(--sage-light); }
.pcard--desa  .pcard__label { color: var(--amber-light); }
.pcard--dir   .pcard__label { color: #D07A5A; }
.pcard--admin .pcard__label { color: #8A9BB0; }

/* Title */
.pcard__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: var(--leading-snug);
}

/* Description */
.pcard__desc {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: rgba(240,230,207,0.48);
  line-height: var(--leading-normal);
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out), opacity 400ms var(--ease-out);
  opacity: 0;
}
.pcard:hover .pcard__desc { max-height: 80px; opacity: 1; }
@media (max-width: 1023px) { .pcard__desc { max-height: unset; opacity: 1; } }

/* CTA arrow */
.pcard__arrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(240,230,207,0.35);
  margin-top: var(--sp-2);
  transition: color 300ms var(--ease-out), gap 300ms var(--ease-out);
}
.pcard:hover .pcard__arrow { color: rgba(240,230,207,0.80); gap: var(--sp-3); }

.pcard__arrow svg { width: 14px; height: 14px; transition: transform 300ms var(--ease-spring); }
.pcard:hover .pcard__arrow svg { transform: translateX(3px); }

/* Admin badge */
.pcard__badge {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.25rem 0.65rem;
  background-color: rgba(20,10,4,0.75);
  backdrop-filter: blur(8px);
  border-radius: var(--r-full);
  border: 1px solid rgba(240,230,207,0.12);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(240,230,207,0.40);
}
.pcard__badge svg { width: 11px; height: 11px; }

/* ── FOOTER PORTAL ────────────────────────────────────────── */
.portal-footer {
  position: relative;
  z-index: 5;
  padding: var(--sp-8) var(--px-mobile);
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  border-top: 1px solid rgba(240,230,207,0.06);
}
@media (min-width: 768px) { .portal-footer { flex-direction: row; justify-content: space-between; text-align: left; } }

.portal-footer__text {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: rgba(240,230,207,0.22);
  letter-spacing: var(--tracking-wide);
}

.portal-footer__ver {
  font-family: var(--font-ui);
  font-size: 10px;
  color: rgba(240,230,207,0.14);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card entrance stagger */
.pcard {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 700ms var(--ease-out) forwards;
}
.pcard:nth-child(1) { animation-delay: 700ms; }
.pcard:nth-child(2) { animation-delay: 820ms; }
.pcard:nth-child(3) { animation-delay: 940ms; }
.pcard:nth-child(4) { animation-delay: 1060ms; }