/*
 * app.css — Amlak Real Estate shared brand theme.
 * Gold-on-navy identity, subtle motion, and glossy "3D" icon badges.
 * Loaded by every page (login, index, admin, view) for a consistent,
 * professional feel without any build step.
 */

:root {
  --navy: #0B2447;
  --navy-deep: #081A33;
  --steel: #4A6FA5;
  --canvas: #FFFFFF;
  --panel: #F5F7FA;
  --line: #E2E8F0;

  /* True gold identity (replaces the old brass/bronze tones) */
  --gold: #D4AF37;
  --gold-deep: #A9821F;
  --gold-light: #F3DB8E;
}

::selection { background: var(--gold); color: #fff; }

/* ---------------------------------------------------------------- */
/* Entrance animations                                               */
/* ---------------------------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.reveal { opacity: 0; animation: fadeInUp .7s cubic-bezier(.22,.9,.32,1) forwards; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .15s; }
.reveal-3 { animation-delay: .25s; }
.reveal-4 { animation-delay: .35s; }
.reveal-5 { animation-delay: .45s; }

/* Scroll-triggered reveal (class toggled by app.js via IntersectionObserver) */
.reveal-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,.9,.32,1), transform .6s cubic-bezier(.22,.9,.32,1);
}
.reveal-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------- */
/* Card / row hover                                                  */
/* ---------------------------------------------------------------- */
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -10px rgba(11,36,71,0.18);
  border-color: rgba(212,175,55,0.5);
}

/* ---------------------------------------------------------------- */
/* Buttons                                                           */
/* ---------------------------------------------------------------- */
.btn-lift { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(11,36,71,0.35); }
.btn-lift:active { transform: translateY(0); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.btn-gold:hover { filter: brightness(1.05); }

/* ---------------------------------------------------------------- */
/* 3D glossy icon badges — used for KPI cards, section headers, seal */
/* ---------------------------------------------------------------- */
.icon-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: radial-gradient(circle at 32% 26%, var(--gold-light), var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:
    0 8px 18px -4px rgba(169,130,31,0.45),
    inset 0 1px 1px rgba(255,255,255,0.65),
    inset 0 -3px 5px rgba(0,0,0,0.18);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease;
  animation: floatSlow 5s ease-in-out infinite;
}
.icon-badge:hover {
  transform: perspective(500px) rotateX(10deg) rotateY(-10deg) translateY(-3px) scale(1.04);
  box-shadow:
    0 16px 28px -6px rgba(169,130,31,0.5),
    inset 0 1px 1px rgba(255,255,255,0.75),
    inset 0 -3px 5px rgba(0,0,0,0.2);
}
.icon-badge svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); position: relative; z-index: 1; }

/* Navy variant — used where gold would clash (e.g. on gold backgrounds) */
.icon-badge-navy {
  background: radial-gradient(circle at 32% 26%, #2C4D7E, var(--navy) 55%, var(--navy-deep) 100%);
  box-shadow:
    0 8px 18px -4px rgba(8,26,51,0.45),
    inset 0 1px 1px rgba(255,255,255,0.25),
    inset 0 -3px 5px rgba(0,0,0,0.25);
}

/* ---------------------------------------------------------------- */
/* Brand logo lockup                                                 */
/* ---------------------------------------------------------------- */
.brand-logo { transition: transform .3s cubic-bezier(.22,.9,.32,1); }
.brand-logo:hover { transform: scale(1.03); }

/* ---------------------------------------------------------------- */
/* Count-up numeral (used with app.js animateCount)                  */
/* ---------------------------------------------------------------- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- */
/* Field focus ring, unified                                         */
/* ---------------------------------------------------------------- */
.field-input {
  background: #FFFFFF;
  border: 1px solid var(--line);
  color: var(--navy);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}

.section-tick { position: relative; }
.section-tick::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
}

/* ---------------------------------------------------------------- */
/* Page background artwork (fixed behind all content, viewport-sized */
/* rather than attached to body, so it never distorts on very tall   */
/* pages and behaves correctly on mobile browsers).                  */
/* ---------------------------------------------------------------- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
}
.page-bg-login { background-image: url('login-bg.png'); }
.page-bg-system { background-image: url('system-bg.png'); }