/* ============================================================
   Money360 — style.css
   Single-screen, no-scroll landing page
   Optimised for 1366×768 and 1920×1080 laptop / desktop
   ============================================================ */

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --white:        #ffffff;
  --off-white:    #f7f9fc;
  --blue-deep:    #0a1628;
  --blue-mid:     #1a3a6e;
  --blue-brand:   #1d5fc8;
  --blue-light:   #4f8ef7;
  --green-brand:  #16a96d;
  --green-light:  #2dd4a0;
  --accent-glow:  rgba(29, 95, 200, 0.18);
  --green-glow:   rgba(22, 169, 109, 0.15);

  /* Glassmorphism card */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 24px 80px rgba(10, 22, 40, 0.14),
                  0 4px 20px rgba(29, 95, 200, 0.10);

  /* Typography */
  --font: 'Inter', system-ui, sans-serif;
}

/* ─── Reset / Base ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;           /* single screen — no scroll */
  background: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ─── Ambient Background Gradients ──────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% -10%,  rgba(29, 95, 200, 0.07)  0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 90% 110%,  rgba(22, 169, 109, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50%  50%,  rgba(79, 142, 247, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Page Shell ─────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: clamp(12px, 2vh, 24px) clamp(16px, 3vw, 48px);
  gap: clamp(6px, 1.2vh, 14px);
}

/* ─── Header ─────────────────────────────────────────────────── */
.header {
  text-align: center;
  flex-shrink: 0;             /* never compress the header */
}

/* Brand name — gradient text */
.brand-name {
  font-size: clamp(22px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(
    120deg,
    var(--blue-brand) 0%,
    var(--blue-light) 50%,
    var(--green-brand) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.brand-subtitle {
  margin-top: clamp(3px, 0.5vh, 6px);
  font-size: clamp(10px, 1.05vw, 15px);
  font-weight: 500;
  color: var(--blue-mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Short description */
.brand-desc {
  margin-top: clamp(2px, 0.4vh, 5px);
  font-size: clamp(9px, 0.85vw, 13px);
  font-weight: 400;
  color: #6b7a99;
  letter-spacing: 0.01em;
}

/* ─── Video Wrapper ──────────────────────────────────────────── */
/*
 * flex: 1 1 auto  → claims all remaining vertical space
 * min-height: 0   → critical: allows flex child to shrink below content size
 */
.video-wrapper {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Glassmorphism Card ──────────────────────────────────────── */
.video-card {
  position: relative;
  width: 100%;
  height: 100%;              /* JS sets explicit px height on resize */
  max-width: 1400px;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(8px, 1.2vh, 16px);

  /* Entrance animation */
  animation: cardReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Blue→green corner tint overlay */
.video-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(29, 95, 200, 0.08) 0%, transparent 45%),
    linear-gradient(315deg, rgba(22, 169, 109, 0.06) 0%, transparent 45%);
  pointer-events: none;
}

/* ─── Demo Badge ─────────────────────────────────────────────── */
.live-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--green-brand);
  text-transform: uppercase;
  z-index: 10;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-brand);
  box-shadow: 0 0 0 0 rgba(22, 169, 109, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

/* ─── Video Element ──────────────────────────────────────────── */
/*
 * object-fit: contain  → never crops or stretches; preserves 16:9 ratio
 * width/height 100%    → fills the card; contain keeps letter-/pillarbox
 */
.demo-video {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;

  /* Staggered reveal after card animates in */
  opacity: 0;
  animation: videoReveal 0.5s ease 0.45s both;
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c8d4e8;
}

.footer-text {
  font-size: clamp(8px, 0.7vw, 11px);
  color: #9daec8;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ─── Keyframes ───────────────────────────────────────────────── */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

@keyframes videoReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%,  100% { box-shadow: 0 0 0 0   rgba(22, 169, 109, 0.5); }
  50%        { box-shadow: 0 0 0 5px rgba(22, 169, 109, 0);   }
}

/* ─── Responsive Breakpoints ─────────────────────────────────── */

/* Tablet landscape */
@media (max-width: 1200px) {
  .video-card { padding: clamp(6px, 1vh, 12px); }
}

/* Tablet portrait */
@media (max-width: 900px) {
  .page       { padding: 10px 14px; gap: 8px; }
  .video-card { border-radius: 16px; padding: 8px; }
}

/* Accessibility: skip animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .video-card,
  .demo-video { animation: none; opacity: 1; }
  .live-dot   { animation: none; }
}