/* 11-imagery.css — Italian Imagery: Login Background, Onboarding Background, Phase Header Images */

/* ══════════════════════════════════════════════════════
   ITALIAN IMAGERY — Login, Onboarding, Phase Headers
══════════════════════════════════════════════════════ */

/* LOGIN SCREEN — full bleed hero */
#loginScreen {
  background-image: url('../images/login-bg.png');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
#loginScreen::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20, 12, 8, 0.62) 0%,
    rgba(20, 12, 8, 0.40) 50%,
    rgba(184, 92, 56, 0.15) 100%
  );
  z-index: 0;
}
#loginScreen > * { position: relative; z-index: 1; }

/* ONBOARDING — full bleed background */
.onboarding {
  background-image: url('../images/onboarding-bg.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.onboarding::before {
  content: '';
  position: fixed; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(80, 60, 40, 0.18) 0%,
    rgba(80, 60, 40, 0.10) 40%,
    rgba(80, 60, 40, 0.22) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.onboarding-card { position: relative; z-index: 1; }

/* PHASE HEADERS — image with overlay */
.phase-header {
  position: relative;
  overflow: hidden;
  background-color: var(--cobalt); /* fallback if image fails */
}
.phase-header-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 35%;
  z-index: 0;
}
.phase-header-overlay {
  display: none;
}
.phase-header > *:not(.phase-header-img):not(.phase-header-overlay) {
  position: relative;
  z-index: 2;
}

/* Mobile phase detail card — hidden on desktop */
.phase-mobile-details {
  display: none;
}

/* Per-phase image positions — fine-tune focal point */
.phase-img-0 { background-image: url('../images/phase-1.png'); background-position: center 40%; }
.phase-img-1 { background-image: url('../images/phase-2.png'); background-position: center 55%; }
.phase-img-2 { background-image: url('../images/phase-3.png'); background-position: center 40%; }
.phase-img-3 { background-image: url('../images/phase-4.png'); background-position: center 30%; }
.phase-img-4 { background-image: url('../images/phase-5.png'); background-position: center 45%; }
.phase-img-5 { background-image: url('../images/phase-6.png'); background-position: center 40%; }
.phase-img-6 { background-image: url('../images/phase-7.png'); background-position: center 50%; }