/* ===================================================
   DeamHR – Splash / Loader  ·  Responsive stylesheet
   =================================================== */

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

/* ── Base ── */
html, body {
  width: 100%;
  height: 100%;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: #ffffff;
  overflow: hidden;
}

/* ══════════════════════════════
   Loader overlay (CSS Grid)
══════════════════════════════ */
#loader {
  position: fixed;
  inset: 0;
  display: grid;
  /* Col 1: Logo, Col 2: Brand Text / Spinner / Percent */
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  column-gap: clamp(16px, 3.5vw, 32px);
  row-gap: 0;
  align-content: center;
  justify-content: center;
  background: #ffffff;
  z-index: 9999;
  padding: 24px;

  /* Fade-out transition */
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ══════════════════════════════
   Column 1: Logo / Favicon
══════════════════════════════ */
#loader-logo {
  grid-column: 1;
  grid-row: 1;                 /* Row 1 only - next to Title Text! */
  align-self: center;          /* Centered vertically with the Title Text */
  /* fluid size: min 80px · preferred 12vw · max 130px */
  width:  clamp(80px, 12vw, 130px);
  height: clamp(80px, 12vw, 130px);
  object-fit: contain;
  flex-shrink: 0;
}

/* ══════════════════════════════
   Column 2: Brand Text (Row 1)
══════════════════════════════ */
.brand-text {
  grid-column: 2;
  grid-row: 1;                 /* Row 1 only - next to Logo! */
  align-self: center;          /* Centered vertically with the Logo */
  /* fluid font: min 32px · preferred 6vw · max 64px */
  font-size:   clamp(32px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1565C0;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* ══════════════════════════════
   Column 2: Spinner (Row 2)
══════════════════════════════ */
.quarter-ring-wrapper {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;         /* Align exactly under "M" (center of "DEAM HR") */
  display: flex;
  align-items: center;
  justify-content: center;
  /* fluid size: min 44px · preferred 8vw · max 68px */
  width:  clamp(44px, 8vw, 68px);
  height: clamp(44px, 8vw, 68px);
  margin-top: clamp(16px, 3vw, 24px); /* Gap between Title and Spinner */
  margin-bottom: clamp(12px, 2vw, 18px);
}

.quarter-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: clamp(3px, 0.5vw, 5px) solid transparent;
  border-top-color:    #1565C0;  /* solid blue arc */
  border-right-color:  rgba(21, 101, 192, 0.18); /* subtle ghost arc */
  animation: quarter-ring-spin 0.85s linear infinite;
}

@keyframes quarter-ring-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ══════════════════════════════
   Column 2: Percentage (Row 3)
══════════════════════════════ */
#loader-percent {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;         /* Center horizontally under spinner */
  /* fluid font: min 13px · preferred 2vw · max 18px */
  font-size:   clamp(13px, 2vw, 18px);
  font-weight: 600;
  color: #1565C0;
  letter-spacing: 0.08em;
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* ══════════════════════════════
   Responsive breakpoints
══════════════════════════════ */

/* Small mobile devices (< 380px) */
@media (max-width: 380px) {
  #loader { column-gap: 12px; }
  .brand-text { font-size: 28px; }
  #loader-logo { width: 68px; height: 68px; }
  .quarter-ring-wrapper { width: 40px; height: 40px; margin-top: 12px; margin-bottom: 8px; }
}

/* Tablets & medium screens */
@media (min-width: 600px) and (max-width: 1024px) {
  #loader { column-gap: 24px; }
  #loader-logo { width: 110px; height: 110px; }
  .brand-text { font-size: 52px; }
  .quarter-ring-wrapper { width: 58px; height: 58px; margin-top: 20px; margin-bottom: 14px; }
  #loader-percent { font-size: 16px; }
}

/* Large screens (> 1400px) */
@media (min-width: 1400px) {
  #loader { column-gap: 32px; }
  #loader-logo { width: 130px; height: 130px; }
  .brand-text { font-size: 64px; }
  .quarter-ring-wrapper { width: 68px; height: 68px; margin-top: 24px; margin-bottom: 18px; }
  #loader-percent { font-size: 18px; }
}